Child pages
  • Product Color Swatches
Skip to end of metadata
Go to start of metadata

Extension Page:


1. Backup your web directory and store database.

 Click to view details

You can make backup copies with any tool you find appropriate

If you are going to use the native Magento backup function, navigate to System -> Tools -> Backups and perform System and Database backups

 2. Log in to the Magento backend

 3. Disable compilation

 Click to view details

Navigate to System -> Tools -> Compilation.

If Compiler status is Disabled, you can skip to the next step

If Compiler is enabled, disable it.

IMPORTANT: after the extension is installed, you can enable the compilation again; IT IS CRUCIAL that you use "Run Compilation Process" function, not just "Enable button"


Installing an extension with the Compilation enabled will result in store downtime.

 4. Flush store cache

 Click to view details

You can flush the store cache in 2 ways:

  • via the backend:

Navigate to System -> Cache Management menu, and click Flush Magento Cache button

  • via filesystem:

On your server, navigate to Magento root folder, then proceed to /var/cache/; delete all the content there.

 5. Download the extension package from your account and extract the downloaded archive

 6. Copy the content of /Step_1/ folder to your store's root directory

If you are using a custom theme,

 read the instructions here.

The extension comes with 2 design packages: /base/default/ and /rwd/default/ .

In case you are using a custom theme, it is recommended to copy the design files to your current theme's folders. In case there are several themes in use at the same store, the design files must be copied to each of them.

  • Find this folder in the package: /step_1/app/design/frontend/base/default/ ; copy its content to /app/design/frontend/[your_package]/[your_theme]/
  • Find this folder in the package: /step_1/skin/frontend/base/default/ ; copy its content to /skin/frontend/[your_package]/[your_theme]/

 7. Copy the content of /Step_2/ folder to your store's root directory

 8. Flush store cache again; log out from the backend and log in again.



General Settings 

General extension settings are located in System -> Configuration -> aheadWorks Extensions -> Product Color Swatches backend screen.

General Settings section:

  • Enable Extension (Yes/No) - enables the extension output on frontend.

Product View Page section:

  • Swatcher Image Width, px and Swatcher Image Height, px - define the dimensions of swatches for a product view page (in pixels).

Category View Page section:

  • Use Swatches at Category Page - enables / disables the swatches in the catalog listing;
  • Swatcher Image Width, px and Swatcher Image Height, px - define the dimensions of swatches for a category view page (in pixels).

Layered Navigation section:

  • Use Swatches in Layered Navigation - displays swatches in Layered Navigation in the category view pages. Three modes are available:
    • No - the swatches will not be displayed in the layered navigation section, default representation will be used;
    • Yes, swatch only - only the swatch images will be displayed in the Layered Navigation block;
    • Yes, swatch and text - both swatch image and attribute text label will be displayed.




Swatches setup

To set up swatches for an attribute:

  1. Go to Catalog → Attributes → Manage Attributes, select an attribute which you would like to use swatches with. 
  2. Switch to Images For Attribute tab. Specify the options as needed.


  • If you are creating a new attribute, the Images For Attribute tab will be displayed after the attribute is saved.
  • The extension supports attributes with a  'Dropdown' Catalog Input Type only, and chosen attribute must have at least one option set in it's Manage Label / Options tab.

The available options are:

Swatch Settings section:

    • Enable swatcher for current Attribute (Yes/No) - allows enabling or disabling swatches display for that particular attribute.
    • Display images in pop-up on mouse hovering - displays swatch in popup. 
    • Override swatch with child product image - replaces a standard attribute swatch image with the main image of the correspondent child product.

Images section:

Here, you can upload the images for each of the attribute values. JPG and PNG image formats are supported.

    • To upload files (bulk upload is supported), drag them to the highlighted area in the right column, or click the same area and select the necessary files as per usual.
    • To associate an image with an attribute, drag the uploaded file from the right column to the correspondent attribute value in the main working area.
    • To remove an attribute image, hover the cursor over the necessary image and click the "Trash bin" icon.
    • To replace an assigned image, just drag the new one over the necessary label.



  • Current version of the extension does not display additional price of the options (like 'Black +$30'), however, once the option with extra price is selected, the price of the product gets updated.

  • If your server has PHP version 5.3.9 and above, it may be useful to adjust the 'max_input_vars' parameter in the php.ini file. We recommend raising the default value ('1000') to at least '3000'. More info can be found here.

Product Color Swatches extension does NOT work with custom options of simple products.


Integration with other aW extensions

  • Integration with AJAX Cart Pro: after a customer selects the necessary product options in the Category page, the item will be added to the cart without page reloads.



  • If you only need to disable the module on frontend, go to System->Configuration->Advanced->Advanced->Disable modules output and set the module AW_Colorswatches to 'Disabled' value.
  • To completely remove the extension and all it's settings do the following:
  1. Backup your database.
  2. Run the following query in your MySQL:

    If you are using the table with prefixes, they must be specified as well.
    If you are not sure how to do that or expect any troubles with it, please contact your server administrator regarding the matter.

  3. Now it is safe to delete the files of the extension, starting from app/etc/modules/AW_Colorswatches.xml

  4. Finally, execute the following query in your MySQL:

    Again, if you are using the table with prefixes, they must be specified as well.


After the extension installation the store gives an error, or blank page, or suggests to start Magento installation procedure.

Change the owner of the extracted extension files to the web server user and set 775 permissions on them. Clear the store cache and try again.

 After the installation System->Configuration->Product Color Swatches returns 404 error.

Logout from backend and login back again.

The extension does not work or work incorrectly on my custom theme.

 The extension is very theme-dependent, so in case of any troubles with integration with your custom theme you are welcome to apply to our technical support. Please note, depending on the complexity of your theme's code we may not be able to assist free of charge.

There is no aheadWorks extensions under my configuration section, or having the extension tab clicked I get a blank page, or Access Denied error.

Clear the store cache, browser cookies, logout and login again.

My configuration changes do not appear on the store.

 Clear the store cache, clear your browser cache and domain cookies and refresh the page.

I can not upload the logo and images for brands.

Make sure to set full permissions (777) to the folder /media/aw/colorswatches/ and all it's subfolders.

You can always find the latest version of the software, full documentation, demos, screenshots and reviews at
License agreement:
Contact us:
Copyright © 2019 aheadWorks

  • No labels