Color Swatch Tutorial - Advanced Color Swatches Options

Color Swatch Tutorial – Advanced Color Swatches Options

Advanced Options

Color Swatch options described here are available in Magento administration System >> Configuration >> SMDesign ColorSwatch.

1. General Box – Option : Enable ColorSwatch


  01-config-swatch-admin


Change the dropdown (1) to Yes/No to enable/disable ColorSwatch extension.


  02-config-swatch-public


When disabled, you’ll see the default Magento select box on your product page.

2. General Box – Option: Show Magento configurable option block


  03-config-selectbox-admin


Use select box to set the option to Yes/No (1). If set it to Yes, default Magento select box will be shown in addition to color swatches.


  04-config-selectbox-public


3. General Box – Option: Swatch image width / Swatch image height


  05-config-swatch-s-w-admin


Set the Swatch image width (1) and Swatch image height (2) in pixels.


  06-config-swatch-s-w-public


4. General Box – Option: Update More View images


  07-config-moreview-admin


Select Yes/No (1) from the select box to enable/disable the option. When set to No more view area won’t be updated when users select different swatches.


  08-config-moreview-public


If the option is set to Yes, when users select different swatches, more view images will be updated accordingly.


  09-config-moreview-admin-2

  10-config-moreview-public-2


5. Zoom Settings – Option : Enable Zoom


  11-zoom-on-admin


Turn Zoom On or Off by selecting Yes/No from the select box (1).


  12-zoom-on-public


6. Zoom Settings – Option : Allow More View images to update Main image



13-more-view-admin


If set to Yes(1) when users click on any of the more view images, the main image will be updated with the image from the more views. If set to No(1) default magento pop up will appear when users click on any of the more view images.


  14-more-view-public


7. Zoom Settings – Option : Zoom Wrapper Width / Zoom Wrapper Height


  15-zoom-w-h-admin


Enter the width (1) and height (2) of the zoom box in pixels.


  16-zoom-w-h-public


8. Zoom Settings – Option : Zoom Wrapper Offset Left / Zoom Wrapper Offset Top


  17-offset-admin


Enter the width (1) and height (2) of the zoom box in pixels.


  18-offset-public


9. Zoom Settings – Option : Image Size Type / Zoom Container Width / Zoom Container Height / Zoom Ratio


  19-zoom-custom


If you want more control over the size of the main image and the zoom level, change the Image Size Type (1) option to Resize by using the container dimensions and zoom ratio. Set the Zoom container width (2) and height (3) in pixels, and enter the zoom ratio.


  20-zoom-custom-public

  21-zoom-ratio-admin


If you’d like more aggressive zoom, enter a new value in the Zoom Ratio setting (1).


  22-zoom-ratio-public


10. Zoom Settings – Option: Zoom Type


  23-zoom-outside-admin


ColorSwatch with Zoom extension comes with three build in zoom types: Outside, Inside and Inside full. The default is Outside (1).


  24-zoom-inside-admin

  25-zoom-inside-full-admin


You can change the zoom mode to Inside to get this effect:


  26-zoom-outside-public

  27-zoom-inside-public


Or inside full (1) to get this effect:


  28-zoom-inside-full-public

Share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *