Integration

• Supported themes & compatibility

  OPTIS Color Swatch Compatibility Supported themes & compatibility OPTIS Color Swatch is built to work with most Shopify themes out of the box, with no coding required. How compatibility works The app detects your theme and applies the right configuration automatically, in three layers: Shopify free themes: full, dedicated support for the latest **Few readers

• Swatch events & app integration

  OPTIS Color Swatch Developers Swatch events & app integration OPTIS Color Swatch exposes JavaScript events and a helper so developers can integrate the swatches with analytics, custom code, or other apps. This page is for developers, no setup is required for normal use. JavaScript events The app dispatches the following CustomEvents on document whFew readers

• Changelog

  OPTIS Color Swatch Changelog A quick look at what's new in OPTIS Color Swatch — newest updates first. 🧩 Sprint 3: Product Group sub-categories, automatic badges & more August 21, 2026 Product Groups: split a group into sub-categories, bulk create many groupsFew readers

Variant Badges

• Variant badges

  OPTIS Color Swatch Variant Badges Variant badges Available on: Product page, Collection page Variant badges let you pin a small label directly on a swatch — things like New, Hot, Limited, or Best seller — so shoppers notice key variants at a glance without having to read through a product description. Manual, assigned by you EveryFew readers

Variants Display

• 🎨Custom swatch

  OPTIS Color Swatch Variant Display 🎨Custom swatch Available on: Product page, Collection page ✨Demo product: Custom swatch (password: 1) ![Custom swatch demo](hFew readers

• 🪄Auto-assign swatch

  OPTIS Color Swatch Variant Display 🪄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 **Few readers

• 🖼️Auto image swatch

  OPTIS Color Swatch Variant Display 🖼️Auto image swatch Available on: Product page, Collection page ✨Demo product: Auto image swatch (password: 1) ![Auto image swatch shown on a product](https://storage.crisp.chat/users/helpdesk/website/-/5/f/f/5Few readers

• Button

  OPTIS Color Swatch Variant Display Button Available on: Product page, Collection page ✨Demo product: Button (password: 1) ![Button variant selector on a product](https://storage.crisp.chat/users/helpdesk/website/-/f/5/f/8/f5f89bb723a99000/8bcd4794-850c-475Few readers

• 🧩Swatch card

  OPTIS Color Swatch Variant Display 🧩Swatch card Available on: Product page only ✨Demo product: Swatch card (password: 1) ![Swatch card shown on a product](https://storage.crisp.chat/users/helpdesk/website/-/b/b/f/7/bbf7a82c7bf5b800/a9a89bea-046b-463d-b8f9-53eFew readers

• ⬇️Dropdown

  OPTIS Color Swatch Variant Display ⬇️Dropdown Available on: Product page, Collection page ✨Demo product: Dropdown (password: 1) ![Dropdown variant selector on a product](https://storage.crisp.chat/users/helpdesk/website/-/c/1/4/1/c14114567d7a9800/af558667-Few readers

• Option and value descriptions

  OPTIS Color Swatch Variant Display Option and value descriptions ✨Demo product: Option description (password: 1) Show extra details about an option or a specific value — pulled straight from a Shopify metafield — iFew readers

• 💊Pill swatch

  OPTIS Color Swatch Variant Display 💊Pill swatch Available on: Product page only ✨Demo product: Pill swatch (password: 1) Function Displays each variant as a rounded pill with a small preview (image or color), the option value, and the **priceFew readers

• No show

  OPTIS Color Swatch Variant Display No show Available on: Product page, Collection page Function Tells the app to leave this option alone. The app doesn't render oFew readers

Variant Images

• Variant images on collection pages

  OPTIS Color Swatch Variant Images Variant images on collection pages Bring the same variant-aware gallery from the product page to your collection pages. After a shopper picks a variant on a collection card, the card's image gallery updates to show only that variant's images — swiping stays inside that variant's set. Requires [Variant Images](https://helpFew readers

• 🖼️Show Images per Variant

  OPTIS Color Swatch Variant Images 🖼️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 updaFew readers

• Advanced Settings

  OPTIS Color Swatch Variant Images Advanced Settings Theme Section 📦 Select app scope All products: The feature works on all products in your store. 👉 RecommenFew readers

Styling

• Styling overview

  OPTIS Color Swatch Styling Styling overview The Styling page lets you control how each display type looks on your storefront, with a live preview and no coding required. How styling works Styling is set per display type:Few readers

• Styling settings reference

  OPTIS Color Swatch Styling Styling settings reference A complete reference of every styling setting, grouped by purpose. Not every setting applies to every display type, the Applies to column shows where each one is available. SizFew readers

Product Groups

• Show Separate Products as Variants with Product Groups

  OPTIS Color Swatch Product Groups 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 pageFew readers

• Bulk create Product Groups

  OPTIS Color Swatch Product Groups Bulk create Product Groups Instead of building Product Groups one by one, scan your catalog and create many groups at once from a shared pattern. Group by Mode How it groups products **Product name pattFew readers

• Export Product Groups to CSV

  OPTIS Color Swatch Product Groups Export Product Groups to CSV Download every Product Group as a CSV file — useful for backups, bulk edits in a spreadsheet, or auditing what's configured across your store. How to export Go to the Product groups pageFew readers

• Translate Product Group

  OPTIS Color Swatch Product Groups Translate Product Group 🎯 Objective Show your Product Group in the right language for each of your store's markets, so shoppers see the option and values translated on the storefront. What gets translated The **storefrFew readers

• Product Group sub-categories

  OPTIS Color Swatch Product Groups Product Group sub-categories ✨Demo product: Sub-catagories group (password: 1) Split a large Product Group into smaller sections to make product options easier to browse on the storefront. How it works **Create sub-categories to orFew readers

Global Settings

• Out-of-stock display

  OPTIS Color Swatch Global Settings Out-of-stock display Control how variant options that are sold out appear to customers. A sold-out option is a variant that exists (it has a SKU/price and is listed among the product's variants) but its available quantity is 0. This setting is in Global settings and applies to every product. ![](https://storage.cFew readers

• Tooltip

  OPTIS Color Swatch Global Settings Tooltip Tooltip shows extra information when a shopper hovers over a swatch, without needing to click it. Configure it in Global settings. Option What it shows Off (default) No tooltip on hover Show label The option value name (for example, "Royal Blue") in a small tooltip **Few readers

• Automatic badges

  OPTIS Color Swatch Global Settings Automatic badges ✨Demo product: Automatic badges (password: 1) Automatic badges show a label on swatches based on a store-wide rule, with no manual assignment. Turn each one on in Global settings → Automatic badgesFew readers

• Non-existent display

  OPTIS Color Swatch Global Settings Non-existent display Control how option combinations that don't exist appear to customers. A non-existent option is a combination that was never created as a variant for that product/parent — it has no SKU, no price, and does not show up in the variant list at all. This setting is in Global settings and applies toFew readers

• Hide single variant

  OPTIS Color Swatch Global Settings Hide single variant This setting in Global settings hides the option selector when an option only has one selectable value. What it does When enabled, option selectors are hidden if an optioFew readers

• Custom CSS

  OPTIS Color Swatch Global Settings Custom CSS For advanced styling beyond the built-in options, you can add your own CSS in Global settings → Custom CSS. The CSS is loaded on your storefront and applies to the OPTIS Color Swatch elements. ![The Custom CSS editor in Global settings](https://storage.crisp.chat/users/helpdesk/website/-/5/9/a/d/59adab2a47ff94Few readers

• Global settings overview

  OPTIS Color Swatch Global Settings Global settings overview Global Settings control behaviors and appearance that apply across your whole store, no matter which display type a product uses. The page is organized into five groups: |Few readers

• Two-color swatch split

  OPTIS Color Swatch Global Settings Two-color swatch split Function Some variant values represent two colors (for example, a Black / White option). This Global setting controls how those swatches are visually split between the two colors — and it applies store-wide, to every product that has two-color values. Where the two colors comFew readers

• No preselect

  OPTIS Color Swatch Global Settings No preselect This setting in Global settings controls whether OPTIS automatically selects the first available variant option when a product loads. What it does When On, the product page aFew readers

• Collection page click behaviour

  OPTIS Color Swatch Global Settings Collection page click behaviour Choose what happens when a shopper clicks a swatch on a collection page — update the product image in place, or jump straight to the product. Configure it in Global settings. There are two independent settings, since Product Groups and regular variant options often need different behavFew readers

OPTIS Color Swatch FAQs

• Can I apply Variant Images to specific products instead of all products?

  OPTIS Color Swatch Variant Images Common Questions 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: Go to App → Variant Images **In Select app scope,Few readers

• Why doesn’t the product image change when I click a variant?

  OPTIS Color Swatch Variant Display Common questions 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 andFew readers

• Why aren’t my swatches showing up on the store?

  OPTIS Color Swatch Frequently Asked Questions Why aren’t my swatches showing up on the store? Why aren’t my swatches showing up on the store? There are three common reasons: The app isn’t enabled on your theme 👉 To fix this: Click “Add to your theme” in the app ![](https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.coFew readers

• Why do I briefly see the initial variant before the swatches load?

  OPTIS Color Swatch Variant Display Common questions 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 brieflFew readers

• When should I use Skip Featured Image?

  OPTIS Color Swatch Variant Images Common Questions When should I use Skip Featured Image? This setting is useful when: You want a cleaner product page gallery You don’t want the Featured Image duplicated on both collection and product pages Your Featured Image is mainly for marketingFew readers

• What should I do if Product Groups don’t display as expected on my theme?

  OPTIS Color Swatch Product Groups Common questions 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.Few readers

• Why does the cart add the default variant instead of the selected one?

  OPTIS Color Swatch Variant Display Common questions 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 indeFew readers

• Why isn’t my Variant Image switching correctly?

  OPTIS Color Swatch Variant Images Common Questions 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 ofFew readers

• Why is my image swatch blurry, and how can I fix it?

  OPTIS Color Swatch Frequently Asked Questions Why is my image swatch blurry, and how can I fix it? The image looks blurry because the swatch size was increased, but the image size wasn’t updated in the Global settings. ![A blurry image swatch caused by an outdated image size](https://storage.crisp.chat/users/helpdesk/website/-/3/5/6/6/3566fdda85244600/2a7b707Few readers

• Can I control the display order of Product Group options?

  OPTIS Color Swatch Product Groups Common questions 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 pageFew readers

• Can I style only some variants and keep others in the theme’s original style?

  OPTIS Color Swatch Variant Display Common questions 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, ButFew readers

• Can Product Groups automatically group products from the same tag?

  OPTIS Color Swatch Product Groups Common questions Can Product Groups automatically group products from the same tag? Yes — use Bulk create and set Group by to Product tag. Instead of building each group by hand, the app scans your catalog by tag and creates the groups for you. TheFew readers

• Can Product Groups be used on the collection page?

  OPTIS Color Swatch Product Groups Common questions 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 pFew readers

• How do I use a Featured Image for collection pages but hide it from the product page gallery?

  OPTIS Color Swatch Variant Images Common Questions How do I use a Featured Image for collection pages but hide it from the product page gallery? If you want the Featured Image to appear on collection pages but not inside the product gallery: Make sure your Featured Image is set as the firstFew readers

• Will enabling Skip Featured Image affect my variants or variant images?

  OPTIS Color Swatch Variant Images Common Questions Will enabling Skip Featured Image affect my variants or variant images? No. This setting does not affect variant images. Variant image groups will continue to work normally. Only the Featured Image is hidden from the product page galleFew readers

• How can I set common images for all variants?

  OPTIS Color Swatch Variant Images Common Questions How can I set common images for all variants? You can set Common Images in the Shopify product to apply the same images across all variants. Enable the Variant Images toggle in the app ![Enabling the Variant Images toggle in the apFew readers

• How to have swatch change image upon clicking?

  OPTIS Color Swatch Frequently Asked Questions How to have swatch change image upon clicking? Some merchants may want the custom options created in our Product Options app (such as swatches, dropdowns) to change the main product image when selected. Unfortunately, OPTIS does not currently support changing product images based on these custom options. **AlternaFew readers

• How to change image on hovering?

  OPTIS Color Swatch Frequently Asked Questions How to change image on hovering? Overview The Change Image on Hover feature allows the main product image on the Collection Page to automatically update when customers hover over an option swatch. This creates a more interactive shopping experience and helps customers preview product variants instantlFew readers

• How does the OPTIS Color Swatch app work?

  OPTIS Color Swatch Frequently Asked Questions How does the OPTIS Color Swatch app work? The OPTIS Color Swatch app lets you customize the look and feel of your native Shopify product options. Instead of using the default dropdowns or buttons from your theme, you can display options as clickable swatches, buttons, or dropdowns, right on the productFew readers

• How can I make swatch options change the main product image when clicked?

  OPTIS Color Swatch Frequently Asked Questions How can I make swatch options change the main product image when clicked? To enable swatch options to change the main product image, you need to do 2 things: ✅ Step 1: Make sure you’re using Shopify’s built-in product variants OPTIS Color Swatch only works with native Shopify variants, meaning the productFew readers

Pricing

• OPTIS Color Swatch's Pricing

  Pricing Plans Our pricing is based on your Shopify plan, designed to support you from day one, keeping it affordable early on and scaling only when your store is ready. 🩵 ✅ Full features access to all plans ✅ 72h Exploration Mode ✅ 24/7 human support (priority for Plus) Shopify plan App plan Price (monthly) Basic Basic $11.90 Grow Grow $29.90 Advanced Advanced $49.90 Plus Plus $99.90 Development / Trial / Partner / Pause & BuilPopular

• Changing Shopify Plan

  OPTIS Color Swatch Subscription & Billing Changing Shopify Plan What happens when your Shopify plan changes? OPTIS Color Swatch uses a pay-as-you-grow pricing model, meaning your app plan is linked to your Shopify plan. When your Shopify plan changes, 1 of 3 things will happen: Nothing changes and no action is required You’ll need to approvFew readers

• Cancel subscription

  OPTIS Color Swatch Subscription & Billing Cancel subscription You can cancel (unsubscribe) your OPTIS Color Swatch subscription at any time, directly inside the app. How to cancel Open the Pricing plan page In the app, go to the Pricing plan page. Open the Unsubscribe section Find the Unsubscribe card, then click the **Cancel subscriptionFew readers

• Pricing plan's FAQs

  OPTIS Color Swatch Subscription & Billing Pricing plan's FAQs 1/ Why are we switching to paid plans? We’re committed to continuously improving OPTIS with new features, better performance, and long-term reliability. Introducing paid plans allows us to invest sustainably in the product while maintaining a high standard of quality and support. As a thank-yFew readers

• Welcome to OPTIS Color Swatch!

  OPTIS Color Swatch 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 confidenceFew readers

• Core features overview

  OPTIS Color Swatch Getting Started 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)](https://help.optis.me/en/article/auto-image-swatcFew readers

• Quickstart

  OPTIS Color Swatch Getting Started Quickstart 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](https://storage.crisp.chat/users/helpdesk/website/-/b/b/a/b/bbabfa92c6ec8000/7945378d-Few readers