Tweak Library
Note: We have updated our folder structure in Neto 6 and this has not been updated on all tweaks yet. More info.

Top Seller Label

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

Industries

  • 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

Wireframe

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 Admin > Customisable Fields > Product fields, create a new misc 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">
        Top<br/>Seller
    </div>
[%/if%]

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">
        Top<br/>Seller
    </div>
[%/if%]

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