How to Display Shopify Colors as Swatches Instead of Text

For further customization, check out our guide on Shopify Product Page Customization.

Why Show Colors as Swatches Instead of Text?

Showing Colors as swatches instead of text has more advantages, such as: 

• It improves the user experience, and customers can choose their preferred color easily.
• It helps to improve the conversion rate. 
• It changes the product page to look more modern.
• Customers get a better look at the actual colors available for that product.

Methods for Showing Shopify Colors as Swatches

There are different ways to show Shopify Colors as Swatches. Some of these are given below.

1. Enable Color Swatches using Theme Settings
2. Add Custom Color Swatches Using Code
3. Install an App

Method 1: Enable Color Swatches using Theme Settings

Latest Shopify Themes like Dawn, Refresh, or Craft already have a built-in feature to show the color options if the color names match the standard color names, like Red, Blue, and Green. Follow these steps to enable color swatches using the Theme Settings.

Step 1: Navigate to Online Store > Themes > Customize.

Step 2: Navigate to the Product page from the dropdown.

Step 3: Go to the product information section in the left panel.

Step 4: Expand the section and go to the variant picker block and open settings.

Step 5: Select the option as Pills or Buttons, depending on the theme, if the theme supports that feature.

Step 6: Save the changes.

For more information on optimizing your Shopify store, refer to our Shopify Theme SEO Guide.

Method 2: Add Custom Color Swatches Using Code

If your theme does not support the colors by default, then you can add the colors using the custom coding. Follow these steps to add Shopify colors using custom code.

Step 1: Navigate to Online Store > Themes > Edit code.

Step 2: Go to the main-product.liquid file depending on the theme.

Step 3: Search the code related to options and add this code.

  
    {% for option in product.options_with_values %}
      {% if option.name == 'Color' %}
        <div class="color-options" role="radiogroup" aria-label="Select Color">
          {% for value in option.values %}
            {% assign color_id = value | handleize %}
            <div class="color-option">
              <input
                type="radio"
                id="color-{{ color_id }}"
                name="color"
                value="{{ value | escape }}"
                {% if forloop.first %}checked{% endif %}
              >
              <label class="color-swatch-label" for="color-{{ color_id }}">
                <span class="color-swatch-inner" style="--color: {{ value | downcase }};"></span>
              </label>
            </div>
          {% endfor %}
        </div>
      {% endif %}
    {% endfor %}
    <style>
      .color-options {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 8px;
      }
      .color-option {
        position: relative;
      }
      .color-option input[type="radio"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
      }
      .color-swatch-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 2px solid #e1e1e1;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
      }
      .color-option input[type="radio"]:checked + .color-swatch-label {
        border-color: #000;
        box-shadow: 0 0 0 2px #00000020;
        transform: scale(1.1);
      }
      .color-swatch-label:hover {
        transform: scale(1.05);
        border-color: #999;
      }
      .color-swatch-inner {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: var(--color);
        border: 1px solid #ccc;
      }
    </style>
  

Step 4: Save your changes.

Method 3: Install an App 

Step 1: Navigate to Shopify Admin > Apps.

Step 2: Click on the App and sales channel button.

Step 3: Visit the Shopify App store.

Step 4: Search for the app, such as Globo Product Options, Variant.

Step 5: Install the App.

Step 6: Reconfirm the installation in the Shopify Admin.

Step 7: Click on the Create option set button.

Step 8: Click the Add Element button and add options of your choice, such as Color Swatch.

Step 9: Select a color from the color picker.

Step 10: Select the products where you want to add this Option set.

Step 11: Save the changes.

Step 12: Navigate to Online Store > Themes > Customize.

Step 13: Check this box and save the changes.

Step 14: Navigate to the Product page in the Customizer and in the Product information section, add a block related to that app.

Step 15: Save the changes.

Some popular apps are listed below:

• Globo Product Options, Variant
• Easy Variant Images
• SA Variant Image Automator
• SC Product Options
• Color Swatch King: Variants

Conclusion

Switching from text-based color options to color swatches is a simple yet effective way to enhance the shopping experience on your Shopify store. Whether you opt for the built-in theme feature, add custom code, or install an app, you can significantly improve your product pages and increase conversion rates. 

For additional guidance on optimizing your store, explore our Shopify SEO Agency.