Articles on: Online Store (Website)

Add more featured products sections

In this article:
  1. Increase featured products sections
  2. Adjust featured product display sequence


📌Kindly take note :

  • Above all code editing, you will need to re-edit the code again if you switch to a new theme template
  • We do not allow to change or edit the code for the checkout page (which include shipping & payment method) due to security reasons


Step 1 : Go to EasyStore Admin > Online Store > Themes > Edit source > folder templates > home.liquid



Step 2 : Copy the code section below > paste it after the {% endif %} under the section that you wish to add the featured product sections


 <link rel="stylesheet" href="https://s3.ap-southeast-1.amazonaws.com/eesb.public/cdn/swiper-bundle.min.css"> 
<style>
.swiper-slide .product_grid-item{ width: 100%; float: none; padding: 0; }
.swiper-slide:not(.swiper-container-initialized) .product_grid-item img.lozad:not(.loaded){ padding-top: 0;height: 0; }
.swiper-button-next, .swiper-button-prev{ color: #333; }
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{ pointer-events: auto; } @media screen and (max-width:600px){
.swiper-button-next, .swiper-button-prev{ display: none; }
}
</style>
<div class="wrapper featured-product-wrapper">
<h2 class="text-center"> ##Title here## </h2>
<div {% if settings.product_img_crop == "img-equal-height" %}data-equal-height="1"{% endif %} class="swiper-container swiper-js-wrapper">
{% assign collection_data = all_collections['collection-handle'].products %}
<div class="swiper-wrapper">
{% for product in collection_data %}
<div class="swiper-slide">
{% include 'product-grid-item' %}
</div>
{% endfor %}
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div> </div>
<script src="https://s3-ap-southeast-1.amazonaws.com/eesb.public/cdn/swiper-bundle.min.js"></script>
<script> $( document ).ready(function() { var swiper = new Swiper('.swiper-js-wrapper', { slidesPerView: 4, spaceBetween: 30, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, pagination: { el: '.swiper-pagination', clickable: true, dynamicBullets: true, }, breakpoints: { 320: { slidesPerView: 2, spaceBetween: 20 }, 480: { slidesPerView: 3, spaceBetween: 30 }, 640: { slidesPerView: 4, spaceBetween: 40 } } }); }); </script>



Step 3 : Replace the text ##Title here## with your preferred title > Save



Result:



Step 4 : Add and assign your featured product into a collection. Refer here


Step 5 : Replace the text collection-handle with the handle of the collection that you wish to link with


💡Tips: You may find the handle of the collection under product > collection > scroll down to Search engine optimization > copy the text after collections/



Replacing the test collection-handle:



Step 6 : Save and done


The sequence of featured product displays is based on the sequence of products in the product listing.


The sequence in product listing:



Featured product display sequence on the home page:



Step 1 : Go to EasyStore Admin > Products > Filter for specific collection



Step 2 : Drag and move the product to adjust for the sequence



💡Tips: If the changes don’t take effect in the online store, can try to refresh your page (CTRL + Shift + R)

Updated on: 09/10/2023

Was this article helpful?

Share your feedback

Cancel

Thank you!