Swatch setup
Sync & Configure Shopify Options#
Once your app embed is active, it’s time to bring your product variants to life! Follow this quick guide to sync and configure your option styles in minutes.
Step 1: Select Product Scope#
1. Click Options on the left sidebar menu (or Go to Options in the setup guide). Here, you can review key metrics like Days since last sync, Options ready to show, and Products affected.
2. Choose which products should apply these option configurations:
🌐 All Products (Recommended): Applies configurations storewide. Check Exclude specific products to leave certain items untouched.
🎯 Manual Selection: Pick specific products manually to apply swatch styles only to them.
Click the Sync Shopify option button on the top right to apply your chosen scope and confirm the synchronized option list below.
Step 2: Set Option Styles#
Scroll down to the Options Table to configure how each option (e.g., Color, Size) displays:
Status Toggle: Turn ON to enable custom styling for an option.
Product Page Style: Click the dropdown next to an option and pick a style (Button, Color or Image Swatch, Dropdown Menu, Swatch in Button, Swatch in Dropdown Menu, or Swatch with Price).
Collection Page Style: Choose how the option appears on collection cards.
Step 3: Customize Swatches#
If you select a swatch-based style, click the Customize (pencil) icon:
1. By default, swatches automatically use the Variant Images from your Shopify Admin.
2. To customize further, choose from 3 flexible options:
🎨 Color Picker (HEX): Select a solid color or enter a HEX code.
📁 Upload File: Upload a custom pattern or fabric image file.
🔗 Image URL: Paste an external image URL.
3. Click Update to save your swatch customizations.
💡 Priority Order: Image URL > Upload File > Color HEX > Shopify Variant Image.
Step 4: Preview on Storefront#
Click the affects X products link next to any option name to open the product list. Click the product title to view it live on your storefront and test your new swatches!
💬 Need Help? If swatches don't appear as expected on your theme, click Chat with us at the bottom of your dashboard. Our support team is always ready to assist!