Introduction

Product variants play an important role in the shopping experience. However, Shopify’s default option selectors may not always present colors, images, sizes, or styles in the clearest and most engaging way.

When product options are hidden inside plain dropdowns, customers may need more time to understand what is available, compare variants, and find the option they want. This can make the buying journey feel unnecessarily complicated, especially for products with many colors or variant combinations.

G: Color Swatch helps Shopify merchants turn standard product options into clear, visual, and easy-to-use variant selectors. With the app, you can replace basic option selectors with color swatches, image swatches, buttons, pill buttons, dropdowns, or Polaroid-style cards that better showcase your products and help customers choose variants faster.

What can G: Color Swatch do?

G: Color Swatch syncs the option names and values already available in your Shopify products. You can then choose how each option should appear on your storefront without rebuilding your existing product variants.

For example, you can display:

• A Color option as circular or square color swatches
• A Style option using product or custom-uploaded images
• A Size option as rectangular or pill-shaped buttons
• A simple product option as a dropdown
• A visual option as a Polaroid-style card with an image, variant name, and price

Each product option can have its own display style, allowing you to create a variant selector that suits both your products and your store design.

Key benefits for merchants

Make product variants easier to understand

Visual swatches allow customers to see available colors, patterns, images, and styles at a glance. Instead of opening a dropdown and reading every option name, shoppers can quickly compare variants and identify the option they prefer.

This creates a more intuitive product selection experience and helps customers make purchase decisions with greater confidence.

Help shoppers find and select variants faster

Customers should not have to spend extra time figuring out how to choose a product option. By turning standard selectors into clear, clickable swatches, G: Color Swatch makes it easier for shoppers to move from browsing to selecting a variant and adding the product to their cart.

A simpler selection process can reduce confusion and remove unnecessary friction from the buying journey.

Showcase variants beyond the product page

Product discovery often begins before customers open a product page. G: Color Swatch allows you to display swatches on product cards across collection, home, search, and other storefront pages.

Customers can view the available variants while browsing your store, helping them discover more product choices earlier in their shopping journey. You can also choose whether selecting a swatch redirects customers to the product page or updates the product card’s image, price, title, and URL.

Present complex product options more clearly

Some products cannot be fully represented by a single color or a simple list of option values.

G: Color Swatch supports split-tile swatches with up to nine colors in one swatch, making it easier to represent multi-color products, patterns, and complex color combinations.

The app also supports sub-options, allowing merchants to organize detailed variant choices into clearer groups. This is especially useful for stores with a large number of related options that could otherwise feel overwhelming to customers.

Manage unavailable and out-of-stock variants

Displaying options that customers cannot purchase can lead to frustration. G: Color Swatch gives you control over how unavailable and out-of-stock options appear on your storefront.

You can:

• Hide variant combinations that do not exist
• Hide out-of-stock swatches entirely
• Keep sold-out swatches visible but move them after available options

These settings help customers focus on the variants they can currently purchase while still giving merchants flexibility over how sold-out products are presented.

Keep the experience consistent across your storefront

G: Color Swatch is not limited to the main product page. You can display swatches in the main product section, featured product sections, and quick-view modals.

Swatches can also appear on product cards across all supported page types:

• Product pages
• Home page
• Search results pages
• Article pages
• Blog pages
• Collection pages
• Cart page
• Standard pages

This allows customers to discover and compare available variants at different touchpoints throughout their shopping journey, without having to visit each product page first.

When customers select a swatch on a product card, you can choose to redirect them to the corresponding product page or update the card’s image, title, price, and URL to match the selected variant.

Fully customize the appearance to match your store

Every storefront has its own visual style, so G: Color Swatch gives you detailed control over how product options appear and behave.

You can customize the appearance separately for product pages and product cards, including:

1. Option style and layout: Adjust how swatches are arranged and displayed.
2. Border style: Customize borders to clearly distinguish default, selected, and other option states.
3. Hover interactions: Add hover effects, shadows, tooltips, or image enlargement to make swatches more interactive.
4. Sold-out appearance: Display sold-out options normally, faded, crossed out, or both faded and crossed out. You can also customize the crossed-line color.
5. Value display: Choose whether to show the option name and adjust its font family and size.
6. Price display: Show or hide variant prices and customize their font, size, color, formatting, and appearance in different states.
   

The built-in preview lets you see changes before publishing and review how swatches appear with:

1. Color or image options
2. Desktop or mobile layouts
3. Light or dark storefront styles
4. Left-to-right or right-to-left languages

Most appearance settings can be configured through the visual editor without coding. For merchants who need more advanced control, custom CSS is also supported for both product pages and product cards.

Who is G: Color Swatch for?

G: Color Swatch is suitable for any Shopify merchant selling products with multiple options, particularly stores offering:

• Fashion and apparel
• Shoes and accessories
• Beauty and cosmetics
• Home décor and furniture
• Jewelry
• Multi-color or patterned products
• Products with detailed size, material, style, or model options

Whether your store has a few simple color choices or many complex variant combinations, the app helps organize those options into a clearer and more attractive shopping experience.

Start creating a better variant experience

G: Color Swatch brings product options out of plain dropdowns and turns them into visual, interactive selectors that are easier to browse and use.

By making variants easier to discover, compare, and select, the app helps merchants create a smoother shopping experience while presenting every product option in a way that complements their storefront.