How to Create Custom Product Sliders in Hyva Magento 2 with hyva slider view modal
- October 9, 2023
- Posted by: Vijay Golani
- Category: Magento 2
Hey there! When it comes to selling things online, showing off your products in the best way possible is super important! And guess what? There’s a cool trick to make your products look even more awesome – sliders! Sliders are like magic slideshows that can display lots of products in a really cool and eye-catching way. I’m here to guide you through making your very own custom product sliders using the Hyvä Slider View Modal in Hyvä themes. Let’s make your online store shine!
Why Custom Product Sliders are Essential and Their Benefits
Custom product sliders play a crucial role in enhancing the attractiveness of your products, capturing customers’ attention, and conveying valuable information about usage, benefits, and instructions. These tailored sliders serve as a dynamic and visually engaging tool for showcasing your products, offering numerous advantages for both customers and store owners. Implementing custom product sliders can significantly enhance your online store’s appeal and functionality.
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.
The mentioned touchpoints provide valuable guidance for your Magento store and assist in implementing custom product sliders. So, what are the prerequisites for custom product sliders? Let’s explore them below:
Also Read: https://www.evrig.com/blog/hyva-theme-for-high-speed-magento-stores/
Prerequisites for Custom Product Sliders:
Therefore, there are several things to be aware of before designing a custom product slider for your Magento website using a Hyvä theme. Please check the following.
- 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.
Please get in touch if you are a retailer searching for such a feature for your Magento website. Alternately, you can investigate and make use of our Hyvä theme development services. Let’s now proceed to the detailed, step-by-step instructions for using Magento 2’s Hyvä slider modal to create a custom product slider.
Here are the steps to make a custom product slider in Hyvä Magento 2 using the slider view modal:
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
require(\Hyvä\Theme\ViewModel\Slider::class);
$items = $block->getSliderProductCollection();
$itemTemplate = 'Magento_Catalog::product/list/item.phtml';
$containerTemplate = 'Magento_Catalog::product/slider/product-
slider-container.phtml'; ?>
getSliderForItems($itemTemplate,
$items, $containerTemplate)
->setData('title', $escaper->escapeHtml(__('Product
Slider')))
->toHtml();
?>
The Hyvä theme uses a variable called $sliderViewModel to build a slider from an array or collection of Slider ViewModel objects.
$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.
‘$itemTemplate’, ‘$items’, and ‘$containerTemplate’ variables with the ‘$sliderViewModelobject’. A slider title and the output HTML are then displayed on the page after being escaped. The final result will look something like this.
Conclusion:
So that’s everything there is to know about using the Hyvä theme slider view modal to create product sliders. Send us a message if you’re still having trouble or have any questions, and our incredibly helpful tech team will help you out! Our email address is sales@evrig.com. In conclusion, personalised product sliders are a versatile tool that may enhance your online store’s visual attractiveness, give customers a better experience, and boost your company’s profitability. You can make the shopping experience more engaging for customers by using these sliders to highlight products, tell stories, and promote specials.