<!-- wp:paragraph -->
<p>In the Shopify Debut Theme, default there is no product variant shown up in the product collection product grid view which means if users want to see the product variants they need to a product detail page. It will take users one more step to get what they want, from a user experience point of view it is not an effective and good way.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Thanks for the Shopify <a href="https://shopify.dev/api/liquid/objects/product">product object </a>which we can use to get the product variants data, then we can show them on whatever page we want.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Lets take <a href="https://themes.shopify.com/themes/debut/styles/default">Shopfiy Debut Theme </a> as an example. </p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Edit Collection liquid file</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Open collection template file at:<br><strong>Edit Code</strong> -> <strong>Sections</strong> -> <strong>collection.liquid</strong><br>Go to line 30( just for initial Debut Theme without any plugins installed and modifications) otherwise try to search for "<strong>product-card-grid</strong>"</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Then copy the following lines and paste just after that</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock -->
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">{%- if product.first_available_variant.title != "Default Title" -%}
        &lt;select name="id" class="single-option-selector single-option-selector-product-template product-form__input">
           {% for variant in product.variants %}
           &lt;option value="{{ variant.id }}" data-image="{{ variant.image | img_url : '360x' }}"
                   {%- if variant == current_variant %} selected="selected" {%- endif -%}
                   >
             {{ variant.title }}  {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
                      &lt;/option>
           {% endfor %}        
    	&lt;/select>
        {%- endif -%}</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p><strong>Line 1 :</strong> just ignore the product without any variants, in the Shopify backend even you do not set any variant it still need to create a default variant for the product in order to manage the inventory of the product, in this case Shopify default product variant's name will be set as  'Default Title'. so here we use IF statement check product first available variant's title to ignore them.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Line 2-10 :</strong> just show the product variants data with SELECT element.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Once you done the above, your collection-template.liquid file will like this:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":366,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-collection-1024x410.png" alt="" class="wp-image-366"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Save you file, go to home page have a look at the featured collection products you will see :</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->