# General # Refund Policy # OPTIS Product Options ## | Overview If you experience any issues while using the app, have concerns about billing, or need technical or development support, please contact us **before requesting a refund**. This policy applies specifically to the **OPTIS Product Options app**. You can reach our support team via: * 📧 **Email:** * 💬 **In-app Live Chat** Our team is committed to helping you resolve issues as quickly as possible: * **Within 24 hours** on business days * **Within 48–72 hours** on weekends Refund requests will only be considered after we’ve had the chance to investigate and attempt to fix any issue related to the app. *** ## | Refund Terms ### **1. Refund Eligibility** **Monthly subscription** * Refund requests must be submitted within **5 days of the current billing cycle** * Refunds are considered only if a **major issue** occurs (e.g. data loss or serious disruption caused by the app) If you cancel the app after using it for several months: * Usage will be calculated based on the **original monthly price (without discounts)** * Refunds are handled **case by case**, after deducting Shopify’s processing fees *** ### **2. Non-Refundable Cases** Since OPTIS Product Options offers a **free plan or trial period**, refunds are **not provided** in the following situations: * You change your mind about using the app * You purchased the app at a discount * You installed the app for evaluation purposes * You installed the app by mistake * You lack the technical knowledge to use the app * You request a goodwill refund * You request refunds for previous billing cycles * You request refunds for paid development or customization services * Issues caused by conflicts with third-party apps or themes We strongly recommend reviewing the app details, using the demo, or contacting us for clarification **before subscribing**. *** ### **3. How to Request a Refund** If you would like to request a refund, please submit your request via **in-app Live Chat** or email us at ****. If you encounter any issues while using the app, we strongly recommend contacting our support team first so we can investigate the problem and help restore any affected data. Please **do not uninstall the OPTIS Product Options app** before reaching out. We’re only able to diagnose and assist while the app is still installed. Once the app is uninstalled, we won’t be able to investigate or provide support. *** ### **4. Before Uninstalling** If you decide to uninstall **OPTIS Product Options**, please contact our support team first. We’ll help you remove any leftover code to ensure your store remains clean. *** ### **5. Refund Processing** Once we receive your refund request: * **Case 1: You’ve already been charged** → We’ll process the refund accordingly * **Case 2: You haven’t been charged yet**\ → Please wait until the charge appears, then contact us again\ → Or contact **Shopify Support** directly to request charge cancellation Due to Shopify’s billing system: * All app billing and refunds are handled directly by **Shopify’s billing system**. * As a result, we’re unable to cancel or prevent future charges on your behalf. * Refunds can only be processed **after Shopify has completed billing for the current cycle**. **Special Case – Forgot to Cancel After Trial** If you forget to cancel your subscription after the trial period ends, you may be eligible for **50% refund of the first billing cycle**, as long as the request is submitted within the **first 5 days**. *** ## | **Charge Policy** **App Upgrades, Downgrades, and Prorating** When upgrading or downgrading your app plan, Shopify prompts you to approve a new recurring charge because only **one active charge** can exist per app at a time. * The existing charge will be cancelled and replaced by the new one. * Depending on the app, the new charge applies **immediately** or **after the current billing cycle** ends. If the new charge applies immediately: * **Upgrade:** You’ll be charged a prorated amount based on the difference in plan prices and the remaining days in your billing cycle. Example: If you upgrade from a $5 plan to a $15 plan on day 15 of a 30-day cycle, you’ll be charged: > $5 + ($15 – $5) × (15/30) = $10. * **Downgrade:** You’ll receive an **application credit** for the unused portion of your higher plan, which can be applied to future Shopify app purchases. *** If you have any questions or need clarification, feel free to **chat with us anytime** — our support team is always happy to help 💙 # OPTIS Color Swatch ## | Overview This Refund Policy applies specifically to the **OPTIS Color Swatch** app. If you experience any issues while using the app, have questions about billing, or need technical assistance, please contact our support team **before requesting a refund**. We’re always happy to help and will do our best to resolve your concerns as quickly as possible. You can reach us via: 📧 **Email:** \ 💬 **In-app Live Chat** ⏱ **Response time** * Within **24 hours** on business days * Within **48–72 hours** on weekends Refund requests will only be considered after we’ve had the opportunity to investigate and attempt to resolve any issue related to the app. #### 30-Day Refund Guarantee We offer a **30-day money-back guarantee** for OPTIS Color Swatch. If you’re not satisfied after your **first payment**, you can request a **full refund within 30 days** of that payment date. Simply message us via in-app Live Chat or email ****, and we’ll process a full refund through Shopify once approved. *** ## | Refund Terms ### 1. Refund Eligibility You are eligible for a **full refund** if: * You’ve made your **first payment** for OPTIS Color Swatch * Your refund request is submitted **within 30 days** of the first charge * The issue is related to the app’s functionality, performance, or compatibility Refunds are processed via Shopify’s billing system. *** ### 2. Non-Refundable Cases Although we provide a generous refund guarantee, refunds may not be granted in the following cases: * Refund requests submitted **after 30 days** from the first payment * Requests for **previous billing cycles** beyond the first charge * Paid development, customization, or setup services * Issues caused by conflicts with third-party apps or custom themes * Goodwill refund requests without technical or functional issues We strongly recommend contacting our support team for clarification or assistance before making a purchase decision. *** ### 3. How to Request a Refund To request a refund: * Contact us via **in-app Live Chat**, or * Email **** If you encounter any issues, please reach out **before uninstalling the app**. We can only investigate and assist while OPTIS Color Swatch is still installed. Once the app is uninstalled, we may not be able to diagnose issues or recover data. *** ### 4. Refund Processing Please note: * All app billing and refunds are handled by **Shopify’s billing system** * We **cannot cancel or prevent future charges directly** * Refunds can only be issued **after Shopify completes billing for the current cycle** If you haven’t been charged yet, please wait until the charge appears, then contact us, or reach out to Shopify Support directly. *** If you have any questions or need help at any point, feel free to chat with us - our support team is always here to help 💙 # Privacy Policy ### 1. Introduction BSS Commerce (“we”, “us”, or “our”) is a Shopify Partner. We develop Shopify apps (the “App”) and provide related support and consulting services (the “Services”) to merchants using Shopify to run their online stores. This Privacy Policy explains: * What information we collect when you install or use our app * How we use and protect that information * Your privacy rights and how the law protects you By installing or using our app, you agree to the practices described in this policy. *** ### 2. Information We Collect When you install the app, Shopify automatically shares certain information with us through Shopify’s API, in accordance with Shopify’s API License and Terms of Use. #### Information from your Shopify store This may include: * Your store name * Your store email address * Customer email addresses * Information shared when you contact us for technical or customer support This information is required for the app to function properly and for us to provide support. If you choose not to provide this information, you may uninstall the app at any time. #### Information from our website When you visit the BSS Commerce website (“Site”), we may automatically collect certain information using common technologies such as: * **Cookies** – small data files stored on your device to remember preferences and improve user experience * **Log files** – including IP address, browser type, internet service provider, referring/exit pages, and timestamps * **Web beacons, tags, and pixels** – used to understand how visitors browse the Site For more details about cookies and how to disable them, please visit . *** ### 3. Why We Collect Your Information We use your information to: * Create and save app settings for your store * Provide technical support and respond to your requests * Enable and operate app features * Communicate with you about the app, updates, or related services * Improve our products and user experience *** ### 4. Data Storage & Security Your store and customer data are stored on BSS Commerce servers in the United States, hosted via **Linode**, and retained only while you use the app or until you uninstall it. We take data protection seriously and use modern security measures to prevent unauthorized access, data loss, or misuse.\ However, please note that no method of online transmission or electronic storage is 100% secure. *** ### 5. Cookies Policy Cookies help us improve your experience when using our website. We use the following types of cookies: * **Strictly Necessary Cookies** – required for the website to function properly * **Performance & Analytics Cookies** – help us understand how visitors use the site so we can improve it * **Functionality Cookies** – remember your preferences and personalize content You can control or disable cookies through your browser settings at any time. *** ### 6. Links to Other Websites Our app or website may contain links to third-party websites. Please note that we do not control these sites and are not responsible for their content or privacy practices. We recommend reviewing the privacy policies of any third-party websites you visit. *** ### 7. Your Privacy Rights #### 7.1 European (GDPR) Privacy Rights If you are located in the European Economic Area (EEA), you have the right to: * Know what personal data we collect and why * Access a copy of your personal data * Correct or update inaccurate information * Request deletion of your personal data (with some legal exceptions) * Request data portability * Object to or restrict certain types of processing * Opt out of marketing communications * Not be subject to automated decisions that significantly affect you To exercise any of these rights, please contact us at ****. *** #### 7.2 California Privacy Rights (CCPA) If you are a California resident, you have the right to: * Request details about the personal information we collect and how it is used * Request deletion of your personal information * Opt out of any sale of personal information (if applicable) * Receive equal service and pricing even if you exercise your privacy rights To submit a request, please email us at ****. We may need to verify your identity before processing your request. *** #### 7.3 Nevada Privacy Rights Nevada residents may request to opt out of the sale of personal information.\ Although we do not sell personal information, you may still submit a request by emailing ****. *** ### Contact Us If you have any questions about this Privacy Policy or the data we collect, please contact us: 📧 **Email:** \ 📍 **Address:**\ 14-16-18-19F, Viwaseen Tower\ 48 To Huu Street, Trung Van Ward\ Nam Tu Liem District, Hanoi, Viet Nam Please clearly describe your request, especially if you are asking about the personal data we hold about you. # OPTIS APPS # Access and permission # How to see the store's collaborator code? ## Why do we need partner access from your store? — We need the temporary access to your store to help you with **settings** or **fix the problem** reported. We promise to be careful with every setting on your website. When we fix all problems, you can remove the access from your end. ## Steps to see the store collaborator code ### *Case 1 – Code located under Users > Security* {% stepper %} {% step %} **In the navigation tab, go to Settings**
{% endstep %} {% step %} **In the Settings, go to Users > Security, you will see the Collaborators Code**
In this example, the Collaborator Request Code is **6443** {% endstep %} {% endstepper %} ### *Case 2 – Code located under Users and permissions* {% stepper %} {% step %} **In the navigation tab, go to Settings**
{% endstep %} {% step %} **In the Settings, go to Users and permissions**
{% endstep %} {% step %} **Scroll down and your Collaborator Request Code will appear at the top of the page.**
In this example, the Collaborator Request Code is **2653** {% endstep %} {% endstepper %} # How to approve our partner request? We send the request to fix issue/do customization for you. Kindly let us know once you approve the request {% stepper %} {% step %} #### Click the notification icon on the upper right, you will see an alert notify that we sent you a collaborator request
🚩 If you don't see the notification, you can go to **Settings** in your Shopify admin
Depending on your Shopify plan/interface: * You may see **Users** → click it. * Or you may see **Users and permissions** → click it instead {% endstep %} {% step %} #### **In the Users / Users and permissions section, you will see "**OPTIS (by BSS Commerce) Support**" request a collab access > Click on it**
{% endstep %} {% step %} #### We already ticked the permissions we needed. So you just need to click "Accept request"
To see the permissions we’re requesting: * If you’re in **Users and permissions**, you’ll see the requested permissions listed directly. * If you’re in **Users**, click **Edit permissions** to review them
{% endstep %} {% endstepper %} Kindly let us know once you approve the request ❤ # How to grant OPTIS team the access to specific permissions? 1. Firstly, you go to **Settings** > **Users and permissions** > **Collaborators > Search for "Tech Essence (by BSS Commerce) Support"**
2. There are permissions we will need + location where you can find it: * **View products**
* **Themes > Edit code** (necessary)
* **App** **permissions** > Manage and install apps and channels (necessary)
* **Store settings** > manage settings + shipping and delivery - For showing options on order confirmation & packing slips
You will also need to check if your email is verify or not. If not, you will need to verify so we can help showing options on order confirmation
* **Order > View** - For options not showing on order cases
3. After clicking on all permissions our customer support agent request, you will click **Save**. Then notify our agent

# Verify email in Order Confirmation Email To proceed with the installation for **Options on Order Confirmation Emails and Packing Slips**, we’ll need your email to be verified. Here’s how you can do it: 1. Go to **Advanced Settings** in the app. 2. Click **Self-install (for dev)** under **Show options on Email confirm/ Packing slips**
3. Click the link **Order Confirmation Email Template**.
4. Select **Review and Verify** to complete the process.
Once this is done, let us know so we can continue assisting you with the installation. # Our Services At OPTIS, we focus on more than just providing apps - we’re here to support you throughout your journey, whenever you need us. No matter which OPTIS app you’re using, our team is always ready to help ### 🤝 Dedicated Support You Can Rely On We provide ongoing support to ensure everything runs smoothly on your store. Our team is available **24/7** to assist you with: * General setup guidance * Answering questions and clarifying how things work * Investigating and resolving issues * Helping you move forward when something doesn’t work as expected You can reach us anytime via in-app Live Chat or email, and we’ll take it from there. *** ### ⚙️ Setup Assistance & Custom Requests Every store is different, and we understand that sometimes you need more than a standard setup. We’re happy to help with: * Initial setup and configuration guidance * Adjustments to better match your store’s workflow * Custom requests based on your specific ideas or business needs If you have something in mind even if it’s just an idea, feel free to share it with us. We’re always open to discussing what’s possible. *** #### 💬 24/7 Support - Always here when you need us Our support team is available **24/7**, so you can reach out anytime you need help. You can contact us via: * **In-app Live Chat** * **Email:** [support@optis.me](https://mail.google.com/mail/?view=cm\&fs=1\&to=support@optis.me\&subject=OPTIS%20Support) No matter your time zone, we aim to respond as quickly as possible and provide clear, practical solutions - not generic replies. *** ### 🤝 A Partner, Not Just a Support Team We believe in long-term partnerships. Beyond fixing issues, we: * Share suggestions to improve your setup and conversion flow * Collect feedback and real merchant insights to improve the app * Actively listen to your needs to shape future features Your success with OPTIS matters to us. *** ### 🚀 Have an Idea or Need Help? If you have any questions, ideas, or custom requirements, don’t hesitate to reach out.\ Just send us a message via live chat or email - we’re always happy to help. 💙 *Let us know what you’re trying to achieve, and we’ll help you get there.* # Welcome to OPTIS Product Options Helpdesk Welcome! 😊\ OPTIS Product Options helps you create flexible, powerful product options beyond Shopify’s default variant limits, so you can sell customizable products without complicating your store. Whether you sell personalized items, add-ons, or products with multiple choices, OPTIS is designed to keep your setup clean, fast, and easy to manage. ## 🎯What can OPTIS Product Options do? OPTIS is built for merchants who need **flexible product options and personalization** without being limited by Shopify’s default variants. It’s ideal if you want to: * Offer custom product options like text input, image upload, swatches, sizes, fonts, or engraving * Let customers preview their selections in real time before checkout * Collect important customer inputs directly on the product page * Increase AOV with add-ons such as gift wraps, bundles, and paid upgrades * Create a clean buying flow using conditional logic and grouped options * Manage variant-based images, pricing, and inventory more efficiently OPTIS is easy to use, simple to manage, and integrates smoothly with Shopify discounts, themes, and checkout - with our support team available whenever you need help. ✨ View our demo store: [OPTIS demo store](https://optis-product-options-variant.myshopify.com/) ## 💬Need help? Our support team is always here to help including custom setup when possible. * Live chat inside the app * 📩 Email us at [support@optis.me](https://mail.google.com/mail/?view=cm\&fs=1\&to=support@optis.me\&subject=OPTIS%20Support) * Fast, human replies (no bots 👀) # Quickstart This guide will help you set up OPTIS quickly and start adding custom options to your products. ## 1. Enable OPTIS Options on your theme 1. In the app’s top navigation, click **Activate OPTIS Product Option > Add to theme:**
2. On the **Theme Customize** page, click Save to finish enabling **App Embed.**
## 2. Create an option set We have a quick 2-minute video to help you create an option set + assign it to products: {% embed url="" %} ## 3. Apply option set to products 1. To apply products for the option set. In the **Option Sets** tab, choose an option set:
2. Select **Products > Specific products > Choose the Product and Save:**
# Other popular features # Product Personalizer - Live Mockup Settings ## What is Product Personalizer/Live Preview? 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 selections directly on the product * Update visuals without page reloads * Support multiple option types: [Text box](https://help.optis.me/en/article/create-a-textbox-xq9qlw/), [File upload](https://help.optis.me/en/article/create-a-file-upload-1bdv45s/), [Image & Color Swatch](https://help.optis.me/en/article/create-a-swatch-4cklgo/) (Note: **Text box’s live mockup** can be combined with [Color picker](https://help.optis.me/en/article/create-a-color-picker-ovw276/), [Color Swatch](https://help.optis.me/en/article/create-a-swatch-4cklgo/), Font Picker (coming soon) to preview text color and styling in real time). Customers can interact with options and immediately see the result — no guessing, no surprises. **👉 View demo:** [Personalize Phone Case](https://optis-product-options-variant.myshopify.com/products/custom-phone-case), [Custom Tote Bag](https://optis-product-options-variant.myshopify.com/products/custom-tote-bag?variant=51026051793174), [Custom Pet Necklace](https://optis-product-options-variant.myshopify.com/products/custom-pet-necklace?variant=51026045436182) ## When to Use Live Mockup If customers need to *see it to trust it*, Live Preview is the right solution 🤩. | **Use cases** | **Typical examples** | **Why Live Preview matters** | | ----------------------------------------- | --------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | | **Personalized products** | Engraved names or messages.- Custom text on apparel, mugs, phone cases | Customers see exactly how their custom requests look on the product before buying. | | **Visual option differences** | Color or material selection- Pattern or style changes | Instantly updates the product image, making comparisons easy and intuitive | | **Print-on-demand & custom designs** | Uploading personal logos or images- Choosing print positions- Previewing artwork layout | Helps customers confirm design placement before checkout, reducing order errors | | **Paid add-ons & upgrades** | Gift wrapping styles- Extra decorations or finishes- Paid engraving or personalization | Visualizing upgrades makes added costs easier to justify | | **Made-to-order or non-returnable items** | Personalized or custom-built products | Visual confirmation is critical when products can’t be resold or returned | **Result:** Shoppers feel confident in their choices, while merchants benefit from higher conversions, fewer errors, and reduced support requests. ## How To Set Up ### A. Explaining the setting panels 1. Live Mockup tab For options that support Live Preview (Text box, File Upload, Swatch), you’ll see a **Live mockup** tab located at the top right. * What it does: The **Live mockup** tab controls how the option appears in the live preview on your product page. * How it works with Option Content tab: The Product personalizer uses values from Option Content, so we recommend setting those up first.
2. Preview panel: **Select background** When Live Mockup is enabled, start by selecting the Background first.
**Select background** ![](https://storage.crisp.chat/users/helpdesk/website/-/2/2/4/2/22429817467a0000/image_bbmbw0.png) **Preview**\ After choosing a background, decide where the preview should appear: | **All product images (default)** | The preview appears on all product images. When customers switch between images, the preview remains visible on each image. | | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **First product image only** | The preview appears only on the first product image. If customers switch to another image, the live preview will no longer be shown. | | **Variant image only** | The preview appears only on the selected variant’s image. When customers change variants, the background updates to the corresponding variant image, and the preview is shown on that image instead of the main product image. | | **Last product image only** | The preview appears only on the last image in the product’s media list. | | **Specific product image** | The preview appears only on a specific product image, based on its position in the product’s media list. Enter the image order number to select which image the preview should appear on. |
**Note:** The preview may look smaller during setup. Use **Zoom In** to check details. The final preview on your live store will display as expected. ![](https://storage.crisp.chat/users/helpdesk/website/-/2/2/4/2/22429817467a0000/image_4f6glb.png) ### How to set up the Product Personalizer (Live Mockup) 1. Decide which options need Live Preview (whether it is Text box / Swatch / File upload) 2. Set up the option settings first 3. Enable Live Preview in the **Live mockup** tab 4. Select background & preview options 5. Configure the Live Preview → Save → Choose product/customer condition for the option set **Configurations explanations:** * **Font, Color, Size, Opacity, Curve, X-axis, Y-axis, Rotation:** Default settings used in the preview and will be applied to the final product * **Allow customer to Change position / Change size:** You can choose whether customers are allowed to: Change preview content’s position or/and size. Disable these options to lock the design.
**Text box** * **Default text for preview:** The default text shown in the preview. If a Default value is set in Basic settings, it will be used automaticallyIf not, enter a sample value here (for example: “Add text”). Changes here affect preview only and won’t sync back to Basic settings. * **Linked with other options - Swatch** (applicable for Color Swatch only): Use when you want to allow customers to select predefined colors to the text. * **Linked with other options - Color picker**: Use when you want to allow customers to select their preferred color to the text.
**File upload & Swatch** * **Preview shape**: Choose a basic shape or upload a custom PNG mask **Swatch** ![](https://storage.crisp.chat/users/helpdesk/website/-/2/2/4/2/22429817467a0000/image_1kfumh7.png) # How to set up Conditional logics? ## 🎯 Objective Conditional Logic allows you to show or hide product options dynamically based on your customer’s selections. The goal is to create a clean, intuitive, and user-friendly product configuration experience ✨ #### Example 1: Text vs. Image for Embroidery Imagine selling a custom T-shirt where customers choose between adding Text or an Image for embroidery. ✅ If they choose Text, they’ll see a textbox to type in. ✅ If they choose Image, they’ll get a file upload option instead.
#### Here’s how to set it up 1️⃣ Create a radio button with “Text” and “Image” options. 2️⃣ Add a textbox for text input. 3️⃣ Add a file upload for images.
4️⃣ Navigate to the **Display** tab > **Add condition**:
5️⃣ Set up Conditional Logic to show only the relevant option based on their selection: * For the Textbox: **Show** this option when 'Customize T-shirt' **is** 'Add text':
* For the File Upload: **Show** this option when 'Customize T-shirt' **is** 'Add image':
Now, customers only see what they need—keeping things clean and intuitive! #### Example 2: Number of People & Textboxes Let’s say you offer a T-shirt where customers can add names based on how many people they select. ✅ If they pick 1 person, they get 1 textbox. ✅ If they pick 2 people, they get 2 textboxes. ✅ If they pick 3 people, they get 3 textboxes.
#### Here’s how to set it up 1️⃣ Create an option with “1 person”, “2 people" and "3 people" 2️⃣ Add 3 textboxes for name input.
3️⃣ Use Conditional Logic to: * Show Textbox 1 for all 3 choices - because this Textbox 1 will appear on “1 person”, “2 people" and "3 people" selections.
* Show Textbox 2 when "2 people" and "3 people" are selected - Because the second textbox will only appear for these 2 selections:
* Lastly, show Textbox 3 when "3 people" is selected:
Now, the form updates dynamically, keeping it simple and user-friendly! And that’s it! Conditional Logic ensures customers only see what’s relevant - making their shopping experience smoother. Try it out and let us know how it works for you! # Manage add-on (additional fee for option) #### Objective: Add-on feature will help you add extra fee for options customer choose
#### Step by Step Guideline: 1. In **Option Sets editing**, click on the **Option** you want to add an additional price
2. Choose "Extra fee" on the Add-on and fill in the price for each option value
3. Click **Save** the option set and Recheck on the product page. When selecting the option has price add-on, it will add additional price
4. If you want the **total product price** to increase when choosing the **option add-on**, you can install "Show updated total price with add-ons" in the Advanced features:
# Change the option set name 1. To change the option set name, go to **Option Sets** and choose 1 option set:
2. Click on the name of the option set > Edit > Save
# Active/Deactivate the option set 1. To Deactivate /active the option set, select 1 or multiple option sets, click on more option icon
2. Choose to **Active/Deactive** option sets and double-check the status after the change
# Troubleshoot # What to do if OPTIS Options aren’t showing on product pages? If the option set is missing from your storefront, check the following: * **App Activation** Ensure the app is activated on your theme. Verify this in the theme editor and click **save**
* **Option Activation** Confirm that your options set is **Live** , and assigned to your test products
If the options still don’t appear, it might be due to: * A conflict between the app and your theme. * Multiple product options apps installed and enabled simultaneously * A conflict with another existing app in your store. If you need further assistance with the above case, please contact us via live chat. Our support team is here to help! # Option Group ✨ [Demo store](https://optis-product-options-variant.myshopify.com/products/custom-backpack-option-group?_pos=1&_psq=option+group&_ss=e&_v=1.0) ## 📂What is an Option Group? An **Option Group** is a container that holds multiple options under a single group title. * Options inside a group can be **collapsed or expanded** * Customers can click the group title to show or hide its options * This is especially useful for products with many customization fields Option Groups help structure complex option sets and improve the overall user experience. ## How Option Groups Appear on the Storefront {% embed url="" %} ## ⚙️How to Create an Option Group #### Step 1: Create an option group * In the **Options** dashboard, click **Add group** * A popup modal will appear where you can configure the group settings
#### Step 2: Configure Option Group Settings {% stepper %} {% step %} #### Choose the Untitled group to edit the Group Label:
**🏷️ Group Label -** It will be displayed on the product page as a clickable header:
#### In the Display tab, you can add the Conditional Logic and choose Display type
**🔽 Display Type -** Choose how the group appears by default on page load: * 🔓 **Expand -** The group is **open by default**, and all options inside are immediately visible.\ Recommended for required or frequently used options. * 🔒 **Collapse -** The group is **hidden by default**. Customers must click the group title to view the options.\ Recommended for optional or advanced settings. **🧠 Conditional Logic (Optional)** * You can control when this option group is shown or hidden based on a previous selection * This is useful for showing additional options only when certain conditions are met Click [**here**](/product-options/getting-started/other-popular-features/how-to-set-up-conditional-logics) to learn How to set up conditional logic. {% endstep %} {% step %} #### **Click Back to finish creating the option group** {% endstep %} {% endstepper %} #### Step 3: Add Options to the Group 1. Continue adding options **to this group**
2. Select the option type you want to create (checkbox, textbox, etc.)
3. Configure the option as you normally would and click Save
You will now see: * The option added inside the group * A live preview on the **right-hand side** showing how the option group expands and collapses **NOTE**: If you previously created the separate options and want to add them into a new Option Group, you can drag and drop the option here:
#### Step 4: Apply to Products & Save
# Text Input # 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: ![](/files/2bw7A0awLBeDSWPtOPGZ)
### 2. How to Create a Text area option **Step 1: Add a New Option** * Click Add Option > Text area to create a new option
**Step 2: Add information to the Text area** * Enter the name for the Text area (e.g., “Note")
**Step 3: Set the target of Price add-on in Option values (optional)** {% hint style="success" %} *Price Add-on feature will help you add extra fee for options customers choose.* {% endhint %} * If you choose to Create fee, see details of this feature in [How to add price to options?](/product-options/getting-started/other-popular-features/manage-add-on-additional-fee-for-option).
How the Price add-on will look on the storefront:
* If you choose to Upsell product, follow [this guide](https://optis-options-helpdesk.crisp.help/en/article/how-to-use-assign-to-variant-link-stock-and-price-of-shopify-variant-to-option-value-1u73u86/) for more information.
Other features: * Price Add-On > Create Fee – [What is it & How to Use](https://www.youtube.com/watch?v=5Bq4t0IrVEU) * Price Upsell product > Assign to Variant – [What is it & How to Use](/product-options/advanced-setup/how-to-use-upsell-product-link-stock-and-price-of-shopify-variant-to-option-value) * SKU – [What is it & How to Use](https://www.shopify.com/ca/retail/what-is-a-sku-number) * Quantity – [What is it & How to Use](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options) **Step 4: Advanced Settings (If Needed)** {% hint style="success" %} **Visibility**: Enable visibility condition if you want the Text area to show/hide only when a customer selects a specific option from another field. [How to set up Visibility?](https://optis-options-helpdesk.crisp.help/en/article/how-to-set-up-conditional-logics-1dgigop/) {% endhint %} Example: A “Message” Text area appears only if the customer selects “Yes” for “Would you want to leave a message?”
{% hint style="success" %} **Help text**: Add a short description to explain the purpose of the Text area option, offering context or clarification when the customer enters the information. Help text can be displayed as Tooltip or Content (Below/Beside the option title, Below the option). {% endhint %}
Here is an example of the Help text as Tooltips looks like in your storefront:
{% hint style="success" %} **Default value**: Pre-fill text inside the Text area that appears every time the customer goes to the site. It can save time for customers by providing common or expected input. {% endhint %} Example: You want the option “Message” will display the text “Happy Birthday!” automatically in the field when customers go to the product page.
How it looks like in your storefront:
{% hint style="success" %} **Placeholder text:** Display placeholder text inside the Text area as a faded, lighter color. This text disappears when the customer starts typing and is often used to give customers a clear example of what should be filled in the field. {% endhint %}
Here is an example of how it looks like in your storefront:
{% hint style="success" %} Limit characters: You can set Min/Max characters that customers can input in the Text area. {% endhint %}
If your customers input less than the minimum value, it will show a notification message below. The same with maximum value.
**Step 4: Save and Test** * Click Save to apply the settings. * Visit the product page on your store to check if the Text area works correctly. ### 3. Real-World Applications of Text area * Custom Orders: Add engraving text, name personalization, or special color requests. * Gift Options: Write gift messages or delivery instructions. * Forms & Applications: Enter bios, cover letters, or detailed application responses. ### 4. Key Features of Text area * Text area provides a flexible space for users to enter longer, detailed input. Ideal for feedback, special requests, and custom messages, they improve communication and personalization. # Text box ### 1. How Does the Text box Display? The Textbox typically appears as a field where users can input information with any characters. > 📝Note: > > * 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”:*
### 2. How to Create a Text Box option **Step 1: Add a New Option** * Click Add Option > Text box to create a new option
**Step 2: Add information to the Textbox** * Enter the name for the Textbox (e.g., "Input your name", "Note")
**Step 3: Set the target of Price add-on in Option values (optional)** {% hint style="info" %} Price Add-on feature will help you add extra fee for options customer choose {% endhint %} * If you choose to Create fee, see details of this feature in [How to add price to options?](/product-options/getting-started/other-popular-features/manage-add-on-additional-fee-for-option).
How the Price add-on will look on the storefront:
* If you choose to Upsell product, follow [this guide](https://optis-options-helpdesk.crisp.help/en/article/how-to-use-assign-to-variant-link-stock-and-price-of-shopify-variant-to-option-value-1u73u86/) for more information.
Other features: * Price Add-On > Create Fee – [What is it & How to Use](https://www.youtube.com/watch?v=5Bq4t0IrVEU) * Price Upsell product > Assign to Variant – [What is it & How to Use](/product-options/advanced-setup/how-to-use-upsell-product-link-stock-and-price-of-shopify-variant-to-option-value) * SKU – [What is it & How to Use](https://www.shopify.com/ca/retail/what-is-a-sku-number) * Quantity – [What is it & How to Use](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options) **Step 4: Advanced Settings (If Needed)** {% hint style="success" %} **Visibility**: Enable visibility condition if you want the Text box to show/hide only when a customer selects a specific option from another field. [How to set up Visibility?](https://optis-options-helpdesk.crisp.help/en/article/how-to-set-up-conditional-logics-1dgigop/) {% endhint %} Example: A “Input your name” Text box appears only if the customer selects “Yes” for “Would you like to personalize this item?”
{% hint style="success" %} **Help text**: Add a short description to explain the purpose of the Text box option, offering context or clarification when the customer enters the information. Help text can be displayed as Tooltip or Content (Below/Beside the option title, Below the option). {% endhint %}
{% hint style="success" %} **Default value**: Pre-fill text inside the Text box that appears every time the customer goes to the site. It can save time for customers by providing common or expected input. {% endhint %}
Example: You want the option “Message” will display the text “Happy Birthday!” automatically in the field when customers go to the product page.
How it looks like in your storefront:
{% hint style="success" %} **Placeholder text:** Display placeholder text inside the Text box as a faded, lighter color. This text disappears when the customer starts typing and is often used to give customers a clear example of what should be filled in the field. {% endhint %}
Here is an example of how it looks like in your storefront:
{% hint style="success" %} Limit characters: You can set Min/Max characters that customers can input in the Text box. {% endhint %}
If your customers input less than the minimum value, it will show a notification message below. The same with maximum value.
**Step 4: Save and Test** * Click Save to apply the settings. * Visit the product page on your store to check if the Text box works correctly. ### 3. Real-World Applications of Text box * Product Customization: Customers can enter personalized text for items like custom engravings or messages (e.g., personalized gifts). * Forms: Collects customer details like name, shipping address, and payment information (e.g., entering shipping address at checkout). * Order Notes: Allows customers to add comments or special requests to their order. ### 4. Key Features of Textboxes * Textboxes allow users to input information efficiently, reducing errors with placeholder or help text. They're versatile for short or long entries, easy to use on mobile, and essential for customization, forms, and feedback. # 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”. > 📝Note: Customers can only fill in numbers in the Number Field. Example of how it appears on a product page:
### 2. How to Create a Number Field option **Step 1: Add a New Option** * Click Add Option > Number Field to create a new option
**Step 2: Add information to the Number Field** * Enter the name for the Number Field (e.g., “Number of additional gift boxes", "Grade")
**Step 3: Set the target of Price add-on in Option values (optional)** * Price Add-on feature will help you add extra fee for options customers choose.
How the Price add-on will look on the storefront:
* If you choose to Create fee, see details of this feature in [How to add price to options?](/product-options/getting-started/other-popular-features/manage-add-on-additional-fee-for-option).
* If you choose to Upsell product, follow [this guide](https://optis-options-helpdesk.crisp.help/en/article/how-to-use-assign-to-variant-link-stock-and-price-of-shopify-variant-to-option-value-1u73u86/) for more information.
Other features: * Price Add-On > Create Fee – [What is it & How to Use](https://www.youtube.com/watch?v=5Bq4t0IrVEU) * Price Upsell product > Assign to Variant – [What is it & How to Use](/product-options/advanced-setup/how-to-use-upsell-product-link-stock-and-price-of-shopify-variant-to-option-value) * SKU – [What is it & How to Use](https://www.shopify.com/ca/retail/what-is-a-sku-number) * Quantity – [What is it & How to Use](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options) **Step 4: Advanced Settings (If Needed)** {% hint style="success" %} **Visibility**: Enable visibility condition if you want the Number Field to show/hide only when a customer selects a specific option from another field. [How to set up Visibility?](https://optis-options-helpdesk.crisp.help/en/article/how-to-set-up-conditional-logics-1dgigop/) {% endhint %} Example: A “Year” Number field appears only if the customer selects “Yes” for “Are you a student?”
{% hint style="success" %} **Help text**: Add a short description to explain the purpose of the Number Field option, offering context or clarification when the customer enters the information. Help text can be displayed as Tooltip or Content (Below/Beside the option title, Below the option). {% endhint %}
{% hint style="success" %} **Default value**: Pre-fill text inside the Number Field that appears every time the customer goes to the site. It can save time for customers by providing common or expected input. {% endhint %} Example: You want the option “Number of additional gift boxes” will display automatically the number 2 in the field when customers go to the product page.
How it looks like in your storefront:
{% hint style="success" %} **Placeholder text:** Display placeholder text inside the Number Field as a faded, lighter color. This text disappears when the customer starts typing and is often used to give customers a clear example of what should be filled in the field. {% endhint %}
Here is an example of how it looks like in your storefront:
{% hint style="success" %} **Limit value:** You can set Min/Max value that customers can input. {% endhint %}
If your customers input less than the minimum value, it will show a notification message below. The same with maximum value.
**Step 4: Save and Test** * Click Save to apply the settings. * Visit the product page on your store to check if the Number Field works correctly. ### 3. Real-World Applications of Number Field * Fashion & Accessories: Enter number of characters for engraving, jersey numbers, or custom sizing. * Food & Catering: Specify number of guests, servings, or meal portions. * Tech & Electronics: Show battery life, storage size, or power capacity as numeric data. * Home & Furniture: Display weight, dimensions, or quantity per box. ### 4. Key Features of Number Field * The Number Field option type prevents invalid input like letters or symbols. They're ideal for quantities, measurements, or custom inputs. # Email Field ### 1. How Does the Email Field 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). > 📝Note: Customers can only enter a valid email address in the Email Field. Example of how it appears on a product page:
A notification will show up if customers do not enter the correct email format:
### 2. How to Create a Email Field option **Step 1: Add a New Option** * Click Add Option > Email to create a new option
**Step 2: Add information to the Email** * Enter the name for the Email (e.g., “Enter your email address:")
**Step 3: Set the target of Price add-on in Option values (optional)** {% hint style="success" %} Price Add-on feature will help you add extra fee for options customers choose. {% endhint %}
How the Price add-on will look on the storefront:
* If you choose to Create fee, see details of this feature in [How to add price to options?](/product-options/getting-started/other-popular-features/manage-add-on-additional-fee-for-option).
* If you choose to Upsell product, follow [this guide](https://optis-options-helpdesk.crisp.help/en/article/how-to-use-assign-to-variant-link-stock-and-price-of-shopify-variant-to-option-value-1u73u86/) for more information.
Other features: * Price Add-On > Create Fee – [What is it & How to Use](https://www.youtube.com/watch?v=5Bq4t0IrVEU) * Price Upsell product > Assign to Variant – [What is it & How to Use](/product-options/advanced-setup/how-to-use-upsell-product-link-stock-and-price-of-shopify-variant-to-option-value) * SKU – [What is it & How to Use](https://www.shopify.com/ca/retail/what-is-a-sku-number) * Quantity – [What is it & How to Use](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options) **Step 4: Advanced Settings (If Needed)** {% hint style="success" %} **Visibility**: Enable visibility condition if you want the Email Field to show/hide only when a customer selects a specific option from another field. [How to set up Conditional logics?](https://optis-options-helpdesk.crisp.help/en/article/how-to-set-up-conditional-logics-1dgigop/) {% endhint %} Example: An option “Enter your email address” appears only if the customer selects “Yes” for “Would you like to receive exclusive emails with discounts and product updates?”
{% hint style="success" %} **Help text**: Add a short description to explain the purpose of the Email Field option, offering context or clarification when the customer enters the information. Help text can be displayed as Tooltip or Content (Below/Beside the option title, Below the option). {% endhint %}
{% hint style="success" %} **Default value**: Pre-fill text inside the Email Field that appears every time the customer goes to the site. It can save time for customers by providing common or expected input. {% endhint %}
How it looks like in your storefront:
{% hint style="success" %} **Placeholder text:** Display placeholder text inside the Email Field as a faded, lighter color. This text disappears when the customer starts typing and is often used to give customers a clear example of what should be filled in the field. {% endhint %}
Here is an example of how it looks like in your storefront:
{% hint style="success" %} Limit characters: You can set Min/Max characters that customers can input in the Email. {% endhint %}
If your customers input less than the minimum value, it will show a notification message below. The same with maximum value.
**Step 4: Save and Test** * Click Save to apply the settings. * Visit the product page on your store to check if the Email Filed works correctly. ### 3. Real-world Applications of Email Filed * Account Creation: Register users with a unique email for login and verification. * Newsletters & Marketing: Let users subscribe for updates, promotions, or restocks. * Event Registrations: Send tickets, reminders, or digital access links. ### 4. Key Features of Email Filed * Email fields ensure users enter properly formatted email addresses, reducing errors and improving communication. # Choice list # 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
### 2. How to Create a Switch **Step 1: Add a New Option** * Click Add Option > Switch to create a new option
**Step 2: Add information to the Switch** * Enter an option name for the Switch (e.g., "Add Gift Box and Greeting Card") * Add the option values (e.g., Yes/No). * Tick on “This option is required” if you want customers must choose the option before checking out. * Tick on ‘Hide option name” if you don’t want to show the option name above the option values. For example:
![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXdsKywnADACvcstXeZiH75URR-9prh3QDtw7mdJWrBwm4zHhlt7KySrV1FQycdwR4sQdnlfxZsYObPx-nqL-DQ4tPJfd8PWKV4cQdf_DdGFsPTejo_KgHx8Gd5zOUJepx2idSqy?key=DC83dM0yOWsDjpoRFQoUWeuE) Other features: * Price Add-On > Create Fee – [What is it & How to Use](https://www.youtube.com/watch?v=5Bq4t0IrVEU) * Price Upsell product > Assign to Variant – [What is it & How to Use](/product-options/advanced-setup/how-to-use-upsell-product-link-stock-and-price-of-shopify-variant-to-option-value) * SKU – [What is it & How to Use](https://www.shopify.com/ca/retail/what-is-a-sku-number) * Quantity – [What is it & How to Use](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options) **Step 3: Advanced Settings (If Needed)** {% hint style="success" %} **Visibility:** Enable visibility condition if you want the Switch to show/hide only when a customer selects a specific option from another field. [How to set up Visibility?](https://optis-options-helpdesk.crisp.help/en/article/how-to-set-up-conditional-logics-1dgigop/) {% endhint %}
{% hint style="success" %} **Help text:** Add a short description to explain the purpose of the Switch option. It can be displayed as Tooltips or Content (Below/Beside the option title, Below the option). {% endhint %}
Here is an example of the Help text as Tooltips looks like on the storefront:
{% hint style="success" %} **Default value:** Pre-select the Switch options every time the customer goes to the site. It can save time for customers by providing common or expected choices. {% endhint %} Example: You want the option value “Yes” on Add Gift Box and Greeting Card to be selected automatically when customers enter the product page.
How it looks like in your storefront:
{% hint style="info" %} Limit selectors: You can set Min/Max option value that customers can select. {% endhint %}
**Step 4: Save and Test** * Click Save to apply the settings. * Visit the product page on your store to check if the Switch option works correctly. ### 3. Real-World Applications of Switch * Product Features: Activate additional services like gift wrapping, or Yes/No questions. * Newsletter Signup: Opt in for email updates or promotional offers. ### 4. Key Features of Switch * The Switch option allows users to select one or multiple options with a single click. When displaying many option values, they can be arranged in a single line or inline layout to save space and maintain a clean, organized design.
# 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,..
### 2. How to Create a Checkbox **Step 1: Add a New Option** * Click Add Option > Checkbox to create a new option
**Step 2: Add information to the Checkbox** * Enter an option name for the Checkbox (e.g., "Customize Your Candle", "Choose Scent") * Add the option values (e.g., Lavender, Vanilla, Citrus, Rose, Coconut, Eucalyptus).
* Tick on “This option is required” if you want customers must choose the option before checking out. How it will look on the storefront:
* Tick on ‘Hide option label” if you don’t want to show the option name above the option values.
How it will look on the storefront:
Other features: * Price Add-On > Create Fee – [What is it & How to Use](https://www.youtube.com/watch?v=5Bq4t0IrVEU) * Price Upsell product > Assign to Variant – [What is it & How to Use](/product-options/advanced-setup/how-to-use-upsell-product-link-stock-and-price-of-shopify-variant-to-option-value) * SKU – [What is it & How to Use](https://www.shopify.com/ca/retail/what-is-a-sku-number) * Quantity – [What is it & How to Use](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options) **Step 3: Advanced Settings (If Needed)** {% hint style="success" %} **Visibility:** Enable visibility condition if you want the Checkbox to show/hide only when a customer selects a specific option from another field. [How to set up Visibility?](https://optis-options-helpdesk.crisp.help/en/article/how-to-set-up-conditional-logics-1dgigop/) {% endhint %}
{% hint style="success" %} **Help text:** Add a short description to explain the purpose of the Checkbox option. It can be displayed as Tooltips or Content (Below/Beside the option title, Below the option). {% endhint %}
Here is an example of the Help text as Tooltips looks like on the storefront:
{% hint style="success" %} **Default value:** Pre-select the Checkbox options every time the customer goes to the site. It can save time for customers by providing common or expected choices. {% endhint %} Example: You want the option value “Lavender” to be selected automatically when customers enter the product page.
How it looks like in your storefront:
{% hint style="success" %} Limit selectors: You can set Min/Max option value that customers can select. {% endhint %}
If your customers choose more than the maximum option value, it will show a notification message below. The same with the minimum option value.
**Step 4: Save and Test** * Click Save to apply the settings. * Visit the product page on your store to check if the Checkbox option works correctly. ### 3. Real-World Applications of Checkbox * Product Customization: Choose add-ons like gift wrapping, extra toppings, preferred colors, materials, or scent/flavor options. * Compliance & Agreements: Confirm age eligibility (18+/21+), agree to terms, or verify authenticity. Accept return policy, warranty terms, or payment conditions. ### 4. Key Features of Checkbox * The checkbox option allows users to select one or multiple options with a simple click. When displaying many option values, they can be arranged in a single line or inline layout to save space and maintain a clean, organized design.
# Dropdown menu ✨ [Demo store](https://optis-product-options-variant.myshopify.com/products/dropdown-menu?variant=51025987961110) ### 1. How Does the Dropdown menu Display? The dropdown menu 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.
### 2. How to Create a Dropdown **Step 1: Add a New Option** * Click Add Option > Dropdown menu to create a new option
**Step 2: Add information to the Dropdown** * Enter a label for the dropdown (e.g., "Select Size", "Choose Color") * Add the option values (e.g., S, M, L, XL).
* Tick on “Required field” if you want customers must choose the option before checking out. * Tick on "Hide option label” if you don’t want to show the option name above the option values. Other features: * Price Add-On > Create Fee – [What is it & How to Use](https://www.youtube.com/watch?v=5Bq4t0IrVEU) * Price Upsell product > Assign to Variant – [What is it & How to Use](/product-options/advanced-setup/how-to-use-upsell-product-link-stock-and-price-of-shopify-variant-to-option-value) * SKU – [What is it & How to Use](https://www.shopify.com/ca/retail/what-is-a-sku-number) * Quantity – [What is it & How to Use](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options) **Step 3: Advanced Settings (If Needed)** {% hint style="success" %} **Conditional Logic:** Enable conditional logic if you want the Dropdown to show/hide only when a customer selects a specific option from another field. [How to set up Conditional logic?](https://optis-options-helpdesk.crisp.help/en/article/how-to-set-up-conditional-logics-1dgigop/) {% endhint %}
Example: A “Customization” dropdown appears only if the customer selects “Yes” for “Would you like to personalize this item?”
{% hint style="success" %} **Help text:** Add a short description to explain the purpose of the Switch option. It can be displayed as Tooltips or Content (Below/Beside the option title, Below the option). {% endhint %}
{% hint style="success" %} **Default value:** Pre-select the Dropdown options every time the customer goes to the site. It can save time for customers by providing common or expected choices. {% endhint %}
Example: Default size selection set to "XS" for a Dog's shirt
{% hint style="success" %} **Default text on dropdown:** Display placeholder text in the dropdown before the customer makes a selection. {% endhint %}
Example: “Select a size” or “Choose an option.”
{% hint style="success" %} **Search bar:** If your dropdown contains a long list of options, enable a search bar to make it easier for customers to find their preferred choice. {% endhint %}
Example: A dropdown with 20+ fragrances for perfume
{% hint style="success" %} **Quantity:** Allows customers to select multiple values from the dropdown. You can set the **Min** and **Max** for each option value according to your own requirements. This allows you to control how many units of each option value customers can select. {% endhint %}
Example: Select multiple fragrances for one dropdown menu option
**Step 4: Save and Test** * Click Save to apply the settings. * Visit the product page on your store to check if the Dropdown menu option works correctly.
### 3. Real-World Applications of Dropdown menu * Fashion: Choose size, color, or fabric type. * Electronics: Select storage capacity, color, or bundle options. * Personalized Services: Choose engraving styles or packaging types. ### 4. Key Features of Dropdown menu * Clean and user-friendly display: Saves space on the product page.
# Dropdown Menu with Thumbnails ✨ [Demo store](https://optis-product-options-variant.myshopify.com/products/dropdown-menu-with-thumbnail?variant=51025988354326) ### 1. How Does the Dropdown menu with Thumbnails Display? The Dropdown Menu with Thumbnails 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 color block next to the option value. Ideal for selecting colors (e.g., fabric colors, paint shades). * 🖼️ Image Thumbnail: Shows a small preview image next to the option value. Great for displaying patterns, materials, product icons, flags, and more. Example of how it appears on a product page:
### 2. How to Create a Dropdown menu with Thumbnails **Step 1: Add a New Option** * Click Add Option > Dropdown menu with Thumbnails to create a new option
**Step 2: Add information to the** Dropdown menu with Thumbnails * Enter a label for the dropdown (e.g., Choose Color, Select Pattern, Pick Style) * Option Values: Add the values (e.g., Pink, Blue, Marble).
* Tick on “Required field” if you want customers must choose the option before checking out. * Tick on "Hide option label” if you don’t want to show the option name above the option values. * Assign the Thumbnails: You now have two choices depending on what fits your product: 🎨 Use Color Thumbnails: Choose Thumbnail => Color => Input the Hex Color Code or Select the Color> The app will display a square color thumbnail beside each option in the dropdown.
🖼️ Use Image Thumbnails: Choose Swatch Type = Image Thumbnail > Upload an image for each option.
> **Recommended size:** 50x50px or similar square dimensions to keep things neat. > > **Note:** You cannot use both color and image thumbnails in the same dropdown option set - choose one style for consistency.
Other features: * Price Add-On > Create Fee – [What is it & How to Use](https://www.youtube.com/watch?v=5Bq4t0IrVEU) * Price Upsell product > Assign to Variant – [What is it & How to Use](/product-options/advanced-setup/how-to-use-upsell-product-link-stock-and-price-of-shopify-variant-to-option-value) * SKU – [What is it & How to Use](https://www.shopify.com/ca/retail/what-is-a-sku-number) * Quantity – [What is it & How to Use](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options) **Step 3: Advanced Settings (If Needed)** {% hint style="success" %} **Conditional Logic:** Enable conditional logic if you want the Dropdown menu with thumbnail to show/hide only when a customer selects a specific option from another field. [How to set up Conditional logic?](https://optis-options-helpdesk.crisp.help/en/article/how-to-set-up-conditional-logics-1dgigop/) {% endhint %} Example: Show "Choose Material" only if “Customize Design = Yes”
{% hint style="success" %} **Help text:** Add a short description to explain the purpose of the Dropdown menu with thumbnails option. It can be displayed as Tooltips or Content (Below/Beside the option title, Below the option). {% endhint %}
{% hint style="success" %} **Default value:** Pre-select the Dropdown options every time the customer goes to the site. It can save time for customers by providing common or expected choices. {% endhint %} Example: Default to “White” if most customers choose that.
{% hint style="success" %} **Default text on dropdown:** Display placeholder text in the dropdown before the customer makes a selection. {% endhint %} Example: Set a placeholder like “Choose a style…” that disappears after selection.
{% hint style="success" %} **Search bar:** If your dropdown contains a long list of options, enable a search bar to make it easier for customers to find their preferred choice. {% endhint %} Example: If you have more than 10-15 options, you can enable a small search bar for better usability.
{% hint style="success" %} **Quantity:** Allows customers to select multiple values from the dropdown. You can set the **Min** and **Max** for each option value according to your own requirements. This allows you to control how many units of each option value customers can select. {% endhint %}
Example: Select multiple fragrances for one dropdown menu with thumbnails option
**Step 4: Save and Test** * Click Save to apply the settings. * Visit the product page on your store to check if the dropdown menu with thumbnails option works correctly.
### 3. Real-World Applications of Dropdown menu with thumbnails * Fashion: Shirt color, fabric style, or button designs * Home & Decor: Furniture finishes, wall color options * Custom Gifts: Engraving icons, packaging patterns * International Products: Flag thumbnails for language or country options * Food & Beverage: Cupcake toppings, smoothie base colors # Radio Button ✨ [Demo store](https://optis-product-options-variant.myshopify.com/products/radio-button?variant=51025988550934) ### 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:
### 2. How to Create a Radio Button **Step 1: Add a New Option** * Click Add Option > Radio button to create a new option
**Step 2: Add information to the Radio button** * Enter an option name for the Radio Button (e.g., "Customize Your Candle", "Choose Scent") * Add the option values (e.g., Lavender, Vanilla, Citrus, Rose, Coconut, Eucalyptus)
* Tick on “Required field” if you want customers must choose the option before checking out. * Tick on "Hide option label” if you don’t want to show the option name above the option values Other features: * Price Add-On > Create Fee – [What is it & How to Use](https://www.youtube.com/watch?v=5Bq4t0IrVEU) * Price Upsell product > Assign to Variant – [What is it & How to Use](/product-options/advanced-setup/how-to-use-upsell-product-link-stock-and-price-of-shopify-variant-to-option-value) * SKU – [What is it & How to Use](https://www.shopify.com/ca/retail/what-is-a-sku-number) * Quantity – [What is it & How to Use](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options) **Step 3: Advanced Settings (If Needed)** {% hint style="success" %} **Conditional Logic:** Enable conditional logic if you want the Radio button to show/hide only when a customer selects a specific option from another field. [How to set up Conditional logic?](https://optis-options-helpdesk.crisp.help/en/article/how-to-set-up-conditional-logics-1dgigop/) {% endhint %}
{% hint style="success" %} **Help text:** Add a short description to explain the purpose of the Radio button option. It can be displayed as Tooltips or Content (Below/Beside the option title, Below the option). {% endhint %}
{% hint style="success" %} **Default value:** Pre-select the Radio button options every time the customer goes to the site. It can save time for customers by providing common or expected choices. {% endhint %}
**Step 4: Save and Test** * Click Save to apply the settings. * Visit the product page on your store to check if the Radio Button option works correctly.
### 3. Real-World Applications of Radio button Radio buttons are ideal for making single, decisive selections when only one option can apply: * Product Variations: Select one size, color, or material per product. * Shipping Methods: Choose between standard, express, or same-day delivery. * Surveys & Forms: Answer yes/no questions or pick one option from a list. ### 4. Key Features of Radio button * The Radio button let users choose only one option from a predefined list, ensuring clear, exclusive selections. When displaying many option values, they can be arranged in a single line or inline layout to save space and maintain a clean, organized design.
# Font Picker ✨[Demo store](https://optis-product-options-variant.myshopify.com/products/font-picker-custom-backpack-copy?variant=51026044256534) ### Overview Font Picker allows customers to **choose a font style for their personalized text** directly on the product page. When Font Picker is used together with a **Text Input option**, the text entered by the customer will **update instantly when a different font is selected**. This creates a **live preview effect**, helping customers clearly visualize how their personalization will look before adding the product to cart ✨ ### 🔧 How to Set Up Font Picker #### **Step 1: Add a New Option** * Click Add Option > Font picker to create a new option
#### **Step 2: After adding the Font Picker option, configure its settings as follows:** **Option Name:** Enter a clear label for the Font Picker that will be displayed on the product page (e.g.: "Choose font"; "Font style"; "Select font";...)
**Option Values:** Choose the fonts you want to make available to customers. You can: * Select **All fonts** to allow customers to choose from all available Google Fonts * Or select **specific fonts** from the existing list {% hint style="warning" %} **Note:**\ Currently, the app does not support uploading custom fonts directly. However, we do offer a custom solution - simply send us the font link, and our team will help you set it up. {% endhint %} **Option Display:** Choose how the font options are displayed on the product page: Dropdown / Button (horizontal) / Button (vertical)
Other features: * Price Add-On > Create Fee – [What is it & How to Use](https://www.youtube.com/watch?v=5Bq4t0IrVEU) * Price Upsell product > Assign to Variant – [What is it & How to Use](/product-options/advanced-setup/how-to-use-upsell-product-link-stock-and-price-of-shopify-variant-to-option-value) * SKU – [What is it & How to Use](https://www.shopify.com/ca/retail/what-is-a-sku-number) #### Step 3 (Optional): Connect Font Picker with a Text Input If you want customers to see their text update in the selected font while typing, you can connect the Font Picker with a **Text Input** option. Before doing this, make sure you already have a Text Input option created. You can follow the guide [**How to create a Text Input**](/product-options/18-option-types/text-input) if needed. To link the two options: * In **Font preview in text fields,** click on the dropdown **Select text fields** * You will see a list of available Text Input options * Select the Text Input you want to connect with this Font Picker
Once connected, the text entered by customers will automatically update when they change the font selection. {% hint style="warning" %} **Note:**\ Text fields that are disabled in the list are already being used by another Font Picker. Each Text Input can only be linked to **one** Font Picker at a time. {% endhint %} **Step 3: Advanced Settings (If Needed)** {% hint style="success" %} **Conditional Logic:** Enable conditional logic if you want the Font picker to show/hide only when a customer selects a specific option from another field. [How to set up Conditional logic?](https://optis-options-helpdesk.crisp.help/en/article/how-to-set-up-conditional-logics-1dgigop/) {% endhint %}
{% hint style="success" %} **Help text:** Add a short description to explain the purpose of the Font picker option. It can be displayed as Tooltips or Content (Below/Beside the option title, Below the option). {% endhint %}
{% hint style="success" %} **Default value:** Pre-select the Font picker options every time the customer goes to the site. It can save time for customers by providing common or expected choices. {% endhint %}
**Step 4: Save and Test** * Click Save to apply the settings. * Visit the product page on your store to check if the Font picker option works correctly.
### 🌟 Key Benefits * **Real-time text preview -** The text inside the textbox updates immediately when the font changes * **Clear visual understanding -** Customers can see how the same text looks in different fonts before deciding * **Better personalization experience -** Especially useful for names, initials, or short messages * **More confident purchasing decisions -** Reduces uncertainty and increases conversion # Swatch & Button # Swatch ✨ [Demo store](https://optis-product-options-variant.myshopify.com/products/swatch?variant=51025989075222) ### 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.
### 2. How to Create a Swatch **Step 1: Add a New Option** * Click Add Option > Swatch to create a new option
**Step 2: Add information to the Swatch** * Enter an option name (e.g., "Choose Color", "Select Fabric", "Pick a Finish") * Add option values (e.g., Red, Blue, Black, White) * Show option value label if needed * Tick on “Required field” if you want customers must choose the option before checking out. * Tick on "Hide option label” if you don’t want to show the option name above the option values.
* For each value, you can: * Choose a color swatch (solid color)
* Upload an image swatch (custom image)
Other features: * Price Add-On > Create Fee – [What is it & How to Use](https://www.youtube.com/watch?v=5Bq4t0IrVEU) * Price Upsell product > Assign to Variant – [What is it & How to Use](/product-options/advanced-setup/how-to-use-upsell-product-link-stock-and-price-of-shopify-variant-to-option-value) * SKU – [What is it & How to Use](https://www.shopify.com/ca/retail/what-is-a-sku-number) * Quantity – [What is it & How to Use](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options) **Step 3: Advanced Settings (If Needed)** {% hint style="success" %} **Conditional Logic:** Enable conditional logic if you want the Swatch to show/hide only when a customer selects a specific option from another field. [How to set up Conditional logic?](https://optis-options-helpdesk.crisp.help/en/article/how-to-set-up-conditional-logics-1dgigop/) {% endhint %}
{% hint style="success" %} **Help text:** Add a short description to explain the purpose of the Swatch option. It can be displayed as Tooltips or Content (Below/Beside the option title, Below the option). {% endhint %}
{% hint style="success" %} **Default value:** Pre-select the Swatch options every time the customer goes to the site. It can save time for customers by providing common or expected choices. {% endhint %} Example: You want the option value “Black” on Color to be selected automatically when customers enter the product page.
How it looks like in your storefront:
{% hint style="success" %} **Quantity:** Allows customers to select multiple values from the dropdown. You can set the **Min** and **Max** for each option value according to your own requirements. This allows you to control how many units of each option value customers can select. {% endhint %}
**Step 4: Save and Test** * Click Save to apply the settings. * Visit the product page on your store to check if the Swatch option works correctly.
### 3. Real-World Applications of Swatch * Color selection for apparel * Material choice for furniture * Pattern/texture selection for home décor * Visual product personalization (e.g., monogram styles) ### 4. Key Features of Swatch * The Swatch let users choose only one option from a predefined list, ensuring clear, exclusive selections. When displaying many option values, they can be arranged in a single line or inline layout to save space and maintain a clean, organized design.
# Button ✨ [Demo store](https://optis-product-options-variant.myshopify.com/products/button?variant=51025989140758) ### 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”.
### 2. How to Create a Button **Step 1: Add a New Option** * Click Add Option > Swatch to create a new option
**Step 2: Add information to the Button** * Enter an option name for the Button (e.g., "Select Size") * Add the option values (e.g., Small, Medium, Large). * Tick on “Required field” if you want customers must choose the option before checking out. * Tick on "Hide option label” if you don’t want to show the option name above the option values.
Other features: * Price Add-On > Create Fee – [What is it & How to Use](https://www.youtube.com/watch?v=5Bq4t0IrVEU) * Price Upsell product > Assign to Variant – [What is it & How to Use](/product-options/advanced-setup/how-to-use-upsell-product-link-stock-and-price-of-shopify-variant-to-option-value) * SKU – [What is it & How to Use](https://www.shopify.com/ca/retail/what-is-a-sku-number) * Quantity – [What is it & How to Use](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options) **Step 3: Advanced Settings (If Needed)** {% hint style="success" %} **Conditional Logic:** Enable conditional logic if you want the Button to show/hide only when a customer selects a specific option from another field. [How to set up Conditional logic?](https://optis-options-helpdesk.crisp.help/en/article/how-to-set-up-conditional-logics-1dgigop/) {% endhint %}
{% hint style="success" %} **Help text:** Add a short description to explain the purpose of the Button option. It can be displayed as Tooltips or Content (Below/Beside the option title, Below the option). {% endhint %}
{% hint style="success" %} **Default value:** Pre-select the Button options every time the customer goes to the site. It can save time for customers by providing common or expected choices. {% endhint %}
Example: You want the option value “S” on Size to be selected automatically when customers enter the product page. How it looks like in your storefront:
{% hint style="success" %} **Quantity:** Allows customers to select multiple values from the dropdown. You can set the **Min** and **Max** for each option value according to your own requirements. This allows you to control how many units of each option value customers can select. {% endhint %}
**Step 4: Save and Test** * Click Save to apply the settings. * Visit the product page on your store to check if the Button option works correctly.
### 3. Real-World Applications of Button * Sizes: Small, Medium, Large * Materials: Leather, Canvas, Suede * Extras: Add Dust Bag, Add Gift Note * Customization: Choose Frame Color, Add Logo, Pick Layout ### 4. Key Features of Button * The Button let users choose only one option from a predefined list, ensuring clear, exclusive selections. When displaying many option values, they can be arranged in a single line or inline layout to save space and maintain a clean, organized design.
# Static text # Paragraph ✨ [Demo store](https://optis-product-options-variant.myshopify.com/products/paragraph?variant=51026013913366) ### 1. How Does the Paragraph Display? The **Paragraph** option is used to display informational text on your product page. It helps guide customers, explain steps, or add notes - without collecting any customer input.
### 2. How to Create a Paragraph **Step 1: Add a New Option** * Click Add Option > Paragraph to create a new option
**Step 2: Add information to the Paragraph** * Enter an label for the Pagragraph * Enter your paragraph text in the field (e.g.: Instructional guides”). * Tick on "Hide option label” if you don’t want to show the option name above the option values.
**Step 3: Advanced Settings (If Needed)** {% hint style="success" %} **Conditional Logic:** Enable conditional logic if you want the Heading to show/hide only when a customer selects a specific option from another field. [How to set up Conditional logic?](/product-options/getting-started/other-popular-features/how-to-set-up-conditional-logics) {% endhint %}
**Step 4: Save and Test** * Click Save to apply the settings. * Visit the product page on your store to check if the Heading works correctly.
### 3. Real-World Applications of Paragraph * Provide detailed information about a product. * Display usage or care instructions for customers. * Show important notes, details, or recommendations. * Provide descriptions or explanations for customization options. ### 4. Key Features of Heading The Paragraph allows you to display text content in a clear and readable format. It is ideal for presenting product descriptions, instructions, additional information, or explanations without requiring customers to make a selection. When displaying longer content, the Paragraph helps organize information into a clean and easy-to-read format, improving the overall clarity and user experience. # Heading ✨ [Demo store](https://optis-product-options-variant.myshopify.com/products/heading?variant=51026014273814) ### 1. How Does the Heading 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:
### 2. How to Create a Heading **Step 1: Add a New Option** * Click Add Option > Heading to create a new option
**Step 2: Add information to the Heading** * Enter an option name for the Heading (This will not show on the store front) * Enter your heading text in the field (e.g.: Step 1: "Choose your Size”). * Adjust Size, Text color, Font weight for the heading.
**Step 3: Advanced Settings (If Needed)** {% hint style="success" %} **Conditional Logic:** Enable conditional logic if you want the Heading to show/hide only when a customer selects a specific option from another field. [How to set up Conditional logic?](/product-options/getting-started/other-popular-features/how-to-set-up-conditional-logics) {% endhint %}
**Step 4: Save and Test** * Click Save to apply the settings. * Visit the product page on your store to check if the Heading works correctly.
### 3. Real-World Applications of Heading * Grouping related customization fields * Adding titles for steps in a multi-step configuration * Drawing attention to specific sections (e.g., "Gift Options", "Upload Your Image") * Improving layout and readability of long forms ### 4. Key Features of Heading * Purely for visual organization, not for customer input * Makes long option lists easier to navigate * Fully supports conditional visibility * Displayed as bold text, styled consistently with your theme # 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.4
### 2. How to Add a Divider? **Step 1: Add a New Option** * Click Add Option > Divider to create a divider.
**Step 2: Add Information to the Divider** * Enter an option name for the Divider (This will not show on the store front) * Customize Size, Color, and Style for your divider
**Step 3: Advanced Settings (If Needed)** * Conditional Logic: Enable conditional logic if you want the Switch to show/hide only when a customer selects a specific option from another field. [How to set up Conditional logic?](/product-options/getting-started/other-popular-features/how-to-set-up-conditional-logics)
### 3. Real-World Use Cases * Separate product personalization options from general options. * Create visual sections like “Step 1 – Choose Size”, “Step 2 – Choose Color”. * Improve form clarity, especially on products with many options. ### 4. Key Features * Enhances layout and user flow. * No impact on pricing or customer input. * Simple to add and customize. # Popup (Modal) ### **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” → A popup opens showing a size chart.
### **2. How to Create a Popup Modal** **Step 1: Add a New Option** * Click Add Option > Popup Modal to begin creating your popup.
**Step 2: Add Information to the Modal** * Title on product page: This is the clickable text or button that opens the popup (e.g., “View Care Instructions” or “See Personalization Guide”). * Label on Pop-up: This appears at the top of the popup window. * Popup Content: Add your detailed content inside the editor. This can include text, images, tables, or even bullet points.
**Step 3: Advanced Settings (If Needed)** * Conditional Logic: Enable conditional logic if you want the Switch to show/hide only when a customer selects a specific option from another field. [How to set up Conditional logic?](/product-options/getting-started/other-popular-features/how-to-set-up-conditional-logics)
* Help text: Add a short description to explain the purpose of the Pop-up moda. It can be displayed as Tooltips or Content (Below/Beside the option title, Below the option).
### **3. Real-World Applications of Popup Modal** * Size charts * Frame or color guides * Personalization instructions * Shipping & return policies * Product care tips * Warranty or disclaimer info ### **4. Key Features of Popup Modal** * Keeps product pages clean and focused * Allows rich content (images, tables, styled text) * Fully supports conditional visibility * Great for extra info that doesn’t need to be always visible * Improves UX by giving info only when the customer wants it # Others # 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.
### 2. How to Create a Color Picker **Step 1: Add a New Option** * Go to your Option Set > Click Add Option > Color Picker.
**Step 2: Configure the Field** * Enter an Option Name (e.g., “Pick Your Color”).
***You can tick:*** * ✅ “This option is required” if customers must select before adding to cart
How it looks on the storefront:
* ✅ “Hide option name” if you want to hide the option title above swatches
How it looks on the storefront:
Other features: * Price Add-On > Create Fee – [What is it & How to Use](https://www.youtube.com/watch?v=5Bq4t0IrVEU) * Price Upsell product > Assign to Variant – [What is it & How to Use](/product-options/advanced-setup/how-to-use-upsell-product-link-stock-and-price-of-shopify-variant-to-option-value) * SKU – [What is it & How to Use](https://www.shopify.com/ca/retail/what-is-a-sku-number)
#### Step 3: Advanced Settings (If Needed) * Conditional Logic: Enable conditional logic if you want the Color Picker to show/hide only when a customer selects a specific option from another field. [How to set up Conditional logic?](/product-options/getting-started/other-popular-features/how-to-set-up-conditional-logics)
* Help text: Add a short description to explain the purpose of the Color Picker option. It can be displayed as Tooltips or Content (Below/Beside the option title, Below the option).
Here is an example of the Help text as Tooltips looks like on the storefront:
### 3. Real-World Applications * Custom printed products (e.g., T-shirts, mugs) * Personalized embroidery or engraving * Home decor with paint color options * DIY and art kits ### 4. Key Features of Color Picker * Customers freely select any color using a color wheel * Flexible and user-friendly for personalization * Ideal for products requiring true customization * Simple, one-click interface for color selection # 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
### **2. How to Create a File Upload?** **Step 1: Add a New Option** * Click Add Option > File Upload to create a new file upload field.
**Step 2: Add Information to the File Upload** * Option name: Enter the label for the field (e.g., "Upload Your Photo" or "Upload Logo File").
***You can tick:*** * ✅ “This option is required” if customers must select before adding to cart
How it looks on the storefront:
* ✅ “Hide option name” if you want to hide the option title above buttons
How it looks on the storefront:
Other features: * Price Add-On > Create Fee – [What is it & How to Use](https://www.youtube.com/watch?v=5Bq4t0IrVEU) * Price Upsell product > Assign to Variant – [What is it & How to Use](/product-options/advanced-setup/how-to-use-upsell-product-link-stock-and-price-of-shopify-variant-to-option-value) * SKU – [What is it & How to Use](https://www.shopify.com/ca/retail/what-is-a-sku-number) * Quantity – [What is it & How to Use](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options)
**Step 3: Advanced Settings (If Needed)** * File type & size limits: Set restrictions for file types (e.g., JPG, PNG, PDF) and maximum file size allowed.
* Help text: Add notes such as “High-resolution files only” or “Maximum file size: 5MB” using tooltips or content placement.
* Conditional Logic: Show this field only when a specific option is selected. Useful for optional customization.
### **3. Real-World Applications of File Upload** * Custom Products: Upload artwork for personalized t-shirts, mugs, phone cases. * Print Services: Customers upload business cards, resumes, banners, etc. * Design Orders: Add personal images or brand logos for marketing materials. ### **4. Key Features of File Upload** * Accepts image files (JPG, PNG), documents (PDF, DOCX), and more. * Set size and file type restrictions. * Supports required fields and conditional logic. * Ensures you collect the correct file from the customer before they check out. # 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.
### 2. How to Create a Date and Time Picker **Step 1: Add a New Option** * Click Add Option > Date and Time Picker to create a new date/time field
**Step 2: Set Up Your Date/Time Picker** * Option Name: Enter the label name (e.g., "Select Your Delivery Date", "Book Your Appointment Time").
* Date & Time Selection: Choose whether customers can pick specific Date & time or Date & time range
* Selectable Dates: Select which weekdays customers can choose from and set allowed time ranges for each
* Display Date/Time: Select the display format for dates and times (e.g., MM/DD/YYYY or 24-hour/12-hour clock).
* Deactivated Dates: Block off certain dates by setting cut-off times, disabling specific dates, ranges, or past dates
**Step 3: Configure Restrictions (If Needed)** * Conditional Logic: Enable conditional logic if you want the Date & Time option to show/hide only when a customer selects a specific option from another field. [How to set up Conditional logic?](/product-options/getting-started/other-popular-features/how-to-set-up-conditional-logics)
* Help text: Add a short description to explain the purpose of the Date & Time option. It can be displayed as Tooltips or Content (Below/Beside the option title, Below the option).
* Placeholder Text: A short hint shown inside the input field to guide customers on what to enter.
### 3. Real-World Applications of Date and Time Picker * Choosing a delivery date for cakes, flowers, gifts, etc. * Booking a pickup time for customized orders. * Scheduling a service appointment (e.g., spa, photography, consulting). * Reserving a seat or slot for an event. ### 4. Key Features of the Date and Time Picker * Easy for customers to select dates and times without manual typing. * Supports date-only, time-only, or both combined. * You can apply blackout dates and restrict available times. * Perfect for making time-sensitive orders more accurate and smooth. # Show updated total price with add-ons **Installing the 'Price increased with price add-ons' advanced feature help:** * 💡 Displays updated pricing in real time when customers select paid add-ons. * 🛍️ Helps customers understand the total cost clearly right on the product page.
### **How to make it work in your store?** This setup involves some coding and may be a bit complex if you're not familiar with technical tasks. ***Please contact us via live chat for free installation**. We will complete it for you within 1 working day* **Install the code to make this work:** * Click on Advanced Features > Find Show updated total price with add-ons > Click Self-install for dev.
* Follow the steps in the instructions to install
* Click verify code to ensure you did the installation correctly

# Shorten file upload display on cart/checkout **Installing the 'Shorten file upload display on cart/checkout' advanced feature help:** * 🖼️ Shows a small preview of the uploaded file in the cart. * 🔗 Replaces the plain file link with a more visual and useful display.
### How to make it work in your store? This setup involves some coding and may be a bit complex if you're not familiar with technical tasks. ***Please contact us via live chat for free installation***. We will complete it for you within 1 working day **Install the code to make this work:** * Click on Advanced Features > Find Show updated total price with add-ons > Click Self-install for dev.
* Follow the steps in the instructions to install
* Click verify code to ensure you did the installation correctly
If the installation doesn’t work as expected, please contact us directly and our team will be happy to assist you. 😊 # Work with your cart drawer / ajax cart **Installing the 'Work with your cart drawer/ajax cart' advanced feature help:** * Lets customers see their selected options in the mini-cart or side cart drawer, **when click on add to cart** * Helps them double-check their choices before checkout.
### **How to make it work in your store?** This installation can only work if your theme already has a mini-cart, cart slider, or ajax cart feature. If your theme does not have one, this setting will not apply. **Step 1: Enable the widget** * Go to Advanced Settings > Display Options on Mini-cart and Cart Slider > Enable the toggle
**Step 2: Contact Support** After enabling the toggle, please reach out to our support team. We will assist you for free to properly install and configure it into your store’s cart within one working day. # Show options on Email confirm/Packing slips **Installing the 'Show options on Email confirm/Packing slips' advanced feature help:** * 📧 Shows selected options in the order confirmation email. * 🧾 Includes them on the packing slip for accurate order fulfillment. * ✅ Helps reduce packing errors and boosts customer confidence. ### **How to make it work in your store?** This setup involves some coding and may be a bit complex if you're not familiar with technical tasks. Please contact us via live chat for free installation. We will complete it for you within 1 working day
**Install the code to make this work:** * Click on Installation > Find Options on Order Confirmation Emails and Packing Slips > Click Manual Installation.
* Follow the steps in the instructions to install
# Edit option on cart page **Installing the 'Edit option on cart page' advanced feature help:** * ✏️ Customers can edit selected options directly in the cart. * 🔄 No need to remove and re-add the product. * 🎯 Makes shopping faster and more flexible.
### **How to make it work in your store?** This setup involves some coding and may be a bit complex if you're not familiar with technical tasks. Please contact us via live chat for free installation. We will complete it for you within 1 working day **Step 1: Install the code** * Click on Installation > Find Featured products > Click Manual Installation.
* Follow the steps in the instructions to install
* Click verify code to ensure you did the installation correctly
**Step 2: Enable the widget** * Go back to Installation > Find In-cart Editing > Enable the toggle

# Show options on featured products **Installing the 'Show options on featured products' advanced feature help:** * ✅ Shows options on featured product, which shows on the homepage, collection pages, or featured product blocks. * 🛒 Lets customers select options and buy product without visiting the product detail page.
### **How to make it work in your store?** This setup involves some coding and may be a bit complex if you're not familiar with technical tasks. Please contact us via live chat for free installation. We will complete it for you within 1 working day Prefer to set it up on your own? You can follow our detailed step-by-step guide directly in app here: * Click on Advanced Features > Find Featured products > Click Self-install for dev.
* Follow the steps in the instructions to install
* Click verify code to ensure you did the installation correctly

# OPTIS Product Options - Developer Integration Guide ### Overview The OPTIS Product Options app exposes a global JavaScript object `BSS_PO.currentSelectedOptions` that contains real-time information about customer-selected product options, including prices, validation status, quantities, and detailed breakdowns. This guide explains how third-party developers can integrate with and read data from our app. ### Data Structure #### BSS\_PO.currentSelectedOptions The main data object contains the following structure: ``` BSS_PO.currentSelectedOptions = { byOptionId: {}, // Options indexed by option ID byLabel: {}, // Options indexed by label name byOptionSetId: {}, // Options grouped by option set ID allValues: [], // Flat array of all selected options quantities: {}, // NEW: Quantity data for each option value totalPriceAddOn: 0, // Total price add-on from all options totalVariantPriceAddOn: 0, // Total variant-based price add-on variantPriceAddOn: [], // Array of variant price add-ons priceBreakdown: {}, // Detailed price breakdown by option validation: { // Validation status for required options isValid: true, requiredOptions: [], missingOptions: [], validOptions: [], errors: [] }, timestamp: "2023-..." // Last update timestamp } ``` #### NEW: Quantity Data Structure The `quantities` object stores quantity information for each option value: ``` quantities: { // By option label and value combination "Size_Large": 2, "Color_Red": 1, // By option ID (for easy lookup) "optionId_123": { "Large": 2, "Medium": 1 }, "optionId_124": { "Red": 1, "Blue": 3 } } ``` ### Enhanced Option Value Structure Each option value now includes quantity and pricing information: ``` { value: "Large", label: "Size", index: 0, quantity: 2, // NEW: Selected quantity for this value unitPrice: 5.00, // NEW: Price per unit unitVariantPrice: 0, // NEW: Variant price per unit price: 10.00, // Total price (unitPrice × quantity) variantPrice: 0, // Total variant price (unitVariantPrice × quantity) id: 123 } ``` ### API Methods We provide a comprehensive API through `BSS_PO.getSelectedOptions` for easy data access: #### Basic Data Access **Get All Selected Options** ``` // Get all selected options with price and quantity information const allOptions = BSS_PO.getSelectedOptions.all(); console.log(allOptions); // Returns: [{ // label: "Size", // value: "Large", // quantity: 2, // unitPrice: 5.00, // price: 10.00, // variantPrice: 0, // id: 123, // index: 0 // }, ...] ``` **Get Options by Label** ``` // Get all values for a specific option (useful for multi-select options) const colorOptions = BSS_PO.getSelectedOptions.byLabel("Color"); console.log(colorOptions); // Returns: [{ // value: "Red", // quantity: 1, // unitPrice: 2.00, // price: 2.00, // variantPrice: 0, // id: 124, // index: 0 // }] // Get single value for radio/dropdown options const selectedSize = BSS_PO.getSelectedOptions.getValue("Size"); console.log(selectedSize); // "Large" // Get multiple values for checkbox options const selectedFeatures = BSS_PO.getSelectedOptions.getValues("Features"); console.log(selectedFeatures); // ["Waterproof", "Extended Warranty"] ``` **Check Option Selection** ``` // Check if a specific option value is selected const isRedSelected = BSS_PO.getSelectedOptions.isSelected("Color", "Red"); console.log(isRedSelected); // true ``` #### NEW: Quantity Methods **Get Quantity Information** ``` // Get quantity for a specific option value const sizeQuantity = BSS_PO.getSelectedOptions.getQuantity("Size", "Large"); console.log(`Large size quantity: ${sizeQuantity}`); // 2 // Get all quantities for an option const sizeQuantities = BSS_PO.getSelectedOptions.getQuantities("Size"); console.log(sizeQuantities); // { "Large": 2, "Medium": 1 } // Get quantity by option ID const optionQuantities = BSS_PO.getSelectedOptions.getQuantitiesByOptionId(123); console.log(optionQuantities); // { "Large": 2, "Medium": 1 } // Get total quantity across all options const totalQuantity = BSS_PO.getSelectedOptions.getTotalQuantity(); console.log(`Total items: ${totalQuantity}`); // 4 ``` #### Enhanced Price Information **Get Price Data with Quantity** ``` // Get total price add-on from all options (includes quantity multiplication) const totalPrice = BSS_PO.getSelectedOptions.getTotalPriceAddOn(); console.log(`Total extra: $${totalPrice.toFixed(2)}`); // Get unit price vs total price for specific option value const unitPrice = BSS_PO.getSelectedOptions.getUnitPriceByValue("Size", "Large"); const totalPrice = BSS_PO.getSelectedOptions.getPriceByValue("Size", "Large"); const quantity = BSS_PO.getSelectedOptions.getQuantity("Size", "Large"); console.log(`Unit price: $${unitPrice}, Quantity: ${quantity}, Total: $${totalPrice}`); // Get price breakdown with quantity details const breakdown = BSS_PO.getSelectedOptions.getPriceBreakdownWithQuantities(); console.log(breakdown); /* Returns: { "Size": { values: [{ value: "Large", quantity: 2, unitPrice: 5.00, unitVariantPrice: 0, price: 10.00, variantPrice: 0, extraPriceType: 0 }], totalPrice: 10.00, totalVariantPrice: 0, totalQuantity: 2 } } */ ``` **Get Comprehensive Price Summary with Quantities** ``` const priceSummary = BSS_PO.getSelectedOptions.getPriceSummary(); console.log(priceSummary); /* Returns: { total: 15.00, totalVariant: 5.00, grandTotal: 20.00, totalQuantity: 3, // NEW: Total quantity across all options formattedTotal: "15.00", formattedVariantTotal: "5.00", formattedGrandTotal: "20.00", details: [ { label: "Size", price: 10.00, variantPrice: 0, quantity: 2, // NEW: Total quantity for this option unitPrice: 5.00, // NEW: Average unit price formattedPrice: "10.00", values: [{ value: "Large", quantity: 2, // NEW: Quantity for this specific value unitPrice: 5.00, // NEW: Unit price for this value price: 10.00, variantPrice: 0 }] } ] } */ ``` #### Validation **Check Validation Status** ``` // Check if all required options are selected const isValid = BSS_PO.getSelectedOptions.isValid(); console.log(`Form valid: ${isValid}`); // Get validation summary const validation = BSS_PO.getSelectedOptions.getValidationSummary(); console.log(validation); /* Returns: { isValid: false, totalRequired: 3, totalMissing: 1, totalValid: 2, message: "1 required option(s) need to be selected", missingLabels: ["Color"], errors: ["Color is required and must be selected."], details: { required: [...], missing: [...], valid: [...] } } */ // Check specific option requirements const isColorRequired = BSS_PO.getSelectedOptions.isRequired("Color"); const isColorMissing = BSS_PO.getSelectedOptions.isMissing("Color"); ``` **Get Validation Errors** ``` const errors = BSS_PO.getSelectedOptions.getValidationErrors(); errors.forEach(error => console.error(error)); ``` #### Enhanced Formatted Output **Get Formatted Strings with Quantities** ``` // Get formatted string of all selections with prices and quantities const formatted = BSS_PO.getSelectedOptions.getFormattedSelectionsWithPrices(); console.log(formatted); // "Size: Large (×2, +10.00) | Color: Red (×1, +2.00) | Features: Waterproof, Extended Warranty (×1, +5.00)" // Get formatted string with detailed quantity breakdown const detailedFormat = BSS_PO.getSelectedOptions.getFormattedSelectionsDetailed(); console.log(detailedFormat); // "Size: Large (2 units @ $5.00 each = $10.00) | Color: Red (1 unit @ $2.00 = $2.00)" ``` ### NEW: Complete API Methods for Quantity Support Here are the additional methods added to support quantity functionality: ``` BSS_PO.getSelectedOptions = { // ... existing methods ... // === QUANTITY METHODS === // Get quantity for specific option value getQuantity: (label, value) => { const quantityKey = `${label}_${value}`; return BSS_PO.currentSelectedOptions?.quantities[quantityKey] || 0; }, // Get all quantities for an option label getQuantities: (label) => { const options = BSS_PO.currentSelectedOptions?.byLabel[label] || []; const quantities = {}; options.forEach(option => { quantities[option.value] = option.quantity || 1; }); return quantities; }, // Get quantities by option ID getQuantitiesByOptionId: (optionId) => { return BSS_PO.currentSelectedOptions?.quantities[`optionId_${optionId}`] || {}; }, // Get total quantity across all options getTotalQuantity: () => { const allValues = BSS_PO.currentSelectedOptions?.allValues || []; return allValues.reduce((total, option) => total + (option.quantity || 1), 0); }, // === ENHANCED PRICE METHODS WITH QUANTITY === // Get unit price for specific option value (before quantity multiplication) getUnitPriceByValue: (label, value) => { const breakdown = BSS_PO.currentSelectedOptions?.priceBreakdown[label]; if (breakdown && breakdown.values) { const valueObj = breakdown.values.find(v => v.value === value); return valueObj ? (valueObj.unitPrice || 0) : 0; } return 0; }, // Get unit variant price for specific option value getUnitVariantPriceByValue: (label, value) => { const breakdown = BSS_PO.currentSelectedOptions?.priceBreakdown[label]; if (breakdown && breakdown.values) { const valueObj = breakdown.values.find(v => v.value === value); return valueObj ? (valueObj.unitVariantPrice || 0) : 0; } return 0; }, // Get price breakdown including quantity details getPriceBreakdownWithQuantities: () => { const breakdown = BSS_PO.currentSelectedOptions?.priceBreakdown || {}; const enhanced = {}; Object.entries(breakdown).forEach(([label, data]) => { enhanced[label] = { ...data, totalQuantity: data.values.reduce((sum, v) => sum + (v.quantity || 1), 0), averageUnitPrice: data.values.length > 0 ? data.values.reduce((sum, v) => sum + (v.unitPrice || 0), 0) / data.values.length : 0 }; }); return enhanced; }, // === ENHANCED FORMATTED OUTPUT === // Get formatted selections with quantity details getFormattedSelectionsDetailed: () => { const allValues = BSS_PO.currentSelectedOptions?.allValues || []; const grouped = {}; allValues.forEach(option => { if (!grouped[option.label]) { grouped[option.label] = []; } grouped[option.label].push({ value: option.value, quantity: option.quantity || 1, unitPrice: option.unitPrice || 0, price: option.price || 0 }); }); return Object.entries(grouped).map(([label, items]) => { const values = items.map(item => { if (item.quantity > 1) { return `${item.value} (${item.quantity} units @ $${item.unitPrice.toFixed(2)} each = $${item.price.toFixed(2)})`; } else { return item.price > 0 ? `${item.value} (+$${item.price.toFixed(2)})` : item.value; } }).join(', '); return `${label}: ${values}`; }).join(' | '); } }; ``` ### Event System #### Listen for Option Changes with Quantity Information ``` // Listen for any option selection changes document.addEventListener('BSSOptionSelectionChanged', (event) => { const { selectedOptions, quantities, // NEW: Quantity data totalPriceAddOn, priceBreakdown } = event.detail; console.log('Options changed:', selectedOptions); console.log('Quantities:', quantities); console.log('New total price:', totalPriceAddOn); console.log('Price breakdown:', priceBreakdown); // Update your UI with quantity information updateCartSummary(totalPriceAddOn, quantities); }); // Listen for validation failures document.addEventListener('BSSOptionValidationFailed', (event) => { const { validation, missingOptions, errors } = event.detail; console.log('Validation failed:', validation); console.log('Missing options:', missingOptions); // Show validation errors to user displayValidationErrors(errors); }); // Listen for price changes (includes quantity-based price calculations) document.addEventListener('BSSchangeProductPrice', (event) => { console.log('Product price changed, recalculate total with quantities'); // Update your price display with quantity considerations const newTotal = BSS_PO.getSelectedOptions.getTotalPriceAddOn(); const totalQuantity = BSS_PO.getSelectedOptions.getTotalQuantity(); updatePriceDisplay(newTotal, totalQuantity); }); ``` ### Cart Page Integration #### Detecting Option Changes on Cart Page On the cart page, customers can edit their product options and quantities. To detect these changes: ``` // Listen for cart changes (additions, removals, option edits, quantity changes) window.addEventListener('cart_changed', (event) => { const { newCart, oldCart, changedCartItems } = event.detail; console.log('Cart changed:', { newCart, oldCart, changedItems: changedCartItems }); // Fetch updated cart data to get latest option and quantity information fetchUpdatedCartData(); }); // Function to fetch and process updated cart data with quantity information async function fetchUpdatedCartData() { try { const response = await fetch('/cart.js'); const cartData = await response.json(); // Process cart items to extract option and quantity information cartData.items.forEach(item => { // Check for OPTIS option properties const optionProperties = {}; // Extract option data from cart item properties Object.keys(item.properties || {}).forEach(key => { // OPTIS stores option data in properties with specific patterns if (key.includes('_bssPrice') || key.includes('_bssVariants') || key.includes('_bssCustomAttributes') || key.includes('_bssQuantities')) { try { optionProperties[key] = JSON.parse(item.properties[key]); } catch (e) { optionProperties[key] = item.properties[key]; } } }); console.log(`Item ${item.key} options:`, optionProperties); console.log(`Item ${item.key} cart quantity:`, item.quantity); // Update your UI based on the new option and quantity data updateCartItemDisplay(item.key, optionProperties, item.quantity); }); } catch (error) { console.error('Error fetching cart data:', error); } } // Example: Update cart item display with quantity information function updateCartItemDisplay(itemKey, optionData, cartQuantity) { const cartItemElement = document.querySelector(`[data-cart-item="${itemKey}"]`); if (cartItemElement && optionData._bssPrice) { const extraPrice = optionData._bssPrice.extra || 0; const quantities = optionData._bssQuantities || {}; // Update price display with quantity considerations const priceElement = cartItemElement.querySelector('.item-price'); if (priceElement) { console.log(`Item ${itemKey} has extra price: $${extraPrice}`); console.log(`Item ${itemKey} option quantities:`, quantities); console.log(`Item ${itemKey} cart quantity:`, cartQuantity); } } } ``` #### Enhanced Cart Data Structure Cart items now include quantity information for options: ``` // Example cart item with OPTIS option and quantity data { "key": "39772975595588:abc123", "id": 39772975595588, "properties": { "Size": "Large (×2)", "Color": "Red (+$5.00)", "_bssPrice": "{\"extra\":15.00}", "_bssQuantities": "{\"Size_Large\":2,\"Color_Red\":1}", // NEW: Quantity data "_bssVariants": "{\"Size\":{\"id\":\"39772975595588\",\"quantity\":2}}", "_bssCustomAttributes": "{\"Size\":\"Large\",\"Color\":\"Red\"}" }, "quantity": 1, // This is the cart line item quantity "variant_id": 39772975595588 } ``` ### Practical Examples #### Example 1: Quantity-Aware Price Calculator ``` function calculateOptionPricing() { const allOptions = BSS_PO.getSelectedOptions.all(); let totalCost = 0; let breakdown = []; allOptions.forEach(option => { const itemCost = option.price; // Already includes quantity multiplication totalCost += itemCost; breakdown.push({ option: option.label, value: option.value, quantity: option.quantity, unitPrice: option.unitPrice, totalPrice: itemCost, formatted: option.quantity > 1 ? `${option.value} (${option.quantity}× $${option.unitPrice.toFixed(2)} = $${itemCost.toFixed(2)})` : `${option.value} (+$${itemCost.toFixed(2)})` }); }); return { totalCost, breakdown }; } ``` #### Example 2: Inventory Management Integration ``` function checkInventoryAvailability() { const selectedOptions = BSS_PO.getSelectedOptions.all(); const inventoryWarnings = []; selectedOptions.forEach(option => { // Check if requested quantity exceeds available inventory const availableStock = getInventoryForOption(option.label, option.value); if (option.quantity > availableStock) { inventoryWarnings.push({ option: `${option.label}: ${option.value}`, requested: option.quantity, available: availableStock, message: `Only ${availableStock} units available for ${option.label}: ${option.value}` }); } }); return inventoryWarnings; } ``` #### Example 3: Dynamic Pricing Based on Quantity ``` function applyQuantityDiscounts() { const options = BSS_PO.getSelectedOptions.all(); let adjustedTotal = 0; options.forEach(option => { let finalPrice = option.price; // Apply quantity-based discounts if (option.quantity >= 10) { finalPrice *= 0.9; // 10% discount for 10+ items } else if (option.quantity >= 5) { finalPrice *= 0.95; // 5% discount for 5+ items } adjustedTotal += finalPrice; console.log(`${option.label}: ${option.value} - ${option.quantity} units`); console.log(`Original: $${option.price.toFixed(2)}, Discounted: $${finalPrice.toFixed(2)}`); }); return adjustedTotal; } ``` ### Troubleshooting #### Common Issues 1. **BSS\_PO is undefined**: The app hasn't loaded yet. Make sure OPTIS is installed and enabled in the theme app extension. 2. **Quantity data is missing**: Ensure you're using the updated version of OPTIS that supports quantity tracking. Check that quantity inputs are properly configured for your option types. 3. **Price calculations seem incorrect**: Remember that prices in the API are already multiplied by quantities. Use `unitPrice` if you need the per-unit cost. 4. **Quantity not updating**: Quantity changes trigger the same events as other option changes. Listen for `BSSOptionSelectionChanged` events to detect quantity modifications. 5. **Validation not working with quantities**: Validation checks if options are selected, not their quantities. Implement custom quantity validation based on your business rules. 6. **Cart quantities vs option quantities**: Cart line item quantity is different from individual option quantities. A single cart item can have multiple option values with different quantities each. #### Best Practices 1. **Always check for quantity data**: Not all option types support quantities. Default to 1 if quantity data is unavailable. 2. **Use unit prices for custom calculations**: When implementing custom pricing logic, use `unitPrice` and multiply by `quantity` yourself. 3. **Listen to events for real-time updates**: Don't poll for changes; use the provided event system for better performance. 4. **Cache expensive calculations**: If you're doing complex quantity-based calculations, cache results and only recalculate when the `BSSOptionSelectionChanged` event fires. 5. **Validate quantities in your code**: Implement business logic to ensure quantities make sense for your use case (minimum/maximum quantities, inventory checks, etc.) # How to Use "Upsell product"? Link Stock and Price of Shopify Variant to Option Value Our app supports **product option inventory management**, allowing specific options to be **grayed out when out of stock** and ensuring that inventory updates automatically when a customer purchases an option. This feature, called **"Upsell product"** links an option to a specific Shopify variant, syncing stock and price automatically. This feature is available in our **$19.99/month plan**:
### Step-by-Step Guide to Set Up "Upsell product" #### Step 1: Create Draft Products with Variants 1. In your Shopify store, create a draft product with different variants. 2. Assign stock levels and prices to each variant. * Example: * **Black variant:** Stock = **5**, Price = **$0** (only tracks stock). * **White variant:** Stock = **0**, Price = **$1000** (tracks both stock and price).
#### Step 2: Assign Variants to Product Options 1. Navigate to the **Upsell product** section in the app. 2. Select the corresponding Shopify variant for each option.
#### Step 3: View the Result on Your Storefront * If a variant is out of stock, the assigned option will be **grayed out** automatically. * If a variant has stock (for example 4 stocks), then the option linked with this variant will also have 4 stocks
* When a customer purchases an option, the inventory updates in real-time (e.g., black stock reduces from 5 to 4).
#### **Optional: Keep Variants in Draft Mode** * If you do not want these variants to appear as active products in your store, you can keep them in **draft mode** in Shopify. By following these steps, you can **prevent customers from selecting out-of-stock options** while keeping your inventory automatically updated! # Limit Min/Max Selectors in Checkbox/ Button Options/ Swatch *This feature lets you set limits on how many options can be selected.* #### Steps to Manage 1. **Select the Checkbox/ Button Option / Swatch** in your option set. 2. **Scroll to Quantity** settings. 3. **Click the checkbox** "Limit how many different option values can be selected" 4. **Enter the Min/Max Number** in the Selection field. 5. **Click Save** to apply your settings.
# How to upload image in paragraph / pop-up modal? *You want to upload an image in your paragraph or pop-up modal option type. The result will look like the image below*
#### Step by step guide to upload an image 1. Go to Paragraph, or pop-up modal option type, where you need to upload the image
2. Click Insert > Image
3. Click the "Browse File" icon
4. You can select an existing file from **Shopify files / Optis files** or upload a new image directly from your device -> then click **Done**.
5. You can also adjust the size. Then finally, click save.
6. You have the image upload successfully

# Set a Default Value for an Option Field This feature lets you set a default value for an option, so it's automatically selected when customers view your product page. **Note:** Available only for *Swatches* and *Selects* types. * **Select Types:** Dropdown, Checkboxes, Radio buttons, Switch * **Swatches Types:** Buttons, Color swatches, Image swatches.
#### **Steps:** 1. In the **Option set**, click on the element you want to adjust. 2. Under the **Option values** section, locate the specific value you want to set as default 3. Toggle on the switch in the **Default** column next to that option value 4. Click **Save** to finish.
**Result:** The default option will appear selected on your storefront page.
# How to Use the "Quantity" Feature for Options ### How to Use the "Quantity" Feature in OPTIS The Quantity feature in OPTIS allows customers to select multiple option values in 1 option.
### How It Works * **Enabling Quantity**: Check the box in the Quantity column to let customers adjust how many times they want an option. * **Min/Max Quantity:** Set a minimum and maximum limit to control how many times the total option number can be selected. * **How It Affects Price Add-Ons:** The final price of a product will increase based on the selected quantity multiplied by the Price Add-On value. ### Example – Selecting Candies for Candy Box #### **Setup in OPTIS:** * **Option Name:** Select candies (up to 5) * **Option Values:** 6 candy options * **Min quantity** is 3, and **max quantity** is 5 This means customers can select up to 5 numbers of candies. For example, 4 black candies and 1 pink candy. If you add add-on price for those candies, for example, black candy costs $5 and pink candy costs $10. Here is the total price if customers select 4 black candy + 1 pink candy: * Total price = $5x4 (black) + $10x1 (pink) = $30
### Step by Step Guideline 1. On the **Option values** table, check the **Quantity** box for the option.
2. Scroll down to the **Quantity** section. To avoid confusion, you can configure how customers select quantities based on two distinct types: * **Limit how many different option values can be selected:** This limits how many *different choices* can be selected (e.g., "Pick from 1 to 3 candy types").
* **Limit total quantity across all options:** This limits the sum of quantities across all chosen options in total combination (e.g., "Min quantity is 3, and max quantity is 5" across the selected candy types).
3. On the section "**Add-on**", enter an extra charge per unit (if needed)
4. Click **Save** to apply the changes. # Make the option required before adding to cart This feature ensures that customers must select an option before they can add the product to their cart. #### **Steps:** 1. In the **Option set edit** page, locate the element you want to make mandatory. 2. Under the **Option label**, find and enable the "**Required field**" checkbox. 3. Click **Save** to apply the changes.
**Result:** * Required options will display a **red asterisk (\*)** next to the option name on the storefront. * If a customer clicks Add to cart without making a selection, a warning message will appear to prompt them.
# Change the “--please select--” on dropdown thumbnail In the **Dropdown option** **type,** scroll down to **Default text**, then change the text in there
# Limit Characters for Text Input ***This feature lets you set a character limit for text or text area fields.*** **Steps:** 1. In the **Option set** , click on the text element you want to adjust. 2. Find **Min character** and **Max character**, and enter the character limit in these fields. 3. Click **Save** to finish
4. Go to the **Settings** > **General Settings** 5. Enable "**Character count for text box**"
**Final result on storefront:**
# Change option set position on product page 1. Go to **Settings** > **Change widget position**
2. You will see there is **OPTIS Product Options block** in here
3. **Drag the OPTIS Product Options block** to the wanted position, for example, **below the price**. The change will **reflect in the preview** on the right
4. Click **Save**, and **re-check on the product page**
# Export and Import Option Sets This guide explains how to use the **Import/Export** page (Option sets → Import/Export) to bulk-export your option sets to a CSV file, edit them offline, and re-import them — including exactly what to put in every column. It's written directly from the app's own validation code, so the rules, limits, and error messages below match what you'll actually see in the product. *** ### 1. Overview The Import/Export page has two independent tools:
ToolWhat it does
ExportDownloads your option sets (all of them, or a hand-picked subset) as one CSV file.
ImportUploads a CSV file, checks it, shows you a review screen, and creates/updates option sets from it.
The most reliable way to build an import file is to **export first, then edit the CSV**, rather than writing one from scratch. That way the header row, column order, and the exact JSON shape of the advanced fields are guaranteed correct. *** ### 2. Exporting option sets {% stepper %} {% step %} Click **Export** on the Export Option sets card. {% endstep %} {% step %} Choose a scope: * **All option sets** — everything in the store. * **Selected option sets** — check the ones you want, click **Select**, then **Export option sets**.
{% endstep %} {% step %} The file downloads as a single `.csv`. {% endstep %} {% endstepper %} *** ### 3. Importing option sets — step by step {% stepper %} {% step %} #### Prepare your file Download the sample template or start from a file you just exported. Edit it in Excel/Google Sheets/a text editor, keeping the header row untouched. **Hard limits, checked immediately on upload, before anything else happens:**
LimitValue
File type.csv only
Max file size20 MB
Max data rows50,000
Header rowMust exactly match the 44 expected column names, in order
ContentThe file can't be effectively empty
Any of these fail instantly with an **"Import failed"** error — no job is created, nothing is stored. {% endstep %} {% step %} #### Upload and Import Click **Import** → **Add file** (or drag-and-drop) → **Upload and Import**. Only one import can run per store at a time; starting a new one while another is mid-review replaces it.
{% endstep %} {% step %} #### Validating and Review If errors were found, it will show one of these messages: * 🔴 "**N validation errors found"** — hard errors: a required field is missing, or a field's value/format is wrong. This blocks the import entirely — nothing can be imported until the file is fixed and re-uploaded. * 🟡 "**N references not found in your store"** — warnings: a field's format is fine, but it points at something that isn't a real product/customer/tag/variant on your store. This does not block the import — click **Continue import** and the file imports normally, with that specific setting removed / falling back to its default. * Click **Continue import** to actually write the option sets to your store {% endstep %} {% step %} #### Complete the import 🟢 **"Import completed successfully"** banner shows how many option sets were imported. {% endstep %} {% endstepper %} #### 💡Bonus: looking up variant IDs
The search box under the Import button (**Search variant ID**) opens a product/variant search-and-copy tool — use it to find the exact Shopify variant IDs to paste into `Products` (`product variant: ...`) or `Upsell_product_ID`. *** ### 4. How rows fit together (the data model) Every CSV row is one of four types:
Row typeFills in
Set's first rowOption_set_id, Option_set_name, Priority, Status, Products, Exclude_products, Customers — plus its own option data
Later row, same setOption_set_id only (same value); the rest stay blank (= "same as first row")
Option Group rowOption_type = Option Group; groups other options via Option_in_group (one name per line) — doesn't collect input itself
Value rowOne row per choice, for choice-list types (Checkbox, Dropdown, Radio Button, Swatch, Button, Switch, Dropdown w/ Thumbnail); Option_id repeats, Option_type/Option_name stay blank
*** ### 5. Full field reference This section cross-checks the app's actual validation code against the **`Field`** sheet in the Excel file you sent. Every column gets: whether it's required, which row(s) need it, and **exactly what to type**. Where the Excel doc and the current code disagree, that's called out explicitly rather than silently picking one. > A cell you leave blank on a required-on-first-row field is a hard error *only* on that first row — the same blank cell on a continuation/value row is completely normal.
#FieldRequired?ScopeAllowed valuesExample
1Option_set_idRequired, every rowEvery row of the setNumber1
2Option_set_nameRequired (1st row)Set, first row onlyFree textCustom T-shirt
3PriorityOptionalSet, first row only0–99; blank = 00
4StatusOptional (1st row)Set, first row onlyLive / InactiveLive
5ProductsOptionalSet, first row onlySee §7.1collections: New arrivals
6Exclude_productsOptionalSet, first row onlySee §7.1tags: discontinued
7CustomersOptionalSet, first row onlySee §7.1registered
8Option_idRequired, every rowEvery row of the optionNumber5
9Option_typeRequired (1st row)Option, first row onlySee §6Swatch
10Option_name (Label_product)Required (1st row)Option, first row onlyFree textChoose Your Color
11Label_cartOptionalOption, first row onlyFree textColor
12Hide_labelOptionalOption, first row onlyYes / NoNo
13RequiredOptionalOption, first row onlyYes / NoYes
14Hide_optionOptionalOption's 1st row / Group rowYes / NoNo
15Column_widthRecommendedOption, first row only100/75/66/50/33/2533
16Option_valueRequired for choice listsEvery value rowFree textRed
17Helptext_option_valueOptionalEvery value rowFree textGood choice
18SKU_valueOptionalEvery value rowFree textABC
19Swatch_valueRequired for Swatch etc.Every value rowHex or image CDN URL#ffffff
20Swatch_title_display_typeOptional, Swatch onlyOption's first value rowSee §5.3None
21Option_price_typeOptionalValue rowsExtra fee / Upsell productExtra fee
22Option_priceOptionalValue rowsNumber100
23Upsell_product_IDOptionalValue rowsProduct/variant ID['123456789']
24Group_display_typeOptionalOption Group rowExpand / CollapseExpand
25Option_in_groupOptionalOption Group rowNames, one per lineColor
26Visibility (Conditional_logic)OptionalOption, first row onlyJSON — §7.2see §7.2
27Min_selections_charactersOptionalOption, first row onlyNumber1
28Max_selections_charactersOptionalOption, first row onlyNumber > Min2
29Enable_quantityOptionalOption, first row onlyYes / NoYes
30Min_quantityOptionalOption, first row onlyNumber1
31Max_quantityOptionalOption, first row onlyNumber > Min10
32Dropdown_search_barOptionalOption, first row onlyYes / NoNo
33Placeholder_textOptionalOption, first row onlyFree textEnter text here
34Default_valueOptionalOption, first row onlyText, or Yes per pre-selected value—
35Helptext_contentOptionalOption, first row onlyFree textEasy to setup
36Helptext_positionOptionalOption, first row onlySee §5.3Tooltip
37Option_value_orientationOptionalOption, first row onlyHorizontal / VerticalHorizontal
38Rich_text_valueRequired for static textOption, first row onlyHTML<p>...</p>
39Label_on_popupOptional, Popup onlyOption, first row onlyFree textRead more
40Font_picker_settingsRequired for Font PickerOption, first row onlyJSON — §7.3see §7.3
41File_upload_settingsRequired for File UploadOption, first row onlyJSON — §7.4see §7.4
42Date_time_settingsRequired for Date & TimeOption, first row onlyJSON — §7.5see §7.5
43Live_mockupOptional, advancedOption, first row onlyJSON — §7.6see §7.6
44BackgroundOptional, advancedOption, first row onlyJSON — §7.6see §7.6
*** ### 6. Option types reference
Option typeHas a value list?Notes
Text BoxNoSingle row. Uses Placeholder_text, Default_value, Min/Max_selections_characters.
Number FieldNoSingle row. Uses Placeholder_text, Default_value, Min/Max_selections_characters.
EmailNoSingle row. Uses Placeholder_text, Default_value, Min/Max_selections_characters.
Text AreaNoSingle row. Uses Single row. Uses Placeholder_text, Default_value, Min/Max_selections_characters.
CheckboxYesOne row per checkbox choice.
Dropdown MenuYesOne row per menu item.
Dropdown Menu With ThumbnailYesOne row per item; Swatch_value holds the thumbnail image URL.
Radio ButtonYesOne row per choice.
SwatchYesOne row per swatch; Swatch_value is a hex color or image; Swatch_title_display_type controls label placement.
ButtonYesOne row per button choice.
SwitchYesOne row per switch choice.
File UploadNoSingle row. Requires File_upload_settings.
Date & TimeNoSingle row. Requires Date_time_settings.
Color PickerNoSingle row — lets the customer pick any custom color.
Font PickerNoSingle row. Requires Font_picker_settings; can apply to other text options via that JSON's listOptionApplied.
ParagraphNoSingle row. Content goes in Rich_text_value.
HeadingNoSingle row. Content goes in Rich_text_value.
DividerNoSingle row. Purely visual; html goes in Rich_text_value
Pop-up ModalNoSingle row. Content in Rich_text_value, trigger label in Label_on_popup.
Option Group—Bundles other options together. Uses Group_display_type + Option_in_group.
*** ### 7. Special field formats #### 7.1 `Products` / `Exclude_products` / `Customers` These three columns use short text prefixes to say *which kind* of condition you mean. Everything after the prefix is separated with `;` (semicolons) — except a plain product-title list, which can use newlines or commas. **`Products`** (who this option set applies to)
MeaningWhat to type
All productsleave blank, or all
Specific productsjust the product title(s), one per line: Custom T-shirt⏎Custom Phone Case
Specific collectionscollections: Collection A; Collection B
Products with a tagtags: freeship; sale
Specific product variants (by ID)product variant: 41816231542953; 44240103014715
**`Customers`** (who sees this option set)
MeaningWhat to type
All customersleave blank, or all
Registered / logged-in customersregistered
Guests (no account)without accounts
Specific customers, by emailspecific: a@gmail.com; b@gmail.com
Customers with a tagtags: vip; wholesale
**`Exclude_products`** (removes products from the match above)
MeaningWhat to type
Noneleave blank, or None
By products tagtags: discontinued; clearance
> Currently `Exclude_products` only recognizes the `tags:` format (or blank/`None`). Typing a plain product title here has no effect — if you need to exclude specific products by name, use a product tag instead. A reference that doesn't match anything on your store (a typo'd collection name, an email that isn't a customer) shows up as a **warning**, not a hard error — the field is simply cleared if you continue. #### 7.2 `Visibility (Conditional_logic)` Shows or hides this option depending on the value of *another option in the same set*. ```json { "action": "show", "match": "all", "conditions": [ { "option_label": "Color", "operator": "IS", "value": "Red" }, { "option_label": "Engraving Text", "operator": "CONTAINS", "value": "cat" } ] } ```
KeyValues
actionshow / hide
matchany (at least one condition must be true) / all (every condition must be true)
conditions[].option_labelMust exactly match another option's Option_name (Label_product) in the same option set
conditions[].operatorIS, IS NOT, LESS_THAN, GREATER_THAN, CONTAINS, DOES NOT CONTAIN
conditions[].valueMust match one of the referenced option's real values (for choice-list types)
Requirements: the option set needs **at least 2 options** for conditional logic to make sense, and every `option_label` must reference a real option that already exists in that same set. Anything malformed (bad JSON, an unrecognized `action`/`match`, a missing key) is treated as a **warning** — the row still imports, this field is simply dropped. #### 7.3 `Font_picker_settings` ```json { "typeFontSelection": "specific", "font_picker_values": ["ABeeZee", "AR One Sans", "Abel"], "displayFontPicker": "dropdown", "listOptionApplied": ["Enter custom text"] } ```
KeyValues
typeFontSelectionall / specific
font_picker_valuesArray of font name strings
displayFontPickerdropdown / button_horizontal / button_vertical
listOptionAppliedArray of other options' Option_name (Label_product) this font choice should apply to
Only `font_picker_values` is strictly required; the rest fall back to sensible defaults if omitted or malformed. #### 7.4 `File_upload_settings` ```json { "file_type": "custom", "custom_file_type": "png, img", "max_files": 5 } ```
KeyValues
file_typeall / image / document / custom
custom_file_typeComma-separated extensions, only meaningful when file_type is custom — otherwise leave as "" (the key must still be present)
max_filesNumber
#### 7.5 `Date_time_settings` ```json { "date_time_mode": "date_picker", "date_time_config": [ { "allDay": true, "name": "Monday", "selected": true, "timeEnd": "23:59", "timeStart": "00:00" }, { "allDay": true, "name": "Tuesday", "selected": true, "timeEnd": "23:59", "timeStart": "00:00" }, { "allDay": true, "name": "Wednesday", "selected": true, "timeEnd": "23:59", "timeStart": "00:00" }, { "allDay": true, "name": "Thursday", "selected": true, "timeEnd": "23:59", "timeStart": "00:00" }, { "allDay": false, "name": "Friday", "selected": true, "timeEnd": "20:59", "timeStart": "00:00" }, { "allDay": false, "name": "Saturday", "selected": true, "timeEnd": "20:59", "timeStart": "00:00" }, { "allDay": false, "name": "Sunday", "selected": true, "timeEnd": "20:59", "timeStart": "00:00" } ], "display_date_time_type": 1, "time_format": 0, "overall_format": 1, "disable_past_date": 3, "disable_past_date_type": 3, "disable_specific_date": ["04 Jun 2026", "13 Jun 2026"], "disable_date_range": ["10 Jun 2026 to 12 Jun 2026"], "disable_all_past_date": 1 } ``` * The four keys `date_time_mode`, `display_date_time_type`, `time_format`, `overall_format` must be present. * `date_time_mode` is `date_picker` or `date_range`. * The other numeric codes (which weekday/format/deactivation option each number means) mirror whatever the Date & Time option editor's UI currently offers — **the safest way to get these exactly right is to configure one Date & Time option in the editor, export that option set, and copy its `Date_time_settings` cell as your template.** #### 7.6 `Live_mockup` / `Background` Both are advanced "live preview" settings tied to the option editor's mockup feature. * `Live_mockup` requires the top-level keys `enable`, `size_config`, `pos_config`, `transforms`. * `Background` requires `type`, `overlay_mode`, `width`, `height` (`type`: `MAIN_PRODUCT` / `CUSTOM`; `overlay_mode`: `FIRST_IMAGE_FROM_START` / `OVERLAY_AFTER_FILL_VALUE`). These have deep nested shapes that aren't meant to be hand-written. **Configure the live preview in the option editor once, export that option set, and reuse its `Live_mockup`/`Background` cells verbatim** rather than writing them from scratch. *** ### 8. Common errors & how to fix them These are the exact messages you'll see on the review screen. #### Hard errors (row is skipped until fixed)
MessageWhat it means / how to fix
Required field is missingA required column (see the Required column in §5) is blank on a row where it must be filled in
Unknown option type "…"Option_type doesn't match any value in §6 — check spelling/casing
Invalid value "…" (Status)Status must be Live or Inactive
Expected "Yes" or "No", got "…"A Yes/No column has something else in it
Expected a number, got "…"A numeric column has non-numeric text in it
Invalid JSONA JSON column (Font_picker_settings, File_upload_settings, Date_time_settings, Live_mockup, Background, Visibility (Conditional_logic)) isn't valid JSON at all — check for missing quotes/commas/brackets
Expected a JSON objectThe JSON parsed, but isn't an object (e.g. it's an array or a bare string)
Missing required keys: …The JSON object is missing one of the required keys listed in §7
"conditions" must be an arrayVisibility (Conditional_logic)'s conditions key isn't a list
Each condition must have "option_label", "operator", and "value"One of the condition objects is missing a required key
Invalid price type "…"Option_price_type must be Extra fee or Upsell product
Invalid swatch title display type / group display type / helptext positionThe cell doesn't match one of that field's allowed values — see §5 for the exact list
Duplicate option name "…" in option set "…"Two options in the same set share the same Option_name (Label_product)
Duplicate Option_id "…" in option set "…"Two options in the same set share the same Option_id — only the first is kept
Duplicate Option_set_id "…" in the fileThe same Option_set_id appears in more than one non-contiguous block — they're merged into the first occurrence
Option_set_id "…" doesn't match this option set — moved / kept in this setAn option row's Option_set_id disagrees with the set it's positioned under — the importer resolves it by ID where possible
Max_quantity must be greater than Min_quantityFix the two values so max > min (both are otherwise dropped)
Max_selections_characters must be greater than Min_selections_charactersSame idea, for character limits
Conditional logic requires at least 2 options in the setAdd another option to the set, or remove the Visibility rule
Conditional logic references option "…", which doesn't exist in this setFix option_label to match a real option's name in the same set
Conditional logic value "…" doesn't match any value of option "…"Fix value to match one of that option's real choice values
Conditional logic action/match must be "Show"/"Hide" or "Any"/"All"Fix the action/match key's value
#### Warnings (row still imports; only the flagged cell is cleared) | Banner | Meaning | | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | | Products / Collections / Variants / Customers / Product tags / Customer tags not found | The named item doesn't exist on this store — double-check spelling, or that it's the right store | | `Swatch_value` images unreachable | The image URL couldn't be fetched — check the link is public and correct | | Invalid column width (falls back to 100) | `Column_width` wasn't one of the six allowed values | | Invalid priority (falls back to 0) | `Priority` wasn't a whole number 0–99 | | Invalid font picker display/selection mode (reset to default) | `Font_picker_settings`'s `displayFontPicker`/`typeFontSelection` had an unrecognized value | *** ### 9. Tips & best practices * **Start from a real file.** Use the sample template or (better) a file you just exported — don't build the header row from scratch. * **Don't touch the header row.** Column names and order must match exactly. * **Multi-line cells use in-cell newlines, not new spreadsheet rows.** In Excel/Google Sheets, press Alt+Enter (Windows) or ⌥+Return (Mac) inside a cell for `Products` (specific-product lists) or `Option_in_group`. * **`Option_in_group` names must match exactly.** Case and spacing matter — copy the option's `Option_name (Label_product)` verbatim. * **For the advanced JSON fields** (`Font_picker_settings`, `File_upload_settings`, `Date_time_settings`, `Live_mockup`, `Background`), configure one real example in the option editor UI and export it — copy that cell rather than hand-writing the JSON. * **Test with a small file first**, especially the first time you import into a store — a 2–3 row file surfaces formatting mistakes faster than a 500-row one. * **It's safe to leave and come back.** The review screen persists for a while and the job itself lives 24 hours server-side — but if you sit on the review screen too long without confirming or cancelling, it will expire. *** ### 10. Limits at a glance | Limit | Value | | ---------------------------- | -------- | | Accepted file type | `.csv` | | Max file size | 20 MB | | Max data rows | 50,000 | | Concurrent imports per store | 1 | | Job lifetime | 24 hours | | | | # How does Product Option SKU works? #### Where to add SKU for OPTIS options? You can add SKU for OPTIS options in here:
#### How does it work with Shopify variants SKU? When customer buys the product with both Shopify variants and OPTIS option, the SKU will show like this:
#### Can I customize the SKU display on cart page? Yes you can choose to show Shopify variants SKU or OPTIS SKU or both to show with your products in the **Setting > General settings:**
# Show the swatch tooltip as an image 1. Our final result is to make the image appear larger when hovering on the swatches
2. Go to **Settings,** Scroll down to **Option type setting > Swatches**. Change the Hover Display to **Text & Image**
# Translate the “Choose File” of File Upload 1. Firstly, go to **Settings > Translation Texts**
2. Scroll down to **File upload label** > Change the text in the **Choose file** textbox
# Display color swatch element in a round shape 1. Go to **Settings** > Scroll down to **Option type setting** > **Swatches**. Change the shape to **Circle**
2. Click **Save**
# Set up the text & option size * To adjust the Text Size, please go to **Settings > Design Settings > Text & Option Size**
* To adjust the Option Size, scroll down to the **Option Size section** -> Set up **size** for each option type
# Change the color for options 1. Firstly, go to **Settings > Design Settings > Color**
2. Scroll down to **Option types** > **Button**. Change the color for **Button text hover**
# Welcome to OPTIS Color Swatch Welcome to **OPTIS Color Swatch** - the easiest way to transform standard Shopify variants into **beautiful, visual swatches** across your storefront. Our app helps you display **color, image, button, and dropdown swatches** on product pages, collection pages, and even the homepage, making it easier for customers to explore variants and choose the right option with confidence. ## 🚀 What OPTIS Color Swatch can do for you OPTIS Color Swatch helps you turn Shopify’s default variant selectors into a **visual, intuitive, and conversion-friendly experience**. With OPTIS, you can: * 🎨 Display product options as **color swatches, image swatches, buttons, dropdown menus, or swatch cards** * 🖼️ Show **variant images** so the product gallery only displays images that match the selected variant * 🔗 **Group multiple products into a single variant experience** (combine listings) * 🛍️ Show swatches on **product pages, collection pages, and featured sections** * 🎛️ Customize the look and feel to match your store’s design * ⚡ Improve product clarity and help customers choose faster This app is designed to work smoothly with most Shopify themes and requires no coding to get started. ✨ View our demo store: [OPTIS Color Swatch demo store](https://optis-color-swatch-variant.myshopify.com/) (password: 1) ## 💬Need help? Our support team is always here to help including custom setup when possible. * Live chat inside the app * 📩 Email us at [support@optis.me](https://mail.google.com/mail/?view=cm\&fs=1\&to=support@optis.me\&subject=OPTIS%20Support) * Fast, human replies (no bots 👀) # Changelog A quick look at what's new in **OPTIS Color Swatch** — newest updates first. *** ### 🚀 Sprint 1: Variant badges, onboarding wizard & more **July 6, 2026** * Added **Variant badges** — pin labels like *New*, *Hot*, or *Sold out* on swatches, plus a store-wide **Auto sold-out badge** in Global settings. See [Variant badges](/swatch/variant-badges/variant-badges-overview) and [Auto sold-out badge](/swatch/global-settings/auto-sold-out-badge). * **Onboarding** — added a step-by-step guided setup wizard on the dashboard for new stores. * Updated the logic and priority order of the **Auto-assign swatch** button. See [Auto-assign color swatch](/swatch/variant-display/auto-assign-color-swatch). * Global settings: added color and direction options for **Strike-through**, plus a new **Gray out** display type. See [Out-of-stock display](/swatch/global-settings/out-of-stock-display). * Global settings: added a **Two-color swatch split** setting. See [Two-color swatch split](/swatch/global-settings/two-color-swatch-split). * **Out-of-stock display** and **Non-existent display** are now separate settings. See [Out-of-stock display](/swatch/global-settings/out-of-stock-display) and [Non-existent display](/swatch/global-settings/non-existent-display). ### 🧩 Standardized Product Group preview **June 3, 2026** The Product Group setup preview now matches exactly how the group looks on your storefront — image, title, price, swatch, and display style all update live as you change settings.
### 🖱️ Hover-to-preview on collection pages **April 27, 2026** Added a Collection Page Styling option: hovering over a swatch, button, or dropdown on a collection page now updates the product image and price instantly, without clicking (desktop only — mobile keeps click-to-select).
### 🔗 Compatibility with the [REZ app](https://apps.shopify.com/rez-back-in-stock-notify-me/reviews?ratings%5B%5D=5) **April 9, 2026** Swatches now display correctly for merchants who also use the [REZ app](https://apps.shopify.com/rez-back-in-stock-notify-me/reviews?ratings%5B%5D=5). ### 💊 Pill swatch display style **April 3, 2026** Added **Pill** as a new swatch display style, alongside color swatch, image swatch, button, and dropdown. ### 🪄 Auto-assign colors & swatch search **March 17, 2026** One-click **Auto-assign color** now matches variant names (e.g. "Lavender") to color swatches automatically. A new search box also makes it easy to find a variant in a long swatch list. ### 🎨 2-color swatch **March 10, 2026** Merchants can now assign two colors to a single swatch (e.g. "Black/Pink"), shown as a split-color swatch on the storefront — useful for option values that combine two colors. {% hint style="warning" %} 2-color swatch is a **paid plan** feature for new merchants. Existing paid merchants keep access. {% endhint %}
### 🌐 Multi-language admin support **March 3, 2026** The app's admin interface now supports translations, replacing hardcoded text with a translation system so more languages can be added over time. ### 💳 Pricing plan launch **January 20, 2026** OPTIS Color Swatch moved to a paid pricing plan, with free and paid tiers. Merchants who installed the app before this date keep their existing features (grandfathered). {% hint style="info" %} See [Pricing Plans](/swatch/subscription-and-billing/pricing-plans) for plan details. {% endhint %} ### 🖼️ Variant Images feature **January 20, 2026** Overhauled how the app determines and swaps the product image shown for a selected variant on the storefront, including better handling of neighboring variant images. ### 🧩 Swatch Card display style & out-of-stock handling **October 20, 2025** Added the **Swatch Card** storefront display style, plus refined out-of-stock handling — unavailable variants are strike-through or grayed out, with correct option counts and native Shopify option hiding. ### 🎛️ Custom CSS section **October 6, 2025** Added a **Custom CSS** field in Global Settings so merchants can fine-tune swatch appearance with their own styles. ### 🏷️ Product Groups **September 18, 2025** Launched **Product Groups**: merchants can group related products together so shoppers can switch between them (e.g. different styles of the same product) directly from the product page, with shared variant/swatch display. ### 🎠 Carousel swatch style with tooltips **July 29, 2025** Added a carousel-style layout for displaying extra option values, with hover tooltips showing the option value name. ### 👀 Quick view support & expanded theme compatibility **July 9, 2025** Variant swatches and options now render correctly inside "Quick view" popups, and the app added support for several more free and paid Shopify themes. ### 🖼️ Image swatch display type **June 18, 2025** Added support for image-based swatches — using a product or variant image instead of a flat color — as a display option alongside color swatches. ### 🚀 App launch **April 8, 2025** OPTIS Color Swatch launches. Merchants can turn plain variant option lists into color swatches, image swatches, buttons, or dropdowns, configure them from the app dashboard, and preview them live on the storefront. # Quickstart {% stepper %} {% step %} ### Activate the app * In the **App Dashboard**, go to **Setup Guide** → click **Activate the app** → You’ll be redirected to **App Embed** in the Shopify Theme Editor
OPTIS Color Swatch App embed in the Shopify Theme Editor
* Turn on the toggle and click **Save**
App embed toggle turned on, with the Save button
{% hint style="warning" %} **Optional (Recommended for testing):** If you want to enable the app on a draft theme instead, go to **Online Store → Themes → Edit theme (selected theme) → App embeds**, then enable the **OPTIS Swatch** app toggle and click **Save**. *This allows you to fully test the app without affecting your live store.* {% endhint %} {% endstep %} {% step %} ### Configure your Shopify variants * Make sure your products have variants (e.g. Color, Size) → Click **Configure variants** to open **Variants Display**
Configure variants button opening the Variants Display page
* Here, you can customize how variants are displayed on Product pages and Collection pages - Choose the display type that fits your store design
Variants Display page with display type options for product and collection pages
👉 **Click here to learn** [**How to change the variant display**](/swatch/variant-display/auto-image-swatch) {% endstep %} {% step %} ### Make it yours! (optional) * Click **Style your variants** to open the **Styling Dashboard**
Style your variants button opening the Styling Dashboard
* Customize how variants look on your store, including size, alignment, colors, spacing, hide extra swatches,...
Styling Dashboard with size, alignment, color, and spacing options
👉 **Click here to learn** [**How to customize the swatches' look**](/swatch/frequently-asked-questions/is-it-possible-to-customize-how-swatches-look) {% endstep %} {% endstepper %} You're all set! 🎉\ Continue to the next sections to explore advanced settings and customization options. # Core features overview This section explains how OPTIS Color Swatch works with your Shopify products, variants, and theme. Understanding these core concepts will help you configure the app correctly and avoid common setup i *** ## 🔹 [Variant Display (Shopify variants-based)](/swatch/variant-display/auto-image-swatch) OPTIS Color Swatch reads your existing **Shopify product variants** (such as Color or Size) and converts them into visual swatches / buttons / dropdown menus * Works directly with Shopify variants (no new variants are created) * Allows swatches to be displayed on: * Product pages * Collection pages ## 🔹 [Product Group (Combine listings)](/swatch/product-groups/show-separate-products-as-variants-with-product-groups) Product Group lets you group multiple products into a single variant-like experience. * Each product acts as a variant option * Clicking a grouped option redirects customers to the corresponding product page * Useful when each color or style is a separate product in Shopify ## 🔹 [Variant Images](/swatch/variant-images/show-images-per-variant) Controls how product images are shown based on the selected variant. * Updates the product gallery when a variant is selected * Displays only images assigned to the selected variant * Improves visual clarity and user experience ## 🔹 [Styling](/swatch/styling/styling-overview) Customizes the appearance of variant displays across your store. * Adjust size, alignment, colors, spacing, and visibility * Applies globally to all enabled displays * Can be updated anytime without affecting product data ## 🔹 [Global Settings](/swatch/global-settings/global-settings-overview) Controls global behaviors and advanced appearance settings for your store. * Customize how [**out-of-stock**](/swatch/global-settings/out-of-stock-display) and [**non-existent**](/swatch/global-settings/non-existent-display) variants are displayed * Turn on a store-wide [**Auto sold-out badge**](/swatch/global-settings/auto-sold-out-badge) * Enable or disable **tooltips** * Add [**custom CSS**](/swatch/global-settings/custom-css) for advanced styling needs # Auto image swatch {% hint style="success" %} **Available on:** Product page, Collection page {% endhint %} ✨Demo product: [Auto image swatch](https://optis-color-swatch-variant.myshopify.com/products/auto-image-swatch?_pos=1&_psq=auto&_ss=e&_v=1.0) (password: 1)
Auto image swatch shown on a product
### **Function** Automatically creates image swatches from the variant images set in Shopify.
Auto image swatches generated from Shopify variant images
### **Use when** * Each variant already has its own product image (e.g. Color = Red, Blue, Black). * You want swatches to always stay in sync with Shopify images. ### How it works * No manual upload needed. * Changing variant images in Shopify will update the swatches after syncing. ### **How it looks on your store** * Product page:
Auto image swatch on the product page
* Collection page:
Auto image swatch on the collection page
# Custom swatch {% hint style="success" %} **Available on:** Product page, Collection page {% endhint %} ✨Demo product: [Custom swatch](https://optis-color-swatch-variant.myshopify.com/products/custom-swatch?pr_prod_strat=collection_fallback\&pr_rec_id=a9de6891c\&pr_rec_pid=8274609307785\&pr_ref_pid=8274596233353\&pr_seq=uniform) (password: 1) ### **Function** Allows you to manually assign a custom image or a solid color (hex code) to each variant, instead of using the product images. ### **Use when** * Variants already have images in Shopify **but you don’t want to use those images as swatches**. * You want swatches to show **patterns, textures, materials, or plain colors** rather than full product photos. ### **How to use Custom Swatch** {% stepper %} {% step %} #### Change the display type to Custom swatch > Click Save
Changing the display type to Custom swatch
{% endstep %} {% step %} #### **Click the pencil icon to:** * Upload your own images (patterns, textures, fabric details, etc.) * Select a solid color using a **hex color code**
Assigning a custom image or hex color to a variant
{% endstep %} {% step %} #### Click Save to apply changes {% endstep %} {% endstepper %} ### **How it looks on your store** * Product page:
Custom swatch on the product page
* Collection page:
Custom swatch on the collection page
# Swatch card {% hint style="success" %} **Available on:** Product page only {% endhint %} ✨Demo product: [Swatch card](https://optis-color-swatch-variant.myshopify.com/products/bucket-hat-1?variant=45188750508169) (password: 1)
Swatch card shown on a product
### **Function** Displays each variant as a card showing **variant image, option value, and price (optional)** in a single layout. ### **How it works** * Each option appears inside a **polaroid-style card** * Customers can see key variant details at a glance before selecting ### **Use when** * Variants differ in **appearance and price** * You want customers to **compare options easily** without clicking back and forth ### **How to use Swatch Card** {% stepper %} {% step %} #### Change the display type to Swatch Card > Click Save {% endstep %} {% step %} #### Choose the swatch source: * [**Auto Image Swatch**](/swatch/variant-display/auto-image-swatch)\ → Uses the variant images already set in your Shopify product
Swatch card using the Auto Image Swatch source
* [**Custom Swatch**](/swatch/variant-display/custom-swatch)\ → Upload your own images or use solid colors (hex codes) for each variant
Swatch card using the Custom Swatch source
{% endstep %} {% step %} #### Click Save to apply changes {% endstep %} {% endstepper %} ### **How it looks on your store** * Product page:
Swatch card on the product page
# Pill swatch {% hint style="success" %} **Available on:** Product page only {% endhint %} ✨Demo product: [Pill swatch](https://optis-color-swatch-variant.myshopify.com/products/pill-swatch?variant=45492608925833) (password: 1)
Pill swatch shown on a product
### **Function** Displays each variant as a rounded pill with a small preview (image or color), option value and price (optional) in a single horizontal layout. ### **How it works** * Each variant appears as a **rounded pill button** * A **small thumbnail (image or color swatch)** is shown on the left * The **option value (e.g., Black, Blue, Brown)** is displayed next to it ### **Use when** * You want a **clean but still slightly visual** variant selector * Variants have **simple differences** but still benefit from a small preview ### **How to use Pill swatch** {% stepper %} {% step %} #### **Change the display type to Pill swatch > Click Save** {% endstep %} {% step %} #### Choose the swatch source: * [**Auto Image Swatch**](/swatch/variant-display/auto-image-swatch)\ → Uses the variant images already set in your Shopify product
Pill swatch using the Auto Image Swatch source
* [**Custom Swatch**](/swatch/variant-display/custom-swatch)\ → Upload your own images or use solid colors (hex codes) for each variant
Pill swatch using the Custom Swatch source
{% endstep %} {% step %} #### Click Save to apply changes {% endstep %} {% endstepper %} ### **How it looks on your store:** * Product page:
Pill swatch on the product page
# Button {% hint style="success" %} **Available on:** Product page, Collection page {% endhint %} ✨Demo product: [Button](https://optis-color-swatch-variant.myshopify.com/products/button?_pos=1&_psq=button&_ss=e&_v=1.0) (password: 1)
Button variant selector on a product
### **Function** Displays option values as **clickable text buttons**, allowing customers to quickly select their desired option. ### **How it works** * Each option appears as a **button with text** * The selected button is **visually highlighted** ### **Use when** * Options are **text-based** (e.g. Size, Material, Style) * No image comparison is needed ### **How it looks on your store** * Product page:
Button variant selector on the product page
* Collection page:
Button variant selector on the collection page
# Dropdown {% hint style="success" %} **Available on:** Product page, Collection page {% endhint %} ✨Demo product: [Dropdown](https://optis-color-swatch-variant.myshopify.com/products/dropdown?_pos=1&_psq=drop&_ss=e&_v=1.0) (password: 1)
Dropdown variant selector on a product
### **Function** Displays option values inside a **dropdown selector**, allowing customers to choose one value from a list. ### **How it works** * Options are shown in a **collapsed dropdown** * Customers select one value at a time * The selected value is displayed as the active choice ### **Use when** * Options have **many values** * You want to **save space** on the product page * Options are **text-based** and don’t need visual comparison ### **How it looks on your store:** * Product page:
Dropdown variant selector on the product page
* Collection page:
Dropdown variant selector on the collection page
# No show {% hint style="success" %} **Available on:** Product page, Collection page {% endhint %}
No show option keeping the theme's original variant selector
### **Function** Hides the option from the app and **does not configure Shopify variants**. ### **How it works** * The app **does not render** this option on the product page * Shopify variants keep using the **theme’s original design and logic** ### **Use when** * You want to **keep the theme’s default variant UI** * The option is already handled correctly by the theme # Auto-assign swatch ### **Function** Setting a color for every variant value one by one can take a while, especially with options like *Black*, *Dawn*, *Lavender,*… **Auto-assign swatch** does this for you with a single click — it looks at each value and fills in a matching color automatically. You'll find this button in the **Custom swatch editor**, no matter which display type you're using — **Custom swatch**, **Swatch card**, **Pill swatch**.
### **How it picks a color** The app checks each value against **3 sources**, trying them in order until one works: 1. **Color taxonomy metafield** — if your product uses Shopify's standardized Color taxonomy, the app reads the exact color defined there. This is the most reliable source, since the color was deliberately set, not guessed.
2. **Value name** — if there's no taxonomy color, the app tries to recognize a color from the name itself
3. **Variant image** — if the name doesn't give a clear answer either, the app looks at the variant's image. If that value already has its own swatch image set in Shopify, the app uses that image directly as the swatch; otherwise it extracts the dominant color from the variant's photo.
If a value can't be matched through any of these, it's simply **left blank** for you to fill in by hand. ### **Use when** * You have a color option with **many values** and don't want to set them one at a time. * Some of your products use Shopify's **Color taxonomy**, and you want those colors to carry over automatically instead of re-entering them. * You just want a quick starting point — you can always fine-tune individual colors afterward. ### **How to use it** {% stepper %} {% step %} #### Open the swatch editor for your color option
{% endstep %} {% step %} #### Click **Auto-assign swatch** It's the button in the bottom-left corner of the modal. The app goes through every value and fills in a color where it can. {% endstep %} {% step %} #### Check the result and adjust if needed Any value left blank means the app couldn't confidently detect a color — set it manually using **Add color**. You're also free to change any auto-filled color; it won't be overwritten unless you run Auto-assign again. {% endstep %} {% step %} #### Click **Save** {% endstep %} {% endstepper %} {% hint style="info" %} **Note:** If a value **already has a color or image set**, Auto-assign leaves it as is — it never overrides an existing swatch, so it's safe to run anytime without losing your manual work. {% endhint %} # Common questions Answers to common questions about displaying variant swatches, buttons, and dropdowns on your product and collection pages. # Can I show swatch on collection page Yes. OPTIS Color Swatch allows you to display product variant options (like swatches, buttons, or dropdowns) directly on your **collection pages**, so customers can select a variant without opening the product page.
Variant swatches shown on a collection page
#### **✅ To enable swatches on the collection page:** 1. Go to the **“Configure Variants”** page in OPTIS Color Swatch 2. Find the row corresponding to the option you want to show (e.g., Color, Size) 3. In the **“Show on Collection Page”** column, **toggle ON** the switch
Show on Collection Page toggle in the Configure Variants table
4. Click **Save** to apply the changes #### **Note:** * The feature might not work with custom or heavily customized themes out of the box. * If your theme isn’t supported yet, you can contact our support team, we’ll help with manual setup or theme integration. # Why doesn’t the product image change when I click a variant? Our app works **based on Shopify’s native variant configuration**. For the variant image to change correctly, your theme’s **variant picker must be enabled**. #### How to check and enable it: {% stepper %} {% step %} **Go to Online Store → Themes → Edit theme**
Online Store Themes section with the Edit theme button
{% endstep %} {% step %} **Open the Product template**
Product template selected in the theme editor
{% endstep %} {% step %} In the **Product information** section: * Add the **theme’s Variant Picker** * Add the **OPTIS app block** as well
Adding the OPTIS app block to the product template
{% endstep %} {% endstepper %} 👉 **Important notes**: * OPTIS **restyles and enhances Shopify variants** - it does **not** create a separate variant system. * The theme’s variant picker **must remain enabled** for image switching to work properly. * If you see **both the theme variants and OPTIS swatches showing at the same time**, this is usually a theme conflict. In that case, please **contact our support team** and we’ll help resolve it. After enabling the variant picker, kindly double-check the product page.\ If the issue still persists, feel free to reach out - we’re happy to assist further. # Why does the cart add the default variant instead of the selected one? This usually happens when the **theme’s variant picker is not properly enabled or connected**. Our app works **on top of Shopify’s native variant configuration**, not independently. This means the theme’s variant picker must be active so Shopify knows which variant is currently selected. **How to fix this:** {% stepper %} {% step %} **Go to Online Store → Themes → Edit theme**
Online Store Themes section with the Edit theme button
{% endstep %} {% step %} **Open the Product template**
Product template selected in the theme editor
{% endstep %} {% step %} In the **Product information** section: * Add the **theme’s Variant Picker** * Add the **OPTIS app block** as well
Adding the OPTIS app block to the product template
{% endstep %} {% endstepper %} Once the variant picker is enabled, the selected variant will: * Stay in sync when customers change variants * Be correctly added to cart instead of reverting to the default variant 👉 **Important notes**: * OPTIS **restyles and enhances Shopify variants** - it does **not** create a separate variant system. * The theme’s variant picker **must remain enabled** for image switching to work properly. * If you see **both the theme variants and OPTIS swatches showing at the same time**, this is usually a theme conflict. In that case, please **contact our support team** and we’ll help resolve it. After enabling the variant picker, kindly double-check the product page. If the issue still persists, feel free to reach out - we’re happy to assist further. # Why do I briefly see the initial variant before the swatches load? This behavior happens because **theme elements render first**, and then OPTIS loads and applies its configuration afterward. As a result, the initial Shopify variant may briefly appear before OPTIS swatches are displayed. #### Can this be removed? Yes - **we can hide the initial variant visually** to create a cleaner loading experience. ⚠️ **Please note**: * You **cannot remove the theme’s variant picker completely**, because it is required for OPTIS to work correctly. * We only remove the **visual display**, not the underlying functionality. 💬 If you’d like to remove the initial variant display, please **contact our support team**, and we’ll help you set it up properly. # Can I style only some variants and keep others in the theme’s original style? Yes.\ You can control this per variant using the **Display Type** setting. * For variants you want OPTIS to restyle, select the appropriate display type (Swatch, Button, Dropdown, etc.). * For variants you don’t want the app to affect, set them to **No Show -** Variants set to **No Show** will keep their **original theme design** and won’t be restyled by the app.
Setting selected variants to No Show in Configure variants
⚠️**Important note:**\ Because each theme handles variants differently, this setup may sometimes cause conflicts. In some cases, you may see: * The variant set to **No Show** being hidden completely from the product page * The variant still appearing with OPTIS styling, even though it’s set to No Show If anything doesn’t work as expected on your store, please contact our support team. We’ll help you troubleshoot and adjust the setup for your theme 😊 # Show Separate Products as Variants with Product Groups ### **📌 What is Product Groups?** * Product Groups let you **combine multiple separate products into 1 product page (PDP)**. * Each product in the group will **appear as a variant option**. When customers select that option, the PDP will **redirect to the correct product page** with its own images, price, and details. **Example:** You sell three separate products: a **blue shirt**, a **red shirt**, and a **navy shirt**. With Product Groups, they can all appear on **one PDP**. Shoppers choose *Blue / Red / Navy* like variant options, and the page switches to the correct product. **View demo here:** [Link](https://optis-color-swatch-variant.myshopify.com/pages/product-groups) ### **🎯 Why use Product Groups?** * **Cleaner storefront**: Show related products together instead of splitting them into many pages. * **Better shopping experience**: Customers can switch colors/styles without leaving the PDP. * **Accurate details**: Each product still keeps its own price, SKU, and options. ### **⚙️ How to set up a Product Group** 1. Go to **Product groups**. Click **Add group**
Add group button on the Product groups page
2. **Enter a Group Name** (e.g., *Dresses group*). * The Group Name is only used internally to help you organize and identify your groups. * It will **not be shown on the storefront**.
Entering the internal group name that is not shown on the storefront
3. **Enter an Option Name** (e.g., *Choose Dress Style*). * This is the name that customers will see on the storefront.
Entering the option name customers see on the storefront
4. **Choose a Display Style** for how the option will appear (e.g., buttons, swatches) on Product page and Collection page.
Choosing a display style for the product group on product and collection pages
5. **Add products to the group**
Adding products to the product group
6. Enter variant value (Optional) 7. Click **Save** to finish.
Saving the completed product group
# Translate Product Group ### 🎯 **Objective** Translate your Product Group for different markets/languages on your store. ### 📘 How to translate Product Group {% stepper %} {% step %} #### Select a language from the dropdown {% endstep %} {% step %} #### Click ‘Auto translate’ to automatically translate all fields in the selected language. {% endstep %} {% step %} #### Review and manually adjust translations as needed {% endstep %} {% step %} #### Click "Approve and Save" to apply translations to your storefront {% endstep %} {% endstepper %} # Common questions Answers to common questions about creating and displaying Product Groups. # Can I control the display order of Product Group options? Yes.\ Product Group options follow the order you set **inside the app**, not the theme’s default order. * The position of each swatch on both the **product page** and **collection page** is based on the order configured in the Product Group settings. * You can reorder options anytime directly in the app. If you’d like a custom order that differs from the default behavior - for example, always showing the **main product’s color first** in the swatch list - please contact our support team. We’re happy to help customize this for your setup. # Can Product Groups automatically group products from the same collection? No.\ Product Groups currently need to be **created and managed manually**. You’ll need to: * Create a Product Group inside the app * Manually add the products you want into that group At the moment, Product Groups **do not auto-group products based on collections or other rules**. That said, this is a feature we’re actively considering for future development. For now, manual setup ensures you have full control over which products appear together and how they’re displayed. If you have a specific use case in mind, feel free to reach out - your feedback helps us prioritize future improvements 😊 # Can Product Groups be used on the collection page? Yes.\ Product Groups can be displayed on both **product pages and collection pages**, depending on how you configure the display settings in the app.
Product group displayed on a collection page
# What should I do if Product Groups don’t display as expected on my theme? Theme behavior can vary. If something doesn’t look or work as expected, please contact our support team - we’re happy to help adjust or troubleshoot for your theme. # Show Images per Variant ## ✨ What is Variant Images? Variant Image allows the product image gallery to display **only the images of the selected variant**, keeping the product page clean and focused. #### 🛠 How it works * Each variant is linked to its own set of images * When a customer selects a variant, the gallery updates instantly * Images from other variants are hidden until selected #### 🎯 Use when * Each variant has its own visual set (e.g. different colors) * You want a cleaner, less cluttered product gallery * You want customers to focus on the selected variant ## ⚙️ How to set up 🎥 **Video tutorial:** Watch this quick guide to see how Variant Images work in action and how to set it up correctly in Shopify. {% embed url="" %} 🛠 **Step-by-step** {% stepper %} {% step %} **Enable Variant Images in the app**
Enabling Variant Images in the app
{% endstep %} {% step %} In Shopify Product admin, group images by variant and place the primary image first
Shopify product media grouped by variant with the primary image first
{% endstep %} {% step %} Assign each primary image to its corresponding variant {% hint style="warning" %} **Note:** The first image in each image group must be the **same file as the variant image** (select the exact image already uploaded in Shopify Files, not a re-upload) {% endhint %}
Product gallery showing only the selected variant's images
{% endstep %} {% endstepper %} Once completed, the image gallery will automatically update when customers switch variants. 💬 If the variant images don’t behave as expected, just contact us - our support team is happy to help. # Advanced Settings ## Theme Section
Variant Images Theme Section with the Select app scope setting
### 📦 Select app scope * **All products:** The feature works on all products in your store. 👉 Recommended if most of your products use variants with multiple images. * **Specific products:** The feature only works on products tagged with `op_vi_enabled`.
Product tagged with op_vi_enabled to include it in Variant Images
👉 Use this if you want to enable Variant Images only for selected products. * **Excluded products:** The feature does **not** work on products tagged with `op_vi_disabled`.
Product tagged with op_vi_disabled to exclude it from Variant Images
👉 Use this if you want to exclude certain products while keeping the feature active for the rest of your store. ### Featured product section Some themes display products in a **Featured Product** section (for example, on the homepage). * ✅ Enable this option if you want Variant Images to apply to the Featured Product section. * ❌ Disable it if the image gallery looks cluttered or conflicts with your theme layout. > This setting does **not** affect the main product page. ## Images Setting - Common Images & Featured Image behavior ### Common Images **Common Images** allow you to add images that are shared across all variants, such as lifestyle photos, size guides, or informational visuals. How it works: * Common Images are always placed **at the beginning of the product image gallery**, before any variant-specific images. * The **first image** in the Common Images list automatically becomes the product’s **Featured Image** in Shopify. 🎥 **Video tutorial:** {% embed url="" %} ### Skip Featured Image When **Skip Featured Image** is enabled: * 🖼️ The **featured image (first Common Image) will NOT appear in the product image gallery** * 🚫 This image is **skipped entirely from Common Images** * 📦 It **does not show on the product page gallery at all** **✅ What still happens:** * The image **can still be used as the product’s featured image** * It will **show on collection pages, homepage sections, and anywhere your theme displays the product grid**. **🎯 Why use this?** * Keep the **product page gallery clean** * Avoid showing a **generic or marketing image** inside the gallery * Let customers focus only on **variant-specific images** on the product page ✨ **In short:** The image is used for **listing & preview**, but **hidden from the product page gallery**. 🎥 **Video tutorial:** {% embed url="" %} {% hint style="info" %} Related questions: [How can I set common images for all variants?](/swatch/variant-images/common-questions/how-can-i-set-common-images-for-all-variants) · [When should I use Skip Featured Image?](/swatch/variant-images/common-questions/when-should-i-use-skip-featured-image) · [How do I use a Featured Image for collection pages but hide it from the product page gallery?](/swatch/variant-images/common-questions/how-do-i-use-a-featured-image-for-collection-pages-but-hide-it-from-the-product-page-gallery) {% endhint %} 💬 If this doesn’t work as expected with your theme, please feel free to contact our support team - we’re happy to help # Common Questions Answers to common questions about setting up and troubleshooting Variant Images. # Why isn’t my Variant Image switching correctly? This usually happens when: * Variant images are not grouped correctly in Shopify * The first image in a variant group does not match the variant image * Images were uploaded separately instead of selecting existing files from the product gallery (Shopify file) ✅ Make sure variant images are selected from already-uploaded Shopify files. # Can I apply Variant Images to specific products instead of all products? Yes.\ You can control where Variant Images apply by using **App Scope + product tags**. **How to set it up:** {% stepper %} {% step %} **Go to App → Variant Images** {% endstep %} {% step %} **In Select app scope, choose:** * **Specific products** → to apply Variant Images only to tagged products * **Exclude products** → to apply Variant Images to all products *except* tagged ones {% endstep %} {% step %} **Add the corresponding tag to your products in Shopify:** * Apply Variant Images only to **products tagged with `op_vi_enabled`**.
Product tagged with op_vi_enabled to include it in Variant Images
* Apply Variant Images to all products **except those tagged with `op_vi_disabled`**.
Product tagged with op_vi_disabled to exclude it from Variant Images
{% endstep %} {% endstepper %} {% hint style="success" %} With this setup, you can control Variant Images **per product directly in Shopify**, without needing to change settings in the app each time. {% endhint %} --- [Next Page](/llms-full.txt/1)