How can I change the color scheme of my product pages and buttons?

Store Design
1

Afternoon shopify community!

I have a few issues with the colouring on some of my shop pages. I have been using CSS code to change some things but these ones I just cant seem to get around. Maybe someone here is a bit better and could help me with this.

Here are my problem pages:

red = #EC0000

black = #000000

Lewcidity_0-1693144837557.png
Lewcidity_0-1693144837557.png1355×1077 67.3 KB

  1. So for all of my individual product pages they have these white variant boxes and a white “add to cart” button. I would like the variant buttons to be a black box, red outline and red writing BUT when someone selects a variant for it to then switch to red box, black outline and black writing. The “add to cart” box needs to be a black box, red outline and red tex. It would be a bonus if when a new product (and page from it) is created that these settings then follow it.

Lewcidity_1-1693145103708.png
Lewcidity_1-1693145103708.png1416×1313 44.2 KB

Lewcidity_2-1693145136064.png
Lewcidity_2-1693145136064.png1450×1165 34.7 KB

  1. For peoples account address page the “cancel” box is white and so are the “edit” and “delete” boxes. I would like these to be a black box, red outline and red text. Crucially for this one if a new address is added I need these settings to be applied when the new address has been created and added to this sheet as not to break the emersion of the theme.

Lewcidity_5-1693145718492.png
Lewcidity_5-1693145718492.png2288×1188 276 KB

  1. When I select my policy pages from the footer they show up as black and white even when the page has been edited with CSS code as you can see on the left.

Thank you,

Lewis

1 Like
2

Hi @Lewcidity

We only change the policy page and the buttons on the page product, for the address and the customer side we can change that one but it would be base in your shopify plan.

For the mean time this is the polict page.

  • 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:
main#MainContent {
    background: black;
}

.shopify-policy__container * {
    color: #EC0000;
}
  • And Save.

And for the product page.

Same Instruction.

.product-form__input input[type=radio]:checked+label {
    background: #ec0000;
    color: black !important;
}
.product-form__input input[type=radio]+label {
    background: black;
    border: 1px solid #ec0000;
}
quantity-input.quantity {
    background: black;
    border: 1px solid #ec0000;

}
button#ProductSubmitButton-template--16244819460254__main {
    background: black;
    border: 1px solid #ec0000;
}

Result:

Ribe_Dagandara_0-1693148098660.png
Ribe_Dagandara_0-1693148098660.png654×497 9.34 KB

I hope it help.

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

1 Like
3

hi @Made4uo-Ribe ,

Thank you so much for your response once again!

Everything is all good apart from the last one:

Lewcidity_0-1693151366173.png
Lewcidity_0-1693151366173.png1457×1183 64.3 KB

This is how it looks for me after copying the code provided.

Thank you,

Lewis

1 Like
4

Can you put some important on the code.

.product-form__input input[type=radio]:checked+label {
    background: #ec0000 !important;
    color: black !important;
}
.product-form__input input[type=radio]+label {
    background: black !important;
    border: 1px solid #ec0000 !important;
}

Like this.

I hope it help.

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

1 Like
5

Hi @Made4uo-Ribe

You’re out here saving small businesses my friend.

I can’t promise this will be the last time I need your help (lol) but you have been an absolute life saver.

Thank you so much,

Lewis