Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: How to add extra badges

Solved

How to add extra badges

NOT1
Shopify Partner
282 2 127

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

Accepted Solutions (30)

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

Hi @NOT1,  

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

BSSCommerceHDL_0-1727183376635.png

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

BSSCommerceHDL_1-1727183491502.png

BSSCommerceHDL_2-1727183537533.png

 

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

@NOT1, Next step, Go to product metaobject

 

BSSCommerceHDL_1-1727187305849.png

Then you need add definition. Put name is card_badge

BSSCommerceHDL_2-1727187382978.png

 

This is config: 

BSSCommerceHDL_3-1727187433156.png

 

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

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

BSSCommerceHDL_0-1727187803712.png

Then add this code inside it: 

 

{% if product.metafields.custom.card_badge %}
<style>
 {% if tagtype == "card" %}
 .__grt-badge-section{position:absolute; left:0; right:0; bottom:0; top:0; height:100%; width:100%; padding:8px; overflow:hidden;}
 .__grt-badge-section .grt-badge{position:absolute; display:inline-flex;}
 .__grt-badge-bottom-right,.__grt-badge-top-right{justify-content:flex-end; right:10px;}
 .__grt-badge-section .grt-badge{border: 1px solid transparent; border-radius: 16px; display: inline-block; font-size: 1.2rem; letter-spacing: .1rem; line-height: 1; padding: .5rem 1.3rem .6rem; text-align: center; background-color: red;
 color: red; word-break: break-word;} 
 {% else %}
 div.__grt-badge-section{position:relative;}
 .__grt-badge-section .grt-badge{border: 1px solid transparent; border-radius: 16px; display: inline-block; font-size: 1.2rem; letter-spacing: .1rem; line-height: 1; padding: .5rem 1.3rem .6rem; text-align: center; background-color: red;
 color: red; word-break: break-word;}
 {% endif %}
</style>
{% assign product = product %}

 <div class="__grt-badge-section __grt-badge-top-left">
 {% 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" %}
 <span style="border:none; border-radius:{{ border_radius }}px; background:{{ badge_bg_color }}; color:{{ badge_text_color}}; {% if badge_pos_right %}right{% else %}left{% endif %}:{{ badge_right_space }}px; {% if badge_pos_top %}top{% else %}bottom{% endif %}:{{ badge_top_space }}px;" class="grt-badge badge">
 {{badge_name}}
 </span>
 {% else %}
 <span style="border:none; {% if badge_image == "" %} background:{{ badge_bg_color }}; color:{{ badge_text_color}};{% else %} background:transparent; padding:0; {% endif %} border-radius:{{ border_radius }}px; {% if badge_pos_right %}right{% else %}left{% endif %}:{{ badge_right_space }}px; {% if badge_pos_top %}top{% else %}bottom{% endif %}:{{ badge_top_space }}px;" class="grt-badge badge">
 {% if badge_image == "" %}
 {{badge_name}}
 {% else %}
 <img src="{{ badge_image | image_url : width: grt_tags.image_width , height: grt_tags.image_width }}" alt="badge" loading="lazy" />
 {% endif %}
 </span>
 {% endif %}
 {% endif %}
 {% endfor %}
 </div>
{% endif %}

 

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

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

BSSCommerceHDL_0-1727188443699.png

Code:

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

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

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

BSSCommerceHDL_0-1727188789086.png

 

Code: 

 

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

 

Hope this can help you 😍

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

@NOT1  Yes, Here is result: 

BSSCommerceHDL_1-1727189024237.png

 

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

@NOT1, No problem. Glad to help you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

Hi @NOT1, You need enable this setting: 

BSSCommerceHDL_0-1727190623350.png

Hope this can help you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

@NOT1, Do you want like this? 

BSSCommerceHDL_0-1727236214910.png

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

@NOT1

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

 

<style>
.grt-badge.badge {
  padding: 18px !important;
}
</style>

 

 

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 😍

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

@NOT1

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
span.grt-badge.badge {
    font-size: 20px;
    font-weight: 600;
}
</style>

 

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

Hi @NOT1, Pls try with this code: 

<style>
span.grt-badge.badge {
    height: 18px;
    width: 55px;
}
</style>

Hope this can help you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

@NOT1, Pls try again with code: 

<style>
span.grt-badge.badge {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 18px;
    width: auto;
}
</style>

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

@NOT1, No problem. Glad to help you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

Hi @NOT1, Pls add it in app block

BSSCommerceHDL_0-1727254732416.png

 

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

Hi @NOT1, Pls try with this code: 

 

{% if template.name == 'product' %}
<style>
div:has(>.__grt-badge-section) {
    display: flex;
}
</style>
{% endif %}

 

Hope this can help you 😍

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

@NOT1 , Do you want like this? 

 

 

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

Hi @NOT1, Pls try with this code: 

<style>
.header__menu-item.list-menu__item:hover {
    background-color: lightgray;
}
</style>

 Hope this can help you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

@NOT1, Do you want like this? 

BSSCommerceHDL_0-1727363645121.png

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

Hi @NOT1

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

Step 2: Search file main-product.liquid

Step 3: Comment this code

BSSCommerceHDL_0-1727433171663.png

Hope this can help you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

Hi @NOT1, For trust icon: 

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.section-template--23366657868072__trust_icons_f4ndAf-settings {
    max-width: 130rem !important;
}
</style>

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

Hi @NOT1

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media only screen and (max-width: 767px) {
.section-template--23366657868072trust_icons_f4ndAf-settings {
    overflow-y: scroll;
}

.feature-template--23366657868072trust_icons_f4ndAf .wrapper-box {
    min-width: 160rem !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0px !important;
}
}
</style>

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

Hi @NOT1

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.mega-menu__link.link:not(.mega-menu__link--level-2) {
    color: black;
    font-weight: 600;
}
</style>

 

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

Hi @NOT1, This code for title menu: 

<style>
.mega-menu__link.mega-menu__link--level-2.link {
    color: black;
    font-weight: 600;
    text-decoration: underline;
}
</style>

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

@NOT1 You can try with this code: 

<style>
.mega_menu_img img {
   height: 300px !important;
 }
</style>

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

@NOT1 Or this code : 

 

<style>
ul.mega-menu__list.page-width {
    max-width: 100% !important;
    padding: 0 30px;
}
</style>

 

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 😍

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

Hi @NOT1

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
#shopify-section-template--23366657868072__multicolumn_M4LiNY .multicolumn-card__image-wrapper {
    margin: 0 !important;
}
</style>

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  😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

Hi @NOT1, Pls try with this code: 

<style>
legend.form__label span {
    color: black;
}
</style>

Hope this can help you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

Hi @NOT1,

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
button#CartDrawer-Checkout {
    font-size: 11px !important;
}
</style>

 

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

Hi @NOT1

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
a.cart-item__name {
    text-decoration: none !important;
}
</style>

 

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 55 (55)

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

Hi @NOT1,  

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

BSSCommerceHDL_0-1727183376635.png

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

BSSCommerceHDL_1-1727183491502.png

BSSCommerceHDL_2-1727183537533.png

 

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

NOT1
Shopify Partner
282 2 127

Done now?

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

@NOT1, Next step, Go to product metaobject

 

BSSCommerceHDL_1-1727187305849.png

Then you need add definition. Put name is card_badge

BSSCommerceHDL_2-1727187382978.png

 

This is config: 

BSSCommerceHDL_3-1727187433156.png

 

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

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

BSSCommerceHDL_0-1727187803712.png

Then add this code inside it: 

 

{% if product.metafields.custom.card_badge %}
<style>
 {% if tagtype == "card" %}
 .__grt-badge-section{position:absolute; left:0; right:0; bottom:0; top:0; height:100%; width:100%; padding:8px; overflow:hidden;}
 .__grt-badge-section .grt-badge{position:absolute; display:inline-flex;}
 .__grt-badge-bottom-right,.__grt-badge-top-right{justify-content:flex-end; right:10px;}
 .__grt-badge-section .grt-badge{border: 1px solid transparent; border-radius: 16px; display: inline-block; font-size: 1.2rem; letter-spacing: .1rem; line-height: 1; padding: .5rem 1.3rem .6rem; text-align: center; background-color: red;
 color: red; word-break: break-word;} 
 {% else %}
 div.__grt-badge-section{position:relative;}
 .__grt-badge-section .grt-badge{border: 1px solid transparent; border-radius: 16px; display: inline-block; font-size: 1.2rem; letter-spacing: .1rem; line-height: 1; padding: .5rem 1.3rem .6rem; text-align: center; background-color: red;
 color: red; word-break: break-word;}
 {% endif %}
</style>
{% assign product = product %}

 <div class="__grt-badge-section __grt-badge-top-left">
 {% 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" %}
 <span style="border:none; border-radius:{{ border_radius }}px; background:{{ badge_bg_color }}; color:{{ badge_text_color}}; {% if badge_pos_right %}right{% else %}left{% endif %}:{{ badge_right_space }}px; {% if badge_pos_top %}top{% else %}bottom{% endif %}:{{ badge_top_space }}px;" class="grt-badge badge">
 {{badge_name}}
 </span>
 {% else %}
 <span style="border:none; {% if badge_image == "" %} background:{{ badge_bg_color }}; color:{{ badge_text_color}};{% else %} background:transparent; padding:0; {% endif %} border-radius:{{ border_radius }}px; {% if badge_pos_right %}right{% else %}left{% endif %}:{{ badge_right_space }}px; {% if badge_pos_top %}top{% else %}bottom{% endif %}:{{ badge_top_space }}px;" class="grt-badge badge">
 {% if badge_image == "" %}
 {{badge_name}}
 {% else %}
 <img src="{{ badge_image | image_url : width: grt_tags.image_width , height: grt_tags.image_width }}" alt="badge" loading="lazy" />
 {% endif %}
 </span>
 {% endif %}
 {% endif %}
 {% endfor %}
 </div>
{% endif %}

 

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

NOT1
Shopify Partner
282 2 127

Thanks

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

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

BSSCommerceHDL_0-1727188443699.png

Code:

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

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

NOT1
Shopify Partner
282 2 127

Any other steps ?

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

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

BSSCommerceHDL_0-1727188789086.png

 

Code: 

 

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

 

Hope this can help you 😍

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

NOT1
Shopify Partner
282 2 127

oh okay it was the last step right?

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

@NOT1  Yes, Here is result: 

BSSCommerceHDL_1-1727189024237.png

 

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

NOT1
Shopify Partner
282 2 127

thanq

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

@NOT1, No problem. Glad to help you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

NOT1
Shopify Partner
282 2 127

How can i change its position to top right

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

Hi @NOT1, You need enable this setting: 

BSSCommerceHDL_0-1727190623350.png

Hope this can help you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

NOT1
Shopify Partner
282 2 127

How can i change its width and height

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

@NOT1, Do you want like this? 

BSSCommerceHDL_0-1727236214910.png

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

NOT1
Shopify Partner
282 2 127

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

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

@NOT1

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

 

<style>
.grt-badge.badge {
  padding: 18px !important;
}
</style>

 

 

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 😍

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

NOT1
Shopify Partner
282 2 127

How can i change the text size and weight 

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

@NOT1

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
span.grt-badge.badge {
    font-size: 20px;
    font-weight: 600;
}
</style>

 

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

NOT1
Shopify Partner
282 2 127

Hey the size of the badge is not looking good i wanted like this

NOT1_0-1727237583141.png

 

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

Hi @NOT1, Pls try with this code: 

<style>
span.grt-badge.badge {
    height: 18px;
    width: 55px;
}
</style>

Hope this can help you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

NOT1
Shopify Partner
282 2 127

cảm ơn rất nhiều

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

@NOT1, No problem. Glad to help you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

NOT1
Shopify Partner
282 2 127

umm now the text is not at the center

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

@NOT1, Pls try again with code: 

<style>
span.grt-badge.badge {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 18px;
    width: auto;
}
</style>

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

NOT1
Shopify Partner
282 2 127

how can i add the badge in the product page

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

Hi @NOT1, Pls add it in app block

BSSCommerceHDL_0-1727254732416.png

 

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

NOT1
Shopify Partner
282 2 127

how can i add it in the same line of the price

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

Hi @NOT1, Pls try with this code: 

 

{% if template.name == 'product' %}
<style>
div:has(>.__grt-badge-section) {
    display: flex;
}
</style>
{% endif %}

 

Hope this can help you 😍

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

NOT1
Shopify Partner
282 2 127

 how can i add a gray background when someone hovers on my header menu

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

@NOT1 , Do you want like this? 

 

 

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

Hi @NOT1, Pls try with this code: 

<style>
.header__menu-item.list-menu__item:hover {
    background-color: lightgray;
}
</style>

 Hope this can help you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now