Simple Theme help changing color of product pages from a specific collection

Solved
Highlighted
Tourist
6 0 0

Hi All,

 

As the title states, I need help changing the color of my product pages inside my collection called protector line.

I have already changed all the colors I needed on my collection page but now when I enter the product page the color changes back to white which is currently set for the rest of my store.

 

I am not expecting help with ALL of the fonts to be changed, as I can figure those out like I did with the collection page. I just can't figure out the product page only. (EX: if collection.handle == 'protector-line') and the code under only modifies that specific collection page.

 

Store: https://km-merchandise.com/collections/protector-line/products/protector-winter-beanie-red-edition

0 Likes
Astronaut
1014 131 241

In your product.liquid you can use a forloop to cycle through all the collections the product belongs to, then use an if statement and assign a boolean variable to true based on if you can find that collection. So you could do like:

{% assign protector_line = false %}
{% for collection in product.collections %}
  {% if collection.handle == "protector-line" %}
    {% assign protector_line = true %}
  {% endif %}
{% endfor %}

{% if protector_line %}
<style>
body {
background-color: #000;
}
</style>
{% endif %}
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Tourist
6 0 0

So in your code you changed the background color, what if I were to go more specific as in (.product-single__title), how would I implement that into what you wrote for me?

 

You also use (projector_line) is that just an example name for a specific product ? I'm assuming that was just a mistake and you meant protector_line.

0 Likes

Success.

Astronaut
1014 131 241

So in between those style tags you can add any css you want, and it will only apply to product pages if the product is in your Protector Line collection. 

 

Given your example class, you could change any property of the title:

 

{% assign protector_line = false %}
{% for collection in product.collections %}
  {% if collection.handle == "protector-line" %}
    {% assign protector_line = true %}
  {% endif %}
{% endfor %}

{% if protector_line %}
<style>
body {
background-color: #000;
}
.product-single__title {
color: white;
font-size: 20px;
font-weight: bold;
}
</style>
{% endif %}

This would make your title white, font-size 20px (which is actually smaller than your current text, just an example), and your font bold.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Astronaut
1014 131 241

Yes, it was a mistake, my apologies, let me clear that up in the code

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Tourist
6 0 0

Ninthony,

Thank you for your help, have a great day!

0 Likes
Astronaut
1014 131 241

No problem, I also had an extra curly brace in there you might want to get rid of. I corrected the code.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like