A space to discuss online store customization, theme development, and Liquid templating.
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.
Solved! Go to the solution
This is an accepted solution.
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 [email protected] | Shopify Design Changes | Custom Modifications In to Shopify Theme
.collection, .video-section, .collage-wrapper {
background-color: rgba(var(--color-background), .8)!important;
}
Now, how do I call the gradient?
This is an accepted solution.
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 [email protected] | Shopify Design Changes | Custom Modifications In to Shopify Theme
Beautiful, thank you.
<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