Overview
Product Flags are short, customizable labels that appear on your product images. They help highlight sales, new arrivals, or other special promotions. This article will show you how to enable and customize them.
How to Use Product Flags
Product Flags can be applied to individual products by selecting predefined flag categories. To enable a flag for a product:
- Go to Catalog Products.
- Click Edit on the desired product.
- Under the General tab, locate the Product Flags section.
- Select one or more flags (e.g., C1 - New, C2 - Hot, C3 - Sale).
- Click Save to apply the changes.
Updating Product Flags in the Theme
Foundation themes installed after January 2025 already include the merge codes listed below, you can skip to the Product Flags settings.
In other themes - You will need to change the products flags in the HTML of your Product Details, Category, and Catalog theme pages; Also, each product display widget will contain product flags that need to be updated. You can replace the previous static flags with the merge codes below to make them dynamic. To edit these locations your theme, navigate to Themes > Edit > Pages > Choose page type > HTML Editor. You can ctrl+f for "flag1" to locate the product flags on the page.
The previous static text would look like this:
<ac:visibilityarea id="Flag1">
<div class="abs product-flag right top flag1"><span>New!</span></div>
</ac:visibilityarea>
<ac:visibilityarea id="Flag2">
<div class="abs product-flag right bottom flag2"><span>Hot!</span></div>
</ac:visibilityarea>
<ac:visibilityarea id="Flag3">
<div class="abs product-flag right bottom flag3"><span>Sale!</span></div>
</ac:visibilityarea>
These merge codes automatically display the text set in Product Flags settings, and need to replace the static text above:
-
##PRODUCTFLAG1##
– Displays C1 flag text. -
##PRODUCTFLAG2##
– Displays C2 flag text. -
##PRODUCTFLAG3##
– Displays C3 flag text.
Replace the code above with the following code:
<ac:visibilityarea id="Flag1">
<div class="abs product-flag right top flag1"><span>##PRODUCTFLAG1##
</span></div>
</ac:visibilityarea>
<ac:visibilityarea id="Flag2">
<div class="abs product-flag right bottom flag2"><span>##PRODUCTFLAG2##
</span></div>
</ac:visibilityarea>
<ac:visibilityarea id="Flag3">
<div class="abs product-flag right bottom flag3"><span>##PRODUCTFLAG3##
</span></div>
</ac:visibilityarea>
Once you have updated your theme, the settings below will update the text going forward.
Customizing Product Flags
You can change the text displayed on product flags through the Product Flags settings in the admin panel.
- Go to Settings > Catalog > General.
- Locate the Product Flags section.
- Modify the text fields for C1, C2, and C3 Flags (e.g., change "New" to "Just Arrived").
- Click Save to apply the changes.