Step 1: Add the following code in Schema:
{
"name": "Custom Badges",
"settings": [
{
"type": "header",
"content": "Display Options"
},
{
"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": "Collection Page Only"
},
{
"value": "product_page",
"label": "Product Page Only"
},
{
"value": "both",
"label": "Both Product and Collection 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"
}
],
"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": "badge_1_text_metafield_key",
"label": "Metafield Key For Text"
},
{
"type": "text",
"id": "custom_badge_1_text",
"label": "Custom Badge 1 Text",
"default": "Badge 1"
},
{
"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": "text",
"id": "badge_2_text_metafield_key",
"label": "Metafield Key"
},
{
"type": "select",
"id": "custom_badge_2_enable",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "product_cards",
"label": "Collection Page Only"
},
{
"value": "product_page",
"label": "Product Page Only"
},
{
"value": "both",
"label": "Both Product and Collection 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"
}
],
"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": "Badge 2"
},
{
"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"
}
]
},Step 2: Add following code in card-product.liquid file
Replace following code:
<div class="card__badge {{ settings.badge_position }}">
{%- if card_product.available == false -%}
<span
id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
>
{{- 'products.product.sold_out' | t -}}
</span>
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
<span
id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
>
{{- 'products.product.on_sale' | t -}}
</span>
{%- endif -%}
</div>With the following code:
<!-- Code start -->
<!-- Meta Field variables for Badge 1 Start -->
{% assign metafield_key = settings.badge_1_text_metafield_key %}
{% assign product_metafield_badge_text_1 = card_product.metafields.custom[metafield_key] %}
<!-- Meta Field variables for Badge 1 End -->
<!-- Meta Field variables for Badge 2 Start -->
{% assign metafield_key_2 = settings.badge_2_text_metafield_key %}
{% assign product_metafield_badge_text_2 = card_product.metafields.custom[metafield_key_2] %}
<!-- Meta Field variables for Badge 2 End -->
{%- assign positions = 'bottom left,bottom right,top left,top right' | split: ',' -%}
{%- for position in positions -%}
<div class="card__badge {{ position }}" style="display: block;">
{% comment %}{%- if settings.badge_position == position -%}
{%- render 'new-badge', badge_type: 'standard', product: card_product, section_id: section_id -%}
{%- endif -%}{% endcomment %}
{%- if settings.custom_badge_1_position == position -%}
{% if product_metafield_badge_text_1 == null %}
{%- if settings.custom_badge_1_enable == 'product_cards'
or settings.custom_badge_1_enable == 'both'
-%}
{%- render 'new-badge',
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.custom_badge_1_enable == 'product_cards' or settings.custom_badge_1_enable == 'both' -%}
{% if product_metafield_badge_text_1 != null %}
{%- render 'new-badge',
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: product_metafield_badge_text_1,
custom_badge_image: settings.custom_badge_1_image,
custom_badge_image_width: settings.custom_badge_1_image_width
-%}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- if settings.custom_badge_2_position == position -%}
{% if product_metafield_badge_text_2 == null %}
{%- if settings.custom_badge_2_enable == 'product_cards'
or settings.custom_badge_2_enable == 'both'
-%}
{%- render 'new-badge',
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 product_metafield_badge_text_2 != null %}
{%- if settings.custom_badge_2_enable == 'product_cards'
or settings.custom_badge_2_enable == 'both'
-%}
{%- render 'new-badge',
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: product_metafield_badge_text_2,
custom_badge_image: settings.custom_badge_2_image,
custom_badge_image_width: settings.custom_badge_2_image_width
-%}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- if settings.badge_position == position -%}
{%- render 'new-badge', badge_type: 'standard', product: card_product, section_id: section_id -%}
{%- endif -%}
</div>
{%- endfor -%}
<!-- Code end -->Step 3: Create new snippet file new-badge.liquid:
{%- 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>
{%- endif -%}
{% endif %}Step 4: Add the following code above last {% endif %} in price.liquid:
<!-- Meta Field variables for Badge 1 Start -->
{% assign metafield_key = settings.badge_1_text_metafield_key %}
{% assign product_metafield_badge_text_1 = product.metafields.custom[metafield_key].value %}
<!-- Meta Field variables for Badge 1 End -->
<!-- Meta Field variables for Badge 2 Start -->
{% assign metafield_key_2 = settings.badge_2_text_metafield_key %}
{% assign product_metafield_badge_text_2 = product.metafields.custom[metafield_key_2].value %}
<!-- Meta Field variables for Badge 2 End -->
{% if product_metafield_badge_text_1 == null %}
{%- if settings.custom_badge_1_enable == "product_page" or settings.custom_badge_1_enable == "both" -%}
{%- render 'new-product-badge',
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_metafield_badge_text_1 != null %}
{%- if settings.custom_badge_1_enable == "product_page" or settings.custom_badge_1_enable == "both" -%}
{%- render 'new-product-badge',
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: product_metafield_badge_text_1,
custom_badge_image: settings.custom_badge_1_image,
custom_badge_image_width: settings.custom_badge_1_image_width
-%}
{%- endif -%}
{%- endif -%}
{% if product_metafield_badge_text_2 == null %}
{%- if settings.custom_badge_2_enable == "product_page" or settings.custom_badge_2_enable == "both" -%}
{%- render 'new-product-badge',
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_metafield_badge_text_2 != null %}
{%- if settings.custom_badge_2_enable == "product_page" or settings.custom_badge_2_enable == "both" -%}
{%- render 'new-product-badge',
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: product_metafield_badge_text_2,
custom_badge_image: settings.custom_badge_2_image,
custom_badge_image_width: settings.custom_badge_2_image_width
-%}
{%- endif -%}
{% endif %}Step 5: Create new snippet file new-product-badge.liquid
{%- if custom_badge_option == "text" or metafield_badge_text -%}
<span class="badge color-{{ custom_badge_color_scheme | default: metafield_badge_color }}">
{{ custom_badge_text | default: metafield_badge_text }}
</span>
{%- elsif custom_badge_option == "image" or metafield_badge_image -%}
<span>
<img src="{{ custom_badge_image | img_url: 'master' | default: metafield_badge_image }}"
width="{{ custom_badge_image_width | default: metafield_badge_image_width }}" height="auto">
</span>
{%- endif -%}
