Solved

Add additional color to settings page

erikapruett
Shopify Partner
12 0 3

Hi!

 

I have customized the dawn theme. I have hardcoded colors in a custom.css file, but I want to be able to change it from the user side.

 

Any tips on how would I add an additional color "Accent 3" under Theme Settings > Colors? 

 

I have several specified pieces of CSS code that I would want it to affect.

For example...

 

/* Styles "Most Loved Items" collection title on the homepage, icon titles on the homepage, "From the blog" title on the homepage, and blog article h2 */

.title, .multicolumn-list h3,  .blog__title.h1, .blog__title.h2, .blog__title.h0, .article-template__content > h2 {

color: #877159;

}

 

 /* Styles header text when overlapping */

.image-with-text--overlap .h1, .image-with-text--overlap .h2, .image-with-text--overlap .h0 {

  color:#877159;

}

 

 /* Styles collection heading "Popular Collections" */

.collection-list-title {

color: #877159;

}

 

You can see the site at: https://isla-theme.myshopify.com

Password: demo

 

Thanks in advance for the help!

 

Erika

Accepted Solution (1)

Litos
Globetrotter
688 169 143

This is an accepted solution.

Hi @erikapruett,

You can follow these steps:

- Step 1: Assign color variable at config > settings_schema.json file. For example:

Screenshot.png

Code:

,
{
        "type": "color",
        "id": "colors_accent_3",
        "default": "#877159",
        "label": "Accent 3"
}

- Step 2: Assign color root at layout > theme.liquid file. For example:

Screenshot.png

Code:

--color-accent-3: {{ settings.colors_accent_3 }};

- Step 3: Go to custom.css file and change the code:

#877159 => var(--color-accent-3)

Hope it helps!

 

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.

View solution in original post

Replies 4 (4)

KetanKumar
Shopify Partner
36845 3636 11978

@erikapruett 

yes can you please create separate schema code its work 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

Litos
Globetrotter
688 169 143

This is an accepted solution.

Hi @erikapruett,

You can follow these steps:

- Step 1: Assign color variable at config > settings_schema.json file. For example:

Screenshot.png

Code:

,
{
        "type": "color",
        "id": "colors_accent_3",
        "default": "#877159",
        "label": "Accent 3"
}

- Step 2: Assign color root at layout > theme.liquid file. For example:

Screenshot.png

Code:

--color-accent-3: {{ settings.colors_accent_3 }};

- Step 3: Go to custom.css file and change the code:

#877159 => var(--color-accent-3)

Hope it helps!

 

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
erikapruett
Shopify Partner
12 0 3

Thank you SO much!!!

 

Worked like a dream 🙂

erikapruett
Shopify Partner
12 0 3

Once I updated to Dawn 12, this no longer works.

Any idea why this might be or what I need to change?
Website: https://isla-base-theme.myshopify.com/
password: demo

Thank you!!