Assigning Styles to Options: Choosing Buttons, Swatches, or Dropdowns

The Product Page Settings tab is your command center for styling. Instead of a one-size-fits-all approach, you can assign unique "Display Styles" to different option names (e.g., Color, Size, Material). This ensures your customers get the best visual experience for every choice they make.

Step 1: Accessing the Product Page Settings

1. Open the Product Variant Options app from your Shopify Admin.

2. Navigate to the Product Page Settings tab in the top menu.

3. You will see a list of all your store's Option Names (like "Color," "Size," or "Title") that the app has automatically fetched from your catalog.

Step 2: Assigning a Display Style

For every option name, you need to decide how it should look on the storefront. Click the Display Style dropdown next to an option:

• For Visual Variants (Color/Pattern): Choose Circular Swatch, Square Swatch, or Polaroid Swatch.

• For Sizes or Simple Choices: Choose Button or Button Pill for a clean, clickable look.

• For Pricing-Sensitive Options (Gift Cards/Upgrades): Choose Button with Price to show the cost difference immediately.

• For Long Lists (Dimensions/Technical Specs): Choose Dropdown with Label or Swatch in Pill to save vertical space.

Step 3: Choosing Your Swatch Type

Once you’ve picked a style (like a Circular Swatch), you must tell the app what data to display inside that shape:

1. Variant Image: Best for apparel. The app automatically pulls the specific product photo from your Shopify Admin.

2. Color / Custom Image: Best for consistent branding. You can set a specific HEX color code or upload a custom texture (like a wood grain or fabric pattern).

Step 4: Detailed Configuration (Manual Overrides)

If you need to fine-tune a specific color (e.g., making sure "Forest Green" is the exact shade you want):

1. Click the Configure button on the right side of the option row.

2. A list of all Values for that option will appear.

3. Manually update the HEX code or upload a specific image for that individual value.

4. Click Update.

Step 5: Bulk Actions for Large Catalogs

If you have hundreds of products, don't update them one by one. Use the Bulk Actions menu in the top right:

• Bulk Update Options: Use a CSV file to map styles (e.g., "All options named 'Size' should be 'Button Pills'") across your entire store.

• Bulk Update Swatches: Mass-upload images or color codes for your entire variant library at once.

Need Help?

Our support team is dedicated to helping you build a beautiful storefront:

• Live Chat: Available directly within the app dashboard.

• Email Support: wecare@keficommerce.com