Charge Theme Collage Section

Store Design
, ,
1

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

willtreedez_0-1741717474393.png
willtreedez_0-1741717474393.png1284×809 270 KB

Thanks in advanced!

2

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 */
}

Screenshot 2025-03-12 at 10.28.27.png
Screenshot 2025-03-12 at 10.28.27.png2588×2020 613 KB

3

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:

willtreedez_0-1741791810195.png
willtreedez_0-1741791810195.png1836×480 1.18 MB

1 Like
4

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;
}

Screenshot_1.jpg
Screenshot_1.jpg1167×754 89.9 KB

5

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!

1 Like
6

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