Skip to content

  • Home
  • About Us
  • Add-ons
  • Services
    • Shopify Development Services
    • Shopify Maintenance services
    • Shopify PageSpeed Optimization
    • Shopify Training
    • Shopify App Development
    • Shopify App Integration Services
    • Shopify Email Marketing
    • Shopify Web Design Agency
  • Blog
  • Contact Us
  • Search button

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

Jun 10, 2022May 1, 2023
Show color variants

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.

Color variants can be displayed as separate products on the collection page by Shopify. Customers will be able to more easily see and compare the various colors available as a result of this. This feature will make it easier for customers to find the color they want, which could lead to an increase in sales.

Displaying variations with different values for selected options You can specify options, and the Variable Product will only display variations with different values of those options. Using variable apps, you can display variants on the Collections page, just like you would on the featured collections. Variable shopify development apps enable you to divide products into groups and display variations on collection pages.   

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:
    • collection-variant-template.liquid
  • In the Snippet directory, create a new file named variant-card-grid.liquid and add the following code
[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>
[/code]
  • In the Snippet directory, create another file named variant-card-list.liquid and add the following code, this file will responsible for list view:
[code]
<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>
[/code]
  • 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

Frequently Asked Questions:

How do I display color variants on Shopify’s collection page?

To do so, navigate to Customize Theme > Colors and select the desired color swatch. Then, navigate to Collection Pages > Product Grid and enable Color Swatches. A Shopify App Store app can also be used to display color swatches.

On Shopify, how do I display colors?

Navigate to Online Store > Themes from your Shopify admin. Locate the theme you want to change, then go to Actions > Edit code. Click the Snippets heading on the left side to reveal your Snippets content. Give your new snippet the name’ swatch.’

How do I customize my Shopify collections?

In the Shopify app, go to Products > Collections. Change the conditions of the collection by tapping it. Click the pencil icon to edit the collection. Change the selection conditions in the Conditions section if necessary.

On Shopify collections, how do I display product tags?

Click Products, Transfers, Customers, Blog Posts, or Draft Orders in your Shopify admin. Examine the product, transfer, customer, blog post, or draught order to which you want to apply a tag. Tags can be added or removed by clicking Add tags or Remove tags. Select the tags you want to add or remove by clicking on them.

In Shopify, how do I see variants?

A product’s variants are listed on the product details page. The Inventory page also allows you to manage inventory for each variant. If you want to save specialized information for your variants, you can use Metafields to add custom fields to your variant details pages.

Posted in Shopify Tutorials

Post navigation

Prev How to Add a Featured Collections Page to Your Shopify Store
Next Add a size chart to product pages

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Latest Posts

  • Detailed Guide To Easily Accept Crypto Payments On Shopify
    Detailed Guide To Easily Accept Crypto Payments On ShopifyMay 23, 2023
  • How to Get Shopify Certification? -A Quick GuideMay 16, 2023
  • Shopify commerce components
    What Are Shopify Commerce Components & How to Use Them?May 9, 2023
  • shopify-marketing-automation
    The 2023 Top Automation Apps for Shopify MarketingApr 28, 2023

Subscribe Now

Follow Us

  • facebook
  • twitter
  • instagram
  • linkedin2

OriginateWeb.com is the realization of a dream. Our founder previously spent several years working for a large website development company.

Quick Links

  • Shopify Services
  • About Us
  • Shopify Theme Add-ons
  • Blog
  • Contact Us
  • Careers

Services

  • Shopify Theme Add-ons
  • Website Development
  • Page Speed Optimization
  • App Development
  • Maintenance
  • Training

Need Help?

  • Licensing Agreement
  • Terms and Conditions
  • Privacy Policy
  • Sitemap
  • facebook
  • twitter
  • instagram
  • linkedin2

© 2023 Originate Web. All Rights Reserved