In this article:

  1. Increase featured collections to 6

  2. Make arrangement in mobile version to 2 featured collections per row

  3. Add 'Featured Products' title for Fall theme

  4. 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



1. Increase featured collections to 6

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.

Result:


4. Full-width for featured collection

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

Before:

After (full width):

Related articles:
How to add more than 4 sliders
Show full slider in mobile view for Fall theme

Did this answer your question?