{"id":7875,"date":"2025-02-10T10:46:10","date_gmt":"2025-02-10T10:46:10","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=7875"},"modified":"2025-07-14T09:17:37","modified_gmt":"2025-07-14T03:47:37","slug":"how-to-create-custom-product-slider-in-hyva-theme","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/how-to-create-custom-product-slider-in-hyva-theme\/","title":{"rendered":"How to Create a Custom Product Slider in Hyv\u00e4 Theme?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">If you\u2019re working on a Hyv\u00e4 theme development project, you may need to add various elements for better product display. One of them is a product slider.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this blog post, I will share the complete technical method to build a product slider Hyv\u00e4 theme for Magento 2.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Method to Create a Custom Product Slider in Hyv\u00e4 Magento 2 Theme<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To create a Hyv\u00e4 custom product slider, we need to create a new module that adds product slider block.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We\u2019ll create Meetansh-HyvaProductSlider module with the following folder structure:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>app\/code\/Meetanshi\/ProductSlider\/\n\u251c\u2500\u2500 etc\/\n\u2502   \u251c\u2500\u2500 module.xml\n\u251c\u2500\u2500 registration.php\n\u251c\u2500\u2500 ViewModel\/\n\u2502   \u251c\u2500\u2500 ProductSlider.php\n\u251c\u2500\u2500 view\/\n\u2502   \u251c\u2500\u2500 frontend\/\n\u2502   \u2502   \u251c\u2500\u2500 layout\/\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 default.xml\n\u2502   \u2502   \u251c\u2500\u2500 templates\/\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 slider.phtml\n\u251c\u2500\u2500 Block\/\n\u2502   \u251c\u2500\u2500 ProductSlider.php<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now, let\u2019s go through the steps to create the product slider module for the Hyv\u00e4 Magento 2 theme.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Create &amp; Register a Custom Module<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">First, define the module by creating the module.xml file.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>app\/code\/Meetanshi\/ProductSlider\/etc\/module.xml:<\/code><\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?xml version=\"1.0\"?>\n&lt;config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\">\n    &lt;module name=\"Meetanshi_ProductSlider\" setup_version=\"1.0.0\"\/>\n&lt;\/config><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Register the module through registration.php.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>app\/code\/Meetanshi\/ProductSlider\/registration.php:<\/code><\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\n\u00a0\u00a0\u00a0\u00a0\\Magento\\Framework\\Component\\ComponentRegistrar::MODULE,\n\u00a0\u00a0\u00a0\u00a0'Meetanshi_ProductSlider',\n\u00a0\u00a0\u00a0\u00a0__DIR__\n);<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Create a ViewModel<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Now, create a ViewModel for the Hyv\u00e4 product slider.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>app\/code\/Meetanshi\/ProductSlider\/ViewModel\/ProductSlider.php:<\/code><\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\nnamespace Meetanshi\\ProductSlider\\ViewModel;\nuse Magento\\Catalog\\Model\\ResourceModel\\Product\\CollectionFactory;\nuse Magento\\Framework\\View\\Element\\Block\\ArgumentInterface;\n\/**\n\u00a0* Meetanshi - ViewModel for fetching products\n\u00a0*\/\nclass ProductSlider implements ArgumentInterface\n{\n\u00a0\u00a0\u00a0\u00a0protected $productCollectionFactory;\n\u00a0\u00a0\u00a0\u00a0public function __construct(CollectionFactory $productCollectionFactory)\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->productCollectionFactory = $productCollectionFactory;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0public function getProducts()\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return $this->productCollectionFactory->create()\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0->addAttributeToSelect(['name', 'price', 'small_image'])\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0->setPageSize(10);\n\u00a0\u00a0\u00a0\u00a0}\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Create a PHTML Template with Swiper.js<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To render the product slider on Hyv\u00e4 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.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>app\/code\/Meetanshi\/ProductSlider\/view\/frontend\/templates\/slider.phtml:<\/code><\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\n\/** @var \\Meetanshi\\ProductSlider\\ViewModel\\ProductSlider $viewModel *\/\n$viewModel = $block->getViewModel();\n$products = $viewModel->getProducts();\n?>\n&lt;div class=\"swiper-container\">\n\u00a0\u00a0\u00a0\u00a0&lt;div class=\"swiper-wrapper\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;?php foreach ($products as $product): ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"swiper-slide\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;a href=\"&lt;?= $block->escapeUrl($product->getProductUrl()) ?>\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;img src=\"&lt;?= $block->getImage($product, 'category_page_grid')->getUrl(); ?>\" alt=\"&lt;?= $block->escapeHtml($product->getName()) ?>\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;p>&lt;?= $block->escapeHtml($product->getName()) ?>&lt;\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;span>&lt;?= $block->escapeHtml($product->getFinalPrice()) ?> &lt;?= __('USD') ?>&lt;\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/a>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;?php endforeach; ?>\n\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0&lt;div class=\"swiper-pagination\">&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0&lt;div class=\"swiper-button-next\">&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0&lt;div class=\"swiper-button-prev\">&lt;\/div>\n&lt;\/div>\n&lt;script>\n\u00a0\u00a0\u00a0\u00a0document.addEventListener('DOMContentLoaded', function () {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0new Swiper('.swiper-container', {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0loop: true,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0pagination: { el: '.swiper-pagination', clickable: true },\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0slidesPerView: 4,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0spaceBetween: 10,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0breakpoints: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a01024: { slidesPerView: 4 },\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0768: { slidesPerView: 2 },\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0480: { slidesPerView: 1 }\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\n&lt;\/script>\n&lt;link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@10\/swiper-bundle.min.css\">\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@10\/swiper-bundle.min.js\">&lt;\/script><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Define the Block<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Create a block to display the PHTML file\u2019s product slider on the HTML pages.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>app\/code\/Meetanshi\/ProductSlider\/Block\/ProductSlider.php:<\/code><\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\nnamespace Meetanshi\\ProductSlider\\Block;\nuse Magento\\Framework\\View\\Element\\Template;\nuse Meetanshi\\ProductSlider\\ViewModel\\ProductSlider;\n\/**\n\u00a0* Meetanshi - Block for passing ViewModel\n\u00a0*\/\nclass ProductSlider extends Template\n{\n\u00a0\u00a0\u00a0\u00a0protected $_viewModel;\n\u00a0\u00a0\u00a0\u00a0public function __construct(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Template\\Context $context,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ProductSlider $viewModel,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0array $data = []\n\u00a0\u00a0\u00a0\u00a0) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0parent::__construct($context, $data);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->_viewModel = $viewModel;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0public function getViewModel()\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return $this->_viewModel;\n\u00a0\u00a0\u00a0\u00a0}\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Add Product Slider to Layout<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>app\/code\/Meetanshi\/ProductSlider\/view\/frontend\/layout\/default.xml:<\/code><\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?xml version=\"1.0\"?>\n&lt;page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n\u00a0\u00a0\u00a0\u00a0&lt;body>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;referenceContainer name=\"content\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;block class=\"Meetanshi\\ProductSlider\\Block\\ProductSlider\" name=\"custom.product.slider\" template=\"Meetanshi_ProductSlider::slider.phtml\"\/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/referenceContainer>\n\u00a0\u00a0\u00a0\u00a0&lt;\/body>\n&lt;\/page><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Once done, run the following commands:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>php bin\/magento setup:upgrade<\/li>\n\n\n\n<li>php bin\/magento cache:flush<\/li>\n\n\n\n<li>php bin\/magento setup:static-content:deploy -f<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it. Your Hyv\u00e4 custom product slider is ready! You can easily use the product slider anywhere in the store by using the ProductSlider class:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{block class=\"Meetanshi\\ProductSlider\\Block\\ProductSlider\" template=\"Meetanshi_ProductSlider::slider.phtml\"}}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This way, you can easily create a custom product slider in Hyv\u00e4 theme. You can also modify the PHTML file\u2019s code to change the look and feel of the slider as per your theme requirements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Need Help with Hyv\u00e4 Theme Customization?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Meetanshi is a leading e-commerce development company, offering expert Magento and Shopify development solutions. If you\u2019re looking for a <a href=\"https:\/\/meetanshi.com\/hyva-theme-development-service\">Hyv\u00e4 theme development partner<\/a>, our team of in-house team can help you with everything from design brainstorming to implementation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><div class=\"meetanshi-cta\">\r\n<div class=\"cta-content-wrapper\">\r\n<span> Hyv\u00e4 Development Service<\/span>\r\n<p>Get a fast-loading store in less than 7 weeks with Hyv\u00e4 theme<\/p>\r\n<a href=\"https:\/\/meetanshi.com\/hyva-theme-development-service\" target=\"_blank\" class=\"btn-primary\">Hire Us<\/a>\r\n<\/div>\r\n<div class=\"cta-image-new\">\r\n<img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/hyva-theme-development-service.png\" alt=\"Hyva Theme Development Service\">\r\n<\/div>\r\n<\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you\u2019re working on a Hyv\u00e4 theme development project, you may need to add various elements for better product display. One of them is a&#8230;<\/p>\n","protected":false},"author":51,"featured_media":7876,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34,5869],"tags":[],"class_list":["post-7875","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento","category-hyva-themes"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/7875","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/51"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=7875"}],"version-history":[{"count":4,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/7875\/revisions"}],"predecessor-version":[{"id":8766,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/7875\/revisions\/8766"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media\/7876"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=7875"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=7875"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=7875"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}