Add a hero carousel to your Magento 2 home page in minutes. Panth Hero Slider shows three slides at once with the active slide enlarged and neighbours peeking from each side. Each slide has its own CTA button, desktop and mobile artwork, click and view analytics, and a sort order you set in the admin. It renders identically on Hyva and Luma with no theme code changes.
Product page: kishansavaliya.com/magento-2-hero-slider.html
What is Panth Hero Slider? It is a Magento 2 hero slider extension that puts a center-focused carousel on your home page, with three slides visible at once, autoplay, per-slide CTA buttons, and built-in analytics that track views and clicks per slide.
What does it add to my store?
- A center-focused 3-up carousel where the active slide is enlarged and neighbour slides peek from each side.
- Per-slide CTA buttons with configurable label, background color, and text color.
- Separate desktop and mobile images per slide using a responsive
<picture>element. - Built-in analytics that track slide views and clicks per device type, with 30-day totals and a 7-day trend shown in the admin.
- CMS widget support so you can drop any slider onto any page without layout XML.
Which themes are supported? Both Hyva and Luma. The slider uses plain CSS and Splide.js with no Tailwind, Alpine, Knockout, or jQuery dependency.
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.
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.
|
Top Rated Plus on Upwork 100% Job Success - 10+ Years Magento Experience Adobe Certified - Hyva Specialist |
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
- Who Is It For
- Key Features
- Compatibility
- Installation
- Configuration
- Managing Sliders and Slides
- Placing a Slider
- Analytics
- FAQ
- Support
- About Panth Infotech
- Quick Links
- Merchants who want a standout home page without hiring a developer for every banner change. Create and manage slides from the Magento admin.
- Hyva storefronts that need a carousel built without jQuery, Knockout, or RequireJS added back.
- Fashion, lifestyle, and home stores where a large hero image with a clear CTA drives category traffic.
- Stores running A/B-style experiments who want real click and view data per slide to see what works.
- Multi-store setups where each store view needs its own slider content.
- 3 slides visible at once on desktop, with the active slide enlarged and neighbours peeking from each side.
- Autoplay with a configurable interval (default 22 seconds, long enough to read each slide).
- Responsive breakpoint switch - below the configured width (default 1025px) the carousel shows one slide with pagination dots and no arrows.
- Navigation arrows on desktop, hidden automatically on mobile.
- Desktop and mobile images per slide using a
<picture>element with amax-widthmedia query, so mobile devices get a properly sized image. - CTA button with configurable label, background hex color, and text hex color, overlaid on the artwork.
- Link URL per slide - absolute or relative.
- Sort order and active/inactive toggle to control what appears on the storefront.
- Sliders - named groups with a unique identifier and per-store-view assignment.
- Slides - belong to a slider; managed in a dedicated admin grid with mass enable, disable, and delete actions.
- Image upload with an extension deny-list check to block executable file types before saving.
- CMS widget so editors can drop any slider on any CMS page or block without touching layout XML.
- Views and clicks tracked per slide per device class (desktop, tablet, mobile), stored anonymously with no PII.
- 30-day totals and a 7-day comparison shown on the slide edit page.
- Per-device breakdown and a 30-day daily timeline on each slide.
- CTR columns on the Manage Slides grid for a quick overview.
- Daily cron prunes rows older than the configured retention window (default 365 days).
- Auto-injects on the CMS home page out of the box; toggle off to place manually.
- CMS widget for any page or block.
- Layout XML using
Panth\HeroSlider\Block\Sliderwith aslider_identifierargument. - Renders nothing when no active slides exist, safe to leave blocks in place permanently.
- Splide.js loaded lazily after
DOMContentLoaded, deduped across multiple sliders on the same page. - FPC safe - the tracking endpoint uses
navigator.sendBeaconand has noform_keydependency. - Constructor DI only, no ObjectManager.
- Translation ready, every label uses Magento's
__()function.
| 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+ |
| Luma Theme | Native support |
| Required Dependency | mage2kishan/module-core (free) |
composer require mage2kishan/module-hero-slider
bin/magento module:enable Panth_Core Panth_HeroSlider
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f
bin/magento cache:flush- Download the latest release from Packagist or from the product page.
- Extract it to
app/code/Panth/HeroSlider/in your Magento install. - Make sure
Panth_Coreis installed too (required dependency). - Run the commands above starting from
bin/magento module:enable.
bin/magento module:status Panth_HeroSlider
# Expected: Module is enabledAfter install, open:
Admin → Content → Panth Infotech → Hero Slider → Manage Sliders
Go to Stores → Configuration → Panth Infotech → Hero Slider.
| Setting | Group | Default | Description |
|---|---|---|---|
| Enable Hero Slider | General | Yes | Master toggle for the slider. |
| Autoplay | General | Yes | Disable to require user interaction to advance slides. |
| Autoplay Interval (ms) | General | 22000 | Time each slide is shown before advancing. Only shown when Autoplay is Yes. |
| Slides Per Page (Desktop) | General | 3 | Number of slides visible at once on desktop. |
| Show Arrows (Desktop) | General | Yes | Show previous/next arrows on desktop. Hidden on mobile automatically. |
| Mobile Breakpoint (px) | General | 1025 | Below this width: 1 slide with pagination dots, no arrows. |
| Auto-inject on CMS Home Page | General | Yes | Renders the slider inside the home page content container. Disable to place manually. |
| Setting | Group | Default | Description |
|---|---|---|---|
| Track Views and Clicks | Analytics | Yes | Records anonymous view and click counts per slide. No PII stored. |
| Retention (days) | Analytics | 365 | Stat rows older than this are pruned by the daily cron. Only shown when tracking is Yes. |
Content → Panth Infotech → Hero Slider → Manage Sliders
A slider is a named group that holds one or more slides. Each slider has:
- Name - admin label only, not shown on the storefront.
- Identifier - unique key used by widgets and layout XML (lowercase letters, digits, hyphens, underscores).
- Store Views - assign to specific store views or "All Store Views".
- Active - disable to instantly hide the slider on every storefront.
Content → Panth Infotech → Hero Slider → Manage Slides
Each slide accepts:
- Title - admin label, never shown on the storefront.
- Link URL - destination when the slide is clicked. Absolute (
https://...) or relative (/path). - Active and Sort Order.
- Button Label - defaults to
SHOP NOWif blank. - Button Background Color and Button Text Color - hex codes, defaults
#09090C/#FFFFFF. - Desktop Image (required) - JPG, PNG, GIF, WebP, or SVG. Recommended around 1280 x 720 px.
- Mobile Image (optional) - used below the mobile breakpoint, falls back to the desktop image.
- Image Alt Text - used for both desktop and mobile images.
With the Auto-inject on CMS Home Page setting enabled, the slider with identifier homepage_hero renders automatically inside the home page content container. No extra steps needed.
- Open any CMS page or block.
- Insert widget and choose Panth Hero Slider.
- Type the slider's identifier (for example
homepage_hero). - Save the page.
<referenceContainer name="content">
<block class="Panth\HeroSlider\Block\Slider"
name="hero.category.promo"
template="Panth_HeroSlider::slider.phtml"
before="-">
<arguments>
<argument name="slider_identifier" xsi:type="string">category_promo</argument>
</arguments>
</block>
</referenceContainer>The block renders nothing when the slider is disabled, missing, or has no active slides for the current store. Safe to leave in place permanently.
Every slide tracks views and clicks anonymously per device class (desktop, tablet, mobile). The data shows up in two places:
- Manage Slides grid - Views (30d), Clicks (30d), and CTR (30d) columns.
- Slide edit page - a Performance card with 30-day totals, a 7-day comparison, a per-device breakdown, and a 30-day daily timeline.
The tracking endpoint (POST /panth_heroslider/track/event) is FPC safe with no form_key dependency. It uses navigator.sendBeacon so navigation is never blocked. Events are written via atomic INSERT ... ON DUPLICATE KEY UPDATE to the panth_hero_slider_stat table. No IP address, user agent, or session ID is stored.
A daily cron (runs at 03:23 UTC) prunes rows older than the configured retention window.
Yes. The slider uses plain CSS and Splide.js loaded from a CDN, with no Tailwind, Alpine.js, Knockout, or RequireJS dependency. It renders identically on Hyva and Luma.
Create a new slider in the admin with a different identifier (for example category_promo), add slides, and place it on the category page using either the CMS widget or layout XML.
Yes. Each slider is assigned to one or more store views (or All Store Views). Create separate sliders and assign them to the store views you need.
No. Splide.js is loaded lazily after DOMContentLoaded from a CDN, deduped so it only loads once even if multiple sliders are on the same page. The tracking endpoint uses sendBeacon and does not block page navigation.
Desktop images work well at around 1280 x 720 px. For mobile, a portrait or square crop around 600 x 800 px gives a better result than scaling down a wide desktop image.
No. The tracker records slide ID, date, store ID, event type (view or click), device type, and a count. No IP address, user agent, session ID, or customer ID is stored.
Yes. Set Track Views and Clicks to No in the Analytics group and the tracking endpoint will not write any rows.
Yes. The slider renders on the initial page load and is part of the cached HTML. The analytics tracking endpoint is a separate AJAX call that does not affect FPC.
Yes. mage2kishan/module-core is a free, required dependency that Composer installs automatically.
| Channel | Contact |
|---|---|
| Product Page | kishansavaliya.com/magento-2-hero-slider.html |
| kishansavaliyakb@gmail.com | |
| Website | kishansavaliya.com |
| +91 84012 70422 | |
| GitHub Issues | github.com/mage2sk 8 /module- 8F0D hero-slider/issues |
| Upwork (Top Rated Plus) | Hire Kishan Savaliya |
| Upwork Agency | Panth Infotech |
Response time: 1-2 business days.
Looking for custom Magento module development, Hyva theme work, store migrations, or performance tuning? Get a free quote in 24 hours:
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.
| Resource | Link |
|---|---|
| Product Page | magento-2-hero-slider.html |
| Packagist | mage2kishan/module-hero-slider |
| GitHub | mage2sk/module-hero-slider |
| Website | kishansavaliya.com |
| Free Quote | kishansavaliya.com/get-quote |
| Upwork (Top Rated Plus) | Hire Kishan Savaliya |
| Upwork Agency | Panth Infotech |
| kishansavaliyakb@gmail.com | |
| +91 84012 70422 |
Ready to give your home page a hero that converts?
SEO Keywords: magento 2 hero slider, magento 2 hero slider extension, magento 2 homepage carousel, magento 2 banner slider, splide slider magento 2, hyva hero slider, hyva homepage slider, luma hero slider, magento 2 center focus carousel, magento 2 homepage slider module, magento 2 full width slider, magento 2 slider with analytics, magento 2 slide click tracking, magento 2 hero banner, magento 2 cms carousel, magento 2.4.8 hero slider, php 8.4 hero slider, mage2kishan hero slider, panth hero slider, panth infotech, hire magento developer, top rated plus upwork, kishan savaliya magento, custom magento development, magento 2 responsive slider, magento 2 hyva carousel