How to add swatches to collection page?

Swatches could be added to collection page via custom liquid snippet. 

You'll need to create new snippet in your theme called "snippets/platmart-collection-swatches.liquid" with the following content:

{% if content_for_header contains 'platmart-product-colors.js' %}

  {%- liquid
    assign group = product.metafields.pl_swatches.groups.value | first
    assign settings = shop.metafields.pl_swatches.settings.value
  -%}

  {%- if settings and settings.enabled and group -%}
    <style>
      .pl-swatches-collection {
        margin-top: 5px;
        text-align: center;
      }
      .pl-swatches-collection__link {
        text-decoration: none;
      }
      .pl-swatches-collection__swatch-wrapper {
        display: inline-block;
        margin: 4px 2px;
        border: 2px solid #fff;
        line-height: normal;
        border-radius: var(--pl-swatch-radius);
        box-shadow: 0 0 0 1.5px #e8e8e1;
      }
      .pl-swatches-collection__swatch-wrapper--active {
        box-shadow: 0 0 0 2px #888883;
      }
      .pl-swatches-collection__swatch {
        display: flex;
        flex-direction: column-reverse;
        margin: 0;
        padding: 0;
        box-shadow: 0;
        border: 0;
        width: 20px;
        height: 20px;
        overflow: hidden;
        vertical-align: middle;
        border-radius: inherit;
      }
      .pl-swatches-collection__color {
        display: inline-block !important;
        height: 100%;
        width: 100%;
      }
      .pl-swatches-collection__color img {
        object-fit: contain;
      }
    </style>

    <div class="pl-swatches-collection" style="{{ settings.css_variables }}">
      {%- assign current_option = group.swatches | where: "handle", product.handle | first -%}

      {%- if current_option -%}
        <div class="pl-swatches-collection__container">
          {% for option in group.swatches %}
            {%- assign url = product.url | replace: product.handle, option.handle -%}
            <a href="{{ url }}" class="pl-swatches-collection__link" title="{{ option.name }}">
              <div class="pl-swatches-collection__swatch-wrapper {% if product.handle == option.handle %}pl-swatches-collection__swatch-wrapper--active{% endif %}">
                <div class="pl-swatches-collection__swatch">
                  {%- case option.type -%}
                  {%- when "two_colors" -%}
                    <div class="pl-swatches-collection__color" style="background: {{ option.color_two }};"></div>
                    <div class="pl-swatches-collection__color" style="background: {{ option.color_one }};"></div>
                  {%- when "custom_image", "product_image" -%}
                    <div class="pl-swatches-collection__color">
                      <img src="{{ option.image }}" width="{{ swatch_size }}" height="{{ swatch_size }}" loading="lazy">
                    </div>
                  {%- else -%}
                    <div class="pl-swatches-collection__color" style="background: {{ option.color_one }};"></div>
                  {%- endcase -%}
                </div>
              </div>
            </a>
          {% endfor %}
        </div>
      {%- endif -%}
    </div>
  {%- endif -%}

{% endif %}

Feel free to customize the layout and styles to match your theme. And then include this snippet in your collection product cards:

{% render 'platmart-collection-swatches', product: product, shop: shop %}

If you'll need help with that please contact support.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us