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

On Sale Label

An "On Sale" label, identifying the item as on promotion.

Industries

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

Wireframe

On Sale Label

Coding Instructions

By default, most themes already have code line this in product thumbnails:

<div class="savings-container">
    [%if [@inpromo@]%]
        <span class="label label-danger">On Sale</span>
    [%/if%]
    [%if [@save@] > 0 AND ![@has_child@]%]
        <span class="label label-warning">
        [%format type:'percent'%][@save@][%/format%] OFF</span>
    [%/if%]
    [%if [@save@] > 0%]
        <span class="label label-default">RRP [%format type:'currency'%][@retail@][%/format%]</span>
    [%/if%]
</div>

This shows a list of labels on the top right. To allow a sale label to appear as in the wirefame, CSS must be added.

<style>
.savings-container {
    width:100%;
    padding-left:60px;
}
.savings-container .label-danger {
    left:-5px;
    top:-5px;
    right:auto;
    height:50px;
    width:50px;
    display:block;
    border-radius:100%;
    text-align:center;
    position:absolute;
    white-space:normal;
    line-height:1.2;
    font-size:16px;
    font-weight:300;
}
</style>