Articles on: Theme & Store Design

Add more featured collections in Fall theme

In this article:

Increase featured collections to 6
Make arrangement in mobile version to 2 featured collections per row
Add 'Featured Products' title for Fall theme
Full-width for featured collection

⚠️ 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
We have added an option for you to display image with original quality. Therefore, your store will be using the image with original size and format.
You can enabled it at Channels > Online Store > Customize > General

Step 1 : Go to EasyStore Admin > Online Store > Themes > Edit source > folder config/settings_schema.json.

Step 2 : Find < Featured collections > at around line 1171 > scroll down to collection 4 > copy the highlighted (grey) section as below.

Step 3 : Paste it below and change the number to 5. Result as below.

Step 4 : Repeat step 3 above for number 6 > Save.

Step 5 : Then, go to folder config/settings_data.json > copy the highlighted (grey) section as below.

Step 6 : Paste it below and change the number to 5. Result as below.

Step 7 : Repeat step 6 above and change the number to 6 > Save.

Step 8 : Now you can go to Themes > Customize > Featured collections and you will be able to see Collection 5 and 6.

Step 1 : Go to Edit source > folder assets/theme.scss.

Step 2 : Find the highlighted (grey) section below.

Step 3 : Replace the section with the code below.

flex-basis: auto;width: calc(50% - 10px);

Step 4 : Result as below.

Step 5 : Save and done

Step 1 : Go to Edit source > folder featured-product.liquid

Step 2 : Search for featured-product-wrapper > then add below with
<h2 class="section-header__title text-center">Featured products</h2>

You can change the highlighted words according to your preferences

Step 3 : Save and you're done.


Step 1 : Click on Channels > Online Store > Edit Source and select theme.scss file

Step 2 : Look for .highlight-section{ around line 3530 and remove max-width: $siteWidth;

Step 3 : Save and here's the result


After (full width):

Updated on: 24/09/2022

Was this article helpful?

Share your feedback


Thank you!