Top Seller Badge

Add a "Top Seller" badge to the product thumbnails, identifying the item as popular.

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 Guide 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

While a top sellers sorting option exists, there is no selling data which can calculate this per product. So the optimal way to implement this is to create a new custom product field that can be toggled on/off on a product-to-product basis for this badge to appear.

Step 1: Setup a custom product field

In the control panel, create a new custom product field and enter the following info:

• Custom Field: Select any option from the dropdown, remembering the tag (eg. [@misc1@]).
• Field Name: Top Seller?
• Field Type: True/False
• Show On Product Display Page: Visible
• Show On Product Thumbnail: Visible

Step 2: Add the code to the grid thumbnail

Open the grid template /httpdocs/assets/themes/[THEME-NAME]/templates/thumbs/product/template.html and paste the following code below the closing of the [%if [@inpromo@]%] statement, highlighted here.

[%if [@misc1@]%]
    <span class="badge badge-success top-seller-badge">Top Seller</span>
[%/if%]

Note: Make sure to replace the [@misc1@] tags with the "Field ID" from step 1.

Step 3: Add the code to the list thumbnail

Open the list template /httpdocs/assets/themes/[THEME-NAME]/templates/thumbs/product/list.template.html and paste the following code directly below the closing card-body div, highlighted here.

<div class="savings-container">
    [%if [@misc1@]%]
        <span class="badge badge-success top-seller-badge">Top Seller</span>
    [%/if%]
</div>

Step 4: Style the badge

Paste the following code into the stylesheet template /httpdocs/assets/themes/[THEME-NAME]/css/style.css.

/* Thumbnails: Top Seller Badge */
.savings-container {
    width: 100%;
    left: -5px;
    top: -5px;
    z-index: 1;
}
.top-seller-badge {
    height: 45px;
    width: 45px;
    display: flex;
    align-items: center;
    border-radius: 50%;
    white-space: normal;
    font-size: 13px;
    font-weight: 500;
    padding: 2px;
    margin-top: 2px;
}