Change color on static pages (Theme: Craft), like privacy policy etc.

Store Design
1

Hey experts,

working on my shop to go online soon. I’m using the “Craft” theme and have customized the color scheme to my liking. Unfortunately, the theme does not apply the color scheme changes to static pages like the privacy policy, cancellation policy, and even pages like “About Me,” etc. These pages still show the standard color scheme of “Craft.”

I’ve already looked for help via AI, but manual CSS changes don’t seem to take effect (or maybe I did something wrong). Who can help? (I’m a beginner in coding but can follow step-by-step instructions well.) Thank you so much.

2

To change the background color of static pages like the Privacy Policy in the Craft theme, add custom CSS. In Shopify, go to Online Store > Themes > Customize > Theme settings > Custom CSS, or in WordPress, navigate to Appearance > Customize > Additional CSS. Then, insert the following code:

css
.template-page { background-color: #f4f4f4; }

Replace #f4f4f4 with your preferred color. If this doesn’t work, inspect the page using developer tools to find the correct class. Need further customization? Q&A Creative can help with theme modifications! :rocket:

3

Hey @KathaT ,

Hope you’re doing fantastic!

As a beginner coder, you’ll likely need a targeted CSS approach that specifically addresses these static pages. Here’s a step-by-step solution:

  1. First, we need to identify the class or ID that’s specific to these static pages. Using your browser’s inspect tool:
    • Right-click on any static page and select “Inspect” or “Inspect Element”
    • Look for a unique class or ID in the body tag (often something like .page-template, .privacy-policy, or .static-page)
  2. Create a custom CSS snippet that targets these static pages. Try something like:
.page-template, .privacy-policy, .static-page {
  /* Copy your color scheme values here */
  --primary-color: #YOUR_PRIMARY_COLOR;
  --secondary-color: #YOUR_SECONDARY_COLOR;
  --text-color: #YOUR_TEXT_COLOR;
  /* Add any other color variables your theme uses */
}

/* You might need to target specific elements more directly */
.page-template h1, .privacy-policy h1, .static-page h1 {
  color: var(--primary-color);
}

/* Target links, buttons, backgrounds as needed */
.page-template a, .privacy-policy a, .static-page a {
  color: var(--primary-color);
}
  1. Add this custom CSS through your theme’s customizer or custom CSS section. Most e-commerce platforms have a section for adding custom CSS without editing theme files directly.
  2. If you can’t find where to add custom CSS, look for:
    • Theme options → Advanced → Custom CSS
    • Appearance → Customize → Additional CSS
    • Settings → Theme → Custom code or CSS

If this doesn’t work, you might need to check if your theme has separate template files for static pages that need to be edited. Let me know how this goes or if you need more specific guidance based on your e-commerce platform!

Thanks,
Shubham | Untechnickle

4

This is a really common gotcha with the Craft theme, so you’re not doing anything wrong :+1:

In Craft (and most OS 2.0 themes), policy pages and standard pages don’t always inherit the active color scheme, even though sections do. That’s why your homepage and sections look correct, but Privacy Policy / About pages fall back to the default styles.

Why your CSS might not be working

Those pages usually use different wrappers and CSS variables (like --color-foreground, --color-background) that aren’t overridden globally unless you target them very specifically. So a normal CSS rule often looks like it “does nothing.”

The reliable CSS approach

Instead of trying to restyle every page type individually, override the theme color variables globally. For example, in base.css (or Custom CSS):

:root {
  --color-background: 255, 255, 255; /* background */
  --color-foreground: 0, 0, 0;       /* text */
}

If Craft is using multiple schemes, you may also need:

.color-background-1,
.color-background-2 {
  --color-background: 255, 255, 255;
  --color-foreground: 0, 0, 0;
}

That forces all static pages (policies, About, etc.) to match your chosen scheme without editing multiple templates.

Easier option (no CSS)

I also made an app called Easy Edits:
https://apps.shopify.com/easy-edits

It lets you visually click on those policy pages and change colors directly — no code. You can also just describe the change and have the AI apply it, like you’re talking to a person. It’s especially useful when themes like Craft behave inconsistently across page types

5

Hi, @KathaT
Can you share your store url? I will give you a step by step instruction.

6

Hi,

Hope this will help

  • Craft theme doesn’t auto-apply color schemes to static pages
  • Check the page template used by those pages and then set the color scheme inside the page’s main section

If the theme still ignores your colors, then CSS will work.

CSS example

.template-page {
  background-color: var(--color-background);
  color: var(--color-foreground);
}

If links still look off:

.template-page a {
  color: var(--color-accent);
}