Add third background color Dawn Theme

Solved

Add third background color Dawn Theme

jonglaj
Tourist
6 2 0

Hey everybody, I am new to Shopify Programming and I am confused about the structure. 

 

I want to add a third background color for the Dawn Theme, so it can be used in the announcement bar.

 

I figured so far that variables of the theme are stored in theme.liquid  

I added the selection of a new color to settings_schema.json 

Click to expand...
{
"type": "color",
"id": "colors_background_3",
"default": "#F3F3F3",
"label": "t:settings_schema.colors.settings.colors_background_3.label"
},
{
"id": "gradient_background_3",
"type": "color_background",
"label": "t:settings_schema.colors.settings.gradient_background_3.label"
}

to announcement-bar.liquid I added: 

Click to expand...
{
"value": "background-3",
"label": "t:sections.announcement-bar.blocks.announcement.settings.color_scheme.options__3.label"
}

 This works so far. Now to the implementation in the FE, I think I am supposed to change base.css  but I can not wrap my head around where I need to change it. Could someone give me a hint?

Accepted Solution (1)
jonglaj
Tourist
6 2 0

This is an accepted solution.

I figured the solution - it is pretty simple

 

right on top of the base.css , I needed to add following passage. 

 

Click to expand...
.color-background-3 {
--color-background: var(--color-base-background-3);
--gradient-background: var(--gradient-base-background-3);
}

 

View solution in original post

Replies 11 (11)

oscprofessional
Shopify Partner
15950 2385 3094

Hi @jonglaj ,

Which background color you want for announcement bar ? 

share the color also share the store link so i can give you the solution.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
jonglaj
Tourist
6 2 0

Link is : https://in-the-air2022.myshopify.com/admin

 

I would like to try it with #67568c

 

However I'd be also curious to know how to implement it 

jonglaj
Tourist
6 2 0

This is an accepted solution.

I figured the solution - it is pretty simple

 

right on top of the base.css , I needed to add following passage. 

 

Click to expand...
.color-background-3 {
--color-background: var(--color-base-background-3);
--gradient-background: var(--gradient-base-background-3);
}

 

crissbycriss
Visitor
1 0 0

Wish it were that easy, needed to add code in more files besides base.css, I had to look into settings_schema.json, settings_data.json, theme.liquid, en.default.schema.json and any subsequent widget files which can use the new Background 3 color (e.g. image_with_text.liquid). This is for the Ride theme, but I presume the process of adding a Backg 3 color is the same for other themes.

aciel
Shopify Partner
17 1 10

Hi, did you manage to do it ? I have my third background in the colors settings, but I can't apply it to my sections, it doesn't appear.

Sans titre-1.jpgSans titre-1a.jpg

asafari
New Member
12 0 0

But how do I set the color? After adding that there's nowhere in the Theme Editor where that gets added and I can't figure out how to set the color.

oscprofessional
Shopify Partner
15950 2385 3094

@asafari ,

Share your issue and URL.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
asafari
New Member
12 0 0

Hi, I am using the Refresh theme so maybe that's why it's not working. After I add the code nothing happens, I have of course haven't assigned a color to BG3 yet but I don't where to do that either...
Normally you go in the Shopify Editor and you can change the theme settings but this code doesn't add anything to the editor and my attempts to manually add a color to the code didn't work either.

oscprofessional
Shopify Partner
15950 2385 3094

@jonglaj ,

Password ? please share

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

oscprofessional
Shopify Partner
15950 2385 3094

@jonglaj ,

Try this code 

.announcement-bar.color-background-1.gradient {
    background: #67568c;
}

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->base.scss.liquid

 

If it will not work then share the URL Password.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

Generasito
Shopify Partner
1 0 0

Hi! Thanks for the great info. Would you be willing to share each of the snippets you drop into each of the files? I get an error when I try to update the JSON files, saying unexpected token and similar. I was able to update some of the files, but haven't been able to arrive at the solution. I am not a developer, but comfortable editing files. Thank you!