How to add a shadow under the words "Unleash the full..."?

Technical Q&A

Topic summary

Goal: Make the hero text “Unleash the full…” stand out over images without lowering image opacity.

Proposed solution: Add a CSS text shadow to the heading so the text gains a large, blurry dark halo for contrast.

Implementation details:

  • Add to base.css: h2.banner__heading.h1 { text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9); }
  • Navigation steps: In the admin, go to Sale channel → Online Store → Edit code → search for base.css → paste the line at the end of the file.

Notes:

  • The CSS uses text-shadow (offset-x, offset-y, blur-radius, color) to create a strong, soft black glow behind the text.
  • The code snippet is central to the fix and directly targets the “Unleash The Full…” heading selector shown.

Status: One concrete solution provided; original poster has not yet confirmed if it resolves the issue.

Summarized with AI on January 12. AI used: gpt-5.
1

https://empiricalwater.com/

I would like to make the words “Unleash the full…” pop out more over the images. I do not want to change the opacity of the images to accomplish this. How do I add a large blurry shadow to make the text pop out more?

Thanks

2

Hi @empiricalarby ,

To make the text “Unleash The Full…” stand out more, you can create a shadow behind the text. Open the base.css file in the code folder and add the following line of code:

h2.banner__heading.h1 {
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
}

Note: To open the base.css file, visit the admin page, then select Sale channel and select Online Store. In the Online store page, select Edit code and search for the base.css file in the search bar. Paste the above line of code into the last part of the base.css file.

Hope it helps @empiricalarby

1 Like