Add Magento 2 Visual Swatches With Store Manager for Magento
Swatches are a good way for representation of configurable product variations. They increase chances to attract customers attention to particular color, texture or pattern of the selling item, giving him/her the right to choose the desired variant of the merchandise and in this way, encourage them to make a purchase, especially, when it comes to a specific shade of color.
Unlike Magento 1, Magento 2 has simplified the process of adding swatches to configurable products, and correspondingly, it has influenced this process via Store Manager application.
Previously, we have depicted how Magento 2 swatches can be added via admin panel and in this article, we are going to describe how to enrich your configurable products with swatch images using Store Manager. With it, you have a possibility to make if faster and lightly, not only doing it one by one for each product but perform this process massively and with no efforts.
Here we will pay attention to particular type of swatches - the visual ones and describe the details to pay attention to when adding them to items.
So, how can Magento 2 visual swatches be added to configurable products via Store Manager for Magento? Let us take a closer look.
1. Add Swatches at the Step of Creating Configurable Item
Before you start adding swatch images to goods, there are a few points to consider concerning configurable attribute settings, so the configurable product could be properly created and added:
- Scope - Global;
- Catalog Input type - Dropdown;
- Apply to - All product types or Configurable Products.
Therewith, to display images selected as swatches on the front-end product and category pages, you should also setup attribute settings the following way:
- make sure you have checked the Use product Image for Swatch if Possible option in Manage Options (values of your attribute) tab in Attribute settings;
- tick the Update Product Preview Image, so your Magento 2 visual swatches could be displayed on the category page;
- Visible on Product View Page on Storefront and Used for Sorting in Product Listing options at Storefront properties tab - should be setup to “yes” as well;
- Add to Column Options and Use in Filter Options in Attribute Properties tab have to be configured to “yes”.
Now, let us go back to the configurable products and its swatch images.
If you want to replace the usual color with special product image or pattern as a swatch, Manage Options tab allows to Upload the file directly in Edit Attribute data window.
Other way to add Magento 2 visual swatch images to the simple products is to ascribe them at the step of configurable product creation.
During associated items producing, you will have to specify settings for future sub-products, including images configuration. Once you launch the Create Associated Products window, you be offered to select between several options:
- Apply unique images by attribute to each SKU - once this option is chosen, you need to specify the attribute your simple products and their swatches will vary by. Choose particular attribute value, select Add option and after the needed image is chosen and added, mark the corresponding option under the picture. Follow this instruction for each attribute value.
- Apply single set of images to all SKUs - will add one image kit to all simple associated products.
- Apply parent images to all SKUs - adds the parent product images to all simple ones it contains from.
Add Magento 2 Visual Swatches FREE with Store Manager for Magento Try Now!
2. Assign Swatches to Already Created Configurable Product
When you already have the existing configurable product created, launch its simple product you want to add a swatch to.
You may choose an already being base image and check the “Swatch” box in the lower grid to display it, respectively, as a swatch image of the chosen item.
In case you want Magento 2 swatch image to differ from the base one, you may upload it to the product (via Edit product form or using drag&drop method) and check the corresponding option. In this case, you will have two different images belonging to one simple product.
Having assigned different images as base and swatch ones, you will let your customers see the color variations, that will change to the base image depending on the color swatch that will be picked when viewing the product.
3. Adding Magento 2 Swatches Via Import
Undoubtedly, when it comes to adding big number of Magento 2 visual swatches, the most beneficial and time-saving procedure is an import option, using a special Import/Export products Wizard available in Store Manager.
What do you need for import procedure to pass smoothly? First of all - well-structured import file.
For correct file organization, you may export configurable product you have in your store to see the exact columns it should include for successful future Magento 2 visual swatches import.
Let’s examine the requirements for import settings specifically for Magento 2 visual swatches upload:
- if your swatch images are stored locally, check an appropriate option and specify the directory they are saved in;
- pay attention to the images format (.jpg, .jpeg, .png) to avoid inconveniences with the uploading;
- images’ names contain special symbols? Check the option that allows to normalize this kind of titles;
- in contradistinction to Magento 1, Magento 2 does not demand the same name and the attribute of the images you are going to upload;
- select SKU in both Identify product by and Product Relations Identification Method options, if you are uploading visual swatches along with new configurable product creation process.
At the end of the process, it is recommended to flush Magento 2 cache and to Rebuild Catalog Index.
That’s it! You can check the result at the storefront.
If you have questions regarding the Magento 2 visual swatches - let us know with the comment below.
Converting Magento Simple Products into Configurable
Find out how to easily change Magento simple product type into configurable select associated items and configurable attributes for it. Read More...