Solved

The section gradient is displayed separately from the global page gradient

yurilazer
Tourist
6 1 1

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:

Без імені3.pngБез імені5.png

 

website: https://healthsphere.store/

Accepted Solution (1)
tim
Shopify Expert
3458 278 1283

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:

  • currently

Screenshot 2024-04-18 at 10.51.49 pm.png

  • classes added to the section element:

Screenshot 2024-04-18 at 10.53.11 pm.png

 

 

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": { ...

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

View solution in original post

Replies 4 (4)

tim
Shopify Expert
3458 278 1283

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.

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
yurilazer
Tourist
6 1 1

Thank you for your support!


I tried adding a css variable to the theme's visual editor, but this is what I get:

Без імені 9.pngБез імені 15.png

and also through the browser framework:

Без імені 12.png

Без імені 16.png

please tell me - do I need to make an edit related to "color-background-1 gradient" in the file "component-image-with-text.css"?:

Без імені 11.png

tim
Shopify Expert
3458 278 1283

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:

  • currently

Screenshot 2024-04-18 at 10.51.49 pm.png

  • classes added to the section element:

Screenshot 2024-04-18 at 10.53.11 pm.png

 

 

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": { ...

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
yurilazer
Tourist
6 1 1

Thank you friend!