What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Custom Product Badge in Theme 2.0 - Sense 4.0.0

Solved

Custom Product Badge in Theme 2.0 - Sense 4.0.0

Remoair
Tourist
6 1 4

Hey!

I'm really struggeling here since i updated to Theme 2.0.

Currently on Sense 4.0.0. and trying to add custom badges for my products. 

 

Looking to add "Bästsäljare" and "Nyhet" and "Season Edit". 

 

I have localized where the code is hidden and looked at seven different solutions from the community. Non are working, so help is very welcomed! 

 

Code is at Snippets > card.product.liquid  and looks like this👇🏼

 

 

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

Thank you for anyone having a look at this!

 

Live look: remoair.com

 

Thanks a bunch, M
Accepted Solution (1)

Remoair
Tourist
6 1 4

This is an accepted solution.

Ok I found a quick solution with the help of the replies here. Three easy steps!

 

1. Open the card.product.liquid

 

2. Find the code for badges. Then copy the code for a specific badge that already existed. Green marks my new settings for my new badge. Insert it before 

{%- endif -%}

in the current <div>. 

 

3. Change the code to your liking, green marks the changes i made. The code card_product.tags contains 'NEW' is where you add the tag that you want to use. Make sure that the products later is tagged with the exact same tag, in this case NEW.

{%- elsif card_product.tags contains 'NEW' -%}
<span id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}" class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">Nyhet</span>

 

️ If you want this badge to look different there is more coding that can be done in the section-main-product.css. You can then switch the code color-{{ settings.sale_badge_color_scheme }} to something like color-{{ settings.badge-new }} add it to the .css and make your badge look however you want!

Thanks a bunch, M

View solution in original post

Replies 9 (9)

KetanKumar
Shopify Partner
37445 3664 12119

@Remoair 

try code

<div class="card__badge--new">
  {% for tag in product.tags %}
    {%- if current_tags contains 'NEW' -%}
      <span> NEW! </span>
     {% endif %}
   {% endfor %}
</div>

or

<div class="card__badge--new">
  {% for tag in card_product.tags %}
    {%- if current_tags contains 'NEW' -%}
      <span> NEW! </span>
     {% endif %}
   {% endfor %}
</div>
If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Remoair
Tourist
6 1 4

Just adding this snippet of code did not solve it, but thank you for examples. They helped me find the right solution! 

Thanks a bunch, M
KetanKumar
Shopify Partner
37445 3664 12119

@Remoair 

thanks for your update and support 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

LitExtension
Shopify Partner
4879 1003 1169

Hi @Remoair,

You can follow the instructions below

it will help you to add badges with the tag product.

Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

Remoair
Tourist
6 1 4

This is an accepted solution.

Ok I found a quick solution with the help of the replies here. Three easy steps!

 

1. Open the card.product.liquid

 

2. Find the code for badges. Then copy the code for a specific badge that already existed. Green marks my new settings for my new badge. Insert it before 

{%- endif -%}

in the current <div>. 

 

3. Change the code to your liking, green marks the changes i made. The code card_product.tags contains 'NEW' is where you add the tag that you want to use. Make sure that the products later is tagged with the exact same tag, in this case NEW.

{%- elsif card_product.tags contains 'NEW' -%}
<span id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}" class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">Nyhet</span>

 

️ If you want this badge to look different there is more coding that can be done in the section-main-product.css. You can then switch the code color-{{ settings.sale_badge_color_scheme }} to something like color-{{ settings.badge-new }} add it to the .css and make your badge look however you want!

Thanks a bunch, M
adventmedia
Pathfinder
128 0 33

Can you also use an image for a badge?

Remoair
Tourist
6 1 4

Of that I'm not sure...

Thanks a bunch, M
KetanKumar
Shopify Partner
37445 3664 12119

@Remoair 

i think you have fixed this issue?

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
HELDERWRLD
Explorer
146 0 8

Hello @Remoair 

I tried to do the same on my Dawn theme, but it didn't work (inserted image).
Screenshot 2024-08-08 at 1.17.33 PM.png

 

I want to do like this zegna website, can you help me please?

Screenshot 2023-11-05 at 10.55.35 AM.pngScreenshot 2023-11-05 at 10.56.08 AM.pngScreenshot 2023-11-05 at 10.56.27 AM.png

 

My website: https://diversusoficialsite.myshopify.com/?_ab=0&_fd=0&_sc=1
Password: diversusoficial

Thank you