Popular Products Page
A page that generates a list of products based on the popularity.
Wireframe
Preparation Checklist
Before you start this tweak, it's a good idea to run through our preparation checklist below:
- Read through the Getting Started to get a better sense of how the Control Panel, Database and Front End store interact.
- Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
- Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.
Coding Instructions
Step 1: Duplicate the category template
Duplicate the existing category.template.html
file within /httpdocs/assets/themes/[THEME-NAME]/templates/cms
and rename it to popular_products.template.html
.
Step 2: Edit the page type
At the head of your template, update [%SET [@page_type@]='category'/%]
to [%SET [@page_type@]='popular_products'/%]
.
Step 3: Add the code into the template
Paste the following code into the template replacing the thumb_list
function.
[%thumb_list type:'products' filter_category:'0' sortby:'top_sellers' limit:'24' %]
[%param template%][%VIEWBY type:'products' default:'[@templatethumb@]'%][%/VIEWBY%][%/param%]
[%param *header%]
<div class="[%VIEWBY type:'products' if:'eq' value:'list' if_true:'thumb_list' if_false:'thumb'%][%/VIEWBY%]">
<section class="row products-row" aria-label="Products in category">
[%/param%]
[%param *footer%]
</section>
</div>
[%/param%]
[%/thumb_list%]
Step 4: Create a Popular Products page
Create an information page named Popular Products, and set the "Body Template" to popular_products
.
Customising this section
More information on how to customise this section can be found within the Thumb List Documentation.