Rating 0 stars - 0 votes

Add Magento 2 Visual Swatches With Store Manager for Magento

Swatches are a good way to represent product variations. They increase chances to attract customer attention to a particular color, texture or pattern of the product.

How to Enable Magento Swatch Images

Magento swatch images are displayed for a product variation:

Magento Configurable Product Swatches
How to Bulk Upload Magento Swatch Images

Swatch image is taken from the product Base image. This image is displayed when a customer clicks a swatch image at the product page. Therefore, each associated product should have a base image assigned.

Before you start adding swatch images to products, you have to set up Configurable attribute settings.

Launch Store Manager and go to Catalog > Attributes > Attribute Groups. Find the configurable attribute for which the swatch image should be displayed.

Magento Store Manager Swatch Image Attribute

Double-click the attribute to open the Edit window and configure the settings within the following tabs.

Attribute Properties:

  • Scope - Global
  • Catalog Input type - Dropdown
  • Apply to - All product types or Configurable Products
  • Add to Column Options - Yes
  • Use in Filter Options - Yes

Edit Configurable Attribute Data When Adding Magento 2 Visual Swatches
Add Magento 2 Visual Swatches With Store Manager for Magento

Storefront properties:

  • Visible on Product View Page on Storefront - Yes
  • Used for Sorting in Product Listing - Yes

Magento Store Manager Swatch Image Attribute Storefront Properties

Switch to the Manage Options (values of your attribute) tab and select Input Type: : Visual Swatch. Consider the following options there:

  • Update Product Preview Image - to display Magento 2 visual swatches on the category page.
  • Use Product Image for Swatch if Possible - ....

Magento Store Manager Swatch Image Attribute Options

Add Swatches While Creating a Configurable Product

?????? If 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.

When you create associated products, specify the following image configuration settings. Launch the Create Associated Products window. There select the following options:

  1. Select the option Apply unique images by attribute to each SKU
  2. Choose an attribute value
  3. Click Add
  4. Check Swatch image under the picture

Follow this instruction for each attribute value.

Add swatch image at the step of configurable product creation
Add Magento 2 Visual Swatches With Store Manager for Magento

Де задаються ці налаштування?

  • 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.

Assign Swatches to the Existing Configurable Products

When you already a configurable product created, select its simple product you want to add a swatch to.

You may choose an existing being base image and check the “Swatch” box in the lower grid.

If you want to display a swatch image differrent from the base image, you can 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.

Add Magento 2 Visual Swatches via Edit Form
Add Magento 2 Visual Swatches With Store Manager for Magento

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.

Magento 2 Visual Swatches at the Front End
Add Magento 2 Visual Swatches With Store Manager for Magento

Add 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. Below you can see the sample file:

File Sample for Magento 2 Visual Swatches Upload
Add Magento 2 Visual Swatches With Store Manager for Magento

What fields should be included for configurable products creating and other peculiarities of configurable product import are outlined in this article - What is Magento Configurable Product and how to Import Magento Configurable Products?

Preparing a file to import swatch images, consider the following:

  • Provide Base image for each simple product in the file
  • This image will be displayed when certain swatch icon is clicked at the frontend. For example, simple product with attributes zise=XS, color=gray and SKU WH12 - has “wh12-gray.jpg” image provided in the file, the same image we have for simple product with attributes - size=S, color=gray and simple product with attributes size=M, color=gray
  • Starting from version 1.9.1 Magento claims for unique image titles. We have identical pictures for each color, but Store Manager will regenerate image names in the process of import. Although you can create several copies and input unique name for each.

At the screenshot below you can see sample file with one configurable product, having multiple associated simple products. There is Base Image column listing images for each row, that is for each simple product as well as for main configurable item. Additionally we add image to the Media Gallery and thumbnails.

Steps to Import Magento Swatch Images

Step 1. Delimiters.

First of all, consider image settings here

  • enable image import checking “Import Images” box
  • let the application change special symbols if there are some as part of image name, for example “space”, #, %, @
  • if you have one and the same image assigned to several products (with identical name) or simply there occur pictures with the same titles, tick “Regenerate new image name if image already exists” option and Store Manager will add “_1” to image name
  • uploading images stored locally, indicate path to this local folder

Bulk Upload Magento Swatches
How to Bulk Upload Magento Swatch Images

Do not forget about delimiters:

  • uploading multiple images to Image Gallery, set separator you use for detaching images in the file
  • do not mix previously mentioned delimiter with the one, used for multiple values within one column separating. Check whether indicated in “Select delimiter which will be used to separate multiple values in one column” symbol is not present in Media Gallery column of your file as part of image name

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;

  • Import Images Option At the Step of-Magento 2 Visual Swatches Upload
    Add Magento 2 Visual Swatches With Store Manager for Magento

  • 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;

  • Normalize Image Name Option When Importing Magento 2 Visual Swatches
    Add Magento 2 Visual Swatches With Store Manager for Magento

  • 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.

Related Articles:

Card image

How Import Configurable Products to Magento 2

Learn how to create Magento 2 configurable products from scratch and update them and assign existing simple products to configurable. Read More...

Card image

Why Magento Swatches Do Not Work?

Find out what you should do when swatch images do not appear on the front-end (drop-downs are still there or instead of images you got image placeholders etc). Read More...

Card image

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...

Card image

PDF Catalog Creator Addon

Check the list of Magento PDF lookbook creator functions and find out how to generate a catalog in few steps using the ready-made templates or custom layouts. Read More...

Be the first to comment.