Show more products on homepage (Old themes only)

In this article:

Introduction
Create a link to direct your customers to more products
Tips

⚠️ Kindly take note :
Old theme (For Candy, WAVE, LUCKY, X-Force, Mine Style, Dreams Bedding, The Summer, Adventure Camping, Happy Kitchen, and Flower & Tea House only)
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
The "View More Products" button will only display if your featured products have more or equal to 20 products
To categorize products as featured products, go to Products > click into the product > Collections > Feature on homepage

1. Introduction

Sometimes, customers came to your store just to browse around and see what you've got here, they are not yet looking for a specific products. This is the time they should be exposed to as many products as possible. The more products they see, the higher chance they found what they want and place order. This article shows you how to create a link on your home page to bring your customers to the complete collection of your featured products. 

2. Create a link to bring your customers to more products

Step 1 : Go to EasyStore Admin > Channels > Online Store > Edit Source > select featured-product.liquid file, under snippets.

Step 2 : Scroll to the bottom > paste code below after the last row

{% if collection.products >= 20%}
<hr class="hr--clear">
<div class="text-center">
    <a class="" href="/collections/all" title="View More Products">View More Products →</a>
</div>
{% endif %}

💡 Tips :
You can remove this code here <hr class="hr--clear"> for unwanted space
The above code will direct your customers to the All Products page.



Step 3 : Save once you are done.

3. Tips

Step 1 : You can change the title to your preference, e.x. View All Products



Step 2 : You can adjust the placement of the button by changing the "center" to "right"/"left"



Step 3 : You can make the link look as button by adding "btn" or "btn btn--secondary".



💡 Tips : You can remove `btn--secondary` if you want the button color to be the same at Customize > Button Background Colour

Updated on: 16/10/2023