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 Every badge you create here is manual: you assign it to specific variant values yourself, andFew readers

Variants Display

• 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 or configure it, so the variant keeps using your theme's original selector. How itFew readers

• Button

  OPTIS Color Swatch Variant Display Button Available on: Product page, Collection page ✨Demo product: Button (password: 1) Function Displays each option value as a **clickable textFew readers

• 🎨Custom swatch

  OPTIS Color Swatch Variant Display 🎨Custom swatch Available on: Product page, Collection page ✨Demo product: Custom swatch (password: 1) ![Custom swatch demo](https://storage.crisp.chat/users/helpdesk/website/-/c/4/1/0/c410617bb3e04000/d3c02614-aFew readers

• 🧩Swatch card

  OPTIS Color Swatch Variant Display 🧩Swatch card Available on: Product page only ✨Demo product: Swatch card (password: 1) Function Displays each variant as a polaroid-style card showingFew readers

• ⬇️Dropdown

  OPTIS Color Swatch Variant Display ⬇️Dropdown Available on: Product page, Collection page ✨Demo product: Dropdown (password: 1) Function Displays an option's values inside a **cFew 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 Custom swatch editor, no matter which display type you're using — Custom swatch, **SFew 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) Function **Auto image sFew 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 — instead of leaving shoppers to guess what "Merino wool" or a color name means. Configure itFew 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 price (optional) in a single horizontal layout — a clean selector that's still slightly visualFew 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 to be enabled and set up first — this setting extends iFew 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 updates instantly Images from other variants are hidden until selected 🎯 Use when EaFew 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. 👉 Recommended if most of your products use variants with multiple images. Specific products: TFew readers

Product Groups

• 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 storefront-facing text of the group — mainly the Option name (what shoppers see, e.g. Choose Dress Style) anFew readers

• 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 page with its own images, price, and details. Example: You sell three separate products:Few 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 organize products into sections. Each sub-category acts as a separate section within your PFew 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 pattern Products whose titles share a common pattern are grouped together **Product tagFew 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 page Click Export CSV The file downloads immediately with one row per product in a groupFew readers

Global Settings

• 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 Display large image A larger version of the swatch's image **Display large imageFew 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 to every product. This setting only affects option combinations that were never created.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 come from The split only affects values that actually have two colors assigned. You setFew 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. https://storage.crisp.chat/users/helpdesk/website/-/3/b/b/8/3bb8c8dfde34e400/a4bd87e9-0fb7-4e8f-8187-aa1145_1xeiob4.png The page is organized into five groups: Group Covers Swatch state | [Out-of-stock display](https://help.optisFew 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 option has only one available value. The remaining value is still shown as read-only text soFew 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 badges. This is different from the manual badges on the [Variant badges](https://help.optis.Few 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 behavior: Setting Controls Product Group swatches | Click behavior fFew 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 auto-selects the first variant (Shopify default). When Off, shoppers must choose a vaFew 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. Custom CSS is an advanced feature. IncorreFew readers

• 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.crisp.chat/users/helpdesk/website/-/3/c/4/f/3c4fa5b25f2b6e00/9cbd5dc2-8555-4aff-9fbf-2d3c31_1xaFew readers

OPTIS Color Swatch FAQs

• How does the OPTIS Swatch app work?

  The OPTIS 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 product page, and even on collection pages. Plus, you have full control over styling: easily adjust the color, size, shape, spacing, and more to match your brand’s design. 🖼️ **Image Changing based on option Swatch SelectioPopular

• 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 Swatch only works with native Shopify variants – meaning the product options (like Color or Size) must be created directly in your Shopify Products admin, not from a custom option app. When each variant has its own image assigned in Shopify Products, OPTIS Swatch will automatically update the product image when the customePopular

• 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. Alternative Solution: Use both the Product Options app and a Swatch app together To achieve both image-changing swatches and additional product options, we recommend combining two apps: Use the Swatch app to display color swatchPopular

• Can I display swatches/button/dropdown on the collection page?

  Yes, OPTIS 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. ✅ To enable swatches on the collection page: Go to the “Configure Variants” page in OPTIS Swatch Find the row corresponding to the option you want to show (e.Popular

• Is it possible to customize how swatches look?

  Yes! You can fully customize how your swatches appear — including color, size, shape, borders, and more — for both the product page and the collection page. 💡 Use this to match your option styles with your store’s branding and make them look consistent across pages. ✅ To customize the display style: Go to the “Styling” page in OPTIS Swatch Choose display style that yoPopular

• 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 gallery when the toggle is enabled.Few 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 product options (like Color or Size) must be created directly in your **Shopify ProducFew 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 of selecting existing files from the product gallery (Shopify file) ✅ Make sure variant images are selected fromFew 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, Button, Dropdown, etc.). For variants you don’t want the app to affect, set them to No Show - Variants setFew 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. There are three tag rules, depending on how you want tags to translate into groups: Rule | What it creates | ExaFew 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 first Common Image. ![Featured image set as the first Common Image](https://storage.crisp.chat/users/helpdesk/websitFew 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 product page, and even on collection pages. Plus, you have full control over stylFew 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 ![Add to your theme button in the app](https://storage.crisp.chat/users/helpdesk/website/-/a/d/9/6/ad961ab7390a0800/4a1c3701-c40b-44df-8c79-aa4df6_1y157qr.pnFew 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 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. To fix this, go to [Global settings](/swatFew 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 app](https://storage.crisp.chat/users/helpdesk/website/-/2/7/4/d/274da9aac454f000/3d26c95b-3670-4ab7-bb8c-4f5eae_1Few readers

• Can I show swatch on collection page

  OPTIS Color Swatch Variant Display Common questions 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](https://storage.crisp.chat/users/helpdesk/website/-Few 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. Alternative Solution: Use both the Product Options app and a Swatch app together ToFew 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 page is based on the order configured in the Product Group settings. You can reorder options anytime directly in tFew 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 and enable it: Go to Online Store → Themes → Edit theme ![Online Store Themes section with the Edit themeFew readers

• Can I display swatches/button/dropdown on the collection page?

  OPTIS Color Swatch Frequently Asked Questions Can I display swatches/button/dropdown on the 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](https://storage.crisp.chat/users/helpdesk/website/-/b/8/9/6/b8960847Few 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 marketing or listing purposesFew 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 page](https://storage.crisp.chat/users/helpdesk/website/-/3/f/6/8/3f68d73f89d3280/cbe6ac04-f71d-4225-9353-6c200f_Few 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 briefly appear before OPTIS swatches are displayed. Can this be removed? Yes - **we can hide the initial variFew 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 independently. This means the theme’s variant picker must be active so Shopify knows which variant is currently seFew 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 instantly, without opening the product page or clicking to the variant to see the produFew readers

• 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, choose: Specific products → to apply Variant Images only to tagged products Exclude products → tFew readers

Pricing

• OPTIS Color Swatch's Pricing

  This document explains our current app pricing. 🗒️* Note for existing merchants:  If you installed the app before paid plans were introduced (Jan 20, 2026), you’re eligible for a grandfathered deal. Details have already been shared with you via email. If anything is unclear, our support team is happy to help.* 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 rPopular

• 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 approve an updated subscription at the next billing cycle You’ll need to approve a sFew 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 subscription button. Confirm In the Confirm to unsubscribe the app popup, review tFew 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-you for supporting us early, **grandfathered users receive an exclusive 15% lifetiFew 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 to every product. This setting only affects option combinations that were never created.Few 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 confidence. 🚀 What OPTIS Color Swatch can do for you OPTISFew 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 🔹 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 SFew 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 Turn on the toggle and click Save ![App embed toFew readers

• 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: Swatch, Swatch card, Pill swatch, Button, Button without border, and Dropdown. Each type has its oFew 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. https://storage.crisp.chat/users/helpdesk/website/-/a/9/8/f/a98f8957f7b13800/07810769-a1e2-4ae9-bc05-63abce_j5bnyb.png Size & layout Setting | What it doesFew readers

• 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 Horizon theme family and the Dawn / Online Store 2.0 family. Premium themes: 40Few 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 when the swatches render and when a shopper interacts with them on collection pages: EventFew 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 groups at once from a name pattern, tag, or metafield, and [export](/swatch/product-groups/exportFew readers