Solved

How can I add a 'More Colours' badge to Dawn Theme products?

sofiab66
Excursionist
15 1 0

I need a badge (minimal, bottom middle, white background, black copy) on all my products listed on Collection Pages that state 'MORE COLOURS' so that buyers can see that there are more colours available without having to click through.

 

I know there is simple code I can incorporate. Please can someone help as I've been trying to doctor other bits of code without success! Tearing my hair out. Please help before I turn bald...

Accepted Solutions (3)
ThePrimeWeb
Shopify Partner
1820 514 389

This is an accepted solution.

Hey @sofiab66,

If that's the case, then you should paste it only in the collections template. If you want it all around the site, then you can paste it in the settings for it to affect globally.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

sofiab66
Excursionist
15 1 0

This is an accepted solution.

You are the best!!! THANK YOU SO MUCH!!

View solution in original post

ThePrimeWeb
Shopify Partner
1820 514 389

This is an accepted solution.

Regardless, if you are going to proceed anyway, I did find a little quick hack that would hide the colours for you regardless of what page you're in. It works if every product title has the word 'Palestine' in it.  You don't need the code I just gave you above.

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
ABOVE the tag "</body>" tag paste the following. Screenshot attached for reference.

 

{% if template.name == 'collection' or template.name == 'index' %}
	<script>
		const cardMediaElements = document.querySelectorAll('.card--media');

		cardMediaElements.forEach(cardMedia => {
		  const contentLink = cardMedia.querySelector('.card__content .card__heading a');
		  if (contentLink && contentLink.text.toLowerCase().includes('palestine')) {
			const cardInner = cardMedia.querySelector('.card__inner .card__content');
			cardInner.style.display = 'none';
		  }
		});
	</script>
{% endif %}

 

 

Screenshot for reference

ThePrimeWeb_2-1711625207623.png

 

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 46 (46)

ThePrimeWeb
Shopify Partner
1820 514 389

Hey @sofiab66,

Can you share the store link for me to take a look. Also maybe a screenshot of your expectations would be nice.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
sofiab66
Excursionist
15 1 0
sofiab66
Excursionist
15 1 0

Or maybe with '+ COLOURS'

ThePrimeWeb
Shopify Partner
1820 514 389

Hey @sofiab66,

Paste this in the Custom CSS box in the Theme Customizer -> Settings (To display "More Colours")

.card--media .card__inner .card__content:before {
    content: 'MORE COLOURS';
    color: #222;
    background-color: #fff;
    height: fit-content;
    width: fit-content;
    padding: 0 10px;
    border-radius: 15px;
    position: absolute;
    bottom: 10px;
    right: 50%;
    transform: translate(50%, 0)
}

 

Paste this in the Custom CSS box in the Theme Customizer -> Settings (To display "+ Colours")

.card--media .card__inner .card__content:before {
    content: '+ COLOURS';
    color: #222;
    background-color: #fff;
    height: fit-content;
    width: fit-content;
    padding: 0 10px;
    border-radius: 15px;
    position: absolute;
    bottom: 10px;
    right: 50%;
    transform: translate(50%, 0)
}

 

You should paste it here, 

ThePrimeWeb_0-1705928043478.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
sofiab66
Excursionist
15 1 0

Thank you so much for your response - Really appreciate your help.

 

I will try and paste this in - Just one quick question before I do:

Do I paste this in just on my Collections template pages where I want it to appear?

 

Many thanks!

Sofia 🙂

ThePrimeWeb
Shopify Partner
1820 514 389

This is an accepted solution.

Hey @sofiab66,

If that's the case, then you should paste it only in the collections template. If you want it all around the site, then you can paste it in the settings for it to affect globally.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
sofiab66
Excursionist
15 1 0

How would I do that? Only to appear on the collections pages - do I have to go in to 'edit code'?

 

I did try and change it in the CSS custom styles in the settings area like you suggested but it wouldn't let me save it:

 

Screenshot 2024-01-24 at 12.15.04.png

sofiab66
Excursionist
15 1 0

Could it also be 70% smaller and with a thin black border?

ThePrimeWeb
Shopify Partner
1820 514 389

Hey @sofiab66,

Maybe instead do this, 
Go to your theme and click on the "..." button and select "Edit Code" as shown below,

ThePrimeWeb_1-1706099516041.png

 


Then look for "theme.liquid" in the "Layout" folder, and add the following code right after the tag that says "<head>"

ThePrimeWeb_0-1706099424846.png

    {% if template.name == 'collection' %}
      <style>
        .card--media .card__inner .card__content:before {
            content: '+ COLOURS';
            color: #222;
            background-color: #fff;
            height: fit-content;
            width: fit-content;
            padding: 0 10px;
            border-radius: 15px;
            position: absolute;
            bottom: 10px;
            right: 50%;
            transform: translate(50%, 0) scale(0.7);
            border: 1px solid black;
        }
      </style>
    {% endif %}



Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
sofiab66
Excursionist
15 1 0

That works brilliantly with the individual collections but I need it to work on the Home Page collection as well and on the list of collections - do I just paste the same in their liquid pages?

ThePrimeWeb
Shopify Partner
1820 514 389

This should work, it's the same thing but it's checking if "template.name == index or if it's a collection" which is homepage and collection page.

    {% if template.name == 'collection' or template.name == 'index' %}
      <style>
        .card--media .card__inner .card__content:before {
            content: '+ COLOURS';
            color: #222;
            background-color: #fff;
            height: fit-content;
            width: fit-content;
            padding: 0 10px;
            border-radius: 15px;
            position: absolute;
            bottom: 10px;
            right: 50%;
            transform: translate(50%, 0) scale(0.7);
            border: 1px solid black;
        }
      </style>
    {% endif %}

  

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
sofiab66
Excursionist
15 1 0

This is an accepted solution.

You are the best!!! THANK YOU SO MUCH!!

ThePrimeWeb
Shopify Partner
1820 514 389

No problem @sofiab66, Good luck with your store!

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
sofiab66
Excursionist
15 1 0

Hi there 'ThePrimeWeb',
I hope you are well…
I wondered if you could help again as I need to have one collection without those '+colours' tag - is there any way you can do this at all? The collection I need exempted is called 'Palestine Collection' - is there any way to build a conditional code in to that previous but of coding at all?

ThePrimeWeb
Shopify Partner
1820 514 389

Hey @sofiab66,

 

This is a tricky one. 

 

1. I can hide it when it's in it's own collection page. (https://www.feelsgoodsloganwear.com/collections/palestine-collection)

2. But I can't hide it when you are in the all products page (https://www.feelsgoodsloganwear.com/collections/all)

 

Reason being, when you're in the individual collection page, there's that indicator of what collection this is. But when you're in the all products page, the actual collection it belongs to is 'ignored', so all products there are treated equally. For it to work in the all products page, you would have to go into your backend and then build a whole new logic to start checking collection names in the all products page. 

 

I'll give you the code to hide it in the individual collection page at least. 

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
html:has(link[href="/collections/palestine-collection.atom"]) .card--media .card__inner .card__content:before {
    display: none !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1711623518928.jpeg

 

 

Just a little heads up, I wouldn't sell this if I were you. Gray area on shopify, it could get your store banned. 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
sofiab66
Excursionist
15 1 0

Thanks for the heads up - have you heard of stores being banned for selling collateral such as this?

 

ThePrimeWeb
Shopify Partner
1820 514 389

Yeah plenty. Basically if you're selling something that is taking advantage of a current crisis or situation, you are likely to get banned. 

 

During covid, all the stores selling masks, sanitizers, etc.. were banned (You weren't banned if you had been selling these things way before covid). Before covid there was a huge forest fire in australia, people were selling merch regarding that and they all got banned, etc.. There's actually many examples, I just can't remember all of them off the top of my head.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ThePrimeWeb
Shopify Partner
1820 514 389

This is an accepted solution.

Regardless, if you are going to proceed anyway, I did find a little quick hack that would hide the colours for you regardless of what page you're in. It works if every product title has the word 'Palestine' in it.  You don't need the code I just gave you above.

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
ABOVE the tag "</body>" tag paste the following. Screenshot attached for reference.

 

{% if template.name == 'collection' or template.name == 'index' %}
	<script>
		const cardMediaElements = document.querySelectorAll('.card--media');

		cardMediaElements.forEach(cardMedia => {
		  const contentLink = cardMedia.querySelector('.card__content .card__heading a');
		  if (contentLink && contentLink.text.toLowerCase().includes('palestine')) {
			const cardInner = cardMedia.querySelector('.card__inner .card__content');
			cardInner.style.display = 'none';
		  }
		});
	</script>
{% endif %}

 

 

Screenshot for reference

ThePrimeWeb_2-1711625207623.png

 

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
sofiab66
Excursionist
15 1 0

My God you are a genius - it worked! THANK YOU!!!

sofiab66
Excursionist
15 1 0

Thanks for your solution - I appreciate it.

I just wondered if you had any knowledge of integrating TikTok with Shopify at all and whether there were any free apps to do that with?

ThePrimeWeb
Shopify Partner
1820 514 389

I understand you completely, but in the eyes of a big platform like Shopify, it's easier to shut them all down than to go and filter out who's taking advantage and who's doing it for good reasons. There are people who started the Merch store for the fires in Australia to really give back to the victims, animals, and to cover any other expenses, but there were also people who just came in to earn a quick buck. It wasn't like one or two people, there were thousands of new stores that opened for this. If you verify each one individually, I think everyone would've earned whatever they needed to before the whole verification process is over.

 

My previous reply has the solution you were looking for, if you are to go ahead with it anyway.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
sofiab66
Excursionist
15 1 0

Thank you for both your solution which was amazing and your feedback!!

ThePrimeWeb
Shopify Partner
1820 514 389

Honestly, never tried it, but I know Tiktok has their own Shopify app to help integrate with Tiktok ads and such.

 

Apart from that, I found

https://apps.shopify.com/optima - Integrates tiktok shop and shopify for upto 50 products for free

https://apps.shopify.com/reputon-tiktok-gallery - Tiktok gallery for free

 

I never tried these, so you would have to test it and see. Normally I would just download all the free options and see which one suits me best. Some of the paid ones have free limited versions, but if I don't need to cross the limits, then I can stick to the free versions. 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
sofiab66
Excursionist
15 1 0

Yep - I agree - I only want to put a few products in there so don't want to commit to a huge monthly fee…

Thank you - as they say in Glasgow where I'm from - you're Pure, Dead, Brilliant!! 🙂 One of my t-shirts lol

 

RPTrix101
New Member
23 0 0

Hi @ThePrimeWeb 

 

i tried this, and it worked great for my store, Thank you soo much 

 

i need a help with the same code, actually in mobile view its showing like this, rather than showing in single line and i tried with some sizing code , but i am not able to achive it to show in single line, 

Please help

RPTrix101_0-1711968991875.png

 

ThePrimeWeb
Shopify Partner
1820 514 389

You can use this @RPTrix101,

 

    {% if template.name == 'collection' or template.name == 'index' %}
      <style>
        .card--media .card__inner .card__content:before {
            content: '+ COLOURS';
            color: #222;
            background-color: #fff;
            height: fit-content;
            width: fit-content;
            padding: 0 10px;
            border-radius: 15px;
            position: absolute;
            bottom: 10px;
            right: 50%;
            transform: translate(50%, 0) scale(0.7);
            border: 1px solid black;
            white-space: nowrap;
        }
      </style>
    {% endif %}

 

Or whichever code you used, just add the 'white-space: nowrap;' in it.

ThePrimeWeb_0-1711969306217.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
RPTrix101
New Member
23 0 0

Thank you soo much it worked, Can we also decrese the space here in marked part

Thank you soo much for the help, really great 🙂

RPTrix101_0-1711970014978.png

 

ThePrimeWeb
Shopify Partner
1820 514 389

Reduce the 10px value to whatever you like, 5px, 0px, or anything in between like 7px, 3px. Any value.

ThePrimeWeb_0-1711970148394.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
RPTrix101
New Member
23 0 0

Yes actually i tried the same thing 

RPTrix101_0-1711970452983.png

 

 

But for some reason its now going more down

 

RPTrix101_1-1711970474807.png

 

ThePrimeWeb
Shopify Partner
1820 514 389

You can go negative value also, -1px, -2px, -3px, etc...

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
RPTrix101
New Member
23 0 0

ohh yes it worked, totally forgot that we can go minus aswell 🤣

 

Thank you soo muchh

RPTrix101
New Member
23 0 0

i wanted to know can we add badge like this to menu item? 

 

RPTrix101_0-1711973105733.png

 

ThePrimeWeb
Shopify Partner
1820 514 389

@RPTrix101,

 

 

<style>
a#HeaderDrawer-phone-covers-chain-covers,
a#HeaderDrawer-phone-covers-hard-covers {
    position: relative;
}

a#HeaderDrawer-phone-covers-chain-covers:after,
a#HeaderDrawer-phone-covers-hard-covers:after {
    content: 'HOT';
    font-size: 10px;
    margin-left: 10px;
    background-color: red;
    padding: 5px;
    border-radius: 5px;
    color: white;
    font-weight: 600;
    
}

a#HeaderDrawer-phone-covers-hard-covers:after {
    background-color: green;
    content: 'NEW';
}

</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
RPTrix101
New Member
23 0 0

Where to add this code? 

ThePrimeWeb
Shopify Partner
1820 514 389

Same place in theme.liquid under the <head> tag

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
RPTrix101
New Member
23 0 0

Thankk youu soo muchh for the help ☺️

 

About the previous topic , can we exclude the badge to NOT show it on collection images? need only to show on products 

 

1000061384.png

ThePrimeWeb
Shopify Partner
1820 514 389

Change the first code to this @RPTrix101 

    {% if template.name == 'collection' or template.name == 'index' %}
      <style>
        .product-card-wrapper .card--media .card__inner .card__content:before {
            content: '+ COLOURS';
            color: #222;
            background-color: #fff;
            height: fit-content;
            width: fit-content;
            padding: 0 10px;
            border-radius: 15px;
            position: absolute;
            bottom: 10px;
            right: 50%;
            transform: translate(50%, 0) scale(0.7);
            border: 1px solid black;
            white-space: nowrap;
        }
      </style>
    {% endif %}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
RPTrix101
New Member
23 0 0

Hi @ThePrimeWeb 

 

i tried this, but its not working for me , not able to understand the issue , why its not working , Please help me out

 

ThePrimeWeb
Shopify Partner
1820 514 389

It's working fine @RPTrix101. Clear your cache, try another browser, etc..

ThePrimeWeb_0-1712056225207.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
RPTrix101
New Member
23 0 0

No i was talking about the , header menu badge code, sorry for misunderstanding 

ThePrimeWeb
Shopify Partner
1820 514 389

Well you haven't pasted the code, so I cannot tell you what went wrong @RPTrix101 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
RPTrix101
New Member
23 0 0

<style>
a#HeaderDrawer-phone-covers-chain-covers,
a#HeaderDrawer-phone-covers-hard-covers {
position: relative;
}

a#HeaderDrawer-phone-covers-chain-covers:after,
a#HeaderDrawer-phone-covers-hard-covers:after {
content: 'HOT';
font-size: 10px;
margin-left: 10px;
background-color: red;
padding: 5px;
border-radius: 5px;
color: white;
font-weight: 600;

}

a#HeaderDrawer-phone-covers-hard-covers:after {
background-color: green;
content: 'NEW';
}

</style>

 

Used this given code

ThePrimeWeb
Shopify Partner
1820 514 389

@RPTrix101  Yeah but when I visit your website, I don't see the code added there. You have to check again.

 

Can you show me a screenshot of where you pasted this?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
RPTrix101
New Member
23 0 0

Soo sorry , i have added it now, you can check now

ThePrimeWeb
Shopify Partner
1820 514 389

Nothing to check, it's there

ThePrimeWeb_0-1712066533351.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
RPTrix101
New Member
23 0 0

Hi @ThePrimeWeb Thank you soo much for the help. i see it now, thank a lot for the patience 😄