Show variants as separate products on collection page

Highlighted
Tourist
6 0 1

Hi Florian,

I don't have a product-listing.liquid file in my theme.  I'm using the Kingdom theme.  Any ideas where I should be making these changes?  I'm able to see the product variant containers, but not their images.  See: https://city-raised.com/collections/all-products

Here is how it looks on my collection.liquid file:

<div id="products-grid" class="isotope-products border-{{settings.collections_border }}
                               
    {% if settings.collection_show_description != false and collection.image %} no-loader{% endif %}">
        
          {% for product in collection.products %}
  
           {% for variant in product.variants %}  

            {% include 'collection_item' %}
        
              {% else %}
                <p class="no-content-message">{{ 'products.grid.no_products_text' | t }}</p>
  {% endfor %}
        {% endfor %}
    </div>

0 Likes
Highlighted
New Member
2 0 0

Hi There Guys,

I have followed the steps but my theme doesnt seem to have the liquid files. I am using the New Standard theme and i am trying to show my variants as individual products in the collections. Any help on this would be great!

Thanks

Brent

0 Likes
Highlighted
Shopify Partner
41 0 3

Hi,

For Kindgdom, only modifying the collection.liquid is enough :). 

Flo

0 Likes
Highlighted
New Member
2 0 0

Hi Florian,

You able to help guide me at all?

Regards,

Brent

0 Likes
Highlighted
Shopify Partner
41 0 3

Brent,

Every theme as liquid files, otherwise they would not work. Look at line 56 of the collection.liquid. 

To edit html, go to the ... icon left of the theme preview.

 

0 Likes
Highlighted
Shopify Partner
21 0 2

I swear if someone would just make an app that does this, they would make bank. So many people need this.

0 Likes
Highlighted
Shopify Partner
11 0 0

Hello,
you can use this app to show your products variants in your collections. In app configuration you can also set “add to cart” button to show for each product in collections.

0 Likes
Highlighted
New Member
1 0 0

hi there kyle could you please take a look at my product-grid-item.liquid

i want to show color variants on collection page and when you click it, it will redirects to real product listing with variants.  

i was looking for plugins that can do this but i couldn't find any. 

 

{% unless grid_item_width %}
  {%- assign grid_item_width = 'medium-up--one-quarter small--one-half' -%}
{% endunless %}

{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
  {%- assign on_sale = true -%}
{% endif %}

{%- assign sold_out = true -%}
{% if product.available %}
  {%- assign sold_out = false -%}
{% endif %}

<div class="grid__item grid-product {{ grid_item_width }}{% if settings.quick_shop_enable and sold_out == false %} grid-product__has-quick-shop{% endif %}" data-aos="row-of-{{ per_row }}">
  <div class="grid-product__content">
    {% if sold_out %}
      <div class="grid-product__tag">
        {{ 'products.product.sold_out' | t }}
      </div>
    {% endif %}
    {% if on_sale and sold_out == false %}
      {% if settings.product_save_amount %}
        <div class="grid-product__tag">
          {% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money }}{% endcapture %}
          {{ 'products.general.save_html' | t: saved_amount: saved_amount }}
        </div>
      {% endif %}
    {% endif %}
    {% if settings.quick_shop_enable and sold_out == false %}
      <div class="quick-product__btn js-modal-open-quick-modal-{{ product.id }} small--hide" data-product-id="{{ product.id }}">
        <span class="quick-product__label">{{ settings.quick_shop_text }}</span>
      </div>
    {% endif %}

    {%- assign fixed_aspect_ratio = false -%}
    {% unless settings.product_grid_image_size == 'natural' %}
      {%- assign fixed_aspect_ratio = true -%}
    {% endunless %}

    <a href="{{ product.url | within: collection }}" class="grid-product__link {% if sold_out %} grid-product__link--disabled{% endif %}">
      <div class="grid-product__image-mask">
        {% if fixed_aspect_ratio %}
          <div
            class="grid__image-ratio grid__image-ratio--{{ settings.product_grid_image_size }} lazyload"
            data-bgset="{% include 'bgset', image: product.featured_image %}"
            data-sizes="auto">
          </div>
        {% else %}
          <div class="image-wrap"
            style="height: 0; padding-bottom: {{ 100 | divided_by: product.featured_image.aspect_ratio }}%;"
            >
            {%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            <img class="grid-product__image lazyload"
                data-src="{{ img_url }}"
                data-widths="[180, 360, 540, 720, 900, 1080]"
                data-aspectratio="{{ product.featured_image.aspect_ratio }}"
                data-sizes="auto"
                alt="{{ product.featured_image.alt | escape }}">
            <noscript>
              <img class="grid-product__image lazyloaded"
                src="{{ product.featured_image | img_url: '400x' }}"
                alt="{{ product.featured_image.alt | escape }}">
            </noscript>
          </div>
        {% endif %}

        {% unless sold_out %}
          {% if settings.product_hover_image and product.images.size > 1 %}
            {% for image in product.images offset: 1 limit: 1 %}
              {%- assign second_image = image -%}
            {% endfor %}
            <div
              class="grid-product__secondary-image small--hide lazyload"
              data-bgset="{% include 'bgset', image: second_image %}"
              data-sizes="auto">
            </div>
          {% endif %}
        {% endunless %}
      </div>

      <div class="grid-product__meta">
        <div class="grid-product__title">{{ product.title }}</div>
        {% if settings.vendor_enable %}
        <span class="stamped-product-reviews-badge stamped-main-badge" data-id="{{ product.id }}" data-product-sku="{{ product.handle }}" style="display: inline-block;">{{ product.metafields.stamped.badge }}</span>
          <div class="grid-product__vendor">{{ product.vendor }}</div>
        {% endif %}
        <div class="grid-product__price">
          {% if on_sale %}
            <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
            <span class="grid-product__price--original">{{ product.compare_at_price | money }}</span>
            <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
          {% endif %}
          {% if product.price_varies %}
            {% assign price = product.price_min | money %}
            {{ 'products.general.from_text_html' | t: price: price }}
          {% else %}
            {{ product.price  | money }}
          {% endif %}
        </div>
          <div class="loox-rating" data-id="{{ product.id }}" data-rating="{{ product.metafields.loox.avg_rating }}" data-raters="{{ product.metafields.loox.num_reviews }}"></div>
        {% if settings.enable_product_reviews %}      
          <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
        {% endif %}
      </div>
    </a>
    {% if settings.collection_color_swatches %}
      {%- assign swatch_file_extension = 'png' -%}

      {% for option in product.options_with_values %}
        {%- assign option_name = option.name | downcase -%}
        {% if option_name contains 'color' or option_name contains 'colour' %}
          {%- assign option_index = forloop.index0 -%}
          {%- assign values = '' -%}
          <div class="grid-product__colors">
            {% for variant in product.variants %}
              {%- assign value = variant.options[option_index] %}
              {% unless values contains value %}
                {%- assign values = values | join: ',' %}
                {%- assign values = values | append: ',' | append: value %}
                {%- assign values = values | split: ',' %}

                {%- assign color_image = value | handle | append: '.' | append: swatch_file_extension | asset_img_url: '50x' | prepend: 'https:' | split: '?' | first -%}
                {%- assign color_swatch_fallback = value | split: ' ' | last | handle -%}

                <a
                  href="{{ variant.url | within: collection }}"
                  class="color-swatch"
                  style="background-image: url({{ color_image }}); background-color: {{ color_swatch_fallback }};">
                </a>
              {% endunless %}
             {% endfor %}
          </div>
        {% endif %}
      {% endfor %}
    {% endif %}
  </div>
</div>
0 Likes
Highlighted
Tourist
10 0 1

Hi,
 
It's an old thread but probably many merchants are still asking the same question about listing product variants on collection pages. We have recently developed an app which allows to list variants as separate products on collection pages. Here is a link: https://apps.shopify.com/show-variants-on-collection-page . With the app you can automatically show all available variants or select variants to be displayed per collection.
 
Here is a link to our demo store if you would like to see the app in action.

 

0 Likes
Highlighted
Tourist
3 0 0

Hi Kyle,

I have used your code and its working fine. My only concern is, now all the variant products are displaying at the same place. I want to display them randomly on collection pages. Could you please let me know is there any way to display the same variant products at different places? 

https://prnt.sc/qci9et

 

Thanks.

0 Likes