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.liquidand 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.liquidand 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.liquidand add the following code :
{% section 'collection-variant-template' %}- Congrats, You’ve completed the coding parts.
- Go to
products>collectionschoose your specific collection where you want to enable this feature and set the collection template tocollection.variant. - Now it’s available in
Themes>customization>collection pagespage 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.