Z-Index for specific section

Store Design
,

Topic summary

Goal: Make a text section visually overlay the product collection grid in a Shopify theme using z-index.

Context: The text currently appears behind the collection. The requester shared their store URL and password so the helper could inspect. Reference screenshots illustrate the desired overlay effect (images are central to understanding the request).

Actions taken:

  • Initial suggestion: edit assets/base.css to adjust a featured collection’s transform property. This did not address the overlay intent.
  • After clarification with screenshots, an updated solution was provided: edit assets/base.css to set the rich text section container to position: relative with a high z-index (e.g., 999) and make the .rich-text background transparent. The CSS targets specific section IDs to ensure the text layer stacks above the collection.

Notes: z-index controls stacking order; position must be set (e.g., relative) for z-index to apply. Using transparent background allows underlying collection images to remain visible.

Status: Awaiting requester confirmation; no final resolution reported yet.

Summarized with AI on December 14. AI used: gpt-5.
1

Hello!

I’m trying to create a creative overlay effect where a text section sits above the images of my products.

Please see attached screenshot.

I currently have a text section that is sitting behind my collection section. I currently want it to sit on top of the collection section.

I can message the password if you can help

Screenshot 2024-11-17 000033.jpg
Screenshot 2024-11-17 000033.jpg1639×323 50.9 KB

1 Like
2

Hello @15love

Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?

3

Thank you! its 15lovestudio.com and the password is TEAM15LOVE!

1 Like
4

Hello @15love

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css. Add the provided code at the end of the file.

#shopify-section-template--16170321674291__featured_collection #collection-template--16170321674291__featured_collection {
transform: inherit!important;
}

devcoders_0-1731821978073.png
devcoders_0-1731821978073.png1346×592 188 KB

5

Sorry, I dont think I was clear, I was hoping to do something like this

Screenshot 2024-11-17 004505.jpg
Screenshot 2024-11-17 004505.jpg1095×421 43.3 KB

6

Screenshot 2024-11-17 004505.jpg
Screenshot 2024-11-17 004505.jpg1095×421 43.3 KB

To be more specific, I’m hoping to achieve this effect, where the text appears on-top of my collection

1 Like
7

Hello @15love

I will check and update you.

8

Hello @15love

Go to Online Store, then Theme, and select Edit Code.

Search for assets/base.css. Add the provided code at the end of the file.

#shopify-section-template–16170321674291__rich_text_t3MCzx .isolate { position: relative; z-index: 999; } #shopify-section-template–16170321674291__rich_text_t3MCzx .isolate .rich-text { background: transparent;

}