If you have a product with multiple variants and you want to display all available options visually to your shop visitors, this post is for you.
In this post, I will show you how to transform your variant picker from this boring button version.
To variant image swatches where your users can instantly see all available options visually.
You can also watch the video where I demonstrate how you can set up variant image swatches and how to show only selected variant images.
How to Set Up Variant Image Swatches?
If you don’t have a development team and are looking for a solution that doesn’t require writing a single line of code, you can install our app, Rubik Variant Images, to set up variant image swatch functionality on your Shopify store. Rubik is the best app according to Shopify’s guided search results
Step 1: Install Rubik Varian Images app from the Shopify App Store
You can install the app from this link.
Step 2: Assign Multiple variant images to your products
By default, Shopify allows you to assign only one image per variant, but with the Rubik app, you can assign multiple images per variant.
Step 3: Enable variant image swatches on your theme
Click on “Swatch (variant picker)” from the menu and open swatch settings.
After enabling swatches you can click on Enable on theme editor and then Save your configuration.
Step 4: Change the style of your swatches
At this point, swatches should already be available on your product page. You can then click the Customize appearance button to change the look and feel of the swatches to match your brand identity. Various options enable you to customize variant image swatches according to your brand style. Change color, shape, size, and other attributes.
Step 5: Show only relevant variant images
The main functionality of the Rubik app is the ability to set multiple images per variant and then to show them on the storefront when users are selecting a specific variant. In this post, we haven’t focused on this part, but if you watch the full video, you will see that part as well. You can also read this article for more detailed guide.
You can also read the following post to compare multiple other solutions with Rubik app
If you are using Horizon theme it is also possible to set up variant image swatches without app. You can read this post to learn how.
