GET YOUR FIRST 14-DAYS OF PRO FREE

How to showcase your product from multiple angles

The product configurator uses the WooCommerce product image gallery to determine the amount of images to display. You will learn how to set up image previews correctly in this article.

In this post:

Laying out the base images

We start by laying out the base images. The featured product image becomes the main image of the product configurator. All other product gallery images will be added next to the main image. If you want to have multiple images, you have to add images to the product gallery. The main image will become image 1, the first gallery image 2, and so on.

Note: the product images will be replaced by the images you set in the attribute main images. Unless you disable that in your Staggs Theme settings.

Simply go to Staggs -> Themes -> Your Theme, and make sure the box “Display product featured image” is checked.

Determine which images to replace

If you want to showcase your product image across multiple slides, you have to change the default product image settings.

By default, gallery type is set to Image and the other fields are empty.

Display images on slides

To show your images on slides 1 and 2, simply enter “1, 2” in the field “Display images on slides”.

Make sure your main product also has 2 images at least. Otherwise the second image won’t show up.

Change image view for attribute

You can also make a certain image view active when the customer changes on option in the attribute.

Say you want to showcase the bottom of the product, which is displayed in slide 3, you can set the slide index to 3.

When saved, the third product image should become automatically visible when selecting an option in the given attribute.

Adding attribute images

Finally, we have to make sure we have 2 images uploaded in our attribute items.

As you can see, we now have 2 images uploaded for each attribute in the “Main images” field. The first image will be displayed on slide 1. And the second image on slide 2.

When selecting this option, all images get updated on all configured slides simultaneously.

See demo

Attribute Types

Chevron icon
Toggle widget nav content

Hooks and Filters

Chevron icon
Toggle widget nav content