If you have a product with multiple variants on Shopify, and you want to display custom images to represent each variant, such as a pattern, in your variant selector (variant picker), then this post is for you. If you prefer to watch a tutorial video, you can watch the video.
You can see below the before and after versions of what we are going to achieve. In the before photo, images are part of the original gallery, but you want to show users only the pattern, so you can show it similar to what is shown in the after photo, so they can clearly see the details.
To achieve this result, we are going to install the Rubik Variant Images app on our store. This is how the result will look on our page.
Bonus feature: Show only relevant variant images
And as a bonus, this app will also show only selected variant images. So, for example, as you see in the photo, when the blue color is selected, only the blue slides are visible. This is important because when customers see only images of the product that they are actually going to buy, this decreases distraction and increases the purchasing decision, making it easier and faster. Eventually, this results in better-converting product pages.
Step 1: Set multiple variant images for your product
As the first step, the app will ask you to assign variant images to each color, so you will use the Assign images screen to set variant images for each color.
After setting this app, it will ask you to enable it on your theme. Follow the steps to enable it. Then, after finishing this step, you will already see only relevant variant images for each selected variant color.
Step 2: Set up custom images for each option in the variant picker
You can see in the image below all the clicks you need to make to set custom variant images. Don’t worry, all of them are super simple. I will explain each of them step-by-step.
- Click on the menu item Swatch (variant picker) to open the swatch settings page.
- Enable swatch functionality for your store.
- Enable the swatch feature on your theme.
- Put the option name where you want to show custom images.
- Click on the Set custom swatches button and select the product where you want to set custom images, then you will be redirected to the screen where you can assign custom images. Click on each of them and set your images.
- This is an optional step where you can customize the appearance of swatches; you can make them square, rounded, or circular. Additionally, you can change size, color, etc.
And now your swatches should be visible on your product page. The app works for all popular themes, and if you have a custom Shopify theme, just reach out to support, and we are happy to help.
Additionally, there are many features available, such as hiding unavailable or sold-out color options in your variant selector. You can check them under the Advanced settings button.
Why use the Rubik Variant Images app?
Rubik is the best app for setting multiple variant images on Shopify. It is ranking as a number one result on the Shopify App Store search results page https://apps.shopify.com/search?q=variant%20images
It is also the best variant images app based on Shopify AI Search results https://apps.shopify.com/guided-search?q=variant+images&surface_detail=autocomplete_guided_searches
