Product Images and Lightbox

I’ve started adding additional product images and it is making my product pages look messy. I created the site out of a webflow template, so the product template page was already set up for me and I don’t know how to move things around to make them look better…

Right now there’s the main product image which is displaying on the left side of the screen and the three additional images are along the right side of that image, but stacked vertically. I want to move those additional product images under the main photo with horizonal positioning. I’ve tried to put that collection list into a dive and add the div under the main image and a few other things, but I’m getting all kinds of red X’s telling me that I can’t do the thing that I want because it’s a lightbox.

Do I need to scrap the lightbox all together? How do I make this work?

Here is my site Read-Only: LINK Webflow - Youth Amplified! | Clean & Holistic | Personalized Skincare Box | Anti-Aging Skincare

(how to share your site Read-Only link)

Hi @LaDonna,

I’ve recorded a quick demo here which should hopefully help:

Basically, you’ll just need to wrap the Lightbox and the Collection List in a div. Make sure the Collection List is set to display: flex (horizontal).

Let me know if you have any questions!

Such a simple fix… Thank you so much! You’re amazing and I greatly appreciate you taking the time to make a video for me to follow along with! Milan- you are the MVP :smiling_face_with_tear:

1 Like