change color scheme

Store Design

Topic summary

A user working with the Craft theme is unable to change the color scheme for the PAGES section to style #6, specifically the page load background color.

Solutions Provided:

Two community members offered CSS-based solutions:

  • Initial fix: Add custom CSS code to theme.liquid file before the </body> tag to modify the page background color
  • Follow-up adjustment: When the user noticed color differences between the header and body background, an additional CSS snippet was provided to target main#MainContent with background color #FAF8F4

Implementation steps:

  1. Navigate to Online Store → Edit Code
  2. Locate the theme.liquid file
  3. Insert the provided CSS code at specified locations
  4. Save changes

Both responders included screenshots demonstrating the expected results. The discussion appears resolved with working code solutions, though the user has not yet confirmed final implementation.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I would like to change the color scheme of the PAGES section. But even though I change it, the desired changes are not generated (which is scheme style number 6). Currently, I am using the Craft theme and unable to find an option to change page load color. Screenshot is attached for the reference. Thanks.

スクリーンショット 2024-09-07 15.11.58.png
スクリーンショット 2024-09-07 15.11.58.png1440×900 95.4 KB

スクリーンショット 2024-09-07 15.13.50.png
スクリーンショット 2024-09-07 15.13.50.png1440×900 98 KB

page:

https://febo.jp/pages/tu-personalidad-en-tus-manos

https://febo.jp/pages/conoce-mi-historia

2

Hey @FEBO27

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1725691911188.png
Moeed_0-1725691911188.png1416×857 89.4 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

  • Here is the solution for you @FEBO27

  • Please follow these steps:

BSSTekLabs_0-1725694279651.jpeg
BSSTekLabs_0-1725694279651.jpeg400×183 8.28 KB

  • Then find the theme.liquid file.
  • Then add the following code at the before tag and press ‘Save’ to save it.

Copy

Copy

Copy

  • Here is the result you will achieve:

BSSTekLabs_1-1725694279812.png
BSSTekLabs_1-1725694279812.png367×400 65 KB

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

Is there any chance that there will be no color differences in the background (between the top and the body)? Thank you so much

5

Hey @FEBO27

Keep the previous code and add this new code above in the end of theme.liquid file

main#MainContent {
    background: #FAF8F4 !important;
}

RESULT:

Moeed_0-1725710201727.png
Moeed_0-1725710201727.png1886×870 81.7 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like