--- title: Product Swatches for Mobile and Clips description: Learn how to set up product swatches in Reactiv for mobile apps and clips, including colors, images, and mapping options. --- [Skip to content](https://info.reactiv.ai/reactiv-help-center/product-swatches-for-mobile-and-clips-reactiv-support-center#main-content) ![logo-mono-light](https://info.reactiv.ai/hubfs/logo-mono-light.svg) Open main navigation Close main navigation - [Contact us](https://info.reactiv.ai/reactiv-help-center/how-do-i-contact-customer-support-reactiv-support-center) [Contact us](https://info.reactiv.ai/reactiv-help-center/how-do-i-contact-customer-support-reactiv-support-center?hsLang=en-ca) Answers, documented. - There are no suggestions because the search field is empty. 1. [Reactiv Help Center](https://info.reactiv.ai/reactiv-help-center?hsLang=en-ca) 2. [Building Your App](https://info.reactiv.ai/reactiv-help-center/building-your-app?hsLang=en-ca) 3. [App Settings](https://info.reactiv.ai/reactiv-help-center/building-your-app?hsLang=en-ca#app-settings) February 18, 2026 # Product Swatches for Mobile and Clips ## Customize how options like size and color are displayed using variant styling and visual swatches in the Reactiv app. ### ![](https://info.reactiv.ai/hs-fs/hubfs/Knowledge%20Base%20Import/Screenshot_2025-10-07_at_12.09.53%E2%80%AFPM-1759857005-Feb-13-2026-07-12-37-3527-PM.png?width=40&height=40&name=Screenshot_2025-10-07_at_12.09.53%E2%80%AFPM-1759857005-Feb-13-2026-07-12-37-3527-PM.png) Written by Reactiv App ### **Purpose** In this guide, you’ll learn how to: - Add color swatches to your products using Shopify category metafields. - Manage global swatch and variant settings in the Reactiv mobile app builder. - Customize variant styling for individual products. [![](https://downloads.intercomcdn.com/i/o/zgqq9fe6/1611465571/7ce3e54ad954c84b4c9f65a7d111/Screenshot+2025-07-04+at+9_22_41%E2%80%AFAM.png?expires=1771011900&signature=f0e4bd6df66aab8d2c1ce9a1fa2635ee1e174396bf35d75db964de15d995ba58&req=dSYmF814mIRYWPMW1HO4zZJMxegTEVL3bKvxSKaojl4fd947%2F6rlBKx7Ft8F%0Ajmga%0A)](https://downloads.intercomcdn.com/i/o/zgqq9fe6/1611465571/7ce3e54ad954c84b4c9f65a7d111/Screenshot+2025-07-04+at+9_22_41%E2%80%AFAM.png?expires=1771011900&signature=f0e4bd6df66aab8d2c1ce9a1fa2635ee1e174396bf35d75db964de15d995ba58&req=dSYmF814mIRYWPMW1HO4zZJMxegTEVL3bKvxSKaojl4fd947%2F6rlBKx7Ft8F%0Ajmga%0A) --- ### **Step 1: Add Color Swatches Using Shopify Category Metafields** To enable color swatches in your app, start by updating your product variants with color metafields in Shopify. 1. Open your **Shopify admin**. 2. Go to **Products**, then select a product. 3. Follow Shopify’s official steps to add color metafields: 👉[Using Category Metafields in Shopify](https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields) 4. You can now enable swatches by navigating to **Sales Channels** \> **Reactiv – Mobile App Builder \> App Settings \> Products.** 5. Scroll to the Swatches section, and toggle the feature **On**. [![](https://downloads.intercomcdn.com/i/o/zgqq9fe6/1609611519/ac7cc0722c073c0628a6b895eadb/Screenshot+2025-07-08+at+11_05_46%E2%80%AFAM.png?expires=1771011900&signature=dd280fb4e968cae87b981d57a9fae1bd305b1064addea740fb180a9e2bcc9d55&req=dSYnH89%2FnIReUPMW1HO4zS20qRizPMU%2B0%2FfKvcpCrRTNhxLMQ1Pcg%2F1QCRt6%0AoCcd%0A)](https://downloads.intercomcdn.com/i/o/zgqq9fe6/1609611519/ac7cc0722c073c0628a6b895eadb/Screenshot+2025-07-08+at+11_05_46%E2%80%AFAM.png?expires=1771011900&signature=dd280fb4e968cae87b981d57a9fae1bd305b1064addea740fb180a9e2bcc9d55&req=dSYnH89%2FnIReUPMW1HO4zS20qRizPMU%2B0%2FfKvcpCrRTNhxLMQ1Pcg%2F1QCRt6%0AoCcd%0A) Once set up, these metafields will power your color swatch options inside the app. --- ### **Step 2: 🌍 Set up Global Variant and Swatch Styling Settings** Set a consistent style across all product pages with global settings. ### **How to Navigate:** 1. From the Reactiv editor, use the top dropdown beside the logo. 2. Select **App Screens**, then choose **Products**. ​ [![](https://downloads.intercomcdn.com/i/o/zgqq9fe6/1609623545/8c58c0732ca3136ee3c66ee0ef10/Screenshot+2025-07-08+at+11_12_22%E2%80%AFAM.png?expires=1771011900&signature=cf4786f1e6e88f282434fad6a6d7b1e294135d004d9392cbb11f5be10dc9b93f&req=dSYnH898noRbXPMW1HO4zdovw4UT3iGBwoMyEsuy%2FHn19ULWTmadaG0w2JZV%0Acdec%0A)](https://downloads.intercomcdn.com/i/o/zgqq9fe6/1609623545/8c58c0732ca3136ee3c66ee0ef10/Screenshot+2025-07-08+at+11_12_22%E2%80%AFAM.png?expires=1771011900&signature=cf4786f1e6e88f282434fad6a6d7b1e294135d004d9392cbb11f5be10dc9b93f&req=dSYnH898noRbXPMW1HO4zdovw4UT3iGBwoMyEsuy%2FHn19ULWTmadaG0w2JZV%0Acdec%0A) ### **Product Variant Styling** This section controls how options like size, weight, or flavor appear. - **Styling types**: - **Buttons** – Display options in clickable button format. - **Dropdown** – Compact dropdown selector. You can apply styles for each product or keep a consistent global look. ### **Visual Swatch Styling** This area controls the display of colors, patterns, or materials as swatches. - Toggle **Enable visual swatches** ON. - Choose your preferred **Styling**: - **Default** - **Button** - **Dropdown** - **Circle** 💡 *Try different combinations to match your brand's shopping experience.* You’ll see controls to configure: - **Product Variant Styling** ​Choose between Buttons or Dropdowns for how all product variants (like size or weight) are displayed. - **Visual Swatch Styling** ​Pick from Buttons, Dropdowns, or Circles to show visual product options like color or material. - **Live Previews** ​Preview the product detail screen with your current styling settings to see exactly how it appears to customers. - **Reset Custom Swatches** ​Click **Reset Custom Swatches** to remove any product-specific overrides and apply the global style to all products.You can tailor how product options display directly from the Reactiv Mobile App Builder. ### **Step 3: Customize Variant Styling for a Specific Product** ### **How to Navigate:** 1. Log in to your **Shopify admin**. 2. In the left sidebar, click **Sales Channels** \> **Reactiv – Mobile App Builder**. - If editing Swatches for **Clips**, click **Clip Studio**. 3. In the top dropdown next to your store logo, select **Product Listing**. 4. Click the **Settings** tab. 5. Scroll to **Product Variant Styling** and **Visual Swatch Styling**. [![](https://info.reactiv.ai/hs-fs/hubfs/Knowledge%20Base%20Import/Screenshot+2025-07-08+at+11_26_10%E2%80%AFAM-1.png?width=500&height=575&name=Screenshot+2025-07-08+at+11_26_10%E2%80%AFAM-1.png)](https://downloads.intercomcdn.com/i/o/zgqq9fe6/1609649905/d9c8a49f9d3ebdbcd05949df9bfa/Screenshot+2025-07-08+at+11_26_10%E2%80%AFAM.png?expires=1771011900&signature=1080098f944d0007bda0ab3f2941b85719f71789a8a1377e6641585deb72e0de&req=dSYnH896lIhfXPMW1HO4zY5SBp0EArVDLOT5AlRxQ9suN17sLfProYRjfZv6%0AS1bLmgMz7VTlf6L7Kn4%3D%0A) Make sure you Save & Publish any changes you've made, so it's reflected in your mobile app. --- ### **💡 Need Help?** We’re here for you! Visit [www.reactiv.ai](https://www.reactiv.ai) or reach out to our support team anytime for tips, troubleshooting, or personalized guidance. - [Getting Started With Reactiv](https://info.reactiv.ai/reactiv-help-center/getting-started-with-reactiv?hsLang=en-ca) - [Building Your App](https://info.reactiv.ai/reactiv-help-center/building-your-app?hsLang=en-ca#main-content) - [App Settings](https://info.reactiv.ai/reactiv-help-center/building-your-app?hsLang=en-ca#app-settings) - [Your Home Screen](https://info.reactiv.ai/reactiv-help-center/building-your-app?hsLang=en-ca#your-home-screen) - [Misc. App Building Blocks](https://info.reactiv.ai/reactiv-help-center/building-your-app?hsLang=en-ca#misc-app-building-blocks) - [Other Screens](https://info.reactiv.ai/reactiv-help-center/building-your-app?hsLang=en-ca#other-screens) - [Publishing Your App](https://info.reactiv.ai/reactiv-help-center/publishing-your-app?hsLang=en-ca#main-content) - [iOS App](https://info.reactiv.ai/reactiv-help-center/publishing-your-app?hsLang=en-ca#ios-app) - [Building Your Reactiv Clips](https://info.reactiv.ai/reactiv-help-center/building-your-reactiv-clips?hsLang=en-ca#main-content) - [Success with Reactiv Clips](https://info.reactiv.ai/reactiv-help-center/building-your-reactiv-clips?hsLang=en-ca#success-with-reactiv-clips) - [Customizing Your Reactiv Clips Experiences](https://info.reactiv.ai/reactiv-help-center/building-your-reactiv-clips?hsLang=en-ca#customizing-your-reactiv-clips-experiences) - [Initializing Your Reactiv Clips](https://info.reactiv.ai/reactiv-help-center/building-your-reactiv-clips?hsLang=en-ca#initializing-your-reactiv-clips) - [About Reactiv Clips](https://info.reactiv.ai/reactiv-help-center/building-your-reactiv-clips?hsLang=en-ca#about-reactiv-clips) - [Integrations](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#main-content) - [Analytics & Push Notifications](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#analytics-push-notifications) - [App Install Attribution](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#app-install-attribution) - [Back in Stock Alerts](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#back-in-stock-alerts) - [Chat & Customer Support](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#chat-customer-support) - [Conversion Integrations](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#conversion-integrations) - [Discovery, Search & Personalization](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#discovery-search-personalization) - [Fraud Protection](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#fraud-protection) - [Loyalty](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#loyalty) - [Order Fulfillment](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#order-fulfillment) - [Product Recommendations](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#product-recommendations) - [Order Tracking & Returns](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#order-tracking-returns) - [Product Bundles](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#product-bundles) - [Reviews Integrations](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#reviews-integrations) - [Subscriptions](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#subscriptions) - [Video Shopping](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#video-shopping) - [Wishlist Integrations](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#wishlist-integrations) - [Profile Integrations](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#profile-integrations) - [Platform Highlights](https://info.reactiv.ai/reactiv-help-center/platform-highlights?hsLang=en-ca) - [Success with Reactiv](https://info.reactiv.ai/reactiv-help-center/success-with-reactiv?hsLang=en-ca#main-content) - [Sending Push Notifications](https://info.reactiv.ai/reactiv-help-center/success-with-reactiv?hsLang=en-ca#sending-push-notifications) - [Building with AI](https://info.reactiv.ai/reactiv-help-center/building-with-ai?hsLang=en-ca) - [FAQ](https://info.reactiv.ai/reactiv-help-center/faq?hsLang=en-ca#main-content) - [Performance & Data](https://info.reactiv.ai/reactiv-help-center/faq?hsLang=en-ca#performance-data) - [General & Billing](https://info.reactiv.ai/reactiv-help-center/faq?hsLang=en-ca#general-billing) - [Getting Started](https://info.reactiv.ai/reactiv-help-center/faq?hsLang=en-ca#getting-started) - [Technical Issues & Troubleshooting](https://info.reactiv.ai/reactiv-help-center/faq?hsLang=en-ca#technical-issues-troubleshooting) - [App Management](https://info.reactiv.ai/reactiv-help-center/faq?hsLang=en-ca#app-management) - [Research](https://info.reactiv.ai/reactiv-help-center/research?hsLang=en-ca) [![logo-mono-dark](https://info.reactiv.ai/hubfs/logo-mono-dark.svg "logo-mono-dark")](http://reactiv.ai) Copyright © 2026, Reactiv