How to Create Custom Product Sliders in Hyva Magento 2 with hyva slider view modal

The Importance and Benefits of Custom Product Sliders

• Visual Appeal and Engagement: Custom product sliders let you present a variety of goods in an engaging way. High-quality graphics, thoughtful placement, and graceful animations can draw visitors in and entice them to learn more about your goods. This aesthetic interest may result in more visitors staying on your site longer and being more likely to convert.
• Enhanced Product Visibility: Conventional grid or list formats might not showcase all your products effectively. Sliders allow you to display a larger number of products within a confined space, guaranteeing that a wider selection of your inventory is highlighted. This is especially beneficial for promoting seasonal or new arrivals, clearance items, or specific product categories.
• Effective Storytelling: Personalized product sliders provide an opportunity to craft a compelling narrative or convey a specific message using your product choices. By selecting products that harmonize with one another, you can create a cohesive storyline or theme. This storytelling technique has the power to connect with customers emotionally, inspiring them to make a purchase.
• Improved User Interaction: Thoughtfully crafted custom sliders can elevate your website's user experience significantly. Visitors can engage with sliders by clicking, swiping, or navigating across various product panels, fostering an interactive and user-friendly browsing experience. Integrating such interactive features is crucial in minimizing bounce rates and motivating visitors to delve deeper into your content.
• Adaptability to Mobile Devices: Given the increasing number of mobile shoppers, having a responsive and mobile-friendly design is essential. Custom product sliders have the capability to adjust to various screen sizes, guaranteeing that your products appear attractive and are effortlessly accessible on both desktop computers and mobile devices.
• Highlighting Promotions and Discounts: Sliders serve as an effective platform to highlight special offers, discounts, and time-sensitive deals. You can allocate specific slides to showcase ongoing promotions, enticing users to seize the opportunity before the offers expire.
• Visual Uniformity: Developing custom product sliders that adhere to your brand's aesthetic and design standards ensures a consistent visual identity across your website. This uniformity strengthens your brand image and professionalism.
• Cross-Selling and Up-Selling Opportunities: Tailored product sliders can strategically recommend complementary or higher-priced items to customers. This method can elevate the average order value by enticing customers to explore additional products.

Also Read: https://www.evrig.com//blog/hyva-theme-for-high-speed-magento-stores/

Prerequisites for Custom Product Sliders:

• Install a functioning instance of Magento 2 with the Hyvä theme.
• Knowledge of Hyvä: You should be familiar with how Hyvä components operate and how they can be modified or extended.
• Make sure the Hyvä Slider View Modal component is installed in your Magento 2 store.

Step 1: Create a page layout.

app/code/Evrig/CustomProductSlider/view/frontend/layout/Hyvä_Evrig_index_index.xml
 
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column"xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<referenceContainer name="content">
<block class="Evrig\CustomProductSlider\Block\ProductSliderItems" name="Evrig-product-slider"template="Evrig_CustomProductSlider::product/productSlider.phtml" />
</referenceContainer>
</page>

Step 2: Create a Block Class

app/code/Evrig/CustomProductSlider/Block/ProductSliderItems.php
 
<?php namespace Evrig\CustomProductSlider\Block;
/**​
* Class ProductSliderItems​
* @package Evrig\CustomProductSlider\Block​
*/
class ProductSliderItems extends
\Magento\Framework\View\Element\Template​
{​
	/**​
 	* @var
\Magento\Catalog\Model\ResourceModel\Product\CollectionFactory​
 	*/​
	protected $productCollectionFactory;​
​
	/**​
 	* ProductSliderItems constructor.​
 	*​
 	* @param \Magento\Backend\Block\Template\Context $context​
 	* @param
\Magento\Catalog\Model\ResourceModel\Product\CollectionFactory
$productCollectionFactory​
 	* @param array $data​
 	*/​
	public function __construct(​
    	\Magento\Backend\Block\Template\Context $context,​
    	
\Magento\Catalog\Model\ResourceModel\Product\CollectionFactory
$productCollectionFactory,​
    	array $data = []​
	)
{
$this->productCollectionFactory =
$productCollectionFactory;​
    	parent::__construct($context, $data);​
	}​
​
	/**​
 	* @return
\Magento\Catalog\Model\ResourceModel\Product\Collection​
 	*/​
	public function getSliderProductCollection()​
	{​
    	$collection = $this->productCollectionFactory->create();​
    	$collection->addAttributeToSelect('*');​
    	$collection->setPageSize(15); // Fetching only 15
products​
    	return $collection;​
	}​
}

Step 3: Create a Template File

app/code/Evrig/CustomProductSlider/view/frontend/templates/product/productSlider.phtml
 

• $items: An array of goods are contained in this variable and will be shown in the slider.
• $itemTemplate: The variable specifies the location of the PHTML template used to generate each product item in the slider.
• $containerTemplate: This variable, holds the URL for the PHTML template that is used to create the slider container.
• $sliderHtml: The 'getSliderForItems()' method is called on the 'variable' to fill it with data.

Conclusion: