How to show variants as separate products on the collection page on Shopify

Store Design
1

Hello,
how can i show variants in collection page as a separate products?
Like this one: https://iloverunninghu.myshopify.com/products/compressport-pro-racing-socks-v3-0-bike-kerekparos-zokni-t2

https://iloverunninghu.myshopify.com/
PW: theock

4

Hi @Bzky,

Go to Online store > edit code > in section folder goto main-collection-product-grid.liquid > paste this code

 {% assign skip_card_product_styles = false %}

              {%- for product in collection.products -%}

                {%- for variant in product.variants -%}

                  <li class="grid__item">

                    {% render 'card-product',

                      card_product: product,

                     card_variant: variant

                      media_aspect_ratio: section.settings.image_ratio,

                      image_shape: section.settings.image_shape,

                      show_secondary_image: section.settings.show_secondary_image,

                      show_vendor: section.settings.show_vendor,

                      show_rating: section.settings.show_rating,

                      lazy_load: true,

                      skip_styles: skip_card_product_styles,

                      quick_add: section.settings.quick_add,

                      section_id: section.id

                    %}

                  </li>

                  {%- assign skip_card_product_styles = true -%}

                {%- endfor -%}

              {%- endfor -%}

Next Steps:

Go to card-product.liquid and change card-product.url to this

{{ variant.url | default: card_product.url }}

Change {{ card_product.title }} to this

  {{ card_product.title }} - {{ card_variant.title }}

In the top of  card-product.liquid file paste this
{%- liquid

  assign card_variant = card_variant | default: nil

-%}