How to show product variant under product title in the Debut theme

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.

Thanks for the Shopify product object which we can use to get the product variants data, then we can show them on whatever page we want.

Lets take Shopfiy Debut Theme as an example.

Edit Collection Liquid File

Open collection file at:
Edit Code -> Sections -> collection.liquid
Go to line 30( just for initial Debut Theme without any plugins installed and modifications) otherwise try to search for “product-card-grid

Then copy the following lines and paste just after that

{%- if product.first_available_variant.title != "Default Title" -%}
        <select name="id" class="single-option-selector single-option-selector-product-template product-form__input">
           {% for variant in product.variants %}
           <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 %}
                      </option>
           {% endfor %}        
    	</select>
        {%- endif -%}

Line 1 : 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.

Line 2-10 : just show the product variants data with SELECT element.

Once you done the above, your collection-template.liquid file will like this:

Save the file, go to your store home page have a look at the featured collection products you will see :

Edito Collection Template Liquid File

Open collection template file at:
Edit Code -> Sections -> collection-template.liquid
Go to line 143( just for initial Debut Theme without any plugins installed and modifications) otherwise try to search for “product-card-grid

Copy the above lines at just after that. Once you done your codes will like this:

Now your collection page looks like this:

TIPS

You might want to add [Add to Cart] button or link to the product grid list as well, please refer to :
Quick Add to Cart button on Collection Product for Debut theme Home and Collection

Please follow and like us:

You may also like...

Leave a Reply

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