Solved

dawn: calling color background variable in css

SpotterJ
Shopify Partner
67 1 17

I'm trying to figure out how to call the color variable from theme settings in css as section backgrounds, not sure what and how to target them. 

Learning something new every day
Accepted Solution (1)
Savior
Shopify Partner
537 108 161

This is an accepted solution.

@SpotterJ 

 

Hello

 

If you have added the settings for color in Theme Settings like below:

{
"type": "color",
"id": "color_id",
"label": "Add Color"
}

then you can access it like this: 

 

.collection, .video-section, .collage-wrapper {
	background-color: {{ settings.color_id }} !important;
}

 

Here 'color_id' is the ID of color setting.


If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on shopify.dev.34@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

 

banned

View solution in original post

Replies 4 (4)

SpotterJ
Shopify Partner
67 1 17
.collection, .video-section, .collage-wrapper {
	background-color: rgba(var(--color-background), .8)!important;
}

 

Now, how do I call the gradient?

Learning something new every day
Savior
Shopify Partner
537 108 161

This is an accepted solution.

@SpotterJ 

 

Hello

 

If you have added the settings for color in Theme Settings like below:

{
"type": "color",
"id": "color_id",
"label": "Add Color"
}

then you can access it like this: 

 

.collection, .video-section, .collage-wrapper {
	background-color: {{ settings.color_id }} !important;
}

 

Here 'color_id' is the ID of color setting.


If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on shopify.dev.34@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

 

banned
SpotterJ
Shopify Partner
67 1 17

Beautiful, thank you.

Learning something new every day
slangww
Visitor
2 0 0

<style>

.accent-background {
width: 100%;
height: 200px;
background: var(--section-accent-background);
}

--section-accent-background: {{ section.settings.accent_background }};

</style>

 

<section>

    <div class="accent-background">

       Hello World

  </div>

</section>

 

{% schema %}

{
"type": "color_background",
"id": "accent_background",
"default": "linear-gradient(#F5B901, #EE8008, #E53C10)",
"label": "Accent background"
}

{% endschema %}

 

You can also use Radial, Conic instead of Linear.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme#gradients