What you need to know about Vario – the Shopify variant images swatches app
The Vario Shopify App allows you to transform product variant swatches into customizable buttons, patterns, custom images, variant images, and also dropdown lists.
Here’s what you can do with Vario:
- Customize all swatch styles in a central app settings panel
- Set style for each variant option
- Use Shopify product variant images as swatches
Vario – Shopify product variants swatches seamlessly integrate to 80+ Shopify themes and counting.
- Shopify Theme Store’s free themes:
Dawn (to be updated soon), Debut, Venture, Boundless, Brooklyn, Simple, Supply, Minimal, Express, Narrative
- Shopify Theme Store’s paid themes:
Impulse, Prestige, Warehouse, Streamline, Motion, Expanse, Empire, Symmetry, Blockshop, Broadcast, Alchemy, Artisan, Atlantic, Avatar, Avenue, Baseline, Beyond, Boost, California, Canopy, Capital, Cascade, Context, District, Editions, Emerge, Envy, Editorial, Expression, Fashionopolism, Flow, Focal, Foodie, Fresh, Galleria, Grid, Handy, Highlight, Icon, Ira, Kagami, Kingdom, Label, Launch, Loft, Lorenza, Masonry, Maker, Mobilia, Modular, Mr Parker, Palo Alto (TBA), Parallax, Pipeline, Providence, Reach, Responsive, Retina, Showcase, ShowTime, Spark, Split, Startup, Story, Sunrise, Testament, Trademark, Vantage, Venue, and more
- Third-party Shopify themes: Blackery
- Custom themes: Mobile Search Fixed (eCommerceStaff.com), customized Brooklyn (Need Assistance call us push 12 july), customized Prestige (Poet’s Garden Alchemist Website- Only WholesaleAIO)
We’re planning to add more third-party compatible themes to Vario customizable swatches. If you have any good Shopify themes and templates in use, please suggest them.
Add Product Variants
If you haven’t already, start by adding product variants and their corresponding swatch images.
In default Shopify admin, you can only choose images as variant media. The product images should all be the same size to streamline your product showcase.
Set Up Variant Option Styles
Initially, from your Shopify admin, go to Apps > Vario > Variant Option Settings > click Import Now to get all variant options listed.
If you have made changes to your product listings or collections, make sure to come back to Shopify admin and click Refresh to get the variations updated.
The screen will then show Updating products. And this process should take only a few seconds.
Here’s how the settings screen looks after all the variant options loaded successfully.
Afterwards, you can choose an effective style for each product option.
Eg. the style for Size option can be Button, while the style for Material option can be Custom Image swatch.
On Shopify, each product has a maximum of 3 options.
You cannot have more than 100 variants per product.
So please make sure you have created the product options so that each product lies within the limitations of Shopify variant images swatches.
Customize the Swatches
Now that you have chosen suitable styles for the above Shopify product options, feel free to customize the variant swatch in any way you want.
In the Swatch Customizer card, you can design those swatches which are set in Color/Custom Image Swatch style from the previous step.
The design screen is pretty straightforward as below. With every change you make on the left, you will see the instant effect on the right column.
You can design the swatches’ appearances while having a sneak peek of their outcome:
- Change swatch shape: choose the cell shape as a circle, or square
- Set the size: small, medium, large
- Pick border color for inactive and active swatches
- Enable/disable variant name tooltip: enabling tooltip means the variant swatch name will display on hover
- Image positioning: choose the most bespoke part of the custom image swatch
- Make sure to preview and click Save
In this card, you can design those swatches which are set in Button style from the previous step.
- Button size: choose between small, medium, and large
- Button styling: set color profiles for buttons’ background, border, and text
Browse product pages from your storefront, shop, or collections and see the new product options’ swatch styles.
Here’s how the designed swatches might look like on your product page.
Automated variant image swatch
This section shows you how to set up automated variant image swatches the fastest way.
With this new built-in feature, you will save more time because you don’t have to upload variant image files over again.
Add images to product variants
In this step, you’re supposed to add the corresponding image for each variant swatch.
For instance, I have a product with 1 product option “Color” which has 6 variations. So I carry on assigning 6 images to those 6 variants.
Enable automated variant image swatch
From your Shopify admin > Apps > Vario > click Refresh to update new product variant changes.
Go to the product option and choose Automated style.
By enabling this automated feature, all the existing variant images will be automatically assigned to their swatches.
Now all left to do is to click Save and view your product page.
My 6 existing variant images are now automatically assigned to image swatches like this.
Is Vario free to use?
Vario is free forever for 200 first merchants. These early adopters have full access to all of the Vario app’s features including lifetime updates.
I’ve just switched to another theme and my image swatches don’t work…
No worries, just get in touch via the chatbox below or email us.
If you have any questions or concerns, don’t hesitate to let us know.
Just leave a message or email us at [email protected]