Customized Variant Selector with Image

4. EC + SC (EN).png

Merchants with premium and enterprise plans 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.

This article will cover the following:

 

1. Setup steps

Step 1. Confirm your plan of the store and start using it 

At the upper right corner of the store backstage, go to [Hello, OOO] > [My Subscription & Billing] to view the store's plans and modules.

  1. As shown in the image below, there are "Paid" and "Module" in the "Plan Subscription" section. Please confirm whether your store has an "e-Commerce/Social Commerce" plan. If so, you can go to Step 2 to set it up.
    EN_Step1-1.png

  2. If you are using the Basic, Advanced, Premium, O2O, or Enterprise plan (as shown below). Please confirm whether your store is using the "Premium/O2O/Enterprise" plan.

    EN_Step1-2.png

    If so, please go to "App" > "App Store" in the left menu to install the features.

 

Step 2 

Finish setting up your product variants first. Please refer to Product Variation and Variant|Products.

 

Step 3

After setting the variation, click the Edit Image Selector button that appears below.

1.png

 

Step 4

In the "Edit Image Selector" pop-up window, click the corresponding image icon to upload the variant image.

*Note: Please upload images in JPG format for Product Variants. We recommend using square images with dimensions of 25 x 25 pixels. The product page will display the Variation images as square thumbnails. If a non-square image is uploaded, the system will automatically crop it to a square format.

_____2019-08-08___2.57.58.png


Step 5

After the image is uploaded, the image box will show the thumbnail. Click Save after confirmation. If you want to change the image, please click the image icon and upload the image again.

_____2019-08-08___2.59.15.png


Step 6

Check the box for "Show image selector on product detail page" to show Variation thumbnails of products in the store.

2.png

 

Select the display style for the product based on its attributes. You can choose to display in the format of images, dropdown lists, or label swatches. You can refer to the following examples.

1. Display the two variations by images and label swatches.

3.png


2. Display the two variations by images and dropdown lists.

4.png

 

3. Display two variations by images.

5.png

 

 

2. Notes

  • If there is a new variant added while “Show image selector on product detail page” is checked, the checkbox will be unticked, and a reminder will appear reminding you to edit the variant image selector.
    6.png

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

  • Images of Variants 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 unchecked, the images uploaded in the pop-up will not be removed. If the checkbox is ticked again, the variant images uploaded last time will show.

 

Read more

 

 

 

 

 

Have more questions? Submit a request

Comments