How can I remove code .hero__overlay::before {opacity: 0; } from the bottom of the page?

Shopify Discussion
, ,

Topic summary

A user is trying to remove the CSS code .hero__overlay::before {opacity: 0; } that appears as visible text at the bottom of their Shopify website. They’ve already attempted to fix it by adjusting the opacity to 3% without success.

Proposed solutions:

  • Multiple support teams requested the store URL and password to diagnose the exact issue
  • One suggestion involved:
    1. Accessing the Shopify admin panel
    2. Navigating to Online Store >> Edit Code
    3. Opening the theme.liquid file
    4. Using Find (Ctrl+F) to locate the “hero__overlay” class
    5. Removing the problematic code from that file

Status: The issue remains unresolved as the user hasn’t yet shared their store credentials for further troubleshooting. The problem appears to be CSS code displaying as text rather than being properly rendered as styling.

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

Hi there,

How can I remove the text .hero__overlay::before {opacity: 0; } from the bottom of my website?

I highlighted it in blue. I changed the hero image’s opacity to 3% to see if that would fix it, but it’s still there.

Thanks for your help.

hero overlay.JPG
hero overlay.JPG1904×679 38.3 KB

1 Like
2

Hello There,

Please share your store URL and Password.
So that I will check and let you know the exact solution here.

3

Hello @BSkippers ,

  1. Open your store admin panel.

  2. Go to Online store >> Edit code >> Open theme.liquid file.

  3. Find (ctrl+f**) “hero__overlay”** class in theme.liquid file and remove this code.

4

Hello @BSkippers ,

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