Variation Image Selector in Product Listing Page



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:


Step 1: Check your plan 

In the top right-hand corner of SHOPLINE Admin, go to [Hello, OOO] > [My Subscription & Billing] to view the store's plans and modules.

  1. If you see the screen as below, where the two headings below Paid Subscription are Plans and Modules, check to see if your store has 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 see the screen as below, where under the Current Plan it has Basic, Advanced, Premium, O2O, or Enterprise, make sure you currently have a 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 SHOPLINE Admin. You can add and edit variant images in the product's [Product 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 Product Variation tab, check the [Show image selector on product details page] next to all of the variation options you want to display. For example, if the first variant option is "Color" and the second variant option is "Size", selecting the first variant option will display different colored variant swatches below the product photo on your storefront. 





Storefront display 

  • If you chose to display the "Color" variant option, 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 be displayed, 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 less variant swatches.





  • On the product index page only one type of variant images 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 impacting 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. 


Read more:






Have more questions? Submit a request