| Shopify Developer

Show color variants As it’s unique Products on Collection page

If you have a product such as a swimsuit that has 10 colors, you may want to keep it as one product, but to make your collection page look more ‘full’, so here is how you can turn that one product into 10 different ones on the collection page, but have the product page stay the same as one product with many variants.

Editing your theme code to add this feature

Required files: template [collection.variant.liquid] ; section [collection-variant-template.liquid]; snippet[variant-card-grid.liquid][variant-card-list.liquid]
  • In the Section directory, upload the following file with the same name:
  • In the Snippet directory, create a new file named variant-card-grid.liquid and add the following code
<div class="grid-view-item{% unless variant.available %} grid-view-item--sold-out{% endunless %} product-card" data-product-card>
  <a class="grid-view-item__link grid-view-item__image-container full-width-link" href="{{ variant.url | within: collection }}">
    <span class="visually-hidden">{{ product.title }} - {{variant[product_option_key]}}</span>
  </a>

  {% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
  {% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
  {%- assign img_url = variant.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

  {% unless variant.image == blank %}
    {% include 'image-style' with image: product.featured_image, width: max_height, height: max_height, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}
  {% endunless %}

  <div class="product-card__image-with-placeholder-wrapper" data-image-with-placeholder-wrapper>
    <div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
      <div style="padding-top:{% unless product.featured_image == blank %}{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100 }}%{% else %}100%{% endunless %};">
        <img id="{{ img_id }}"
              class="grid-view-item__image lazyload"
              alt="{{ variant.image.alt }}"
              data-src="{{ img_url }}"
              data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
              data-aspectratio="{{ product.featured_image.aspect_ratio }}"
              data-sizes="auto"
              data-image>
      </div>
    </div>
    <div class="placeholder-background placeholder-background--animation" data-image-placeholder></div>
  </div>

  <noscript>
    {% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
    <img class="grid-view-item__image" src="{{ variant.image.src | img_url: image_size, scale: 2 }}" alt="{{ product.featured_image.alt }}" style="max-width: {{ max_height | times: product.featured_image.aspect_ratio }}px;">
  </noscript>

  <div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }} - {{variant[product_option_key]}}</div>

  {% include 'product-price', variant %}

</div>

 

  • In the Snippet directory, create another file named variant-card-list.liquid and add the following code, this file will responsible for list view:
<div class="product-card product-card--list" data-product-card>
  <a class="full-width-link" href="{{ variant.url | within: collection }}">
    <span class="visually-hidden">{{ product.title }} - {{variant[product_option_key]}}</span>
  </a>

  <div class="list-view-item__link">
    <div class="list-view-item__image-column">
      <div class="list-view-item__image-wrapper product-card__image-wrapper">
        <img class="list-view-item__image" src="{{ variant.image.src | img_url: '95x95', scale: 2 }}" alt="{{ product.featured_image.alt }}">
      </div>
    </div>

    <div class="list-view-item__title-column">
      <div class="list-view-item__title" aria-hidden="true">
        <span class="product-card__title">{{ product.title }} - {{variant[product_option_key]}}</span>
      </div>
      {% if variant.compare_at_price > variant.price %}
        <div class="list-view-item__on-sale">{{ 'products.product.on_sale' | t }}</div>
      {% endif %}
      {% if section.settings.show_vendor %}
        <div class="list-view-item__vendor medium-up--hide">{{ product.vendor }}</div>
      {% endif %}
      {% unless variant.available %}
        <div class="list-view-item__sold-out">{{ 'products.product.sold_out' | t }}</div>
      {% endunless %}
    </div>

    <div class="list-view-item__price-column">
      {% if product.available %}
        {% include 'product-price', variant %}
      {% endif %}
    </div>
  </div>
</div>

 

  • In the Templates directory, create a new file named collections.variant.liquid and add the following code :
{% section 'collection-variant-template' %}

 

  • Congrats, You’ve completed the coding parts.
  • Go to products>collections choose your specific collection where you want to enable this feature and set the collection template to collection.variant.
  • Now it’s available in Themes>customization>collection pages page section settings.

Congrats, You’ve completed this feature. Check the collection page which you’ve configured

cart search