Change colours of font on specific collection - Atlantic Theme

Solved
bookieboo
Excursionist
13 0 7

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).

Collection page - mummaboo.png

 

 

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).

product page - mummaboo.png

 

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

UmairA
Shopify Partner
797 80 147

Hey there @bookieboo!

To edit the collection title, you need to edit the collection in the backend you can learn here https://help.shopify.com/en/manual/products/collections/collection-layout#:~:text=Change%20the%20nam....

To make changes to specifically this product, you need to create a new template for this product by duplicating product.liquid (In templates folder). You'll also have to duplicate product-section.liquid (in sections folder). Then add the CSS required to make changes below the new template and finally use the new template on this product.

This will help you https://help.shopify.com/en/manual/products/collections/collection-layout#:~:text=Change%20the%20nam....

Need help with theme customization or to add a new feature? Hire me
Email: umairabbascs@gmail.com
WhatsApp: WhatsApp
Theme customization | Custom coding | Store Setup | SEO Audit | Speed Optimization | Tweaks & Bugs fixing
0 Likes
bookieboo
Excursionist
13 0 7

Thanks for that, but was wanting to edit the colour of the collection title, not the title itself!  

0 Likes
PeanutButter
Shopify Partner
355 67 150

This is an accepted solution.

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:

Screen Shot 2021-01-23 at 11.20.44.png

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

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
0 Likes
PeanutButter
Shopify Partner
355 67 150

@bookieboo did you try my proposed solution?

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
0 Likes
bookieboo
Excursionist
13 0 7

Yes, I did but unfortunately couldn't get it to work! Got very frustrated with it, so will try again another day haha. 

Thank you!

0 Likes
PeanutButter
Shopify Partner
355 67 150

@bookieboo do you still need help solving this issue?  My solution should work and I can help you implement it

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
0 Likes