How do I change the background colour for the PAGE sections? Using Shopify free theme "origin"

Store Design
1

I think I’m going to go completely bonkers here.

Working with the Shopify free theme “Origin” and I’m trying to change the colour of the page section. I want to apply color scheme 2, but it’s not applying only to the page sections. I don’t have the option to select a colour scheme for this section either.

I’d like for the entire theme to be black and white, but it won’t let me change that gross beige color scheme 1. I know there’s got to be a way to do this! Can anyone point me in the direction of the code I need to make this change?

download-1.png
download-1.png2822×916 102 KB

3 Likes
2

Hi @Dreamcatcherweb

Would you mind sharing your store URL? Thanks!

3

@Dreamcatcherweb , Can you kindly share your store link with us? We will check it and suggest you a solution if possible.

4

Hello @Dreamcatcherweb

If you’re looking to apply background colors block-wise, updating the schema in the section’s .liquid file is an effective way to introduce background settings that can be managed from the theme editor.

Here’s a breakdown of how you can do this:

  1. Edit the Section Schema: In the .liquid file for the section you want to change, you can add a new color setting in the schema. This will allow you to control the background color via the theme customizer.

    For example, open the relevant .liquid file (e.g., sections/page-sections.liquid) and add the following code to the schema:

Apply the Background Setting via CSS: Once the color setting is added, you can apply it in the CSS by targeting the section ID. Use inline CSS in the .liquid file to dynamically set the background color based on the user’s selection in the theme customizer:

exertweb_0-1726933479331.png
exertweb_0-1726933479331.png626×310 3.17 KB

Managing via Section ID: By adding the background color settings to the schema, you can easily manage the background colors for each section in the theme editor. Each section’s ID can then be used to apply specific styles using CSS or inline styles, giving you control over individual block background colors.

exertweb_1-1726933533632.png
exertweb_1-1726933533632.png1208×110 3.1 KB

This method allows for more flexibility and keeps everything manageable from the theme’s customizer.

Let me know if you’d like further clarification!

5

Hello @Dreamcatcherweb
Our team is ready to help you.
Please share your website URL so that we can check and assist you.

6

Hey there! Thanks for offering to take a look.

thedreamcatchersweb.ca

the storefront password is piglem

7
  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before and press ‘Save’ to save it
  • Here is the result you will achieve:

BSSTekLabs_0-1726934814709.png
BSSTekLabs_0-1726934814709.png1920×544 21.1 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
8

Thanks for the info, check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

section#shopify-section-template--22703656960022__main {
     background: #000;
}
section#shopify-section-template--22703656960022__main * {
    color: #fff;
}

And Save.

Result:

Made4uoRibe_0-1726934941121.png
Made4uoRibe_0-1726934941121.png1261×617 22.2 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
9

Thank you so much! That did the trick.