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.
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.
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.
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.
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.
Last updated