Badges
You can customize how badges are displayed on the product card and product page using the options below.
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme settings -> Badges.
Badges Settings
Configuration
Position
select
Choose where the badge should appear on the product image (e.g., Top left, Top right).
Always visible
Top
range
Adjust the distance from the top edge of the product image.
Visible when "Position" is set to "Top left" or "Top right"
Bottom
range
Adjust the distance from the bottom edge of the product image.
Visible when "Position" is set to "Bottom left" or "Bottom right"
Left
range
Adjust the distance from the left edge of the product image.
Visible when "Position" is set to "Top left" or "Bottom left"
Right
range
Adjust the distance from the right edge of the product image.
Visible when "Position" is set to "Top right" or "Bottom right"
Corner radius
range
Adjust how rounded the badge corners should be.
Always visible
Case
select
Set the text formatting for the badge (e.g., Uppercase, Capitalize).
Always visible
Show new badge
checkbox
Enable to display a custom "New" badge on products.
Always visible
New badge display mode
select
Choose Dynamic to show the badge automatically for new products, or Manual to control it via tags.
Visible when "Show new badge" is enabled
New badge calculation period
range
Set the number of days a product is considered "New" after its creation date.
Visible when "Show new badge" is enabled and "Display mode" is set to "Dynamic"
Show sold out badge
checkbox
Enable to display a "Sold out" badge when inventory is zero.
Always visible
Show sale badge
checkbox
Enable to display a "Sale" badge on products with a compare-at price.
Always visible
Show custom badge
checkbox
Enable to display custom badges defined in product tags.
Always visible
Padding
Padding left
range
Adjust the internal spacing on the left side of the badge text.
Always visible
Padding right
range
Adjust the internal spacing on the right side of the badge text.
Always visible
Padding top
range
Adjust the internal spacing at the top of the badge text.
Always visible
Padding bottom
range
Adjust the internal spacing at the bottom of the badge text.
Always visible
Badge Display Logic
Sold Out: Displayed when the product is out of stock.
Sale: Displayed when the product has a sale price.
New: Displayed based on newly added products within a specified time range or by using a product tag.
Custom: The content of this badge is pulled from a metafield with the key
custom_badge. If a custom badge has not been set up yet, please refer to the instructions below.
Custom Badge Setup
Create a Product Metafield with the key
custom_badge.
Go to the product and enter the content for the Custom Badge metafield created in the previous step.
Last updated