In this article:
Increase featured products sections
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

1. Increase featured products sections

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

2. Adjust featured product display sequence

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)
Was this article helpful?
Cancel
Thank you!