User Tools

Site Tools



For more details see the Color Swatches Pro extension page.

Guide for Color Swatches Pro

Color Swatches Pro extension is an effective tool to present configurable products in a vivid, engaging style. The plugin makes your products' pages easy-to-use and truly shoppers-friendly.

General Settings

You can find the extension settings in admin panel → System → Configuration → Color Swatches Pro.

Hide Configuration Dropdowns - Set to Yes to use only swatches for selection of configurable product options.

Show All Attribute Options - Display all options at once. If set to No, only the options that are specified in the settings will be displayed.

Reload Product Information - Choose configurable product info elements that should be replaced by simple product info. The elements will be updated without full page reload, on the fly while customers select options. Multiselect is available.

Show 'Reset Configuration' option - Display Reset Configuration button in the options' section of a product page.

Reload Images when the First Attribute Selected - If the option is enabled, product images will be reloaded once the first attribute is selected (first values of other attributes will be chosen).

Automatically Select Attributes That Have One Single Value - If a product has only one configurable attribute in the drop-down, it will be automatically selected.

Display Out of Stock Options as Crossed Out - Set the option to Yes to display out of stock product options as crossed-out.

A sample of out-of-stock swatches

Enable Slider for Swatches - Enable/disable swatches slider on product view pages.

A sample of swatches' slider

Configurable Product Matrix

Apart from the functionality of the Color Swatches Pro extension, you can also enhance your shoppers' experience, additionally installing the Configurable Product Matrix module.

Configurable Product Matrix is a handy tool displaying all the available variants of a configurable product with size, price, discount, and available quantity, etc.


How to upload images for attributes?

To upload images to the necessary attribute please go to Catalog → Attributes → Manage Attributes, filter out the Color attribute and click on it.

After you install the extension, a new tab called Attribute Images will appear for attributes.

Tick the checkbox Use Images for selection of configurable product options before clicking Save Attribute button to enable image-based selection of options for configurable product attributes.

Please click Save and Continue Edit button to save color swatches dimensions. At the next step you need to upload attribute images.

At Attribute Images tab you can specify color swatches size on product and category pages.

To upload images to the necessary attribute, go to Catalog → Attributes → Manage Attributes, filter out the Color attribute and click on it.

Upload Image - To set attribute image you can either upload it or simply drag and drop it to the place.

In case you need a solid color for any product attribute you can use our Color Picker option with a color palette.

Display Swatches on a Category page

Go to admin panel → System → Configuration → Color Swatches Pro.

Display Color Swatches on Product List Pages - Set this option to Yes to show color swatches and enable customers to select them on category pages and search results. Choose AJAX mode to speed up category pages download.

Use Indexes for Better Performance - To improve category pages performance, set re-indexation feature to Yes.

Product Thumbnail Width (Height) - Specify the product thumbnail size in pixels.

Show limited amount of swatches - Set the option to Yes to limit the number of swatches visible on category pages.

Visible swatches amount - Specify the number of swatches/images visible on a category page.

Limit an amount of swatches

Images of associated products for swatches

Go to admin panel → Catalog → Products → Associated Product

The extension allows you to use images of associated products for swatches of one attribute. E.g. you can use the images for attribute color.

  • For this aim, go to Edit a configurable product and open Associated Products tab.
  • Tick Use image from product next to the attribute for which you would like to use the images of simple products as swatches.
  • This option will be enabled only in case you’ve ticked the checkbox Use images for selection of configurable product options.

Image Size Settings

Go to admin panel → System → Configuration → Color Swatches Pro.

Set up the dimensions for preview image.

Price Settings

Go to admin panel → System → Configuration → Color Swatches Pro.

Use Price of Simple Products - If you choose Yes for All Products the prices for configurable products will be automatically taken from simple products. Choose No to set each price for configurable product manually.

Choose For Specified Products to set manually the products where the prices for configurable products will be automatically taken from simple products. In this case you should tick on the checkbox Use price of simple products on the product settings page.

Display Price - If you show simple options of configurable products in drop-downs, you can enable prices display for them. Choose whether to show actual prices for each configuration or the price difference.

A sample of price displayed

Display Price of Simple Products in Drop-Downs - Display prices in dropdowns in Actual Price mode, or with Price Difference. Select Don't Show Price to disable.

  • Show prices of simple configurations associated with configurable products (a sample of Actual Price enabled).

  • Show prices of simple options associated with configurable products (a sample of Price Difference).

Display Price of Simple Products in Swatch title - Set the option to Yes if you don’t use drop-downs to show simple options. In case the option is enabled the prices of simple options will be displayed in a swatch title.

  • A sample of prices displayed as swatch titles.

Price of simple products

To enable usage of simple product prices for a configurable product, please go to Catalog→Manage Products and open the configurable product for which you would like to enable this feature.

Use price of simple products - Switch it to Yes to use prices of simple products instead of setting the prices for configurable product manually.


Enable Zoom Feature - If Enable “Zoom” Feature is set to Yes, zoom effect will be activated for product images on front end.

Type of Zoom - There are three types of zoom available: Outside , Inside and Lens. Choose Outside zoom to show zoomed product image in a separate window. Inside Zoom will display zoomed elements of product images right in the main product image window.

Settings for Zoomer

Choose Zoom window position and insert corresponding position number in the field.

Set various visual effects for the outside zoom window display.

Settings for image label

Display Image Label - Set the option to Yes to display a text label for zoomed images.

Position - Choose either top or bottom position for a text label.

Background Color - Configure display settings like opacity, text and background color.

Show text labels together with zoomed images.

Enable Lightbox Feature - Set this feature to Yes to enable lightbox effect when customers open full-size images.

Circular Lightbox - With circular lightbox, customers can view product images in non-stop circle.

Enable Thumbnail Helper - If set this option to Yes thumbnail helper will appear in a lightbox. The helper shows thumbnails of all available product images.

FancyBox 3
To disable the effect of Lightbox & Zoom, set:
  • Enable “Zoom” Feature to NO
  • Action for Main Image Change to Disable
  • Enable “Lightbox” Feature to NO
  • Enable “Carousel” Feature to NO

This will reset settings to default theme with Zoom .

Enable Carousel Feature - Set Enable “Carousel” Feature to Yes to show product thumbnails in an attractive carousel.

A sample of an enabled carousel

Count of Visible Items in Carousel - Choose how many items should be visible in the carousel at the same time.

Circular Carousel - This feature activates circular carousel. It means customers will be able to endlessly list product thumbnails in the carousel.

Use Pagination - This option allows you to display pagination right under the thumbnail carousel.

CSS selectors for reloadable information

If you experience any difficulties defining CSS selectors, have a look on our article onhow to find css selectors.

In case everything works correctly, you don’t need to change these settings.

Re-index Data

After you’ve set the Indexation option to Yes, go to System → Index Management. Tick Amasty Color Swatches Pro, choose Reindex Data in the dropdown and click on the Submit button.

Rate the user guide
 stars  from 1 votes (Details)
magento_1/color_swatches_pro.txt · Last modified: 2019/09/18 14:14 by nahiyeva