On Sale Badge

Add a "On Sale" badge to the product thumbnails, identifying the item as on promotion.

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

Step 1: Styling the badge

By default, Skeletal theme already displays an "On Sale" badge for products on promotion. To style this badge to be more prominent, paste the following code into the stylesheet template /httpdocs/assets/themes/[THEME-NAME]/css/style.css.

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

Final Result