Variation Image Selector in Product List Page

1. EC (EN).png


SHOPLINE's Variation Image Selector feature lets customers quickly view images of product variants, such as different colors, sizes, and materials. 


This article will introduce the following:


1. Check your plan 

In SHOPLINE Admin, go to [Hello, OOO] > [My Subscription & Billing] to see details of your current plan and modules. 

  1. There are Plans and Modules under the "Paid Subscription". Please first check if your store is using the Advance Shop Management module. If you have this module, please skip to the next section: How to enable Variation Image Selector.

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

    If you have a suitable plan, in SHOPLINE Admin go to [Apps] > [Apps Store] and install "Variation Image Selector in Product Listing Page".


2. How to enable Variation Image Selector 

Step 1

If you have not yet added images for each Product Variant, you can do so by going to [Products & Categories] > [Products] > Edit in the SHOPLINE Admin. You can add and edit variant images in the product's "Variations" tab. For more detailed instructions, please see: Products | Product Variations (FAQ).



Step 2

In SHOPLINE Admin, go to [Online Store Design] > [Design] > [Advanced Settings] and check the box to enable the [Show variation image selector under product image] feature. 


Step 3

In the "Variation" tab, check the "Show image selector on product details page" box next to all of the variation options you want to display.

For example, if the first variation is "Color" and the second variation is "Size", selecting the first variation will display different colored variant swatches below the product photo at your storefront. 





3. View from the storefront

  • If you choose to display the "Color" variation, when a customer places their cursor over an image swatch the main product photo will change to display the same variant option. 
  • Image swatches will be displayed only for the first six variants. If your product has more than six variants, a [+] icon will appear, along with the number of additional variants, which customers can click on to see more variants. 


  • Customers can click + to view additional variant swatches (up to 12 in total), and Hide to view fewer variant swatches.



4. New page builder

In the new version of the SHOPLINE page builder, you can adjust the variation image selector.

Go to the new page builder

In the SHOPLINE Admin, go to [Online Store Design] > [Pages]. Click Advanced Page to open the new page builder.



Set product variations

Click the Store Settings on the left menu and select ProductProduct Listing Page to adjust the settings for variation images. Please refer to this article for details. 



5. Notes 

  • On the product list page, only one type of variant image will be displayed for a product.
  • If you enable "Show variation image selector under the product image" in [Online Store Design] > [Design] then variant image swatches will be displayed for ALL products on your store. It is recommended that merchants create a uniform order for product variants to avoid interrupting the storefront display.
  • The layout only allows for 12 variants displayed on a product category page. If your product has more than 12 variants, clicking + will redirect customers to the product details page. 
  • The system currently does not support showing variant images of products with 3-type variations on the product list page.

Read more






Have more questions? Submit a request