The ssetting to change image overlay opacity isn’t making any change in the image. Happening with any section that allows you to dim the image.
Topic summary
A user is experiencing an issue where the image overlay opacity setting in their Shopify theme is not working—changes to the dimming effect are not being applied to any section with image overlays.
A PageFly support representative provided a CSS-based workaround:
Proposed Solution:
- Navigate to Online Store → Theme → Edit code
- Locate the
base.cssfile - Add custom CSS code at the bottom targeting
.banner__contentelements - The code sets
background-color: rgba(0,0,0,0.5) !importantandmax-width: 100% !important
Status: The solution has been offered but not yet confirmed as tested or resolved. The CSS snippet appears to force a 50% black overlay on banner content sections, though it’s unclear if this addresses the root cause or provides the desired level of control over opacity settings.
Hi @anhad
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
.banner__content.banner__content–bottom-center.page-width.scroll-trigger.animate–slide-in {
background-color: rgba(0, 0, 0, 0.5) !important;
max-width: 100% !important;
}
Hope that my solution works for you.
Best regards,
Henry | PageFly