README

Magento 2 Product Slider Extension: Admin-Managed Sliders, Responsive Columns, Badges (Hyva + Luma)

Build and manage product sliders from the Magento admin without writing code. Panth Product Slider gives you a full CRUD grid to create unlimited sliders, pick products by category, SKU, price range, sale status, or new-arrivals threshold, set responsive column counts per breakpoint, choose a style preset, add product badges, and drop the slider on any page using the widget UI, layout XML, or a CMS directive. Native templates for Hyva (Alpine.js) and Luma (Swiper.js) are both included.

Product page: kishansavaliya.com/magento-2-product-slider.html

Quick Answer

What is Panth Product Slider? It is a Magento 2 product slider extension with a full admin CRUD interface, so merchants can create and manage product carousels without touching code. Sliders render on any page through the standard Magento widget system.

What does it add to my store?

• An admin slider grid under Panth Infotech > Product Slider > Manage Sliders to create, edit, enable, disable, and delete sliders.
• Flexible product selection by category IDs, product IDs, SKUs, price range, sale-only, new arrivals, and stock status.
• Responsive column counts with separate mobile, tablet, and desktop values stored per slider.
• Style presets and product badges (sale percentage, New, Low Stock, Featured) with configurable badge corner position.
• Autoplay and arrow navigation, both configurable per slider.
• Three embed methods: CMS widget directive, layout XML block, and direct PHTML call.

Which themes are supported? Both Hyva (Alpine.js snap-slider, no jQuery) and Luma (Swiper.js via RequireJS). The module auto-detects the active theme through Panth\Core\Helper\Theme.

What does it need? Magento 2.4.4 to 2.4.8, PHP 8.1 to 8.4, and the free mage2kishan/module-core package.

Need Custom Magento 2 Development?

Get a free quote for your project in 24 hours for custom modules, Hyva themes, performance work, M1 to M2 migrations, and Adobe Commerce Cloud.

Kishan Savaliya Top Rated Plus on Upwork 100% Job Success * 10+ Years Magento Experience Adobe Certified * Hyva Specialist

Panth Infotech Agency Magento Development Team Custom Modules * Theme Design * Migrations Performance * SEO * Adobe Commerce Cloud

Visit our website: kishansavaliya.com  |  Get a quote: kishansavaliya.com/get-quote

Table of Contents

• Who Is It For
• Key Features
• Compatibility
• Installation
• Configuration
• How It Works
• Widget Usage
• FAQ
• Support
• About Panth Infotech
• Quick Links

Who Is It For

• Stores with large catalogs that need a fast way to showcase featured products, new arrivals, bestsellers, or on-sale items on the homepage or category pages.
• Merchants who want admin control over what appears in each slider, without asking a developer to edit layout XML for every change.
• Hyva storefronts that need a slider built on Alpine.js with no jQuery pulled back in.
• Luma storefronts that want a Swiper.js-powered carousel that loads only on pages where the slider renders.
• Marketing teams running promotions who need scheduled or temporary product showcases on landing pages and CMS blocks.

Key Features

Admin Slider Management

• Full CRUD grid under Panth Infotech > Product Slider > Manage Sliders for creating, editing, enabling, disabling, and deleting sliders.
• Per-slider settings for title, identifier, store view scope, heading tag, show/hide heading, and description HTML below the heading.
• Stored in the panth_product_slider table with a unique identifier index and an active-status index for fast lookups.

Product Selection and Filtering

• Category-based filtering by one or multiple category IDs.
• Manual product selection by product IDs or SKUs.
• Sale-only filter that restricts the slider to products with an active special price.
• New arrivals filter based on a configurable number of days since product creation.
• Price range filter with from/to decimal values.
• Exclude out-of-stock toggle to hide unavailable products.
• Sort options: by position, price asc/desc, name, or custom ordering with direction control.
• Product limit set per slider (default 8).

Responsive Layout

• Separate column counts for mobile, tablet, and desktop stored per slider.
• Global defaults in system configuration (Default Columns Mobile/Tablet/Desktop and Default Products Per Slider).
• Tailwind snap-slider breakpoints on Hyva and Swiper.js breakpoints on Luma.

Style Presets and Badges

• Style presets: Default, Modern, Minimal, Bold, Custom, with per-slider card shadow and hover effect overrides.
• Custom CSS class field for additional per-slider styling.
• Product badges: sale percentage, New, Low Stock, and Featured, with configurable corner position (top-left, top-right, bottom-left, bottom-right).
• Auto-apply Sale badge when a special price is active on a product.
• Arrow and card colors are managed through the theme configuration file (theme-config.json, product-slider section).

Slider Behavior

• Autoplay with configurable interval (default 3000 ms) and pause-on-hover.
• Arrow navigation with configurable colors, size, and position.
• Pagination pager togglable per slider.
• Loop mode for continuous browsing.
• Touch and swipe support on mobile natively through the respective libraries.

Display Options

• Show or hide Add to Cart button per slider.
• Show or hide product details (name, price) per slider.
• Show or hide product rating per slider.
• Show or hide heading above the slider.

Three Embed Methods

• CMS widget directive: insert via Content > Widgets or paste a {{widget ...}} shortcode directly in a CMS block.
• Layout XML block: reference Panth\ProductSlider\Block\Widget\ProductSlider in any layout handle.
• Direct PHTML call: use the SliderById block class to pull a slider by ID or identifier into any template.

Hyva and Luma Ready

• Native Hyva template using Alpine.js snap-slider with ProductListItem view model, zero jQuery.
• Native Luma template using Swiper.js, loaded via RequireJS only on pages where the slider renders.
• Automatic theme detection via Panth\Core\Helper\Theme.
• Shared admin: one admin UI drives both storefronts.

Compatibility

Requirement	Versions Supported
Magento Open Source	2.4.4, 2.4.5, 2.4.6, 2.4.7, 2.4.8
Adobe Commerce	2.4.4, 2.4.5, 2.4.6, 2.4.7, 2.4.8
Adobe Commerce Cloud	2.4.4 to 2.4.8
PHP	8.1.x, 8.2.x, 8.3.x, 8.4.x
Hyva Theme	1.3+ (native Alpine.js support)
Luma Theme	Native support
Required Dependency	mage2kishan/module-core (free)

Installation

Composer Installation (Recommended)

composer require mage2kishan/module-product-slider
bin/magento module:enable Panth_Core Panth_ProductSlider
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f
bin/magento cache:flush

Manual Installation via ZIP

1. Download the latest release from Packagist or from the product page.
2. Extract it to app/code/Panth/ProductSlider/ in your Magento install.
3. Make sure Panth_Core is installed too (required dependency).
4. Run the commands above starting from bin/magento module:enable.

Verify Installation

bin/magento module:status Panth_ProductSlider
# Expected: Module is enabled

After install, open:

Admin -> Panth Infotech -> Product Slider -> Manage Sliders

Configuration

Go to Stores -> Configuration -> Panth Extensions -> Product Slider.

Setting	Group	Default	Description
Enable Module	General Settings	Yes	Master toggle. When disabled, no sliders render on the frontend.
Default Columns (Mobile)	Default Layout	1	Default mobile column count for new sliders.
Default Columns (Tablet)	Default Layout	2	Default tablet column count for new sliders.
Default Columns (Desktop)	Default Layout	4	Default desktop column count for new sliders.
Default Products Per Slider	Default Layout	8	Default number of products loaded per slider.

Design and colors (arrow color, card styling) are managed through the theme config file. Product badges are managed through the Smart Product Badges module when installed.

Each slider can override the global column and product-count defaults in its own edit form.

How It Works

1. Create a slider in Admin -> Panth Infotech -> Product Slider -> Manage Sliders. Set the title, store views, product selection criteria, column counts, style preset, and autoplay options.
2. The slider entity is saved to the panth_product_slider database table with a unique identifier.
3. Embed the slider on a page using the Magento widget UI, a layout XML block reference, or a CMS widget directive.
4. On page load, the ProductSlider block class reads the slider entity, builds a product collection filtered by your criteria, and passes it to the appropriate template.
5. On Hyva, the template renders a native Alpine.js snap-slider with Tailwind CSS classes. On Luma, it renders a Swiper.js carousel loaded via RequireJS.
6. The product collection is cached on the block instance, so calling getProductCollection() more than once per request costs a single database query.

Widget Usage

Via Magento Widget UI

1. Go to Content -> Widgets -> Add Widget.
2. Select Panth Product Slider as the widget type.
3. Pick the design theme and layout updates (CMS page, category, product page, etc.).
4. Choose the saved slider by identifier or ID.
5. Save and flush cache.

Via Layout XML

<referenceContainer name="content">
    <block class="Panth\ProductSlider\Block\Widget\ProductSlider"
           name="home.featured.slider"
           template="Panth_ProductSlider::widget/slider.phtml">
        <arguments>
            <argument name="slider_id" xsi:type="number">1</argument>
        </arguments>
    </block>
</referenceContainer>

Via CMS Page or Block

{{widget type="Panth\ProductSlider\Block\Widget\ProductSlider" slider_id="1"}}

After saving a slider in the admin, the edit form shows the exact embed code for all three methods.

FAQ

Does Panth Product Slider work on Hyva themes?

Yes. The module ships a native Alpine.js snap-slider template for Hyva with no jQuery, Knockout, or RequireJS. Theme detection is automatic through Panth_Core.

Can I create sliders from the admin without editing XML?

Yes. The admin CRUD grid at Panth Infotech > Product Slider > Manage Sliders handles all slider creation, editing, and deletion. No code changes are needed.

How do I show a slider on the homepage?

Add it via Content -> Widgets with the layout handle cms_index_index, or paste the widget directive directly into the homepage CMS block.

Can I filter products by category?

Yes. In the slider edit form, add one or multiple category IDs. You can also hand-pick products by ID or SKU, or combine criteria like sale-only and new arrivals.

Will it slow down my category or CMS pages?

No. On Hyva the slider uses Alpine.js with no added dependencies. On Luma, Swiper.js loads only on pages where the slider renders. Images use native lazy loading. The product collection query runs once per block instance and is not repeated on the same request.

Can I have different column counts on mobile and desktop?

Yes. Each slider stores separate mobile, tablet, and desktop column counts. Global defaults are set in system configuration and can be overridden per slider.

Does it support autoplay?

Yes. Autoplay is togglable per slider, with a configurable interval (default 3000 ms) and pause-on-hover behavior.

Does it work with multi-store setups?

Yes. Each slider stores a store_ids value, so you can restrict a slider to specific store views. The system configuration respects Magento's default, website, and store-view scope order.

Does Panth Product Slider need Panth Core?

Yes. mage2kishan/module-core is a free, required dependency. Composer installs it automatically.

Support

Channel	Contact
Product Page	kishansavaliya.com/magento-2-product-slider.html
Email	kishansavaliyakb@gmail.com
Website	kishansavaliya.com
WhatsApp	+91 84012 70422
GitHub Issues	github.com/mage2sk/module-product-slider/issues
Upwork (Top Rated Plus)	Hire Kishan Savaliya
Upwork Agency	Panth Infotech

Response time: 1-2 business days.

Need Custom Magento Development?

Looking for custom Magento module development, Hyva theme work, store migrations, or performance tuning? Get a free quote in 24 hours:

     

About Panth Infotech

Built and maintained by Kishan Savaliya (kishansavaliya.com), a Top Rated Plus Magento developer on Upwork with 10+ years of eCommerce experience.

Panth Infotech is a Magento 2 development agency that builds high quality, security focused extensions and themes for both Hyva and Luma storefronts. The extension suite covers SEO, performance, checkout, product presentation, customer engagement, and store management, with each module built to MEQP standards and tested across Magento 2.4.4 to 2.4.8.

Browse the full extension catalog on our Magento extensions page or on Packagist.

Quick Links

Resource	Link
Product Page	magento-2-product-slider.html
Packagist	mage2kishan/module-product-slider
GitHub	mage2sk/module-product-slider
Website	kishansavaliya.com
Free Quote	kishansavaliya.com/get-quote
Upwork (Top Rated Plus)	Hire Kishan Savaliya
Upwork Agency	Panth Infotech
Email	kishansavaliyakb@gmail.com
WhatsApp	+91 84012 70422

Ready to add product sliders to your Magento 2 store?

SEO Keywords: magento 2 product slider, magento 2 product carousel, magento 2 slider widget, magento 2 product slider extension, magento 2 product slider module, hyva product slider, hyva alpine js slider, luma product slider, magento 2 featured products slider, magento 2 new arrivals slider, magento 2 bestsellers slider, magento 2 homepage slider, magento 2 category products slider, magento 2 admin managed slider, magento 2 swiper slider, magento 2 snap slider, magento 2 autoplay slider, magento 2 responsive product carousel, magento 2 product badge slider, magento 2 sale products slider, magento 2 widget slider, magento 2 cms slider, magento 2.4.8 slider, php 8.4 magento slider, mage2kishan product slider, panth product slider, panth infotech, kishan savaliya magento, top rated plus upwork, hire magento developer, custom magento development, magento 2 hyva development