Want personalized guidance adding this to your store?
Check out our Insiders community: https://www.skool.com/the-prompted
Members of The Prompted community receive a detailed store audit, 1-on-1 guidance for implementing new features, and access to an exclusive theme. You'll also get marketing support, the same tactics we use to spend over $100k/mo on Meta Ads.
---
Custom product badges are a great way to quickly communicate the status of your products. For example, you may want to show that some of your products are new, popular, or on sale. By default, Shopify does not have the option to select different badges to add to your collection and product pages, but you now can with this customization.
Compatible Themes: This code should work on all free Shopify themes (Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride, Spotlight).
Create Metafields
Create Product metafields
- Custom Badge 1: True or false
- Custom Badge 2: True or false
- Custom Badge 3: True or false
- Custom Dynamic Badge: File (image)
Edit Theme Code
Edit config file settings_schema.json
{
"name": "Custom Badges",
"settings": [
{
"type": "header",
"content": "Display Options"
},
{
"type": "select",
"id": "badge_display_order",
"label": "Badge Display Order",
"options": [
{
"value": "normal",
"label": "Normal"
},
{
"value": "reverse",
"label": "Reverse"
}
],
"default": "normal"
},
{
"type": "select",
"id": "custom_badge_layout",
"label": "Badge Display Layout",
"options": [
{
"value": "inline-block",
"label": "In line"
},
{
"value": "block",
"label": "Stacked"
}
],
"default": "block"
},
{
"type": "range",
"id": "custom_badge_spacing",
"min": 0,
"max": 10,
"step": 1,
"default": 3,
"unit": "px",
"label": "Spacing between badges"
},
{
"type": "header",
"content": "Custom Badge 1"
},
{
"type": "select",
"id": "custom_badge_1_enable",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "product_cards",
"label": "Product Cards Only (ex: collection page)"
},
{
"value": "product_page",
"label": "Product Page Only"
},
{
"value": "both",
"label": "Both Product Cards and Product Page"
}
],
"default": "none",
"label": "Enable Custom Badge 1"
},
{
"type": "select",
"id": "custom_badge_1_option",
"options": [
{
"value": "text",
"label": "Text Badge"
},
{
"value": "image",
"label": "Image Badge"
},
{
"value": "dynamic_image",
"label": "Dynamic Image Badge"
}
],
"default": "text",
"label": "Custom Badge 1 Type"
},
{
"type": "select",
"id": "custom_badge_1_position",
"options": [
{
"value": "bottom left",
"label": "t:settings_schema.badges.settings.position.options__1.label"
},
{
"value": "bottom right",
"label": "t:settings_schema.badges.settings.position.options__2.label"
},
{
"value": "top left",
"label": "t:settings_schema.badges.settings.position.options__3.label"
},
{
"value": "top right",
"label": "t:settings_schema.badges.settings.position.options__4.label"
}
],
"default": "bottom left",
"label": "Custom Badge 1 Position on Cards"
},
{
"type": "text",
"id": "custom_badge_1_text",
"label": "Custom Badge 1 Text",
"default": "Custom"
},
{
"type": "color_scheme",
"id": "custom_badge_1_color_scheme",
"label": "Custom Badge 1 Color Scheme",
"default": "scheme-5"
},
{
"type": "image_picker",
"id": "custom_badge_1_image",
"label": "Custom Badge 1 Image",
"info": "Use .png for transparency"
},
{
"type": "range",
"id": "custom_badge_1_image_width",
"min": 10,
"max": 100,
"step": 5,
"default": 50,
"unit": "px",
"label": "Custom Badge 1 Image Width"
},
{
"type": "header",
"content": "Custom Badge 2"
},
{
"type": "select",
"id": "custom_badge_2_enable",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "product_cards",
"label": "Product Cards Only (ex: collection page)"
},
{
"value": "product_page",
"label": "Product Page Only"
},
{
"value": "both",
"label": "Both Product Cards and Product Page"
}
],
"default": "none",
"label": "Enable Custom Badge 2"
},
{
"type": "select",
"id": "custom_badge_2_option",
"options": [
{
"value": "text",
"label": "Text Badge"
},
{
"value": "image",
"label": "Image Badge"
},
{
"value": "dynamic_image",
"label": "Dynamic Image Badge"
}
],
"default": "text",
"label": "Custom Badge 2 Type"
},
{
"type": "select",
"id": "custom_badge_2_position",
"options": [
{
"value": "bottom left",
"label": "t:settings_schema.badges.settings.position.options__1.label"
},
{
"value": "bottom right",
"label": "t:settings_schema.badges.settings.position.options__2.label"
},
{
"value": "top left",
"label": "t:settings_schema.badges.settings.position.options__3.label"
},
{
"value": "top right",
"label": "t:settings_schema.badges.settings.position.options__4.label"
}
],
"default": "bottom left",
"label": "Custom Badge 2 Position on Cards"
},
{
"type": "text",
"id": "custom_badge_2_text",
"label": "Custom Badge 2 Text",
"default": "Custom"
},
{
"type": "color_scheme",
"id": "custom_badge_2_color_scheme",
"label": "t:settings_schema.badges.settings.sold_out_badge_color_scheme.label",
"default": "scheme-5"
},
{
"type": "image_picker",
"id": "custom_badge_2_image",
"label": "Custom Badge 2 Image",
"info": "Use .png for transparency"
},
{
"type": "range",
"id": "custom_badge_2_image_width",
"min": 10,
"max": 100,
"step": 5,
"default": 50,
"unit": "px",
"label": "Custom Badge 2 Image Width"
},
{
"type": "header",
"content": "Custom Badge 3"
},
{
"type": "select",
"id": "custom_badge_3_enable",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "product_cards",
"label": "Product Cards Only (ex: collection page)"
},
{
"value": "product_page",
"label": "Product Page Only"
},
{
"value": "both",
"label": "Both Product Cards and Product Page"
}
],
"default": "none",
"label": "Enable Custom Badge 3"
},
{
"type": "select",
"id": "custom_badge_3_option",
"options": [
{
"value": "text",
"label": "Text Badge"
},
{
"value": "image",
"label": "Image Badge"
},
{
"value": "dynamic_image",
"label": "Dynamic Image Badge"
}
],
"default": "text",
"label": "Custom Badge 3 Type"
},
{
"type": "select",
"id": "custom_badge_3_position",
"options": [
{
"value": "bottom left",
"label": "t:settings_schema.badges.settings.position.options__1.label"
},
{
"value": "bottom right",
"label": "t:settings_schema.badges.settings.position.options__2.label"
},
{
"value": "top left",
"label": "t:settings_schema.badges.settings.position.options__3.label"
},
{
"value": "top right",
"label": "t:settings_schema.badges.settings.position.options__4.label"
}
],
"default": "bottom left",
"label": "Custom Badge 3 Position on Cards"
},
{
"type": "text",
"id": "custom_badge_3_text",
"label": "Custom Badge 3 Text",
"default": "Custom"
},
{
"type": "color_scheme",
"id": "custom_badge_3_color_scheme",
"label": "t:settings_schema.badges.settings.sold_out_badge_color_scheme.label",
"default": "scheme-5"
},
{
"type": "image_picker",
"id": "custom_badge_3_image",
"label": "Custom Badge 3 Image",
"info": "Use .png for transparency"
},
{
"type": "range",
"id": "custom_badge_3_image_width",
"min": 10,
"max": 100,
"step": 5,
"default": 50,
"unit": "px",
"label": "Custom Badge 3 Image Width"
}
]
},
Edit snippet card-product.liquid
{%- assign positions = 'bottom left,bottom right,top left,top right' | split: ',' -%}
{%- for position in positions -%}
<div class="card__badge {{ position }}" style="display: block;">
{%- if settings.badge_display_order == 'normal' -%}
{%- if settings.badge_position == position -%}
{%- render 'custom-badge-product-card',
badge_type: "standard",
product: card_product,
section_id: section_id
-%}
{%- endif -%}
{%- if card_product.metafields.custom.custom_badge_1 == true and settings.custom_badge_1_position == position -%}
{%- if settings.custom_badge_1_enable == "product_cards" or settings.custom_badge_1_enable == "both" -%}
{%- render 'custom-badge-product-card',
badge_type: "custom",
product: card_product,
section_id: section_id,
custom_badge_option: settings.custom_badge_1_option,
custom_badge_color_scheme: settings.custom_badge_1_color_scheme,
custom_badge_text: settings.custom_badge_1_text,
custom_badge_image: settings.custom_badge_1_image,
custom_badge_image_width: settings.custom_badge_1_image_width
-%}
{%- endif -%}
{%- endif -%}
{%- if card_product.metafields.custom.custom_badge_2 == true and settings.custom_badge_2_position == position -%}
{%- if settings.custom_badge_2_enable == "product_cards" or settings.custom_badge_2_enable == "both" -%}
{%- render 'custom-badge-product-card',
badge_type: "custom",
product: card_product,
section_id: section_id,
custom_badge_option: settings.custom_badge_2_option,
custom_badge_color_scheme: settings.custom_badge_2_color_scheme,
custom_badge_text: settings.custom_badge_2_text,
custom_badge_image: settings.custom_badge_2_image,
custom_badge_image_width: settings.custom_badge_2_image_width
-%}
{%- endif -%}
{%- endif -%}
{%- if card_product.metafields.custom.custom_badge_3 == true and settings.custom_badge_3_position == position -%}
{%- if settings.custom_badge_3_enable == "product_cards" or settings.custom_badge_3_enable == "both" -%}
{%- render 'custom-badge-product-card',
badge_type: "custom",
product: card_product,
section_id: section_id,
custom_badge_option: settings.custom_badge_3_option,
custom_badge_color_scheme: settings.custom_badge_3_color_scheme,
custom_badge_text: settings.custom_badge_3_text,
custom_badge_image: settings.custom_badge_3_image,
custom_badge_image_width: settings.custom_badge_3_image_width
-%}
{%- endif -%}
{%- endif -%}
{%- else -%}
{%- if card_product.metafields.custom.custom_badge_3 == true and settings.custom_badge_3_position == position -%}
{%- if settings.custom_badge_3_enable == "product_cards" or settings.custom_badge_3_enable == "both" -%}
{%- render 'custom-badge-product-card',
badge_type: "custom",
product: card_product,
section_id: section_id,
custom_badge_option: settings.custom_badge_3_option,
custom_badge_color_scheme: settings.custom_badge_3_color_scheme,
custom_badge_text: settings.custom_badge_3_text,
custom_badge_image: settings.custom_badge_3_image,
custom_badge_image_width: settings.custom_badge_3_image_width
-%}
{%- endif -%}
{%- endif -%}
{%- if card_product.metafields.custom.custom_badge_2 == true and settings.custom_badge_2_position == position -%}
{%- if settings.custom_badge_2_enable == "product_cards" or settings.custom_badge_2_enable == "both" -%}
{%- render 'custom-badge-product-card',
badge_type: "custom",
product: card_product,
section_id: section_id,
custom_badge_option: settings.custom_badge_2_option,
custom_badge_color_scheme: settings.custom_badge_2_color_scheme,
custom_badge_text: settings.custom_badge_2_text,
custom_badge_image: settings.custom_badge_2_image,
custom_badge_image_width: settings.custom_badge_2_image_width
-%}
{%- endif -%}
{%- endif -%}
{%- if card_product.metafields.custom.custom_badge_1 == true and settings.custom_badge_1_position == position -%}
{%- if settings.custom_badge_1_enable == "product_cards" or settings.custom_badge_1_enable == "both" -%}
{%- render 'custom-badge-product-card',
badge_type: "custom",
product: card_product,
section_id: section_id,
custom_badge_option: settings.custom_badge_1_option,
custom_badge_color_scheme: settings.custom_badge_1_color_scheme,
custom_badge_text: settings.custom_badge_1_text,
custom_badge_image: settings.custom_badge_1_image,
custom_badge_image_width: settings.custom_badge_1_image_width
-%}
{%- endif -%}
{%- endif -%}
{%- if settings.badge_position == position -%}
{%- render 'custom-badge-product-card',
badge_type: "standard",
product: card_product,
section_id: section_id
-%}
{%- endif -%}
{%- endif -%}
</div>
{%- endfor -%}
Create new snippet custom-badge-product-card.liquid
{% comment %}
Renders a custom badge based on provided settings.
{% endcomment %}
{%- if badge_type == "standard" -%}
{%- if product.available == false -%}
<span
id="NoMediaStandardBadge-{{ section_id }}-{{ product.id }}"
class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
style="display: {{ settings.custom_badge_layout }}; margin-top: {{ settings.custom_badge_spacing }}px;"
>
{{- 'products.product.sold_out' | t -}}
</span>
{%- elsif product.compare_at_price > product.price and product.available -%}
<span
id="NoMediaStandardBadge-{{ section_id }}-{{ product.id }}"
class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
style="display: {{ settings.custom_badge_layout }}; margin-top: {{ settings.custom_badge_spacing }}px;"
>
{{- 'products.product.on_sale' | t -}}
</span>
{%- endif -%}
{%- elsif badge_type == "custom" -%}
{%- if custom_badge_option == "text" -%}
<span
id="NoMediaCustomBadge-{{ section_id }}-{{ product.id }}"
class="badge badge--bottom-left color-{{ custom_badge_color_scheme }}"
style="display: {{ settings.custom_badge_layout }}; margin-top: {{ settings.custom_badge_spacing }}px;"
>
{{ custom_badge_text }}
</span>
{%- elsif custom_badge_option == "image" -%}
<span
id="NoMediaCustomBadge-{{ section_id }}-{{ product.id }}"
>
<img src="{{ custom_badge_image | img_url: 'master' }}" width={{ custom_badge_image_width }} height="auto">
</span>
{%- elsif custom_badge_option == "dynamic_image" -%}
{% if product.metafields.custom.custom_dynamic_badge != nil %}
<span
id="NoMediaCustomBadge-{{ section_id }}-{{ product.id }}"
>
<img src="{{ product.metafields.custom.custom_dynamic_badge | img_url: 'master' }}" width={{ custom_badge_image_width }} height="auto">
</span>
{% endif %}
{%- endif -%}
{% endif %}
Edit snippet price.liquid
{%- if settings.badge_display_order == 'normal' -%}
{%- if product.metafields.custom.custom_badge_1 == true -%}
{%- if settings.custom_badge_1_enable == "product_page" or settings.custom_badge_1_enable == "both" -%}
{%- render 'custom-badge-product-page',
product: product,
section_id: section.id,
custom_badge_option: settings.custom_badge_1_option,
custom_badge_color_scheme: settings.custom_badge_1_color_scheme,
custom_badge_text: settings.custom_badge_1_text,
custom_badge_image: settings.custom_badge_1_image,
custom_badge_image_width: settings.custom_badge_1_image_width
-%}
{%- endif -%}
{%- endif -%}
{%- if product.metafields.custom.custom_badge_2 == true -%}
{%- if settings.custom_badge_2_enable == "product_page" or settings.custom_badge_2_enable == "both" -%}
{%- render 'custom-badge-product-page',
product: product,
section_id: section.id,
custom_badge_option: settings.custom_badge_2_option,
custom_badge_color_scheme: settings.custom_badge_2_color_scheme,
custom_badge_text: settings.custom_badge_2_text,
custom_badge_image: settings.custom_badge_2_image,
custom_badge_image_width: settings.custom_badge_2_image_width
-%}
{%- endif -%}
{%- endif -%}
{%- if product.metafields.custom.custom_badge_3 == true -%}
{%- if settings.custom_badge_3_enable == "product_page" or settings.custom_badge_3_enable == "both" -%}
{%- render 'custom-badge-product-page',
product: product,
section_id: section.id,
custom_badge_option: settings.custom_badge_3_option,
custom_badge_color_scheme: settings.custom_badge_3_color_scheme,
custom_badge_text: settings.custom_badge_3_text,
custom_badge_image: settings.custom_badge_3_image,
custom_badge_image_width: settings.custom_badge_3_image_width
-%}
{%- endif -%}
{%- endif -%}
{% else %}
{%- if product.metafields.custom.custom_badge_3 == true -%}
{%- if settings.custom_badge_3_enable == "product_page" or settings.custom_badge_3_enable == "both" -%}
{%- render 'custom-badge-product-page',
product: product,
section_id: section.id,
custom_badge_option: settings.custom_badge_3_option,
custom_badge_color_scheme: settings.custom_badge_3_color_scheme,
custom_badge_text: settings.custom_badge_3_text,
custom_badge_image: settings.custom_badge_3_image,
custom_badge_image_width: settings.custom_badge_3_image_width
-%}
{%- endif -%}
{%- endif -%}
{%- if product.metafields.custom.custom_badge_2 == true -%}
{%- if settings.custom_badge_2_enable == "product_page" or settings.custom_badge_2_enable == "both" -%}
{%- render 'custom-badge-product-page',
product: product,
section_id: section.id,
custom_badge_option: settings.custom_badge_2_option,
custom_badge_color_scheme: settings.custom_badge_2_color_scheme,
custom_badge_text: settings.custom_badge_2_text,
custom_badge_image: settings.custom_badge_2_image,
custom_badge_image_width: settings.custom_badge_2_image_width
-%}
{%- endif -%}
{%- endif -%}
{%- if product.metafields.custom.custom_badge_1 == true -%}
{%- if settings.custom_badge_1_enable == "product_page" or settings.custom_badge_1_enable == "both" -%}
{%- render 'custom-badge-product-page',
product: product,
section_id: section.id,
custom_badge_option: settings.custom_badge_1_option,
custom_badge_color_scheme: settings.custom_badge_1_color_scheme,
custom_badge_text: settings.custom_badge_1_text,
custom_badge_image: settings.custom_badge_1_image,
custom_badge_image_width: settings.custom_badge_1_image_width
-%}
{%- endif -%}
{%- endif -%}
{%- endif -%}
Create new snippet custom-badge-product-page.liquid
{% comment %}
Renders a custom badge based on provided settings.
{% endcomment %}
{%- if custom_badge_option == "text" -%}
<span class="badge color-{{ custom_badge_color_scheme }}">
{{ custom_badge_text }}
</span>
{%- elsif custom_badge_option == "image" -%}
<span
id="price__badge-image-{{ section_id }}"
>
<img src="{{ custom_badge_image | img_url: 'master' }}" width={{ custom_badge_image_width }} height="auto">
</span>
{%- elsif custom_badge_option == "dynamic_image" -%}
{% if product.metafields.custom.custom_dynamic_badge != nil %}
<span
id="price__badge-dynamic-image-{{ section_id }}"
>
<img src="{{ product.metafields.custom.custom_dynamic_badge | img_url: 'master' }}" width={{ custom_badge_image_width }} height="auto">
</span>
{% endif %}
{%- endif -%}