> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.easystore.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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
---
## 1. Increase featured products sections

**Step 1** : Go to [EasyStore Admin](https://admin.easystore.co/) > Online Store > Themes > Edit source > folder **templates** > **home.liquid**

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/b-57_k1lw28.png)

**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>

```

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/b-58_15uyc3a.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/b-59_16oyw5k.png)

**Result:**

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/b-60_3kb0r1.png)

**Step 4 :** Add and assign your featured product into a collection. Refer [here](https://help.easystore.co/en/articles/1678218-managing-product-collections)

**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/`**

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/b-61_1v5ze90.png)

**Replacing the test** `collection-handle:`

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/b-62_sz5u9d.png)

**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:**

![](https://storage.crisp.chat/users/helpdesk/website/dc759c68f0437800/6356a612-29dd-4161-89d9-ddbcd0_1ah19iq.png)

**Featured product display sequence on the home page:**

![](https://storage.crisp.chat/users/helpdesk/website/6fcd9e54d6ea080/9c472f9b-fc1d-49e2-8318-2f164f_1va8ibv.png)

**Step 1 :** Go to [EasyStore Admin](https://admin.easystore.co/) > Products > Filter for specific collection

![](https://storage.crisp.chat/users/helpdesk/website/33567ddf9bb90c0/b06fc6c1-604f-4a4c-9fe3-4b559d_1op2kko.gif)

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

![](https://storage.crisp.chat/users/helpdesk/website/3584f0fe3e375200/99cd85c8-41a5-4772-90d9-585004_y1nwf2.gif)

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