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.

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

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

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.

Set up the dimensions for preview image.

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.

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.

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.

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.

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

Set various visual effects for the outside zoom window display.

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

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.

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

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

from 3 votes (Details)       1 visitor votes 1 visitor votes 0 visitor votes 0 visitor votes 0 visitor votes