Changing page color

Tourist
6 0 1

I need to change the background color on my "about" page only.

I am using the Brooklyn theme but imagine the info is the same across all the themes.

 

I've seen older posts on this subject with links that are broken now.

An older post on this topic

Philip gave some links like this one below that doesn't work anymore.

He recommended changing the CSS file.

https://docs.shopify.com/themes/customization/colors-images-and-video/use-different-backgrounds

And this one, no longer works

https://docs.shopify.com/themes/customization/colors-images-and-video/use-different-backgrounds#targ...

 

Can a member of the staff give us newer links to info on editing the CSS file and / or the simplest way to change the background color of a single page, like the "About Us" page.

0 Likes
Shopify Staff
Shopify Staff
380 44 80

Hello.

 

My name is Lizzy. I'm one of the Gurus on the support team at Shopify.

 

There are a few ways you could adjust the background of a single page to be different than the rest of your site.

 

Option 1) I found this forum post and also this one, which explain two different methods of adjusting the background of a page using CSS and if statements based on the page's title or handle. As these are about different themes I tested the options on Brooklyn. To get the pages background to update you can add the following code to your page.liquid file, found under Templates.

 

id="{% if page.handle == 'yourpagehandle' %} about-us{% endif %}"

 

This is where you'll want to input it. You can adjust the id, in this case I've used about-us, but it can be most words that start with a lowercase letter. The page handle is what appears in your URL after .com


01-53-fntwi-ygmuy

 

Then you can add the CSS rule to your timbre.scss file.

 

#about-us {
background-color: colourofyourchoice;
}

I typically suggest adding rules to the end of the file, so that ones you've created are easy to find if you need to adjust them in future. This way they're also less likely to affect any existing rules.


01-55-jccy7-emjad

 

Option 2) If you think you'd like to use the same page background for several different pages you could look into setting up an alternate page template. This guide explains how to do that. Once you've created the alternate template, you can copy all of the code from the original page.liquid and add a new id.
01-04-kutr2-sahf8

You can then use the same method as above to add the CSS rule to your .scss file. Just make sure that the id you use matches the one you've set up in the page file. Once you have an alternate template created it will appear here on your pages in the admin. For any page you'd like to have this background you can then just select the template.

 

Before making any changes to the theme code I always like to suggest duplicating your theme. You can do this by going to Online Store>Actions>Duplicate. Just in case.

 

Option 3) If you're just looking to change one page, another simple way to change the background of the page content is by adding a style tag into the page's HTML section. This screenshot explains how to do that. Your pages aren't backed up with the theme, so I would suggest testing this out before applying to a page you've already set up.

 

I know I've sent a few different options here, please don't hesitate to let me know if you have any questions about what I've said!

 

Thank you,
Lizzy

Lizzy | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
New Member
2 0 0

Hi Lizzy, 

 

Option 3 is very useful, I wast just wondering if you know what to add to the code as colour if it's a very specific colour. Is it possible to use a hex code? 

I want to change the background color of one page to #c9a48e

Cheers

0 Likes
Shopify Staff
Shopify Staff
380 44 80

Hey @tsaroo!

 

I'm glad you found the solution helpful!

 

Absolutely, you can use a hex code by simply replacing the name of the colour. So in this screenshot, you would replace "black," that is underlined, with your hex code.

 

01-16-yybzg-1nqkd

 

Let me know if you have any questions while getting that set up!

 

Lizzy

Lizzy | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
New Member
1 0 0

Hello - I've tried option 1 but cannot get it to work. It seems so simple yet I can't. Attached are two screenshots. Can you kindly help?Screenshot 2019-07-27 18.31.12.pngScreenshot 2019-07-27 18.30.56.png

0 Likes
Shopify Staff
Shopify Staff
380 44 80

Hey, @mps2020!

 

It looks like you're trying to adjust the background of your collection page, is that right? If so, you will need to modify these steps a bit, as what I explained above will only work for pages. This is because pages and collections have a different template file that they pull from. This means that your collection pages won't be looking for any information from the pages template.

 

Depending on the theme that you're using you may be able to replicate the steps in the collection template, however I would strongly suggest duplicating your theme so that you have a safe spot to test things out in! This page explains how you can do that.

 

Let me know if you have any questions about what I've said here!

 

Lizzy

Lizzy | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
New Member
1 0 0

Hey @Lizzy Lizzy, thanks for the help here. I wanted to know if your able to tell me how can i do this to collection. 

 

I have a men collection and a female collection and I want each collection to have an individual background color. Hope you can help me :) 

0 Likes
Shopify Staff
Shopify Staff
380 44 80

Hey @Silias!

 

That's a great idea! Will these colours match up with other areas of your site as well? As you're working on the design of your store, I think you might find this course from the Shopify Academy helpful. It's all about store design!

 

The steps to have unique backgrounds for a collection will vary depending on which theme you are using. Generally, you will want to do something similar to Option 2 in my original post by creating multiple collection templates, each with a different background colour. Then you will want to select the correct one from within your collections in the admin.

 

This page here has the instructions for creating an alternate template.

 

As I mentioned above, I recommend duplicating your theme before making any changes to the code so that you have a backup. If you are using a Shopify developed theme I may be able to reach out to out to our themes team for you to see if they could set this up in your theme! Let me know if you'd like me to start that process for you!

 

Lizzy

Lizzy | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
New Member
1 0 0

Hi lizzay i am so thankful that you gave a code to change page color i choosed option 3 and it worked but my question is what to do if we want to change half page color white and half colorful or if want to make left part color in vertical and half white in other half or some image info graph

0 Likes