Charge Theme Collage Section

willtreedez · ‎03-11-2025

Hello,

I'm wanting to add a collage section that has the text overtop of the collection images instead of below it. I would also like to add a darker opacity over the images so the text is readable. How can I do this? I've tried a few CSS code suggestions on here both in the theme css and the section cc but can't find anything that works.

Here is the link to my store: Riverside Honda & Ski-Doo

And this is the section that I'm talking about

Thanks in advanced!

Dan-From-Ryviu · ‎03-12-2025

Please try to use this code

.collage-card-title {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    background: transparent;
    transform: translate(-50%, -50%);
    z-index: 9999;
    text-transform: uppercase;
}
.product-image:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #0000003b;
}
.collage-card {
    background: transparent;
}

- Found this helpful? Hit "Like" and "Accept as Solution"! Support me: Donate!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Dan-From-Ryviu · ‎03-11-2025

Hi @willtreedez

Please add this code to Custom CSS of that section on your store admin > Sales channels > Online Store > Themes > Customize

.product-image {
    flex-direction: column-reverse; /* move text over top of image */
}
.collage-card {
    background: rgb(16 24 36 / 80%); /* darker over the images and text */
}

- Found this helpful? Hit "Like" and "Accept as Solution"! Support me: Donate!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

willtreedez · ‎03-12-2025

Hi Dan,

Thanks for the reply! I'm sorry I didn't type that correctly. I would like the collage section to have the text overlay the images like this:

Dan-From-Ryviu · ‎03-12-2025

Please try to use this code

.collage-card-title {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    background: transparent;
    transform: translate(-50%, -50%);
    z-index: 9999;
    text-transform: uppercase;
}
.product-image:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #0000003b;
}
.collage-card {
    background: transparent;
}

- Found this helpful? Hit "Like" and "Accept as Solution"! Support me: Donate!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

willtreedez · ‎03-13-2025

Hi Dan,

The code worked to change the section but now when I go to save the page it says " Online Store editor session can't be published"

How do I fix this?

Thanks!

Dan-From-Ryviu · ‎03-13-2025

Please add code to theme.liquid file, after <head> in Online Store > Themes > Edit code

<style>
.collage-card-title {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    background: transparent;
    transform: translate(-50%, -50%);
    z-index: 9999;
    text-transform: uppercase;
}
.product-image:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #0000003b;
}
.collage-card {
    background: transparent;
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"! Support me: Donate!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Charge Theme Collage Section

Charge Theme Collage Section

Community Blog Articles