Overview
A badge element on an image is a great way to quickly draw attention to key information - like a special offer, product status (e.g. "Discount", "Best Value", or "New"), or promotional message - without distracting from the image itself. It helps highlight important details at a glance and can encourage quicker decisions from shoppers.
You can enable the "Badge" element on any standard or product image by toggling it on in the sidebar settings:
Badge Settings
After the Badge has been enabled, click on it directly in the builder to access the Main settings in the sidebar:
Display Conditions -
Display always: The badge is visible at all times.
For discounted variants only: The badge appears only on discounted products on the published page.
Badge text - Enter the custom text that will appear inside the badge overlay.
Variables{{price}}and/or{{discount}}can be used to display the corresponding value dynamically. Compare at price discount will not be displayed.Font Style - Set the Font Name, Font Size, Font Style (Bold/Italic/Underline) and Text Color.
Badge Position - Choose where the badge appears on the image—Top Left, Top Right, Bottom Left, or Bottom Right.
Badge Color
In the "Badge Color" tab you can select the background color of the badge to match your design or highlight key information.
You can enter an exact color using a hex or RGBA code in the available field, or select a color using the color picker. Additional effects such as Solid or Gradient can be applied, along with color transparency adjustments using the slider:
Additional Settings
Additional settings for the badge element include common options available for most page elements. For more details on each setting, click here. These options allow you to apply extra styles to make your badge really stand out and grab attention.
