Add more featured products sections
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
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
Updated on: 09/10/2023
Thank you!