English
Back to website

Advice and answers from the Keficommerce Team

  1. Categories
  2. Kefi Swatch Options
  3. Quick Start Guides
  4. Master Your Storefront: An Overview of Product Variant Options

Master Your Storefront: An Overview of Product Variant Options

Shivam Tiwari
Written by Shivam Tiwari

Give your customers a premium shopping experience by transforming boring dropdown menus into beautiful, high-converting swatches. With the Product Variant Options app, you have complete control over how your product variants—like color, size, or material—appear on your store.

Why Use Product Variant Options?

Standard Shopify themes often limit how variants are displayed. Our app bridges that gap, allowing you to:

  • Boost Conversion: Make it easier for customers to see and select their preferred options.

  • Enhance Aesthetics: Match your brand’s look with customizable shapes and styles.

  • Save Time: Use bulk update features to manage hundreds of products in seconds.

Getting Started

Once you install the app and enable the script in your theme settings, the app automatically fetches all available variant options from your product catalog. No manual entry is required to get started.

The app is divided into three main management areas:

  1. Product Page Settings: Define how swatches appear on individual product pages.

  2. Collection Page Settings: Show swatches on listing pages to allow quick browsing.

  3. Customize Styles: Fine-tune colors, borders, and sizes to match your brand.

Feature Deep Dive: Product Page Settings

The Product Page Settings tab is your command center for styling. Here, you can assign specific "Display Styles" and "Swatch Types" to every option name in your store (e.g., Color, Size, Denominations).

1. Global Management (Bulk Actions)

To speed up your workflow, use the top-right bulk menus:

  • Bulk Update Options: Import or Export CSV files to map display styles to variant names across your entire store.

  • Bulk Update Swatches: Mass-upload or manage specific swatch images and colors via file import.

2. Customizing Display Styles

For every option (like Color or Title), you can choose from a variety of professional layouts:

  • Standard Shapes: Button (Default), Button Pill, Circular Swatch, or Square Swatch.

  • Information Rich: Button with Price (shows the price jump per variant) or Dropdown with Label.

  • Unique Visuals: Polaroid Swatch or Swatch in Pill.

3. Swatch Type Selection

For visual options like "Color," you can decide exactly what the customer sees:

  • Color / Custom Image: Set a specific HEX color code or upload a custom texture/pattern image.

  • Variant Image: The app automatically pulls the specific image assigned to that variant in your Shopify admin.

4. Detailed Configuration

By clicking “Configure” on any option row, you can upload custom swatches when the style is set to Color/Custom Image. This allows you to assign specific colors or images to individual variants, giving you full control over how each option appears.


Use Cases

  • Fashion & Apparel: Use Circular Swatches with Variant Images so customers see the actual fabric pattern.

  • Gift Cards: Use Button with Price for "Denominations" so users see the value and cost simultaneously.

  • Jewelry: Use Polaroid Swatches to show high-detail close-ups of different metal finishes.

Feature Deep Dive: Collection Page Settings

The Collection Page Settings tab allows you to showcase your product variety before a customer even clicks on a product. By displaying swatches on your collection and search result pages, you reduce friction and encourage faster browsing.

Syncing with a Single Click

The standout feature here is the Apply Product styles to all toggle.

  • How it works: When enabled, the app automatically mirrors the configuration you’ve already set up in the Product Page Settings.

  • The Benefit: You don't have to manually re-assign styles for "Color" or "Size" a second time. Any change you make to your product page swatches will instantly reflect on your collection pages, ensuring a consistent look across your entire site.

Flexible Display Options

If you choose to customize these specifically for collection pages, you have access to the exact same robust styling engine found in the Product Page settings:

Available Display Styles

Whether you want a clean look or a detailed one, you can choose from:

  • Classic Shapes: Button, Button Pill, Circular Swatch, Square Swatch.

  • Dynamic Options: Button with Price (great for showing "starting at" prices), Polaroid Swatch.

  • Space Savers: Dropdowns and Swatches in Pills.

Swatch Mapping

Just like the product page, you can define the source of the visual:

  • Color / Custom Image: Perfect for brand-consistent color palettes.

  • Variant Image: Ideal for showing the specific product thumbnail (e.g., showing the blue shirt vs. the red shirt).

Why Enable Swatches on Collection Pages?

  • Visual Discovery: Customers can see available colors immediately without navigating away from the grid.

  • Reduced Bounce Rate: By showing available options (like sizes or denominations) upfront, you set clear expectations, leading to more "qualified" clicks to your product pages.

Feature Deep Dive: Customize Styles

The Customize Styles tab is where you bridge the gap between "standard features" and "brand identity." Here, you can define the exact look and feel of every display style—from the thickness of a border to the animation of a button.

Navigation: Product vs. Collection

At the top of the page, you’ll see toggles for Product Page and Collection Page. This allows you to maintain different styling for each. For example, you might want large, detailed swatches on the product page but smaller, simpler ones on the collection grid.

1. Customizing Swatches (Circular, Square, Polaroid)

When you click Customize on a swatch-based style, you can refine how the "Selected" and "Unselected" states appear.

  • Image Mode: If your swatches use variant images, you can adjust the Outer border and Inner border colors. This creates a "frame" effect that makes the active selection pop.

  • Color Mode: For solid color swatches, you have the same border controls to ensure that even light colors (like white or cream) are clearly visible against your site's background.

2. Customizing Buttons (Text-Based)

Buttons are highly versatile. The app allows you to set different rules for Long text (e.g., "Extra Large") and Short text (e.g., "XL").

For both types, you can customize:

  • Colors: Set specific HEX codes for Text, Borders, and Backgrounds.

  • Animations: Add a premium feel to your UI by choosing what happens when a user selects a variant:

  1. No effect: Simple and clean.

  2. Increase size: A subtle "grow" effect.

  3. Add shadow: Adds depth to the selected button.

  4. Add glow: Highlights the selection with a soft outer light.

3. Dropdowns & Swatch in Pills

You can also customize the container styles for your dropdowns and hybrid styles (like the Swatch in Pill) to ensure the typography and spacing match your theme's native fonts.

Pro Tip: The "Active" Badge

In your list of styles, look for the green Active badge. This tells you at a glance which styles are currently live on your storefront, helping you avoid editing a style that isn't currently in use.

Need Help?

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

Categories:

Did this article help you in any way?