Creating a custom 'Badge' using tags for offers

Solved

Creating a custom 'Badge' using tags for offers

KB24
Excursionist
26 3 17

Hello,

 

I'm using DAWN theme.

 

I have added some code regarding custom badges following some tutorials as I don't have knowledge of coding myself, it works fine but I was wondering if there was a way to improve it so things happen automatically.

 

First I added these offers into card-product.liquid

KB24_0-1718577311139.png

Then to add colour to the badge I added the following code to component-card.css

KB24_1-1718577381148.png

Now with that small piece of code I can add a tag to whatever product like '2-for-£3' and a nice purple badge appears on the product CARD.

KB24_2-1718577671032.png

 

The problem is if I want to create a NEW offer, like 5 for £50 which isn't in the code, I have to go into the code and create a new line for it. I'm wondering if there's a code for badges that reads a certain starting word and creates a badge automatically, for example my word is OFFER, if I create a tag that says 'OFFER - 5 for £50', the code reads offer and knows to create a badge with the text that comes after.

 

Like instead of 'if product tag contains' maybe 'if product tag starts with'. Is that possible?

 

Also those badges appear on product CARDS but not the product PAGE, how do I get them to show up on the product pages as well?

 

Accepted Solution (1)

AnneLuo
Shopify Partner
1290 227 262

This is an accepted solution.

Hi, @KB24 

I can help you with it. So I need to access your store as a collaborator if possible. 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

View solution in original post

Replies 5 (5)

AnneLuo
Shopify Partner
1290 227 262

This is an accepted solution.

Hi, @KB24 

I can help you with it. So I need to access your store as a collaborator if possible. 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

KB24
Excursionist
26 3 17

Thanks Anne! It works flawlessly, I can type whatever I need to, like 'best seller' 'New' or any offer I want without needing to edit the code

AnneLuo
Shopify Partner
1290 227 262

Now that we have only added OFFER, you can list the prefixes you want to add and I will help you put them in the code. Afterwards, all you need to do is just configure the product tag.

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

HELDERWRLD
Pathfinder
150 0 8

Hello @AnneLuo 
Can you also tell me how can i also create a badge?

I want a badge like this: Screenshot 2024-08-30 at 6.39.01 PM.pngScreenshot 2024-08-30 at 6.38.51 PM.png

website: www.diversusoficial.com
pass: diversusoficial

rsl2
Visitor
2 0 0

What tutorial did you use? I'm looking to do this same thing and can't seem to find any instructions?