# Image swatch The Image swatch option type is a versatile and visually engaging way to allow customers to view and select products using images. It enhances the shopping experience by providing clear visual choices, making it easier for customers to pick the exact product type they want. 👉You can check out our [Demo prouduct](https://avis-demo.avisplus.io/products/color-image-swatches-1) to see how it works *** ## **Basic** Option Settings:
#### **1. Option name** This is the internal name for the image swatch option, used to identify and manage it within your product setup. #### **2. Label on product** The label displayed on the product page next to the color swatches, guiding customers on what the selection is for (e.g., "Choose a style"). #### **3. Label on cart** This label is displayed in the shopping cart, checkout, order details, invoices, packing slips, order confirmation emails, and other order-related documents to show which options were selected by the customer, providing clarity on their choices. #### **4. Required field** Make this option mandatory, ensuring that customers must select an option value before proceeding with their purchase. #### **5. Hide "Label on Product"** Choose whether to display or hide the label next to the image swatches on the product page. This can help maintain a cleaner design if the image swatch's purpose is self-evident. #### **6. One time charge** This setting allows you to modify how additional charges are applied to a specific option value. Normally, the extra charge for an option is multiplied by the quantity of the product purchased (e.g., an additional charge of $10 would become $50 if the quantity is 5). However, by enabling the "One time charge" feature, the extra charge will only be added once, regardless of the product quantity. This is useful when you want to apply a flat fee for certain options without scaling the charge with the number of items purchased. #### **7. Option values** This setting includes a image icon where you can upload images (supported formats: .png, .jpeg, .jpg, .webp), paired with a text box for entering the option value. You can add these values individually using the "Add option value" feature or in bulk using the "Bulk add" feature. This flexibility allows for quick setup and easy management of multiple image options. #### **8. Show "Quantity" for option value** This allows customers to specify a quantity for the selected option. You can also set minimum and maximum limits for the quantity, giving you control over how much of the option can be chosen. #### **9. Option URL** This setting allows you to link specific option values to external URLs, enabling customers to seamlessly transition between different sites or pages for additional information. {% hint style="info" %} [How to set up Option URL for your options](https://options-docs-v2.avisplus.io/app-features/option-url-feature) {% endhint %} #### **10. Default value** This is the image swatch that is pre-selected when the product page loads, guiding customers toward a default option you recommend. #### **11. Add description for option value** You can add a descriptive text below the option value to provide additional information about the selection. #### **12. Conditional logic** Set rules to display or hide this option based on other selections made by the customer. This helps create a dynamic, personalized shopping experience where only relevant options are shown. {% hint style="info" %} [How to set up Conditional logic for your options](https://options-docs-v2.avisplus.io/app-features/conditional-logic-option-b-shows-if-option-a-is-selected) {% endhint %} *** ## **Advanced** Option Settings:
**1.** **Change product image on option selection** When the product image alt text aligns with the option value labels and the theme setup is correct, enabling this feature will update the product image according to the selected option. {% hint style="info" %} [How to change product image upon option selection](/storefront-display/change-product-image-upon-option-selection.md) {% endhint %} #### **2. Show slider** Transform extensive lists of swatches into a streamlined slider using the slider feature. This functionality tidies up your product page, presenting options in an organized and visually pleasing manner, particularly beneficial when offering many selections. * **Number of Rows:** The slider defaults to 1 row. To display more swatches simultaneously, choose the number of rows per slide. For instance, selecting 2 rows with 4 swatches per row will show 8 swatches in one view. * **Swatches per Row:** Set the number of swatches per row by considering swatch size, option label length, and label position. For default swatch sizes with labels below, about 3 or 3.5 swatches fit per row. If labels are beside swatches, you might fit 2 per row. You can choose whole numbers like 3, or use 3.5 to display half of the last swatch if needed. * **Show arrows icon:** Enable the arrow icon on the slider by selecting this option. * **Show indicators:** Show indicators marking the current slider page. #### **3. Swatch title display** Control the visibility of the swatch title by choosing from the following options: "Default," "Show option value title," or "Hide option value title." This helps you tailor the display based on your design preferences. #### **4. Option value column** Customize the layout by selecting how many columns (1, 2, 3, or 4) the image swatches should be displayed in. This allows for better organization and presentation, depending on the number of image offered. **5. Show price** Customize how pricing is displayed with these options: * *Only Option Value:* Show price next to the option value. * *Only Option Label:* Show price next to the label. * *Show All:* Display prices with both label and value for maximum transparency. **6. Price display type** Decide whether to **show or hide** the additional price on the slider interface. #### **7. Tooltip** A brief pop-up message that appears when customers hover over an information icon near the image swatch option, providing additional details or context. #### **8. Help text** Detailed information displayed directly beneath the image swatch option, offering clear instructions or explanations to assist customers. #### **9.** Tooltip display * **Default:** Display only the selection's image on hover. * **Tooltip as value:** Show the selection image and option value on hover. * **Tooltip as description:** Display the selection's image and its description on hover. #### **10. Class name** Customize the styling of the image swatch option by assigning a CSS class name, giving you greater control over its appearance in your store. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://options-docs-v2.avisplus.io/option-types/all-option-types/image-swatch.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.