Customized Variant Selector with Image

Premium-Plan.jpg

Merchants with premium and enterprise plan can upload variant images with the customized variant selector. Besides the origin variant wording dropdown, the image selector allows customers to view variant images while picking products. It is suggested to upload color images or product detail pictures, making variation display clearer to customers.

 

A.Set up steps 

Step 1: click the “Edit Image Selector”

In product edit page > Variations, turn on “Does this product come in multiple variations like size or color?” to “Yes”.

After variations name and variant options set, click the “Edit Image Selector” button that appears below.

_____2019-08-08___2.56.11.png

Step 2: Upload photos

In “Edit Image Selector” pop-up, click the corresponding image box to upload the variant image.

_____2019-08-08___2.57.58.png


Step 3: Save changes

After the image uploaded, the image box will show the thumbnail. Please click “save” after confirmation. If you want to change the image, please click the image box and upload again.

_____2019-08-08___2.59.15.png


Step 4: Tick “Show image selector on product detail page”

Tick “Show image selector on product detail page” to show variation thumbnail of products in shop.

_____2019-08-08___2.59.46.png

 

The variant image will show as a thumbnail, replacing the original dropdown list. Each variation display can be set up independently, merchants can choose considering product type.

The following example is a product with two variations. There are several fruit choices for fruit bowl  and sauce. To show a different combination of fruit bowl, both variations display with the variant image  selector.

1212.png


The second example is also a product with two variations. It displays variation fruit with variant images, keeping the dropdown list for selecting sauce.

1313.png

Please Note:

  • Please upload images in JPG format. It is recommended to upload square-shaped image with image size 25 x 25 pixel. If the image uploaded is not in square shape, it will be cut automatically.
  • If there is a new variant added while “Show image selector on product detail page” is ticked, the checkbox will be unticked, and show reminder to edit variant image selector .
    _____2019-08-08___3.08.40.png

    After ticking the checkbox again, the “Edit Image Selector” pop-up will show. The image for newly added variant can be uploaded.
    _____2019-08-08___3.09.57.png


  • Images of variant can be uploaded separately, but only when each variant has the corresponding image, can “Show image selector on product detail page” be checked.
  • Even if “Show image selector on product detail page” is untick, the images uploaded in pop-up will not be removed. If the checkbox is ticked again, the variant images uploaded last time will show.

 

B. Extend reading for product variations setting

Upload Photos For Product Variations

Product Variations

Have more questions? Submit a request

Comments