An issue with gradient overlay on an image

Store Design
, , , ,
1

I have created a section on the product page to showcase features. Initially I created the section in HTML and converted into liquid (it worked fine in HTML). There is a reference image attached below, take a look at what I wanted to achieve.

Saradh_Chandra_0-1733350222800.png
Saradh_Chandra_0-1733350222800.png1491×626 96.2 KB

There is an overlay on the image to highlight the text written below

Now, when I post the code in Shopify, the overlay is not getting rendered. Anyone please suggest a solution for this issue. Thanks in advance..

Here’s the link to page: click here

Password: fiages

FYI: to see the section go to a product page and find “Talk about your brand” for the section.

2

Hi @Saradh_Chandra

I have checked the product page but I don’t see the section on your screenshot, could you please add it again and the ping me so I can take a look

Best,

Daisy

3

Hi @Saradh_Chandra

Just to follow up :heart: Do you still need help with the issue ?

Best,

Daisy

4

This is how it is getting displayed even with a gradient overlay.

Saradh_Chandra_0-1733726769389.png
Saradh_Chandra_0-1733726769389.png1356×635 151 KB

But there is an overlay and the HTML is not rendering it. Here’s an image

Saradh_Chandra_1-1733726983877.png
Saradh_Chandra_1-1733726983877.png1354×653 195 KB

the gradient overlay is not being visible

5

Hi @Saradh_Chandra

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
.feature-overlay {
    display: block !important;
}

before: https://prnt.sc/_zjmKnsV5aH2
after: https://prnt.sc/6rHir4dLIIjz

I hope this helps

Best,

Daisy