Only XX Left

On the product page, display a "Only XX Left!" badge if the stock number is 3 or less, providing a sense of urgency to buy.

Wireframe

Only xxx Left


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: Open the product header template

Navigate to the product header file /httpdocs/assets/themes/[THEME-NAME]/templates/products/includes/header.template.html.

Step 2: Amend the "in stock" logic

Replace the following block of code, highlighted here with this code:

[%if [@store_quantity@] > 0 AND [@preorder@] %]
    <span itemprop="availability" content="http://schema.org/PreOrder" class="badge badge-warning">Pre-order - Released [%format type:'date'%][@arrival_date@][%/format%]</span>
[%elseif [@store_quantity@] > 0 AND [@store_quantity@] <= 3 AND ![@preorder@] %]
    <span itemprop="availability" content="in_stock" class="badge badge-success">Only [@store_quantity@] Left!</span>
[%elseif [@store_quantity@] > 0 AND ![@preorder@] %]
    <span itemprop="availability" content="http://schema.org/InStock" class="badge badge-success">In Stock</span>
[%elseif [@store_quantity@] < 1 AND [@config:ALLOW_NOSTOCK_CHECKOUT@] %]
    <span itemprop="availability" content="http://schema.org/LimitedAvailability" class="badge badge-danger">Sold Out - Backorder Available</span>
[%else%]
    <span itemprop="availability" content="http://schema.org/OutOfStock" class="badge badge-danger">Sold Out</span>
[%/if%]

Final Result

Brand Logo


Was this article useful?

Be notified when this page is updated. Optional.