Color Swatches Pro user guide

Transcription

Color Swatches Pro
Magento Extension
User Guide
Official extension page: Color Swatches Pro
User Guide: Color Swatches Pro
Support: http://amasty.com/contacts/
Page 1
Table of contents:
1. How to upload images for attributes …..…………………………………………….…3
2. General Settings ……....…………………….……..……………………………………….…7
3. Price Settings…………………………………………………………………………………….11
4. Category Grid and Image Size Settings…….………………………………………....16
5. Zoomer Settings……………………………………………………..………………………...21
6. Lightbox Settings ……………………………………………………………………….……..23
7. Carousel for thumbnails……………………………………………………..…….…….....24
8. Settings for image label………………………………………………………………………25
9. CSS Selectors for reloadable information………………………………………….….27
10. Use price of simple products………………………………………………………….....29
11. Images of associated product for swatches………………………………………….30
12. Front end examples …..……………………………..……………………………………..31
13. Selection of configurable products on category page.…..………………....…..36
Page 2
1. 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.
Page 3
Tick this checkbox 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.
After you install the
extension, a new tab
called ‘Attribute Images’
will appear for attributes.
At this tab you can specify
color swatches size on
product and category pages.
Page 4
To upload images to the necessary
attribute please go to Catalog ->
Attributes -> Manage Attributes, filter
out the Color attribute and click on it.
To set attribute image
you can either upload it
or simply drag and drop
it to the place
Page 5
In case you need a solid
color for any product
attribute you can use our
Color Picker option with
a color palette
Page 6
You can find the extension settings in admin panel > System -> Configuration -> Color Swatches Pro.
2. General Settings
Set ‘Yes’ to use only images
for selection of configurable
product options.
Choose the configurable
product info that you’d like
to replace by simple product
info. Multiselect is available.
Page 7
2. General Settings
If the option is enabled,
product images will be
reloaded once the first
attribute is selected (first
values of other attributes will
be chosen).
If a product has only one
configurable attribute in the
drop-down, it will be
automatically selected.
Page 8
2. General Settings
Set the option to ‘yes’ to
display out of stock product
options as crossed-out.
Enable/disable swatches
slider on product view pages.
Page 9
2. General Settings
See the example of crossed out
product that is currently out of
stock.
Page 10
3. Price Settings
If you choose ‘Yes’ for All
Products’ the prices for
configurable products will be
automatically taken from
simple products.
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.
Choose ‘No’ to set each price for
configurable product manually.
Page 11
3. Price Settings
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.
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
(see the example).
Page 12
3. Price Settings
Show prices of simple
configurations associated
with configurable products
(the example of ‘Actual
Price’).
Page 13
3. Price Settings
Show prices of simple options
associated with configurable
products (the example of
‘Price Difference’).
Page 14
3. Price Settings
See the example of prices
displayed as swatch titles.
Page 15
4. Category Grid and Image Size Settings
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.
To improve category pages
performance, set re-indexation
feature to ‘Yes’ (see page 17).
You can easily
specify the product
thumbnail size.
Page 16
Set the option to
‘yes’ to limit the
number of
swatches visible on
category pages.
Specify the
number of
swatches/images
visible on a
category page.
Page 17
After you’ve set the Indexation
option to ‘Yes’ (page 12) please go
to System -> Index Management.
Tick Amasty Color Swatches Pro,
choose Reindex Data in the dropdown and click on the Submit
button.
Page 18
See the example of limited
swatches display .
Page 19
Set up the dimensions
for preview image.
Page 20
5. Zoomer Settings
If ‘Enable “Zoom” Feature’
is set to ‘Yes’, zoom effect
will be activated for product
images on front end.
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.
Page 21
5. Zoomer Settings
Set various visual effects for
the outside zoomer window
display.
Page 22
6. Lightbox Settings
Set this feature to ‘Yes’ to
enable lightbox effect when
customers open full-size
images.
With circular lightbox,
customers can view product
images in non-stop circle.
If set this option to “Yes”
thumbnail helper will appear
in lightbox. The helper shows
thumbnails of all available
product images.
Page 23
7. Carousel for thumbnails
Set ‘Enable “Carousel” Feature’
to ‘Yes’ to show product
thumbnails in an attractive
carousel.
Choose how many items should be
visible in the carousel at the same
time.
This feature activates circular
carousel. It means customers will
be able to endlessly list product
thumbnails in the carousel.
This option allows you to
display pagination right under
the thumbnail carousel.
Page 24
8. Settings for image label
Set the option to ‘yes’ to display
a text label for zoomed images.
Choose either
top or bottom
position for a
text label.
Configure display settings
like opacity, text and
background color.
Page 25
8. Settings for image label
Show text labels together
with zoomed images.
Page 26
9. CSS selectors for reloadable information
In case everything works
correctly, you don’t need to
change these settings.
Page 27
9. CSS selectors for reloadable information
If one of the blocks chosen
in the ‘Reload Product
Information’ option
doesn’t reload properly,
please specify your own
data in the CSS Selectors
tab.
Page 28
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.
10. Use price of simple products
Switch it to ‘Yes’ to use prices
of simple products instead of
setting the prices for
configurable product manually.
For more details please see
page #11 of the user guide.
Page 29
11. Images of associated products for 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 please 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.
NOTE: This option will be
enabled only in case you’ve
ticked the checkbox ‘Use images
for selection of configurable
product options’ (see page 4 of
the user guide).
Page 30
12. Front end examples
Here’s an example of extension usage. These are
two screenshots of the same product. The extension
enables you to show images and descriptions of the
simple products configured by customers.
Dropdown fields are used
for selection attributes.
By default image selections are highlighted by yellow frame,
you can modify the frame look by editing the following css file:
skin\frontend\default\default\css\amasty\amconf.css
Page 31
“Outside” zoom
“Inside” zoom
Thumbnails carousel with
one visible item and
enabled pagination.
Page 32
Attribute tooltip
on the product
page
Page 33
Attribute tooltip on
the product list
page
Page 34
Lightbox
Navigation
“Previous” button
Navigation “Next”
button
Thumbnail helper
Page 35
13. Selection of configurable products on category page
You can let customers select
options and add configurable
products to cart right from
the category page.
Page 36
Thank you!
Should you have any questions or feature suggestions, please contact us at:
http://amasty.com/contacts/
Your feedback is absolutely welcome!
Page 37

Color Swatches Pro user guide

Transcription

Similar documents

Invasion to Green Territory War Room Strategy

Fabric Test Report

Ampeg SVT-CL Schematics

Bullnose Coping - Angelus Paving Stones

Introduction - Iglesia El Candelero de Oro

Holz Bemalen, Kerb Schnitzen, by Christian Rubi. 135 pages, pro

omnipresence 3d pro design

Pro-SuITe™ TeST LIKe A Pro! DoCuMeNT LIKe A Pro! LoAD DATA

Loading Roland VersaWorks Swatches into InDesign

Experience the Freedom! - Custom Quick Release Pins