Grey Shadowy Gradient above Image with Text on Sense Theme

Shopify Discussion

Topic summary

A user encountered an unwanted grey shadowy gradient appearing above the “Image with Text” section on their Shopify store’s homepage using the Sense theme.

Initial Troubleshooting:

  • Multiple support teams (GemPages and MandasaTech) offered CSS solutions
  • First attempts involved adding custom code to the theme.liquid file

Solution Process:

  • MandasaTech suggested CSS targeting .image-with-text elements to remove box-shadow
  • Initial placement attempts before <head> tag failed to resolve the issue
  • GemPages clarified the code should be placed before </head> (the closing head tag), not the opening tag

Resolution:
Once the CSS code was correctly positioned before </head>, the gradient overlay was successfully removed. The user confirmed the fix worked and thanked the support teams.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

Hi All, I’m having this problem where there is a shadowy grey gradient above my home page’s “Image with Text” on Sense theme How do I fix this? Observe below -

CFC_21_0-1672091320947.png
CFC_21_0-1672091320947.png1900×976 154 KB

2

Thank you, how do I fix this?

3

I would prefer not to, could you please explain to me the steps on how to fix this?

4

Hello @CFC_21 ,

It’s GemPages support team and glad to support you today.

Could you please share your store URL ( with the password if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

5

heatrsocks.com

6

Hello @CFC_21 ,

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1672129083021.png
GemPages_0-1672129083021.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

7

Hello @CFC_21

I would like to give you a solution to support you:

  1. Go to Online Store-> Theme-> Edit code
  2. Open your theme.liquid theme file
  3. Paste the below code before :
<style>
.image-with-text:not(.image-with-text--overlap) .image-with-text__media-item:after {
border-radius: var(--media-radius);
box-shadow: none !important;
}
</style>

Was my reply helpful? Please Like and Accept Solution. This mean alot to me.

1 Like
8

Sorry but I pasted it just before head in the theme code, and the problem has not yet been fixed.

9

Sorry, still does not work

10

Hello @CFC_21 ,

I couldn’t find the code that you added

Could you please share a screenshot about the code that you added in your theme file?

Best regards,
GemPages Support Team

11

CFC_21_0-1672267832907.png
CFC_21_0-1672267832907.png1915×904 131 KB

12

Hello @CFC_21 ,

Could you please try moving the code to before , not

For example,

GemPages_0-1672298153342.png
GemPages_0-1672298153342.png1916×904 63.7 KB

Best regards,
GemPages Support Team

13

Thank you very much, this worked :grinning_face:

1 Like
14

wow amazing :heart_eyes: sana (Tagalog) all!