--- title: Option Attributes as Color Swatches description: Option Attributes as Color Swatches --- [Skip to content](https://productcart-kb.nsource.com/kb/option-attributes-as-color-swatches1#main-content) [![pc\_logo](https://productcart-kb.nsource.com/hs-fs/hubfs/pc_logo.png?width=162&height=75&name=pc_logo.png)](https://productcart.com/) Open main navigation Close main navigation - - [Contact Support](mailto:help@productcart.com) [Contact Support](mailto:help@productcart.com) How can we help you? - There are no suggestions because the search field is empty. 1. [ProductCart Help Center](https://productcart-kb.nsource.com/kb?hsLang=en) 2. [Apparel Add-On](https://productcart-kb.nsource.com/kb/apparel-add-on?hsLang=en) March 5, 2024 # 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.   - 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.   - [Managing Your Products](https://productcart-kb.nsource.com/kb/managing-your-products?hsLang=en) - [Managing Orders](https://productcart-kb.nsource.com/kb/managing-orders?hsLang=en) - [Managing Customers](https://productcart-kb.nsource.com/kb/managing-customers?hsLang=en) - [Getting Started](https://productcart-kb.nsource.com/kb/getting-started?hsLang=en) - [Apparel Add-On](https://productcart-kb.nsource.com/kb/apparel-add-on?hsLang=en) - [Upgrading ProductCart](https://productcart-kb.nsource.com/kb/upgrading-productcart?hsLang=en) - [Change Logs](https://productcart-kb.nsource.com/kb/change-logs?hsLang=en) - [Store Settings](https://productcart-kb.nsource.com/kb/store-settings?hsLang=en) - [Security](https://productcart-kb.nsource.com/kb/security?hsLang=en) - [Shipping Options](https://productcart-kb.nsource.com/kb/shipping-options?hsLang=en) - [Payment Options](https://productcart-kb.nsource.com/kb/payment-options?hsLang=en) - [Tax Options](https://productcart-kb.nsource.com/kb/tax-options?hsLang=en) - [Advanced Technical Articles](https://productcart-kb.nsource.com/kb/advanced-technical-articles?hsLang=en) - [Pages](https://productcart-kb.nsource.com/kb/pages?hsLang=en) - [What's New In ProductCart](https://productcart-kb.nsource.com/kb/whats-new-in-productcart?hsLang=en) - [Marketing](https://productcart-kb.nsource.com/kb/marketing?hsLang=en) - [How To's](https://productcart-kb.nsource.com/kb/how-tos?hsLang=en) - [Google Analytics](https://productcart-kb.nsource.com/kb/google-analytics?hsLang=en) - [QuickBooks Sync](https://productcart-kb.nsource.com/kb/quickbooks-sync?hsLang=en) - [Default](https://productcart-kb.nsource.com/kb/default?hsLang=en) - [Configurator](https://productcart-kb.nsource.com/kb/configurator?hsLang=en) - [SEO](https://productcart-kb.nsource.com/kb/seo?hsLang=en) - [Mobile Commerce](https://productcart-kb.nsource.com/kb/mobile-commerce?hsLang=en) - [Troubleshooting](https://productcart-kb.nsource.com/kb/troubleshooting?hsLang=en) - [Customizing Your ProductCart Store](https://productcart-kb.nsource.com/kb/customizing-your-productcart-store?hsLang=en) - [ProductCart Apps](https://productcart-kb.nsource.com/kb/productcart-apps?hsLang=en) - [Hidden Topic](https://productcart-kb.nsource.com/kb/hidden-topic?hsLang=en) - [Reports and Exports](https://productcart-kb.nsource.com/kb/reports-and-exports?hsLang=en) [![ProductCart Logo](https://productcart-kb.nsource.com/hs-fs/hubfs/pc_logo.png?width=200&height=93&name=pc_logo.png "ProductCart Logo")](https://netsourceinc.com) NetSource Commerce, Inc. **|** Headquarters - 3700 South Pine Avenue, Ocala, FL 34471 **|** Tel [(800) 709-3240](tel:+8007093240) **|** Fax (352) 401-0353 [mailto:help@productcart.com](mailto:help@productcart.com) Copyright © 2026, NetSource