AvisPlus Product Options v2
  • Get started!
    • Key Terminology Simplified
      • Avis Options and variants
      • Option Set
      • Option template
      • Option Set template
      • Option type
      • Option name
      • Label on Product
      • Label on Cart
      • Option value
      • Add-on product (Add charge)
      • Bundle variant
      • Conditional logic
      • Option URL
      • Tooltip
      • Help Text
      • Placeholder Text
      • Option widget
    • Option Types
      • Single line text
      • Multiple-line text
      • Number
      • Datetime
      • Email
      • Phone
      • Font Selector
      • Color Picker
      • File Upload
      • Switch
      • Quantity
      • Hidden field
      • Color swatch
      • Image swatch
      • Radio button
      • Checkboxes
      • Button
      • Dropdown menu
      • Color dropdown menu
      • Image dropdown menu
      • Combo box
      • Option Group
      • Space
      • Paragraph
      • HTML
      • Heading
      • Divider
      • Pop-up
      • Size chart
    • Activate App
  • User guide
    • Create Avis Option Set
      • Avis Option Set Template
      • Avis Option Template
    • Change product image upon option selection
    • Translate Avis options
    • Customize Shopify Option
    • Add Charge for an option value
      • One-time add charge feature
      • Add-charge by Quantity
      • Add-charge by Character
      • Hide Add charge product from Storefront
      • Hide Add charge product from Search bar
      • Hide Add charge product from 'Related Products' section
      • Hide Add charge product from Google Search
    • Add Bundle for an option value
    • Conditional Logic (Avis and Avis)
      • Conditional Logic (Avis and Shopify)
    • File Upload for Customers
      • File Upload Advanced Options
    • App Settings
      • Avis Option Settings
      • Shopify Option Settings
    • App Design
      • Avis Option Design
      • Shopify Option Design Library
    • OPTION URL feature
    • Import/Export Option Sets
    • Shopify Point Of Sale (POS) integration
    • Customize tooltip
    • Delete Span tags around the Add charge
    • Changing the option position on the Product page
      • Getting the HTML element
      • Reposition Avis options in EComposer Landing Page Builder
  • Subscription and billings
    • Pricing plans
    • How to Upgrade Your Plan
    • How to Cancel Your Subscription
  • Frequently Asked Questions
    • The differences between "Avis Option" tab and "Shopify Option" tab
    • How can I reposition Avis Options on Product Page?
    • What to do if Avis options aren’t visible on Product Page?
    • How can I set up Conditional Logic for options?
    • How can I add a charge to an option/ a variant?
    • Why aren't the option's Add charge included in Orders?
    • How can I show Avis Options on Packing Slips?
    • How can I show Avis option on Mail Order confirmation/Order invoice/New order?
    • Can I add bundling products with the app?
    • Does the app work with Shopify Online Store 2.0?
    • Will the app slow down my website?
    • What happens if I uninstall the app, and how does it affect my store?
  • support and features request
    • 📩Contact Us
Powered by GitBook
On this page
  • Basic Option Settings
  • Advanced Option Settings
  1. Get started!
  2. Option Types

Color swatch

PreviousHidden fieldNextImage swatch

Last updated 8 months ago

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.

How to set up Option URL for your options
How to set up Conditional logic for your options