Variant Image App

1. EC (EN).png

*Note: This feature is only available to Taiwan / Hong Kong stores.

SHOPLINE's Variant Image App offers a painless and convenient user interface, enabling you to upload multiple pictures of products in different variants (styles). This provides your customers with diverse and varied images for their shopping reference. Moreover, you can flexibly adjust the image order, placing the main product images at the forefront to attract customers and create an impeccable shopping experience!

 

In this article, you will be introduced to the following:

 

⚠️ Before you start, please be reminded: 

  • To retain the settings of Variant images, please purchase the full version within the 14-day trial period.
  • This feature currently only supports the following templates: Ultra Chic, Kingsman, and Varm.
  • This feature is inapplicable to stores that have previously made customized adjustments to their product detail pages. If your shop has enabled any storefront design tools, or you have made custom modifications to your storefront design (including using HTML, CSS, etc.), please consult SHOPLINE's Online Merchant Success Team for assistance.

 

1. How to install Variant Image App

Step 1

In the Admin, go to [Apps] > [Apps Store], find "Variant image App" and click to enter the app detail page. Next, click the "Buy Now" button to install this app for free. For detailed instructions on the app installation, please refer to this article.

🔔 Reminder: App reauthorization
SHOPLINE updates and optimizes the Apps Store and its features on a regular basis. Some apps may require you to reauthorize them to function properly. To do so, proceed to [Apps] > [My Apps]. On the top of the page, you will see a reminder in yellow (see below) indicating which apps need to be reauthorized. For detailed instructions, please refer to this article.
*Note: You can choose to close the reminders. Once closed, the message will no longer appear.
Screenshot 2023-07-20 at 3.01.22 PM.png

 

Step 2

  1. Go to [Apps] > [My Apps] and find "Variant image App," and click Free trial as indicated below.
    Screenshot 2023-07-20 at 3.22.20 PM.png

  2. Once the installation is complete, the trial expiration date will be displayed. Click Activate script, and you can start accessing the app.
    Screenshot 2023-07-20 at 3.04.33 PM.png

    When asked whether to activate the app script, click Confirm.
    Screenshot 2023-07-20 at 3.06.30 PM.png

  3. Upon successful installation, you can directly access the app page via [Products & Categories] > [Variant image App].
    Screenshot 2023-07-20 at 3.10.49 PM.png

    *Note: If you have not yet set any product variants (styles) for your products, the screen will appear as shown below.
    Screenshot 2023-07-20 at 12.45.33 PM.png

    Please proceed to [Products & Categories] > [Products] > [Edit] > the [Variations] tab to switch on the toggle for variant setup. Please refer to Product Variation and Variant | Product for relevant details.
    Screenshot 2023-07-20 at 12.43.55 PM.png

 

2. How to set variant images

Step 1. Upload variant images

Click on the product for which you would like to set up product variant images, and then click Select Image.

Screenshot 2023-07-20 at 3.36.33 PM.png


If you haven't uploaded any variant images yet, you can click Edit product images or name (ALT) to add the main product images.

Screenshot 2023-07-20 at 3.39.19 PM.png

 

*Notes:

  • You can upload a maximum of 300 main images, and it is recommended to use images with dimensions of 750 x 750 pixels for the best display quality. Files that are too small may result in blurry images.
  • After clicking on a variant and displaying the variant image, the main product photo cannot be displayed again. If you wish to display the main product photo, it's recommended to include the main product photo in each variant image.

Screenshot 2023-07-20 at 3.41.00 PM.png

 

You can edit the photo names (ALT) for the uploaded images. Later, when selecting variant images, you will be able to identify the images quickly based on their names.

Screenshot 2023-07-20 at 3.46.17 PM.png

 

Step 2. Select variant images

Upon completing the image uploads, you can click [Edit Variant Images] > [Select Image]. Then, select the images in the order you want them to be displayed for this variant. The numbers in blue at the upper right indicate the display order. An image can be selected repeatedly without being limited by the variants.

Screenshot 2023-07-20 at 3.47.36 PM.png

 

After you set up your variant images, your customers will be able to view different product variant images displayed at the storefront based on the product variants (styles).

Screenshot 2023-07-20 at 3.50.51 PM.png

 

3. Notice

  • This app offers a 14-day free trial. If you do not make a payment when the trial period ends, the system will automatically uninstall the app, and all related settings will be deleted.
  • Before accessing this feature, be sure to click the Activate script button in [My Apps].

 

 

 

 

Read more

 

 

 

 

 

Have more questions? Submit a request

Comments