Option Attributes as Color Swatches
Differently from the standard version of ProductCart, the Apparel Add-On module allows you to associate a code and an image with any
option attribute you add to the database. You will notice these new fields when you add or edit an attribute.
The code is an optional field and is used to “build” the part number of any Sub-Product generated for a product that is using the selected attribute, as explained in the next section. Since the code is used to create a Sub-Product’s part number, we recommend following these guidelines.
The image is also an optional field and is displayed on the product details page only when the attribute belongs to the first option group assigned to a product. The image is shown on the product details page immediately below the product image. When customers click on it, the product image changes to the one associated with Sub-Products using the selected attribute.
For example, this feature can be used to display color swatches on the product details page. Assume that you associated a small blue square (e.g. blue_square.gif) with the attribute “Blue”. The blue square would be shown on the product details page for Apparel Products that contain Sub-Products generated by combining this attribute to other attributes (e.g. Blue/Small, Blue/Large, etc.).
When customers click on the blue square, the image (if any) associated with the Sub-Products generated by combining this attribute would be shown, and the zoom feature would link to the larger image (if any) associated with the same Sub-Products.
In order to associate an image with an option attribute, type in the file name (without file path) in the Image File field when adding or editing the attribute. If you FTP images to the Web server, remember that ProductCart assumes that images are located in the pc/catalog folder.
As mentioned above, only images associated with the attributes in the first option group assigned to an Apparel Product are shown on the product details page. Therefore, if you want to display color swatches on the page, you will always want to assign the option group “Color” as the first option group.
The code is an optional field and is used to “build” the part number of any Sub-Product generated for a product that is using the selected attribute, as explained in the next section. Since the code is used to create a Sub-Product’s part number, we recommend following these guidelines.
- Keep the code short (just a few characters).
- Don’t use spaces or special characters
The image is also an optional field and is displayed on the product details page only when the attribute belongs to the first option group assigned to a product. The image is shown on the product details page immediately below the product image. When customers click on it, the product image changes to the one associated with Sub-Products using the selected attribute.
For example, this feature can be used to display color swatches on the product details page. Assume that you associated a small blue square (e.g. blue_square.gif) with the attribute “Blue”. The blue square would be shown on the product details page for Apparel Products that contain Sub-Products generated by combining this attribute to other attributes (e.g. Blue/Small, Blue/Large, etc.).
When customers click on the blue square, the image (if any) associated with the Sub-Products generated by combining this attribute would be shown, and the zoom feature would link to the larger image (if any) associated with the same Sub-Products.
In order to associate an image with an option attribute, type in the file name (without file path) in the Image File field when adding or editing the attribute. If you FTP images to the Web server, remember that ProductCart assumes that images are located in the pc/catalog folder.
As mentioned above, only images associated with the attributes in the first option group assigned to an Apparel Product are shown on the product details page. Therefore, if you want to display color swatches on the page, you will always want to assign the option group “Color” as the first option group.