color swatches not displaying color in product section

Shopify Apps

Topic summary

A user reports that color swatches configured as circles in their product section are not displaying colors properly.

Current Status:

  • Multiple support representatives have requested the store URL and product links to diagnose the issue
  • No store details have been shared yet by the original poster

Potential Causes Identified:

  • Theme uploaded from unverified sources (not Shopify Theme Store) may contain errors
  • Custom code modifications disrupting swatch functionality

Suggested Solutions:

  1. Switch to a trusted theme from Shopify Theme Store or reputable providers
  2. Review and potentially revert custom code changes
  3. Install a dedicated app (G: Combined Listings & Variant) that offers:
    • Free color swatch functionality with multiple shape options
    • Compatibility with 200+ themes
    • Customizable styling and hover effects
    • Multi-language support

Next Steps:
The discussion remains open, awaiting the store URL and additional details from the user to provide specific troubleshooting.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

In product section, I have use color shape as circle But color swatches not displaying the color.

2

Hello,

Can you please share your store URL and a link to a product with color swatches so we can check?

3

Hi, can you share store URL and detail image of the area you want to delete?

4

Hi @nkcordestitch ,

The issue with your color swatches not displaying colors is likely caused by a problem with your theme. Here are the potential reasons:

  1. Unreliable Theme Source: If you uploaded a theme as a zip file from an unverified source (not Shopify Theme Store), it may contain errors that break the swatch feature.
  2. Custom Code Issues: Customizations to your theme’s code may have been added incorrectly, disrupting the swatch functionality.

Solutions:

  • Switch to a Trusted Theme: Use a theme from the Shopify Theme Store or reputable providers like ThemeForest to ensure reliability.

  • Review Custom Code: Check any custom code you’ve added. If it’s too complex, revert the modified files to their original versions.

  • Best Solution - Use a Dedicated App: To bypass theme-related issues, I highly recommend G: Combined Listings & Variant. This app ensures color swatches work seamlessly, even if your theme has problems. Key features include:

    • Free Color Swatch Functionality: Supports circle, square, polaroid, and image swatches, plus button combinations for a superior experience compared to Shopify’s default options.
    • Highly Customizable Options: Fully customize buttons, dropdowns, and swatches with adjustable size, font, spacing, rounded corners, hover effects, and out-of-stock displays.
    • Theme Compatibility: Works with over 200 themes and maintains consistent styling even when switching themes.
    • Advanced Features: Displays swatches on product cards (Basic plan), supports multiple languages, and allows import/export of swatch data.
    • Future-Proof: Continuously updated with new display options and features.
    • Demo Store: Try it here (password: 123456).

This app provides a reliable, user-friendly solution for swatches and product options, saving you from theme-related headaches. Install it and let me know if you need setup assistance!

Best,
Tapita Team