Solved
Hello! I have been trying to edit a particular collection page, and the products that will go into that collection as it's a sub-store within my shop.
Here's the code I've used and inserted into the theme.liquid just before body
<style>
{% if collection %}
{% if collection.handle =='mummaboo' %}
body{background: white;color:#BB724F;}
body a, body div {color: #BB724F !important;}
{%endif%}
{%endif%}
</style>
This has worked well to change some of the colours when I am on that particular collection, and also in the product page in that collection (currently only one product in the collection but will be more later), but still a few areas I'm not sure how to change.
On the collection page for Mummaboo - unsure how to change the colour of the collection title header (circled below).
On the product page within that collection, trying to change the colours of the circled areas - main product title, the background colour of the add to cart button, and the add to wishlist (this last one is not that important, and can stay green if too tricky to change).
Any ideas?? I want to make sure these changes only affect that particular collection, rather than the rest of my site's colours.
Thank you so much!!
My store url is www.bookieboo.com.au
Cheers,
Karly
hi @bookieboo a simple solution would be to add the collection handle to the html <body> class.
So for example, if you have a collection which is called Modern Furniture, your <body> would look something like this:
<body class="other-class other-class2 collection-modern-furniture">With this you can now target a specific collection with css
To do this:
1- Make a copy of your live theme to test the changes there. You should never make code changes in your live theme if you don't know very well would you are doing
2- In you copy of the theme open Layouts/theme.liquid and find the following:
<body
class="
{% if template contains 'contact' %}
template-contact
{% else %}
template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }}
{% endif %}
{% if settings.meta-font == "'Open Sans' sans-serif" %}
font-open-sans
{% endif %}
{% if settings.main-title-uppercase %}
uppercase
{% endif %}
product-grid-{{ settings.product_grid_aspect_ratio }}
"
>(lines 55-70 in the last version of Atlantic theme)
and replace with:
<body
class="
{% if template contains 'contact' %}
template-contact
{% else %}
template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }}
{% endif %}
{% if settings.meta-font == "'Open Sans' sans-serif" %}
font-open-sans
{% endif %}
{% if settings.main-title-uppercase %}
uppercase
{% endif %}
product-grid-{{ settings.product_grid_aspect_ratio }}
{% if template == "collection" %}collection-{{ collection.handle }}{% endif %}
"
>
Now, if you inspect the store's html when visiting a collection, the body should have a class with name collection-{collection-handle}:
In this example my collection is called Furniture so the handle is furniture, and therefore the className is collection-furniture:
if you dont know what a handle is check https://shopify.dev/docs/themes/liquid/reference/objects/handle
Basically is the past part of the url in collections, products, pages, etc...
3. Open you theme.css.liquid and add the end of the file paste the following:
.template-collection.collection-furniture .page-title.collection-title .label {
color: red;
}Of course you will need to replace collection-furniture with collection-your-handle and red with your desired color.
You will have to add a css rule for each collection you want to change the title color
