#HOW TO CHANGE BACKGROUND COLOR ON PAGES UPDATE#
#HOW TO CHANGE BACKGROUND COLOR ON PAGES CODE#

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. The steps to have unique backgrounds for a collection will vary depending on which theme you are using. Hey 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. 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! 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. 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. You can do this by going to Online Store>Actions>Duplicate.

#HOW TO CHANGE BACKGROUND COLOR ON PAGES CODE#

For any page you'd like to have this background you can then just select the template.Д«efore making any changes to the theme code I always like to suggest duplicating your theme. Once you have an alternate template created it will appear here on your pages in the admin. Just make sure that the id you use matches the one you've set up in the page file. You can then use the same method as above to add the CSS rule to your. Once you've created the alternate template, you can copy all of the code from the original page.liquid and add a new id. 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 way they're also less likely to affect any existing rules. 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. Then you can add the CSS rule to your timbre.scss file. The page handle is what appears in your URL after. 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.

#HOW TO CHANGE BACKGROUND COLOR ON PAGES UPDATE#

To get the pages background to update you can add the following code to your page.liquid file, found under Templates.

As these are about different themes I tested the options on Brooklyn.

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. There are a few ways you could adjust the background of a single page to be different than the rest of your site. I'm one of the Gurus on the support team at Shopify.

How to change background color on pages