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

When working with Magento 2 and the Hyvä theme (often referred to as Hyvä Magento), creating a custom product slider in the Hyvä theme goes beyond design.

It needs to be fast and efficient. Since Hyvä is built with performance in mind, every feature should follow the same principle.

This Magento Hyvä tutorial is written for store owners. And it will take you through the process of building a responsive and performance-optimized product slider that integrates smoothly with the Hyvä theme environment. Let’s start with the steps of creating a custom product slider in Hyvä theme.

(You can also hire a Hyvä theme developer to sail easily through complexity.)

Steps to Create a Custom Product Slider in Magento 2 Hyvä Themes

Here, we’ve outlined a step-by-step process to create a Hyvä theme custom product slider.

Step 1: Create Registration File for Your Module

First, you need to create the registration.php file inside the extension at the following path:

app/code/Vendor/Extension/registration.php

Add the following code to register your custom module with Magento:

php:

<?php

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(

    ComponentRegistrar::MODULE,

    'Vendor_Extension',

    __DIR__

Pro Tip: Not every customization needs to be built from scratch. If you want speed without complexity, consider starting with InstaBuild for Hyva, which are pre-designed responsive templates. They cut development time and cost while ensuring performance.

Step 2: Create Module.xml File

Next, create the module.xml file to define module dependencies and execution sequence at the following path:

app/code/Vendor/Extension/etc/module.xml

Add the following code to ensure proper module sequence order:

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="Vendor_Extension" setup_version="1.0.0">

        <sequence>

            <module name="Magento_Catalog"/>

            <module name="Hyva_Theme"/>

        </sequence>

    </module>

</config>

Step 3: Create the Block Class

And now, you need to create the Productslider.php file inside the extension at the following path:

app/code/Vendor/Extension/Block

Once you do that, add the following code to that file to move a step further to create a custom product slider:

php:

<?php

namespace Vendor\Extension\Block;

use Magento\Catalog\Model\ResourceModel\Product\CollectionFactory;

use Magento\Framework\View\Element\Template\Context;

class Productslider extends \Magento\Framework\View\Element\Template

{

    protected $productCollectionFactory;

    public function __construct(

        Context $context,

        CollectionFactory $productCollectionFactory,

        array $data = []

    ) {

        $this->productCollectionFactory = $productCollectionFactory;

        parent::__construct($context, $data);

    }

    public function getProductListCollection()

    {

        $collection = $this->productCollectionFactory->create();

        $collection->addAttributeToSelect('*');

        $collection->addAttributeToFilter('status', 1);

        $collection->setPageSize(10);

        return $collection;

    }

}

Step 4: Create the Template File

After that, we need to create the product-slider.phtml file inside the extension at the following path:
app/code/Vendor/Extension/view/frontend/templates

Then, add the following code for creating custom template file:

php:

<?php

declare(strict_types=1);

use Vendor\Extension\Block\Productslider;

use Magento\Framework\Escaper;

use Hyvä\Theme\Model\ViewModelRegistry;

use Hyvä\Theme\ViewModel\Slider;

/** @var Productslider $block */

/** @var Escaper $escaper */

/** @var ViewModelRegistry $viewModels */

$sliderViewModel = $viewModels->require(Slider::class);

$items = $block->getProductListCollection(); // Render product collection which you want to display in slider.

$itemTemplate = 'Magento_Catalog::product/list/item.phtml';

$containerTemplate = 'Magento_Catalog::product/slider/product-slider-container.phtml';

?>

<?=

    $sliderHtml = $sliderViewModel->getSliderForItems($itemTemplate, $items, $containerTemplate)

        ->setData('title', $escaper->escapeHtml(__('Featured Products')))

        ->toHtml();

?>

Step 5: Create the Layout File

Last, we need to create the cms_index_index.xml file inside the extension at the following path:
app/code/Vendor/Extension/view/frontend/layout

Then include the below-mentioned code:

xml:

<?xml version="1.0"?>

<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <update handle="Hyvä_product_slider" />

    <body>

        <referenceContainer name="content">

            <block class="Vendor\Extension\Block\Productslider"

                name="homepage-product-slider"

                template="Vendor_Extension::product-slider.phtml" />

        </referenceContainer>

    </body>

</page>

Step 6: Enable Module and Clear Cache

After creating all the files, run the following commands to enable the module:

bash:

• php bin/magento module:enable Vendor_Extension

• php bin/magento setup:upgrade

• php bin/magento cache:flush

Output

Then, your custom product slider in Hyvä theme will display on your homepage with a clean, responsive design that matches your Hyvä theme styling.

Pro Tip:To keep sliders lightweight, avoid loading too many products at once. A fast-loading slider improves conversions more than a cluttered one. Test your setup with Google PageSpeed Insights after implementation.

Customization Options for Product Slider in Hyvä Theme

You can customize the Hyvä theme frontend product slider design by modifying the following parameters in your block class for custom sliders:

• Collection Size: Change setPageSize(10) to display more or fewer products
• Product Filters: Add specific attribute filters to show targeted products
• Slider Title: Modify the title in the template file
• Layout Position: Change the layout file to display the slider on different pages

This Hyvä theme customization approach ensures optimal performance and seamless integration.

Pro Tip: When your goal is to boost engagement, you should use sliders strategically for “New Arrivals” or “Best Sellers”. Such store-specific targeting ensures your Hyvä slider highlights products most likely to convert. Connect with our CRO experts for better suggestions.

Conclusion

This implementation process for the custom product slider in Hyvä theme provides a solid base for you to start with.

You can extend these carousels with additional features like category filtering, wishlist integration, or custom styling to match your brand requirements. And that was all about creating a custom product slider in Hyvä theme.

————————————————————————————————————————————–

Rest, if you need expert assistance with Hyvä theme development, Aureate Labs specializes in well-performing eCommerce solutions.

Our experienced development team can help you create custom modules, optimize performance, and deliver exceptional user experiences. Contact us today to discuss your project requirements.