Creating a custom 'Badge' using tags for offers

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

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

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.

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?

Hi, @KB24

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

1 Like

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

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.

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

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

I want a badge like this:

website: www.diversusoficial.com
pass: diversusoficial

Apologies for the late reply, but you can just use AI now, Google AI Studio is completely free at the moment or ChatGPT, they’re very good at implementing simple features like these. I use products tags to create any offer i want, and the code checks for any specific tag that starts with the words ‘OFFER -’ if there is for example ‘OFFER - 2 for £10’ it will automatically add a pre-styled badge that says ‘2 for £10’. You can even put things like ‘OFFER - Just in!’

Anne (the dev that commented on this post) made it for me but it had it’s restrictions, I’ve just switched over to the NEW 2025 Horizion theme and used Google AI Studio to create these types of simple features and customisations, Google AI’s version is a lot better, I asked it to add a customisation option in Theme Customiser, so I can edit the location and colurs of the badges, just ask it to implenent coding that works with Shopify’s default styles and methods. If you’re new to AI coding, it’ll take a lot of trial and error but you’ll get there, it’s important to give them RULES to follow.