How to add extra badges

[NOT1]

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

[BSSCommerce-HDL · Accepted solution]

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

[BSSCommerce-HDL · Accepted solution]

@NOT1, Next step, Go to product metaobject

Then you need add definition. Put name is card_badge

This is config: 

[BSSCommerce-HDL · Accepted solution]

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

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 %}

[BSSCommerce-HDL · Accepted solution]

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"  %}

[BSSCommerce-HDL · Accepted solution]

@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 😍

[BSSCommerce-HDL · Accepted solution]

@NOT1  Yes, Here is result: 

[BSSCommerce-HDL · Accepted solution]

@NOT1, No problem. Glad to help you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, You need enable this setting: 

Hope this can help you 😍

[BSSCommerce-HDL · Accepted solution]

@NOT1, Do you want like this? 

[BSSCommerce-HDL · 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 😍

[BSSCommerce-HDL · 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 😍

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, Pls try with this code: 

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

Hope this can help you 😍

[BSSCommerce-HDL · 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>

[BSSCommerce-HDL · Accepted solution]

@NOT1, No problem. Glad to help you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, Pls add it in app block

[BSSCommerce-HDL · 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 😍

[BSSCommerce-HDL · Accepted solution]

@NOT1 , Do you want like this? 

[BSSCommerce-HDL · 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 😍

[BSSCommerce-HDL · Accepted solution]

@NOT1, Do you want like this? 

[BSSCommerce-HDL · 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

Hope this can help you 😍

[BSSCommerce-HDL · 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 😍

[BSSCommerce-HDL · 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 😍

[BSSCommerce-HDL · 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 😍

[BSSCommerce-HDL · 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 😍

[BSSCommerce-HDL · Accepted solution]

@NOT1 You can try with this code: 

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

[BSSCommerce-HDL · 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 😍

[BSSCommerce-HDL · 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  😍

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, Pls try with this code: 

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

Hope this can help you 😍

[BSSCommerce-HDL · 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 😍

[BSSCommerce-HDL · Accepted solution]

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 · Accepted solution]

@NOT1, Next step, Go to product metaobject

Then you need add definition. Put name is card_badge

This is config: 

[BSSCommerce-HDL · Accepted solution]

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

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 %}

[NOT1]

Thanks

[BSSCommerce-HDL · Accepted solution]

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]

Any other steps ?

[BSSCommerce-HDL · Accepted solution]

@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 · Accepted solution]

@NOT1  Yes, Here is result: 

[NOT1]

thanq

[BSSCommerce-HDL · Accepted solution]

@NOT1, No problem. Glad to help you 😍

[NOT1]

How can i change its position to top right

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, You need enable this setting: 

Hope this can help you 😍

[NOT1]

How can i change its width and height

[BSSCommerce-HDL · Accepted solution]

@NOT1, Do you want like this? 

[NOT1]

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

[BSSCommerce-HDL · 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 😍

[NOT1]

How can i change the text size and weight 

[BSSCommerce-HDL · 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 😍

[NOT1]

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

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, Pls try with this code: 

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

Hope this can help you 😍

[NOT1]

cảm ơn rất nhiều

[BSSCommerce-HDL · Accepted solution]

@NOT1, No problem. Glad to help you 😍

[NOT1]

umm now the text is not at the center

[BSSCommerce-HDL · 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>

[NOT1]

how can i add the badge in the product page

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, Pls add it in app block

[NOT1]

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

[BSSCommerce-HDL · 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 😍

[NOT1]

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

[BSSCommerce-HDL · Accepted solution]

@NOT1 , Do you want like this? 

[BSSCommerce-HDL · 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 😍

[NOT1]

How to add breadcrumbs?

[BSSCommerce-HDL · Accepted solution]

@NOT1, Do you want like this? 

[NOT1]

No there will be the gender name like Men then there will be the products collection like shirts

[NOT1]

how to remove 1 in cart from product page

[BSSCommerce-HDL · 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

Hope this can help you 😍

[BSSCommerce-HDL · 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 😍

[NOT1]

how to make it swipe able in mobile

[BSSCommerce-HDL · 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 😍

[NOT1]

how to change menu item color

[BSSCommerce-HDL · 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 😍

[BSSCommerce-HDL · 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 😍

[NOT1]

How to change mega menu width and height

[BSSCommerce-HDL · Accepted solution]

@NOT1 You can try with this code: 

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

[BSSCommerce-HDL · 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 😍

[NOT1]

how to reduce multicolumn space

[BSSCommerce-HDL · 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  😍