Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
With a global color gradient in the site theme, the color of each section is displayed normally, only the gradient of the component-image-with-text section displays the global set gradient separately inside the section, how to fix it:
website: https://healthsphere.store/
Solved! Go to the solution
This is an accepted solution.
Yes, somehow adding these classes to existing '.image-with-text' element (like in second last of your screenshots) inside the section does not work.
You need to either wrap it with another element or add these classes to the section element -- you can try adding these classes to the <div ... class="shopify-section section" in devtools:
Go to your section liquid file and change from:
{% schema %}
{
"name": "t:sections.image-with-text.name",
"class": "section",
"disabled_on": { ...
to
{% schema %}
{
"name": "t:sections.image-with-text.name",
"class": "section color-background-1 gradient",
"disabled_on": { ...
All other sections have classes "color-background-1 gradient" in their wrapper element, this one does not.
These classes set background properties.
So you can either add an extra wrapper to section content with these classes or add these classes to section "class" attribute under section schema.
Thank you for your support!
I tried adding a css variable to the theme's visual editor, but this is what I get:
and also through the browser framework:
please tell me - do I need to make an edit related to "color-background-1 gradient" in the file "component-image-with-text.css"?:
This is an accepted solution.
Yes, somehow adding these classes to existing '.image-with-text' element (like in second last of your screenshots) inside the section does not work.
You need to either wrap it with another element or add these classes to the section element -- you can try adding these classes to the <div ... class="shopify-section section" in devtools:
Go to your section liquid file and change from:
{% schema %}
{
"name": "t:sections.image-with-text.name",
"class": "section",
"disabled_on": { ...
to
{% schema %}
{
"name": "t:sections.image-with-text.name",
"class": "section color-background-1 gradient",
"disabled_on": { ...
Thank you friend!
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025