So I’ve got to say I’m really starting to regret going with Shopify to set up my website. It is not the user-friendly option I was led to believe. The entire process of trying to do even the simplest design changes has been one of the most frustrating experiences of my life.
I’m hoping someone can help me with the Colour Schemes. I’m using the Crave Theme, and I am simply trying to achieve the following:
-
The absolute background of all pages to be white;
-
The colour scheme of elements (eg, Header, Announcement, Image with Text, etc) to be based on the Colour Schemes;
-
Be able to customise the Colour Schemes.
I have been able to set up my brand colours, so I have set the Primary 1, Primary 2, Primary Contrasting, Secondary 1, Secondary 2, and Secondary Contrasting colours. I note the Colour Schemes available are then Accent 1, Accent 2, Background 1, Background 2, and Inverse. There appears to be nowhere, however, where I can set what colours go into those Colour Schemes. It seems like Shopify just arbitrarily chooses what they are (eg, Accent 1 appears to be Primary Colour 1 plus Primary Contrasting Colour, and Background 2 appears to be Secondary Colour 1 and Primary Contrasting Colour), and there’s no way to tell it what you want as your Colour Schemes.
I followed some instructions from a post I found here about editing the base.css file (which I now can’t find to link to, annoyingly), and went through and set all of the Colour Schemes in that file, for example:
.color-accent-1 {
--color-foreground: #fef7ec !important;
--color-background: #6cc4bc !important;
--gradient-background: var(--gradient-base-accent-1);
}
However, that appears to have had zero impact on how Shopify has arbitrarily set the Colour Schemes. Background 1 is not showing as #6cc4bc with #fef7ec, it’s still showing as #6cc4bc with #2d3047 (so, Primary Colour 1 with Primary Contrasting Colour).
I also went into the (for example), page.sw-transparency.json file and made the “color_scheme” accent-2, but the background of the page is still coming up as Primary Colour 2, which is not part of the Accent 2 colours I’ve chosen in base.css.
Can anyone help me achieve what I want? I’m really at my wit’s end trying to get my website to look the way I want. It’s just really not a user-friendly website builder at all.