Text input

• Create a Number Field

  1. How Does the Number Field Display? The Number Field option displays numeric data — such as product dimensions, or custom options like "engraving characters”. Customers can only fill in numbers in the Number Field. Example of how it appears on a product page: 2. HFew readers

• Create a Text Area

  ** 1. How Does the Text area Display? Text areas display as multi-line input boxes, designed for longer user entries. They typically appear larger than the Textbox and are used for things like special instructions, custom messages, or detailed feedback. Note: Once you choose this option type, your customers can insert any text but emoji. Text Area type allows your customers to Enter and write more than one paragraph. Example of how it appears on a product page: ![](https://lh7-rFew readers

• Create a Textbox

  The Textbox typically appears as a field where users can input information with any characters. Please be advised that: Once you choose this option type, your customers can insert any text but emojis. Text Box option type does not allow your customers to Enter and write more than one paragraph. Example of how it appears on a product page: A Sweater with a Textbox “Your name”: ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXexUUHjcjjFHzoIHH0ES_SeZBfmceY_jNbBG3hn5cWs3lYUqncJoFew readers

• Create an Email Field

  1. How Does the Email Display? The Email option displays as a single-line textbox, specifically designed to accept valid email addresses. It automatically checks for proper formatting (including "@" and a domain). Example of how it appears on a product page: A notificatioFew readers

Choice list

• Create a Dropdown Menu with Thumbnails

  1. How Does the Dropdown Menu with Thumbnails Display? The Dropdown Menu with Thumbnails in OPTIS Product Options offers a visually enriched experience by displaying small thumbnail previews next to each dropdown value. When customers click the dropdown, they will see both the option names and corresponding thumbnail images or colors, making it easier to visually recognize and choose the right product variant. We support two types of thumbnails: 🎨 Color Thumbnail: Shows a solid colorFew readers

• Create a Checkbox

  1. How Does the Checkbox Display? The Checkbox option displays as a small square box that users can click to select or deselect a choice. It can be used individually or in groups when multiple selections are allowed. When selected, it shows a checkmark (✔️) tick inside the box. Example of how it appears on a product page: A Candle product with a Checkbox to select Fragrance: Lavender, Vanilla, Eucalyptus,.. ![](https://storage.crisp.chat/users/helpdesk/website/-/2/2/4/2/22429817467a000Few readers

• Create a Switch

  1. How Does the Switch Display? The Switch option displays as a switcher that users can turn on or off with a single click. Visually, it resembles a small horizontal track with a circular handle that slides from one side to the other. It can be used individually or in groups when multiple choices are allowed. Example of how it appears on a product page: A product with a Switch to select “Yes” on Add Gift Box and Greeting Card ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXctIYRUFew readers

• Create a Dropdown Menu

  1. How Does the Dropdown Menu Display? The dropdown menu in OPIS Product Options allows customers to select an option from a predefined list instead. When clicked, the menu expands, displaying the available choices in a structured way, making the selection process easier. Example of how it appears on a product page: A T-shirt product with a dropdown menu to select size: S, M, L, XL. ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXctNRhzsmQzQJLCX-0XXy9MpkWLqBBSK8YYYJ7nGfFQ9GOv4fj_Few readers

• Create a Radio Button

  1. How Does the Radio Button Display? The Radio Button option displays as a small circular icon next to a label, allowing users to select only one choice from a list of options. Once a user selects a radio button, any previously selected option is automatically deselected. This ensures a single, definitive answer. Example of how it appears on a product page: ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXfB2a3FkD2kj4tVUTreydwRG7iqX9MO5Ei-xKLBTyoQpxIgFQ_TRR1L9rplIPLbX70VfBN233vBIzjuFew readers

Swatch & Button

• Create a Swatch

  ** 1. How Does the Swatch Display? The Swatch option allows customers to select choices visually using images, colors, or labels instead of traditional dropdowns or checkboxes. This enhances the shopping experience, especially when product customization involves selecting colors, styles, or materials. Example of how it appears on a product page: Customers can click on color blocks or image thumbnails to select options such as T-shirt color, fabric, etc. ![](https://lh7-rt.googleusercoFew readers

• Create a Button

  1. How Does the Button Display? The Button option displays as a group of clickable buttons that users can select with a single click. Each value appears as a button, making it easy to visualize and choose. This layout is ideal for selections like size, material, or service add-ons. Example of how it appears on a product page: A product with Button options for choosing “Small”, “Medium”, or “Large”. ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXd7VgYR3wojtVDylNrNfq9j42rPD7HecN2MFew readers

Static text

• Create a Popup Modal

  ** Guide to Creating a Popup Modal Option 1. How Does the Popup Modal Display? The Popup Modal option displays as a clickable text or button on the product page. When customers click it, a popup window appears with detailed information — like size charts, personalization guides, care instructions, or policies — without cluttering the main product page. This feature is purely informational and doesn't collect input from the customer. Example on product page: “View Size Guide”Few readers

• Create a Text Option

  1. How Does the Paragraph Option Display? The Paragraph option displays as a block of text on your product page. It is not something customers fill out — it’s meant to give them extra information, like instructions, product descriptions, or important notes related to your options. Example of how it appears on a product page: ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXeJ2nYnqgPa5g-J6be9XuQiBNI3_WdaSIHTows79AH4RfYkGSup0Z2OM0MuvYuz1BBfwQVgCm3WqIbVTwp4GcG8LJ2vKJNw3iyTBxbCZSP_FlbRdBFew readers

• Create a Divider

  ** 1. What is a Divider? The Divider is a non-interactive element used to visually separate groups of options or content within your product form. It helps organize options clearly for a better user experience. 2. How to Add a Divider Step 1: Add a New Option ClFew readers

• Create a Heading

  ** 1. How Does the Heading Option Display? The Heading option displays as a bold, attention-grabbing line of text on your product page. It’s used to separate sections within your options list or label a group of options to improve clarity and organization. It does not collect any input from customers. Example of how it appears on a product page: ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXfmIEWpR9ExKSZRl5gPHr1WRTBkdYj7wlxk0-c04dXlcHh5s6ry7R7_g8n3aApoSkJRuOUNjlyz02dluQXJiIFHnv-shFew readers

Others (File upload, date picker)

• Create a Color Picker

  ** 1. How Does the Color Picker Display? The Color Picker displays as a customizable color input field, allowing customers to manually select any color they want using a color wheel or by entering a hex code. It’s perfect for use cases where customers need flexibility in choosing a unique color rather than choosing from predefined options. Example on storefront: A product allows customers to pick any color they like for custom printing, painting, or embroidery. ![](https://lh7-rt.googFew readers

• Create a File Upload

  1. How Does the File Upload Display? The File Upload option allows customers to upload their own files directly on the product page. This is ideal for personalized or customized products such as prints, t-shirts, business cards, or signage. Example: A customer can upload a photo or logo for printing on a custom shirt ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXdUj9i63Ow9RHbX_CM0LY1OCt0whv0IBPWCT3eFf7W386NMxSO295LOM2aLVlTfZPXjtkrkyYqqgq6w5En_Xo24h5zkZrl6AiwnKxTfmASilPzofZmyM81LFew readers

• Create a Date and Time Picker

  1. How Does the Date and Time Picker Display? The Date and Time Picker option lets your customers choose a specific date, time, or both directly from a calendar and clock popup on the product page. This is perfect for services like appointments, deliveries, event bookings, or any time-sensitive orders. Example of how it appears on a product page: A customer selects a Delivery date from a calendar. ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXdCIOYyTKClWKpcjTyj5zJBByfaFPdXDmv5klFew readers

• Product Personalizer - Live Preview Options

  What is it? Live preview allows shoppers to see their customizations applied to the product in real time before adding it to the cart. As customers select options (text, images, colors, buttons, swatches, etc.), the product preview updates instantly, showing exactly how the final product will look. What Live Preview Can Do Live Preview works seamlessly with your product options and variants to: Instantly reflect option changes on the product image Display text inputs, uploads, or seFew readers