New Arrivals Page

A page that generates a list of recent products sorted by the most recently added.

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

Note: This function grabs a list of all products and sorts them by the most recent. So if the most recent product addition was 6 months ago, it will still be the "Newest Arrival".

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 new_arrivals.template.html.

Step 2: Edit the page type

At the head of the template, update [%SET [@page_type@]='category'/%] to [%SET [@page_type@]='new_arrivals'/%].

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:'new_arrivals' 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 New Arrivals page

Create an information page named New Arrivals, and set the "Body Template" to new_arrivals.

Customising this section

More information on how to customise this section can be found within the Thumb List Documentation.