How do I change colors on various pages using CSS code?

Store Design
, ,

Topic summary

Goal: Apply a site‑wide color scheme (black backgrounds with red text/outlines, red = #EC0000) across Shopify theme pages, beyond what the theme color settings allow. Focus includes login, forms, buttons, links, and policy pages.

Context: Built‑in “theme color maker” was insufficient. Access to the store (URL and password) was shared for review.

Proposed approach: Add custom CSS in the theme’s CSS asset (base.css/style.css/theme.css). Initial rules targeted specific section IDs (banner, product grid, cart items, cart warnings) and button borders to enforce black backgrounds and red text/borders.

Results: Some areas updated successfully (per screenshots). Other areas remained unchanged, including various texts/links, form fields, and policy page content. User asked if code must be placed elsewhere.

Follow‑up changes: More CSS provided for additional section IDs (…__main) and a border for customer buttons. A limitation was noted: one area from the third screenshot cannot be edited because it’s a Shopify base/restricted area.

Status: Partially resolved. More page‑specific selectors are needed. Some elements/pages may be restricted. Screenshots are central to identifying remaining issues. Discussion ongoing.

Summarized with AI on January 21. AI used: gpt-5.
1

Hi, I am seriously losing my mind and getting really frustrated with all the colours I need to change and the lack of ease to do so.

I have already done the whole “theme colour maker” thing and have applied it where it allows me to but there are still sooo many pages that need their colours changing with no option to do this through the original means.

I understand I have to now use the css code to change these pages how I want them to look (I’m not really sure why it has to be this difficult to just change colours) but I cant seem to find a solution that changes everything I need.

I have followed some tutorials on how to change the back ground and text colours but then that doesn’t change the internal hyperlink text colours, buttons, button edges, form fields and their texts and all that stuff.

Lets take the login page as an example.

My whole theme is black background with red text, outlines etc.

For me to change the colours via css it looks to me like i need a piece of code for the “login”, form field main, form field outline, form field text, forgotten password text, sign in box main, sign in box outline, sign in box text, create account text and background main.

Lewcidity_0-1692713223774.png
Lewcidity_0-1692713223774.png2851×1047 56.6 KB

Honestly, if anyone could help me with this and how to proceed with other pages like this it would be such an amazing help.

1 Like
2

Hi @Lewcidity

Maybe I can help. :sweat_smile: Would you mind to share your Store URL website? with password if its protected. Thanks! And please let me know which pages youll like to change and what color?

1 Like
3

Hi @Made4uo-Ribe ,

Thank you for the response.

the URL is: www.onlyomorfia.com

password: Shopify1234

When you see the homepage you’ll understand the vibe I’m going for.

I need everything that isn’t black & red to follow suit. Black backgrounds with red text. Anything that is some kind of box such as a form field or button i would like red text, black main colour then outlined in red again. The red i am using is #EC0000.

Thank you for your help.

4

Thank you for the information. Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
div#shopify-section-template--16244819263646__banner * {
    background: black;
    color: #EC0000;
}
div#shopify-section-template--16244819263646__product-grid * {
    background: black;
    color: #EC0000;
}
div#shopify-section-template--16244819230878__cart-items {
    background: black;
}
.cart__warnings * {
    color: #EC0000;
}
a.button {
    border: 1px solid #EC0000;
}
  • And Save.

i hope it help.

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

1 Like
5

Thank you for this although some things still remain unfixed.

FIXED:

Lewcidity_0-1692716851534.png
Lewcidity_0-1692716851534.png1449×1047 36.3 KB

Lewcidity_1-1692716866549.png
Lewcidity_1-1692716866549.png2346×1044 53.4 KB

UNFIXED:

Lewcidity_2-1692716903015.png
Lewcidity_2-1692716903015.png2324×1048 55.3 KB

Lewcidity_3-1692717983774.png
Lewcidity_3-1692717983774.png2007×1257 198 KB

Lewcidity_4-1692718316383.png
Lewcidity_4-1692718316383.png2507×1505 160 KB

  • POLICY PAGES

Do i just need to paste the code you provided to another place to apply the settings?

Thank you.

1 Like
6

This is for the 1st and 2nd image unfixed. The 3rd image I cant edit that one. Its not allowed to edit base by shopify.

Same Instruction.

div#shopify-section-template--16244819624094__main {
    background: black;
}
div#shopify-section-template--16244819624094__main * {
    color: #EC0000;
}
.customer button:after {
    border: 1px solid #EC0000;
}
section#shopify-section-template--16244819460254__main {
    background: black;
}
section#shopify-section-template--16244819460254__main * {
    color: #EC0000;
}

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

1 Like