Color swatch
The Color swatch option type is a versatile and visually engaging way to allow customers to select colors for products. It enhances the shopping experience by providing clear visual choices, making it easier for customers to pick the exact color they want.
Basic Option Settings
1. Option name
This is the internal name for the color 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 color").
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. Option URL
This setting allows you to link specific options to external URLs, enabling customers to seamlessly transition between different sites or pages for additional information.
5. Option values
This setting includes a color icon where you can select any color, 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 color options.
6. Default value
This is the color swatch that is pre-selected when the product page loads, guiding customers toward a default option you recommend.
7. 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.
Advanced Option Settings
1. Required field
Make this option mandatory, ensuring that customers must select a color before proceeding with their purchase.
2. Hide "Label on Product"
Choose whether to display or hide the label next to the color swatches on the product page. This can help maintain a cleaner design if the color swatch's purpose is self-evident.
3. 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.
4. 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.
5. Hide swatch title
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.
6. Option value column
Customize the layout by selecting how many columns (1, 2, 3, or 4) the color swatches should be displayed in. This allows for better organization and presentation, depending on the number of colors offered.
7. Tooltip
A brief pop-up message that appears when customers hover over an information icon near the color swatch, providing additional details or context.
8. Help text
Detailed information displayed directly beneath the color swatch option, offering clear instructions or explanations to assist customers.
9. Class name
Customize the styling of the color swatch option by assigning a CSS class name, giving you greater control over its appearance in your store.
Last updated