How to Create a Custom Product Slider in Hyvä Theme?

If you’re working on a Hyvä theme development project, you may need to add various elements for better product display. One of them is a product slider.

A product slider is a visual section containing a group of products in a carousel format. Generally, the products move horizontally in one direction, which allows customers to see different products without scrolling manually.

In this blog post, I will share the complete technical method to build a product slider Hyvä theme for Magento 2.

Method to Create a Custom Product Slider in Hyvä Magento 2 Theme

To create a Hyvä custom product slider, we need to create a new module that adds product slider block.

We’ll create Meetansh-HyvaProductSlider module with the following folder structure:

app/code/Meetanshi/ProductSlider/
├── etc/
│   ├── module.xml
├── registration.php
├── ViewModel/
│   ├── ProductSlider.php
├── view/
│   ├── frontend/
│   │   ├── layout/
│   │   │   ├── default.xml
│   │   ├── templates/
│   │   │   ├── slider.phtml
├── Block/
│   ├── ProductSlider.php

Now, let’s go through the steps to create the product slider module for the Hyvä Magento 2 theme.

Step 1: Create & Register a Custom Module

First, define the module by creating the module.xml file.

app/code/Meetanshi/ProductSlider/etc/module.xml:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Meetanshi_ProductSlider" setup_version="1.0.0"/>
</config>

Register the module through registration.php.

app/code/Meetanshi/ProductSlider/registration.php:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Meetanshi_ProductSlider',
    __DIR__
);

Step 2: Create a ViewModel

Now, create a ViewModel for the Hyvä product slider.

app/code/Meetanshi/ProductSlider/ViewModel/ProductSlider.php:

<?php
namespace Meetanshi\ProductSlider\ViewModel;
use Magento\Catalog\Model\ResourceModel\Product\CollectionFactory;
use Magento\Framework\View\Element\Block\ArgumentInterface;
/**
 * Meetanshi - ViewModel for fetching products
 */
class ProductSlider implements ArgumentInterface
{
    protected $productCollectionFactory;
    public function __construct(CollectionFactory $productCollectionFactory)
    {
        $this->productCollectionFactory = $productCollectionFactory;
    }
    public function getProducts()
    {
        return $this->productCollectionFactory->create()
            ->addAttributeToSelect(['name', 'price', 'small_image'])
            ->setPageSize(10);
    }
}

Step 3: Create a PHTML Template with Swiper.js

To render the product slider on Hyvä theme pages, create a PHTML file. You can modify this file as per your design requirements, for e.g., you can define the number of slides per view.

app/code/Meetanshi/ProductSlider/view/frontend/templates/slider.phtml:

<?php
/** @var \Meetanshi\ProductSlider\ViewModel\ProductSlider $viewModel */
$viewModel = $block->getViewModel();
$products = $viewModel->getProducts();
?>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <?php foreach ($products as $product): ?>
            <div class="swiper-slide">
                <a href="<?= $block->escapeUrl($product->getProductUrl()) ?>">
                    <img src="<?= $block->getImage($product, 'category_page_grid')->getUrl(); ?>" alt="<?= $block->escapeHtml($product->getName()) ?>" />
                    <p><?= $block->escapeHtml($product->getName()) ?></p>
                    <span><?= $block->escapeHtml($product->getFinalPrice()) ?> <?= __('USD') ?></span>
                </a>
            </div>
        <?php endforeach; ?>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        new Swiper('.swiper-container', {
            loop: true,
            navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
            pagination: { el: '.swiper-pagination', clickable: true },
            slidesPerView: 4,
            spaceBetween: 10,
            breakpoints: {
                1024: { slidesPerView: 4 },
                768: { slidesPerView: 2 },
                480: { slidesPerView: 1 }
            }
        });
    });
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>

Step 4: Define the Block

Create a block to display the PHTML file’s product slider on the HTML pages.

app/code/Meetanshi/ProductSlider/Block/ProductSlider.php:

<?php
namespace Meetanshi\ProductSlider\Block;
use Magento\Framework\View\Element\Template;
use Meetanshi\ProductSlider\ViewModel\ProductSlider;
/**
 * Meetanshi - Block for passing ViewModel
 */
class ProductSlider extends Template
{
    protected $_viewModel;
    public function __construct(
        Template\Context $context,
        ProductSlider $viewModel,
        array $data = []
    ) {
        parent::__construct($context, $data);
        $this->_viewModel = $viewModel;
    }
    public function getViewModel()
    {
        return $this->_viewModel;
    }
}

Step 5: Add Product Slider to Layout

app/code/Meetanshi/ProductSlider/view/frontend/layout/default.xml:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Meetanshi\ProductSlider\Block\ProductSlider" name="custom.product.slider" template="Meetanshi_ProductSlider::slider.phtml"/>
        </referenceContainer>
    </body>
</page>

Once done, run the following commands:

• php bin/magento setup:upgrade
• php bin/magento cache:flush
• php bin/magento setup:static-content:deploy -f

That’s it. Your Hyvä custom product slider is ready! You can easily use the product slider anywhere in the store by using the ProductSlider class:

{block class="Meetanshi\ProductSlider\Block\ProductSlider" template="Meetanshi_ProductSlider::slider.phtml"}}

This way, you can easily create a custom product slider in Hyvä theme. You can also modify the PHTML file’s code to change the look and feel of the slider as per your theme requirements.

Need Help with Hyvä Theme Customization?

Meetanshi is a leading e-commerce development company, offering expert Magento and Shopify development solutions. If you’re looking for a Hyvä theme development partner, our team of in-house team can help you with everything from design brainstorming to implementation.