How to add extra badges

[NOT1]

How can i add extra custom badge on product page and product card

[BSSCommerce-HDL]

Hi @NOT1 ,

Step 1: Navigate to your Shopify Admin
Step 2: Go to Settings > Custom Data > Metaobject definations

Step 3: Put name is grt_badges and setting config like this

[NOT1]

Done now?

[BSSCommerce-HDL]

@NOT1 , Next step, Go to product metaobject

Then you need add definition. Put name is card_badge

This is config:

[BSSCommerce-HDL]

Hi @NOT1 , After you need add snippets. It name is grt_badge

Then add this code inside it:

{% if product.metafields.custom.card_badge %}

{% assign product = product %}

 
 {% assign grt_colorobj = product.metafields.custom.card_badge.value %}
 {% for grt_tags in grt_colorobj %}
 {% assign badge_hide = grt_tags.hide | default : false %}
 {% if grt_tags.is_image == blank %}
 {% assign badge_image = "" %}
 {% else %}
 {% assign badge_image = grt_tags.is_image %}
 {% endif %}
 {% assign border_radius = grt_tags.border_radius | default : 23 %}
 {% assign badge_name = grt_tags.text %}
 {% assign badge_bg_color = grt_tags.bg_color | default : "#0073a7" %}
 {% assign badge_text_color = grt_tags.text_color | default : "#fff" %}
 {% assign badge_pos_top = grt_tags.is_position_top %}
 {% assign badge_pos_right = grt_tags.is_alignment_right %}
 {% assign badge_top_space = grt_tags.badge_top_space | default : 8 %}
 {% assign badge_right_space = grt_tags.badge_right_space | default : 8 %}
 {% if badge_hide == false %}
 {% if tagtype == "product" %}
 
 {{badge_name}}
 
 {% else %}
 
 {% if badge_image == "" %}
 {{badge_name}}
 {% else %}
 
 {% endif %}
 
 {% endif %}
 {% endif %}
 {% endfor %}
 

{% endif %}

[BSSCommerce-HDL]

Hi @NOT1 , After you complete the above 2 things, we need to add this code in the card-product.liquid file.

Code:

{% render 'grt_badge' , product:card_product, tagtype:"card"  %}

[NOT1]

Thanks

[NOT1]

Any other steps ?

[BSSCommerce-HDL]

@NOT1 , Sorry i forgot a thing. We need add code in main-product.liquid

Code:

{% when 'grt_badge' %}
                 {% render 'grt_badge', badge_type: 'text', tagtype:"product" %}

Hope this can help you

[NOT1]

oh okay it was the last step right?

[BSSCommerce-HDL]

@NOT1 Yes, Here is result:

[NOT1]

thanq

[BSSCommerce-HDL]

@NOT1 , No problem. Glad to help you

[NOT1]

How can i change its position to top right

[BSSCommerce-HDL]

Hi @NOT1 , You need enable this setting:

Hope this can help you

[NOT1]

How can i change its width and height

[BSSCommerce-HDL]

@NOT1 , Do you want like this?

[NOT1]

I want it 18 in height and width according to the text

[BSSCommerce-HDL]

@NOT1 ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[NOT1]

How can i change the text size and weight