Text not showing over images on slideshow

Topic summary

A Shopify store owner is experiencing a z-index layering issue where slideshow images appear on top of text content, making the text invisible despite being present in the DOM (confirmed via Chrome DevTools).

Problem Details:

  • Text displays correctly when no image is present
  • Adding images causes text to disappear behind them
  • Affects slideshow section elements including buttons and slide text

Solutions Offered:

Two community members provided CSS fixes to be added above the </body> tag in theme.liquid:

  • One solution addresses button visibility with color and display properties
  • Another targets z-index layering issues

Current Status:
Partially resolved - the button visibility issue is fixed, but text on slides with selected images remains hidden behind the images. The core z-index/layering problem persists.

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

Hello.

On my site when I use a Slideshow Section the images always appear on top of the text. If I remove the image the text will display, but once an image is added the text disappears (I can the text is there when using Dev Tools on Chrome). How do I get the text to show up on top of an image?

vs

Site: https://thewinechic.co/

@The-Wine-Chic

hey

Please add the given code above in theme.liquid

online store >> edit code >> theme.liquid

.new-slider a.button { color: #fff; display: inline-flex; }

after added button look like this.

Hi @The-Wine-Chic ,

Glad to support you today.

You can check out my suggestion below to get your concern resolved:

  1. Go to Edit code on Online Store:

  1. add my code above the tag on Theme.liquid:

Hope you find my answer helpful!

Kind & Best regards,
GemPages Support Team.

Thanks, that does resolve the issue around the button, however when there is an image selected for the Slide it is hidden and cannot be seen. It is as the text is behind the image.