Images in eCommerce are not almighty, but still indispensable. They grab the customers’ attention and shape their decision-making behaviors. Taking that 92% of consumers say visuals are the top influential factor affecting a purchase decision, the shoppers can be quite sensitive to how a product looks in different variations, from various angles. Let’s learn how to make it an instant crush using image, color and text swatches in Magento 2.
Table of Contents
- 1 What are the Swatches, and Their Basic Types?
- 2 How Can You Effectively Expand the Default Magento Functionality?
- 3 Example 1. Text & Image Swatches. Preview Tooltip.
- 4 Example 2. Standard Product Image Replacement with an Option Image
- 5 What is Option Gallery Mode & How Can You Benefit from Using it?
- 6 Wrap Up
What are the Swatches, and Their Basic Types?
Swatches are the feature that allows for presenting product options by displaying the corresponding visual representation when selected.
Three types of swatches are as follows:
It enables merchants to display such product options as color/texture/patterns. Unavailable options get crossed when they are out-of-stock.
Image Swatch (sometimes, Visual Swatch)
It brings product presentation to a whole new level and allows showing product variations as close as possible to their real-life look.
When there are no particular images to be displayed, you can use ‘buttons’ with text values for product attributes. This swatch works just the same way as the color one.
How Can You Effectively Expand the Default Magento Functionality?
Magento 2, by default, enables the users to set up swatches solely for the configurable products on the product page, in product listings, and layered navigation. This includes visual and text swatches, as well as drop-down input control.
Please, consult this post to learn how to use the default Magento 2 functionality to configure the swatches.
The Advanced Product Options extension drastically expands the default possibilities. It lets adding image, text and color-based swatches for any product type*, thus presenting any product variant to the best advantage.
Let’s learn how to configure the extension in order to:
1) add image swatch,
2) add text swatch
3) replace the standard product images with the one of an option,
4) use multiple images for a single option,
5) display option images in the preview tooltip.
Example 1. Text & Image Swatches. Preview Tooltip.
In the following example, I’ll show you how to implement such actions as adding text and image swatches, as well as displaying option images in the preview tooltip.
Let’s learn how to configure a simple product. In fact, with the extension, there’s no need to create configurable products to offer product variations any longer.
This kind of a result you’ll achieve on the frontend:
To reach the functionality and set up the swatches for the product options in your Magento 2 store, go to Products – Inventory – Catalog, and select a product you wish to add swatches to. The basic configurations are stored within the Customizable Options tab.
That’s how the configurations for the above example look like from the backend:
As you can see, the drop-down menu has been chosen as an option type. However, to make the variants look like regular text swatches, you’ll need to check off the ‘Is Swatch’ box.
Additionally, you may want to use images as a tooltip for the options. To do that, upload the corresponding pictures for each option separately (that’s where you can upload multiple images to show your offerings in full), and choose the ‘tooltip’ value after the image(s) has been uploaded. To do that, click the option image, and select one out of the available options – which is ‘Tooltip’ in our case.
In order to create image swatches, you’ll need to select ‘Base’ when configuring image roles. As for our example, images for the ‘SSD type’ are displayed both as the ‘Base’ and the ‘Tooltip’ when moused over.
As you can see, the configuration logic is plain and simple.
Note that currently, the Advanced Product Options extension enables you to upload colors as images only! Thus, to display colors you’ll still have to upload images of red, blue, your variant.
Example 2. Standard Product Image Replacement with an Option Image
Let’s consider one more example. Here, the standard product image gets replaced with the one of a product variant:
The basic configurations are within the ‘Customizable Options’ tab, just as always. Here, make sure the ‘Image Mode’ is set to ‘Replace’, as well as ‘Replace Main Gallery Image’ is selected within the image roles.
What is Option Gallery Mode & How Can You Benefit from Using it?
The Option Gallery Mode regulates the way the images are shown in product options. It gives you the benefit of displaying products in a way that suits your target audience the most.
When disabled, no images will be naturally shown. Let’s take a closer look at the available display options:
When this Gallery Display Mode is selected, images get displayed as thumbnails near/below product options:
This option hides all the product variants images, and allows displaying them right after they get selected:
The configurations are hidden within the Customizable Options tab, just as always. That’s how they look like in the backend:
It’s often insufficient to display the pure colors for product variations as their look can be more complex, composite and unique for a specific option. The way you display your offerings online is positively associated with the revenue level and can even cost you clients.
*Note that Magento doesn’t allow product custom options for bundled products.
I hope, you find this post useful. Need more help with product swatches? Feel free to leave a comment below, and I’ll update the article with much pleasure!
May the force be with you =)