This article has moved to a new home. View the updated version Tweak Library

Top Seller Label

A "Top Seller" badge, identifying the item as popular.


  • Fashion
  • Bicycles
  • Computers & Electronics
  • Fitness & Supplements
  • Health & Beauty
  • Alcohol
  • Music & Instruments
  • Sports & Recreation
  • Gifts
  • Toys & Games
  • Jewellery & Accessories
  • Animal & Petcare
  • Arts & Crafts
  • Events & Party Supplies
  • Food & Beverages


Top Seller Label

Coding Instructions

Step 1. Set up the logic & misc field to determine which products are "top sellers"

This is a promotional tool to indicate popular items to the customer. 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 misc field that can be turned on/off in Neto for this badge to appear.

Via Setup & Tools > All settings & Tools > Click on the Products tab > Click on Custom Product Fields and create a new custom product field. Name it "Show top seller badge", then use the field type "true/false" and ensure that both "Show on product display page" and "Show on product thumbnail" are set to visible.

In this example, we have used misc1 as our field that when checked will show this badge on the product.

Open thumbs/product/template.html and paste the below code directly below the closing div with the class savings-container:

[%if [@misc1@]%]
    <div class="top-seller-badge">

Step 3. Add the badge to the list view thumbnail template

Open thumbs/product/list.template.html and paste the below code directly underneath the closing div with the class panel-body:

[%if [@misc1@]%]
    <div class="top-seller-badge">

Step 4. Add the CSS

Add CSS, and tweak to suit:

.top-seller-badge {
    position: absolute;
    top: 0;
    width: 50px;
    height: 50px;
    padding: 10px;
    margin: 5px 0 0 0;
    font-weight: bold;
    font-size: 11px;
    line-height: 13px;
    text-align: center;
    border-radius: 25px;
    border: 1px solid #E4E4E4;
    background: white;

Final Result

Multi-Item Add

Multi-Item Add

Download Files

Download Files

Was this article useful?

Be notified when this page is updated. Optional.