Shopify themes, liquid, logos, and UX
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?
Solved! Go to the solution
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.
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.
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.
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
What tutorial did you use? I'm looking to do this same thing and can't seem to find any instructions?
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025