Prestige Theme - Turn off slideshow overlay/opacity

Store Design

Topic summary

A user encountered an issue with the Prestige theme version 7.2.0 where the slideshow overlay opacity on the homepage cannot be adjusted, even when set to 0%. The dark overlay makes text on slideshow images difficult to read.

Solutions provided:

  1. CSS code for theme.liquid (marked as working):

    • Navigate to: Online Stores > Themes > More Actions > Edit code
    • Open theme.liquid file
    • Add custom CSS code above the </head> tag
    • The original poster confirmed this solution worked instantly

  2. Alternative CSS approach:

    • Go to: Online Store > Themes > Actions > Edit code
    • Open: Assets folder > base.css file
    • Add code targeting .slideshow__slide .slideshow__image::before with display: none
    • Add at bottom of file, then save and preview

Both solutions use CSS to remove or hide the overlay element. The issue appears specific to the theme update and affects slideshow readability.

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

Hello! Im currently using Prestige theme for my store. This was not an issue until I updated to Prestige version 7.2.0

I’m unable to adjust the overlay opacity on the home page slide shower. There is a dark overlay on the image and even if i change the opacoty percentage to 0%, it does not cahnge.

I want to remove this completely as my slideshow images have text on them and its hard for customers to read them with the current overlay.

Any help is appreciated!

Store - https://ordanni.com.au/

2

Hi @JordanMM

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

And here’s the result:

PageFlyNoah_0-1684290756241.png
PageFlyNoah_0-1684290756241.png1920×937 334 KB

Hope this can help you solve the issue

Best regards,

Noah | PageFly

3

You, my friend, are a legend! Thank you - this works instantly.

4

Hello @JordanMM ,

You can try to follow these steps:

  • Go to Online Store → Themes → Actions → Edit code
  • Go to Assets folder → base.css file → add this following code at the bottom of page
.slideshow__slide .slideshow__image::before {
  display: none;
}
  • Save and preview

Hope this can help. Let us know if you need any further support.

Ali Reviews

1 Like