How to Integrate Swiper Slider to Your Hyva Storefront?

May 14, 2024
Categories: eCommerce, Hyva, Magento 2

INTRODUCTION:

Elevate your Hyva Customer experience by seamlessly integrating Swiper Slider, a potent JavaScript library renowned for its touch-enabled sliders. This in-depth guide empowers you to effortlessly add SWIPER to your Hyva Storefront, allowing you to showcase your products, testimonials, or promotional banners in a visually captivating banner. Following these steps will transform your static content into dynamic and engaging, boosting user engagement and potentially increasing conversions.

PRE-REQUISITES:

Access your HYVA Theme files

STEP-BY-STEP INTEGRATION:

1. Acquiring Swiper Files:

Head over to the official Swiper CDN to download the essential files:

CSS: https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css

JavaScript: https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js

Save these files to a convenient location within your Hyva Theme’s directory structure.

2. Importing CSS file into Theme:

Locate the primary CSS file of your Hyva theme (Often named theme.css). This file is typically in the web/tailwind directory within your theme’s folder.

Open theme.css in your preferred code editor and add the following line at the top (assuming your CSS file resides in app/design/frontend/Acme/default/web/tailwind/theme/swiper-bundle.min.css

CSS: @import “theme/swiper-bundle.min.css”;

Save the modification to theme.css.

3. Including JavaScript file in your page:

Add swiper-bundle.min.js in our theme folder

app/design/frontend/Acme/default/web/js/swiper-bundle.min.js

Call the JS file using the below code in the XML on which page you need to add the Swiper slider. Within the <head> section of your chosen xml file, add the following code.

XML:

<head>
   <script src="js/swiper-bundle.min.js"/>
</head>

Save the changes.

4. Constructing and Customising your slider:

Within your CMS page, CMS block of PHTML file, add HTML structure to establish your swiper slider container:

<div class="container">
   <div class="swiper">
   <div class="swiper-wrapper">
   <div class="swiper-slide">Slide 1</div>
   <div class="swiper-slide">Slide 2</div>
   <div class="swiper-slide">Slide 3</div>
   </div>
   <div class="swiper-pagination"></div>
   <div class="swiper-button-prev"></div>
   <div class="swiper-button-next"></div>
   <div class="swiper-scrollbar"></div>
   </div>
   <script>
   const swiper = new Swiper('.swiper', {
      direction: 'horizontal',
      loop: true,
      pagination: {
         el: '.swiper-pagination',
         clickable: true
      },
      navigation: {
         nextEl: '.swiper-button-next',
         prevEl: '.swiper-button-prev',
      },
      scrollbar: {
         el: '.swiper-scrollbar',
      },
   });
   </script>
   </div>

5. Verification and Deployment:

To observe the implemented Swiper Slider functionality, execute the following commands in your terminal:

php bin/magento cache:clean within your Magento root directory to clear the cache.
npm run build-prod in your theme’s app/design/frontend/Acme/default/web/tailwind/ directory to rebuild production-ready assets.

By following these steps, you have successfully integrated Swiper into your HYVA storefront.

Advantages for Swiper Sliders in HYVA:

Lightweight: The Swiper has a small footprint, meaning it won’t bloat your website.
Customizable: It offers a wide range of options for customization, allowing you to tailor the slider’s appearance and behavior to your specific needs. This includes features like navigation arrows, pagination dots, autoplay, and various transition effects.
Touch-friendly: Swiper is designed to work seamlessly on touch devices, providing a smooth and responsive user experience. This is crucial for modern web design, where significant users access websites on mobile phones and tablets.
Modular: Swiper uses a modular design, so you can only include the needed features. This helps keep the file size even smaller and potentially improves performance.
Responsive: Swiper adapts its layout to different screen sizes, ensuring your sliders look great on all devices.

Feel free to leave any comment below if you have any questions or require additional details.