Change The Design Of A Collection

New Member
2 0 0

I am looking to desgin a collection on my Shopify site differently than the other collections and the rest of the site.

I have found where you can change the template already and how to apply this to the collection.  What I am looking to do is change the colors and header, not so much the template on a specific theme.  Any resources around this would be very welcomed!  Thanks in advance.

0 Likes
Shopify Staff
Shopify Staff
283 0 45

Hi Sarah!

Alongside creating different templates for different collections, you can create different theme.liquid templates to effect the header.

Here is some documentation on how it works. Essentially, you will make a new layout file, change the color on the header in the HTML code, then prompt your alternate collection template to use the new layout file by adding the reference code that looks like this:

<!-- loads the templates/alternate.liquid template -->
{% layout 'alternate' %}

That would tell the collection to use the new layout instead of the standard one. I think that is exactly what you need for your customization!

I hope that helped! Happy Selling! :)

Hugh

Happy selling! :)
0 Likes
Shopify Expert
9796 91 1551

Using different layouts / templates could be overkill for something simple like a colour change to the header. Gota few more specifics on what you'd want to adjust?

For example you could add the collection handle as a class on the body:

<body class="{% if template contains 'collection' %}collection-{{ collection.handle }}{% endif %}">

Which might output something like this:

<body class="collection-books">

Then in your css file you add something like so:

/* makes the header nav red on books collection */
.collection-books #Header nav{background-color:red} 

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
1 Like
New Member
2 0 0

Thank you!  This helps a lot.  I would like to just brand a page a little differently, nothing to major mostly like I mentioned above a new header and different colors.

0 Likes
New Member
1 0 0

hello,

 

I cannot seem to get this to work, can you elaborate a little more?

 

I cannot find those sections in the theme liquid to edit

0 Likes