Question 11863 in Shopify Question posted in
The Shopify help center can be found here.

Customize Background in Shopify Section (Dawn Theme)

I would like to create three versions of backgrounds that can be set via the section-settings in the Shopify Dawn Theme.

current looks
[1]: https://i.stack.imgur.com/SJWZQ.png

The default theme.liquid defines some global variables:

 --color-base-background-1: 
 {{ settings.colors_background_1.red }}, 
 {{ settings.colors_background_1.green }}, 
 {{ settings.colors_background_1.blue }};

This is accessed at various places in the base.css file

Example:

.color-background-1 {
 --color-foreground: var(--color-base-text);
 --color-background: var(--color-base-background-1);
 --gradient-background: var(--gradient-base-background-1); 
}

Now I would like to use these global variable also in the respective section.css

.background-none{
  color: var(--color-base-background-1);
  background: green;
 }

However this does not produce any results as soon as I use the variable. The color "green" works fine, however the font color does not change as long as I try to use the variable.

Does anyone have an idea how to address this issue?

Tags:

2

Answers


  1. 0

    the color it’s probably being overrided by another class. You can be more specific with your css selectors to override the other class, for example, div.section .background-none.

    Additionally, try to create your own new variables –color-base-background and try to understand why you are using var().

    Login or Signup to reply.
  2. 0

    I had the same question and found the answer, you can change it directly by clicking on "Customize" in the back office of the store > Theme setings > colors
    If you want to create a third option, just copy paste the code of one of the native 2 options, change the name of the variables and add it in base.css, theme.liquid, password.liquid if relevant, and the schemas

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search