How to Add Shopify Color Swatches in Collection Page

Step 1: Access the Theme Code

1. Log in to your Shopify admin panel.
2. Navigate to Online Store > Themes.
3. Find your active theme (e.g., Dawn), click on Actions, then Edit code.

Step 2: Create a Snippet for Color Swatches

1. In the Snippets directory, click Add a new snippet.
2. Name the snippet color-swatches and click Create snippet.

Step 3: Add Code to the Color Swatches Snippet

Add the following code to your color-swatches.liquid file. This code will handle displaying the color swatches for each product:

{% comment %}
  This snippet displays color swatches for products.
{% endcomment %}

<div class="color-swatches">
  {% assign colors = product.variants | map: 'option1' | uniq %}
  {% for color in colors %}
    {% assign color_handle = color | handleize %}
    <span class="swatch" style="background-color: {{ color_handle }};"></span>
  {% endfor %}
</div>

<style>
.color-swatches {
  display: flex;
  gap: 5px;
  margin-top: 10px;
}

.swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #ddd;
  display: inline-block;
}
</style>

Step 4: Modify the Collection Template

1. In the Sections directory, open main-collection-product-grid.liquid or the appropriate file that handles the product grid on your collection page.
2. Locate the code that renders each product. This is typically within a {% for product in collection.products %} loop.
3. Include the color-swatches snippet within this loop to display the color swatches for each product.

For example, your modified main-collection-product-grid.liquid might look like this:

{% for product in collection.products %}
  <div class="product-card">
    <!-- Existing product rendering code -->
    <a href="{{ product.url }}">
      <img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
      <h2>{{ product.title }}</h2>
    </a>
    <!-- Include the color swatches snippet -->
    {% include 'color-swatches' %}
  </div>
{% endfor %}

Step 5: Customize Color Handling (Optional)

If you want to use custom color codes or images for swatches rather than just the color names, you can extend the color-swatches.liquid snippet. For instance, you can create a mapping of color names to color codes or image URLs.

{% comment %}
  This snippet displays color swatches for products with custom colors.
{% endcomment %}

<div class="color-swatches">
  {% assign colors = product.variants | map: 'option1' | uniq %}
  {% for color in colors %}
    {% assign color_handle = color | handleize %}
    {% case color_handle %}
      {% when 'red' %}
        {% assign color_code = '#FF0000' %}
      {% when 'blue' %}
        {% assign color_code = '#0000FF' %}
      {% else %}
        {% assign color_code = '#CCCCCC' %}
    {% endcase %}
    <span class="swatch" style="background-color: {{ color_code }};"></span>
  {% endfor %}
</div>

<style>
.color-swatches {
  display: flex;
  gap: 5px;
  margin-top: 10px;
}

.swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #ddd;
  display: inline-block;
}
</style>

Step 6: Save and Test

1. Save all your changes.
2. Go to your collection page on your Shopify store and refresh to see the color swatches displayed for each product.

Summary

By following these steps, you can add color swatches to the collection page in the Shopify Dawn theme:

1. Create a color swatches snippet to handle the display of color options.
2. Modify the collection template to include the color swatches snippet for each product.
3. Customize the color handling if needed, to use specific color codes or images.

This enhances the user experience by allowing customers to quickly view available color options directly from the collection page.