Skip to main content

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.

R
Written by Reactiv App
Updated over a week ago

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.
    ​

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

  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.

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.
    ​

    ​

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.

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.reactivapp.com or reach out to our support team anytime for tips, troubleshooting, or personalized guidance.

Did this answer your question?