Okay, so I’m back after a quiet spell. Hello everyone.
After helping out a few friends to learn and publish their sites on Webflow, I decided to spend some more time with Webflow. Good to be back.
I’m looking and seeing that there are some differences between how the current e-commerce pages for product collections are setup and it doesn’t match the videos and info I’m seeing on the forum or University pages about how to get multi image images inserted into a product page.
Specifically this is about where to put several images into the Product entry pane in the designer, then get those spat out into a group of images on the Product Page.
Here is a pic from the Product Settings pane slide out in the Designer:
Do we use the More images field? If so, how to get that onto the Product template?
I’ve tried using collection lists, standard image blocks, lightboxes, and more.
Once you’ve added images to the More images field in the Product panel, you can add a Collection List to the Product page and use More images (Multi-image) as a source.
Then you can simply add Image element to this Collection list, choose a source and all the images from the Product should appear on the page.
Ah so the More Images idea is essentially an embedded separate collection list?
I’ll give this a try. I think I might have had some cache issues in the designer or cloned my own project too many times. There must have been something weird. I’ll recheck this again.
Okay, I think I found the root of the problem.
This “standard” method you describe can be used, as I’ve used it on a few other products, but there’s a large caveat:
When Variants are used, you can no longer upload Main Image or More Images to a Product.
I’d need to verify this with someone who can confirm this. Is anyone else seeing this?
An additional problem is that if you use light boxes and tabs for the lightboxes in a Product template you can’t use the Main Image or More Images as a source for them.
This means that I have to upload images in three different locations:
Main Image & More Images
Additional Image fields
Variant images for each color of each product.
(but of course you actually can’t do all three because of what I mentioned in my previous comment.)
Of course, that would all allow much more flexibility, but ends up being a lot of duplication.
When Variants are used, you can no longer upload Main Image or More Images to a Product.
@Lux that’s right. When you add variants, you can no longer add images (both Main and More) on the product level, but rather per each variant individually. If you’ve added these assets to the basic product before, they should propagate to all the variants automatically (you can then alter each variant separately). You can also treat the default variant as the main product to some extent, but you have to remember that when you include and Add to cart element on the page, choosing specific variants will change the source of images (from default to the chosen variant).
As for the part about lightboxes could you please tell me a bit more what do you want to achieve with tabs + lightbox? Do you want to simply add a Lightbox element to the Product page and connect it to More images field when variants are present? If so you can add a Collection list, then add a Lightbox to this list element and the connections should be accessible then.
It’ll behave similarly to what i’ve mentioned earlier regarding variant selection: choosing different variants on the page will update sources for the images in the Lightbox too.
Please let me know if that’s helpful or where can i clarify more,
Maciej
Okay, I think this sort of functionality makes sense.
Thanks for your response.
So, if a store plans to have Products with and without variants, the More Images will show up accordingly, I gather.
Here’s my setup:
A main photo showing the Main Image on top. Below that there are separate smaller thumbnails for this image as well as the More Images in tabs. Clicking on the thumbnail tabs shows that image above it in the larger image area. And then, each of those are connected lightboxes for fullscreen viewing. (Tabbed Lightboxes)
Q: In the Designer, you’d have to create a different tabbed lightbox setup on the page for BOTH non-variated Products as well as those with variants, correct?
…Or can you do both setups within the same lightbox?
Reference
Is there a larger document or post describing this process (“create variants first”, then do this, etc.)? I couldn’t find one.
It would be a good reference for Ecommerce store creators or editors, I think.
I spent some time in Preview mode on a few newer e-commerce templates for sale to see how product pages are done with this, but I wasn’t able to find one that had this setup.
You’re right with the workflow you’ve outlined above. This way you have full control over the entire product as well as each variant and what images are associated with each. you can also add images to the product before creating variants and then each variant created based on it will get all the images as its own. You can then easily modify each variant while keeping bulk of the images that are shared across all the variants (e.g. keep 10 shared images + add an additional one that’s unique to each variant)
Please let me know if there’s anything else in the topic i could help you with,
Maciej
This was PRECISELY what I’ve been trying to solve. Absolutely brilliant. Thank you for solving this. I would never have guessed placing the lightbox inside of the collection list.
Hi all, thank you for all the information above. However I am still not quite following.
I am creating a product list page and am using a product collection. For each product in the collection I currently have 1 main image and 1 “more images” image.
I would like to add a lightbox to the product instance that has the main image and the supplemental images below it. Although as described above I am unable to access “more images” within the collection list item.
Is there something I am missing? I appreciate any feedback.
Hello,
I have been trying to have the slider on my products template page use more than 2 images, but it just doesn’t work, considering each of my products would have a different number of images, I was hoping to have the setup work in a way so that on each products page, the slider would be adjusted to show the amount of images i setup in the more images field, as opposed to having to create the multi image variant.
here is a link to my website I’m building, please any help would be appreciated because I’m looking to launch by this Saturday
Ah so the More Images idea is essentially an embedded separate collection list?
I’ll give this a try. I think I might have had some cache issues in the designer or cloned my own project too many times. There must have been something weird. I’ll recheck this again.
you can check work in canada
Thanks. also check benefits of skin lightening
