Magento 1 & 2 color swatches: everything you need to know

Magento and Magento 2 color swatches: everything you need to know.

Visual perception has a powerful impact on purchase behavior. 93% of customers consider visual appearance to be the key factor in a purchasing decision. For sure that inescapable fact will not change with time.

During building an e-commerce site, the owners choose the color swatches as a tool in the battle for user visual experience. Swatches provide a friendly way to show a selection of attributes for configurable products. We’d like to share with you some tips on how to get the maximum profit out of using color swatches.

Our tutorial will make clear some issues for Magento and Magento 2 separately. That will help you:

  • to navigate through the process of creating color swatches
  • to show swatches in layered navigation block
  • to integrate swatches into a custom theme

You will learn more about Magento color swatches extensions. There will be an inspirational point in our post, too.

Let’s start from creating color swatches…

Magento comes with Swatch configuration that allows showing product attributes as color swatches on the product and category pages as well as in layered navigation. You can change the width and height values of a swatch.

NOTE: Color swatches are built in configurable swatches functionality only since Magento 1.9.1 release.

If you run the older Magento versions, we recommend you to use Magento modules in order to add color swatches with ease.

We’re going to come through the creating swatches for Magento and Magento 2 separately.

Creating color swatches

Steps for Magento 1

1. First, you have to create the attribute that will be used with configurable swatch. You know you can do that in Admin > Catalog > Attribute > Manage Attributes. Please make sure you see the following values in Properties tab:

  • Scope is set to "Global"
  • Catalog Input Type for Store Owner is set to "Dropdown"
  • Apply to is set to "Configurable Product"
  • Use To Create Configurable Product is set to "Yes".

In order to add new colors, please use the Manage Label / Options tab. Press Add Option button. In Admin column specify the name of the color. Then, specify the names of the color for each language supported. These names will displayed on frontend. You can also set up the order in which the colors appear. Please find more details about creating attribute.

2. Now you have to enable Magento configurable swatches in Admin > System > Configuration > CATALOG > Configurable Swatches > General Settings. Then select the Color value in Product Attributes to Show as Swatches in Product Detail and Product Attribute to Use for Swatches in Product Listing fields.

3. After saving, navigate Admin > Catalog > Manage Products and create new configurable product. To learn more about creating configurable product, review the instruction for use.

4. At last, you have to upload swatches images and corresponding product images.

There are 2 ways of adding swatch images. The first way is to upload the images to the /media/wysiwyg/swatches folder. The second one is to add swatch images as product images. The important details are:

  • Uploaded images must be of the .png format.
  • The uploaded image name should exactly match the corresponding attribute value that it shows.
  • Swatch images, uploaded to Media Storage, are globally available and can be used for any other product.

You can read more about it here in Magento Swatches manual:

http://docs.magento.com/m1/ce/user_guide/catalog/product-configurable-swatch.html

5. Repeat all steps in order to set as many swatches as you need.

6. Reindex and clear cache.

Steps for Magento 2

The process of creating color swatches in Magento 2 has been simplified.

1. Go Admin > Stores > Attributes > Product and click Add New Attribute button. Fill all required fields in Properties tab. Make sure you see:

  • Visual Swatch is selected in Catalog Input Type for Store Owner dropdown.
  • Update Product Preview Image is set to “Yes”.
  • Use Product Image for Swatch if Possible value is set to “No”. In case you want to enable the display of product images as clickable swatches on the product page, you can select “Yes”.

NOTE: here you can learn more about creating attributes

2. Now you have to click Add Swatch button. There will be values for your attribute.

3. Specify the swatch name.

4. You can choose a color clicking the arrow near the color box. You can also replace the color with the swatch image. In order to do that, please click Upload a file.

5. Keep filling Advanced Attribute Properties fields as well as fields in Manage Labels and Storefront properties tabs. Save and clear the cache.

Now you have to assign newly created attribute to the product. If you need to create product first, please check user guide.

For existing products you can also set the attribute to multiple products at once. Go Admin > Products > Inventory > Catalog:

  • Filter the list by Name or SKU in order to involve the applicable products only.
  • Mark the checkbox of every product you want to apply the swatches to, or select a single product and choose Update Attributes in Actions dropdown.
  • Find the Color attribute and mark the Change checkbox.
  • Save and clear the cache.

Continue reading to know more cases of using color swatches

Integration the configurable swatches into a custom theme

Steps for Magento 1

The configurable swatches feature built-in Magento CE 1.9.1, is available for RWD package only. What to do if you want to integrate color swatches in your own custom theme?

Well, we have a solution.

You can install Magento 1.9.1 Configurable Swatches integration module available on Git repository. It is free to use. Let’s see what actually you will do via this module:

  • The required containers and blocks can be added to the category and product view pages.
  • The required javascripts and styles can be added.
  • You'll have extra support for color swatches inside AjaxPro or Quick Shopping popup on category view page.
  • You'll have a support for AjaxPro or AjaxLayeredNavigation loaded products on the category view page.

Now the most important part for you…

You will easily integrate the color swatches into a custom theme. Follow the instructions to deploy a module:

1. Unpack archive to Magento root directory, disable compilation and clear cache. In case you use modman, you can deploy the module with command line:


cd /path/to/magento
modman clone git@github.com:tmhub/core.git
modman clone git@github.com:tmhub/catalog-configurable-swatches.git

2. Copy the following files and folders from RWD to your theme:

Replace the PACKAGE/THEME with your values in commands below. For example f001/default, default/custom_theme.

If you plan to use color swatches on all of your themes, you can replace the PACKAGE/THEME with base/default.


cd /path/to/magento

# backup files if exists
mv app/design/frontend/PACKAGE/THEME/layout/configurableswatches.xml app/design/frontend/PACKAGE/THEME/layout/configurableswatches.xml.bak
mv app/design/frontend/PACKAGE/THEME/template/configurableswatches app/design/frontend/PACKAGE/THEME/template/configurableswatches.bak
mv app/design/frontend/PACKAGE/THEME/template/catalog/layer/state.phtml app/design/frontend/PACKAGE/THEME/template/catalog/layer/state.phtml.bak
mv app/design/frontend/PACKAGE/THEME/template/catalog/product/view/type/options/configurable.phtml app/design/frontend/PACKAGE/THEME/template/catalog/product/view/type/options/configurable.phtml.bak

# copy files from RWD to PACKAGE/THEME
mkdir -p app/design/frontend/PACKAGE/THEME/template/catalog/layer
mkdir -p app/design/frontend/PACKAGE/THEME/template/catalog/product/view/type/options
cp app/design/frontend/rwd/default/layout/configurableswatches.xml app/design/frontend/PACKAGE/THEME/layout/configurableswatches.xml
cp -r app/design/frontend/rwd/default/template/configurableswatches app/design/frontend/PACKAGE/THEME/template/configurableswatches
cp app/design/frontend/rwd/default/template/catalog/layer/state.phtml app/design/frontend/PACKAGE/THEME/template/catalog/layer/state.phtml
cp app/design/frontend/rwd/default/template/catalog/product/view/type/options/configurable.phtml app/design/frontend/PACKAGE/THEME/template/catalog/product/view/type/options/configurable.phtml

# copy js from rwd to PACKAGE/THEME
mkdir -p skin/frontend/PACKAGE/THEME/js/lib
cp -r skin/frontend/rwd/default/js/configurableswatches skin/frontend/PACKAGE/THEME/js/configurableswatches
cp skin/frontend/rwd/default/js/lib/imagesloaded.js skin/frontend/PACKAGE/THEME/js/lib/imagesloaded.js
cp skin/frontend/rwd/default/js/lib/modernizr.custom.min.js skin/frontend/PACKAGE/THEME/js/lib/modernizr.custom.min.js

If your theme already has these files, please check if you’ ve copied the color swatches modifications into your files.

Open app/design/frontend/PACKAGE/THEME/template/catalog/product/list.phtml and modify original code in two places (For grid and list modes).

Add the id attribute to the image element:


id="product-collection-image-<?php echo $_product->getId(); ?>"

Add the following code under the review summary in list mode and under the image in grid mode:


// Provides extra blocks on which to hang some features for products in the list
// Features providing UI elements targeting this block will display directly below the product name
if ($this->getChild('name.after')) {
  $_nameAfterChildren = $this->getChild('name.after')->getSortedChildren();
  foreach ($_nameAfterChildren as $_nameAfterChildName) {
    $_nameAfterChild = $this->getChild('name.after')->getChild($_nameAfterChildName);
    $_nameAfterChild->setProduct($_product);
    echo $_nameAfterChild->toHtml();
  }
}

Add the following code at the bottom of the file:


// Provides a block where additional page components may be attached, primarily good for in-page JavaScript
if ($this->getChild('after')) {
  $_afterChildren = $this->getChild('after')->getSortedChildren();
  foreach ($_afterChildren as $_afterChildName) {
    $_afterChild = $this->getChild('after')->getChild($_afterChildName);
    //set product collection on after blocks
    $_afterChild->setProductCollection($_productCollection);
    echo $_afterChild->toHtml();
  }
}

Open app/design/frontend/PACKAGE/THEME/template/catalog/product/view/media.phtml and add the following code to the bottom of the template:


<?php echo $this->getChildHtml('after'); ?>

3. Please go Admin > System > Configuration > Configurable Swatches > General and enable Magento module. Choose the options to transform into swatches.

4. Go Admin > System > Configuration > Catalog > Product Image and set the Small Image Width option to match your theme product images size.

Steps for Magento 2

There is no need for activity to integrate color swatches into Magento 2 custom theme. If you inherit your custom theme from Magento Luma or Blank, swatches will work automatically.

How to show color swatches on a sidebar using layered navigation block

Steps for Magento 1

1. First, you need to create a new attribute Color. You can use the information mentioned above in this post. Don’t forget to select Filterable in results value in Use in Layered Navigation field.

2. Add new colors in Manage Label/ Options tab. Press Save Attribute.

3. Go Catalog > Attribute> Manage Attribute Sets and add the attribute set Color.

4. Navigate System > Configuration > Configurable Swatches and enable the module.

5. In order to use color swatches in the layered navigation, you have to apply Global swatch images from the base Magento install directory at /media/wysiwyg/swatches. You can also add an image via a WYSIWYG editor and upload that to Media Storage area. The uploaded file name should match the Color attribute label.

Now navigate CMS > Pages > Home Page > Content tab > Insert image and upload the file to Swatches folder.

6. Go Catalog > Manage Products, create a product and assign the color attribute. Save.

Steps for Magento 2

Well, as we said before, the process of adding the color swatches in Magento 2 store was simplified. So, in order to show color swatches in layered navigation block, just go Admin > Stores > Attributes > Product. Set to “ Yes” Use in Layered Navigation property of the color attribute.

Are you still wondering how to use all these codes and instructions properly?

Fortunately there are many Magento solutions that will do a perfect job for you. Using Magento color swatch extensions, you will avoid possible difficulties as if you follow all tutorial steps mentioned above.

Magento color swatches modules

1. With Magento Color Swatches extension you get the opportunity to create color swatches, display them both on category and product pages, and in quick view popup. The module configuration allows you to show the product attributes in thumbnails as well as in dropdown; use the color icon, image or plain text to show swatches list.

The most outstanding option is the attribute swatches feature. Once you set up a swatch with a specific attribute, it will be applied to each product with this attribute.

2. Color Swatch V5 module provides you with setting up different swatch images for normal, hover, active and disabled state of attribute options. It allows you to set a custom description for each swatch, to display swatches on the home page or any other block with products. You will also see that the prices will be automatically updated according to the chosen swatch.

3. The Color Swatches Pro extension enables crossing out the product options with zero stock. That way, you help customers navigate better in items available to buy at the moment. The module comes with Color Picker option, lightbox and product zoom options.

4. Color Swatch Plus module enables picking product options and add the configurable products to the shopping cart directly from the category page. Via the module configuration you are allowed to apply multiple attributes into a single product which has different swatch images; display attribute titles under swatch images; select zoom and lightbox effects; change the dimensions of attribute images.

Getting started with Magento 2 solutions...

Magento 2 color swatches modules

Color Swatches Pro module was created to improve Magento 2 swatches functionality. Now you can enable the display of simple products prices under corresponding swatches right on a parent item page. Actually, it saves user's time. Another user-friendly option is the opportunity to copy URLs of specific product configuration. The module also provides you with a smart page reload option. Once the customer selects a particular color and size, the product page will be reloaded. The relevant product content will be shown at once.

Examples of swatches in popular stores

Just like we promised, it’s time for inspiration. We consider the 5 amazing Magento stores, that tend to use color swatches in order to show the product attribute options. All websites deliver excellent customer service. Have a look for yourself.

Helly Hansen

Helly Hansen is a well-known brand of the manufacturer of textiles and special equipment for sports, extreme types on the water and in the mountains. To provide users with a huge range of Helly Hansen beautifully designed and fabricated clothing and accessories online, the store owners have chosen Magento 2. Furthermore they suppose the color swatches are very important elements if you want customers make a nice choice.

Harvey Nichols

Harvey Nichols , founded in 1831, is proven to be the Britain's premier luxury fashion retailer. It sells fashion men's and women's clothing. While providing customers with a unique and accessible shopping experience, the company website shows color swatches. Happy clients can always pick the most stylish look. The website is based on Magento version.

Land Rover

Land Rover doesn’t need to be advertised. This brand is about freedom and travel without limits. Besides high-quality cars, the company provides customers with a range of branded gifts, accessories and clothing. The store management has chosen Magento 2 as a partner. Enjoy the excellent website as well as play with the product look using color swatches.

Coca-Cola

Do you know the Coca-Cola company sells 1.9 billion servings a day in more than 200 countries? If you are a Cola lover, you can purchase coca cola related items: clothing, accessories and other gifts. In order to help you shop online, the company invites you to browse a Magento based website. You can see color swatches not only on the product page but in the layered navigation.

Warby Parker

The Warby Parker company is sharing with you the vintage-inspired prescription eyeglasses. Warby Parker is an American brand found in 2010. This company is known for its socially conscious initiatives. Their website is known for usability and amazing minimalistic design. And they also place the color swatches to enhance products presentation.

As you can see, the presentation of products with color swatches is a good idea. This is quite an easy tool to improve the visual experience and the overall usability in your Magento store.

You can also review some more useful articles that will help you to experiment with Magento functionality:

We are also happy to share with you tips on creating converting landing pages and recovering abandoned cart.

So, stay tuned - we’ll keep our blog posts updated.

4 thoughts on “Magento 1 & 2 color swatches: everything you need to know”

  • jack

    hii
    i have create custom phtml file to display products on homepage and all this are the products are configurable below i have added block in cms homepage
    {{block type="catalog/product_list" column_count="5" category_id="21" template="catalog/product/homenew.phtml"}}
    but now i have to display configurable swatches on homepage same like category page
    please reply me soon
    i have install Magento version 1.9.3.4

    Reply
  • Subin

    I need to show the Configurable Product with Swatches option in Home page by CMS block.

    tried using:-

    https://magento.stackexchange.com/questions/156794/how-to-display-swatches-on-homepage-magento-2/167127

    Its working fine with XML layout, but not showing swatches when I try to call it from CMS block.

    could you please help me …???

    thank you…

    Reply
Leave a Reply