shopify product types

shopify product types and collect is used to distinguish products. If your store contain lots od products, product type is used as a criterion in filtering products. Filtering products help customers to know if their favorite products are in stock or not.

Input product type

When creating product information, shopify product types can be inputted manually or getting information entered before by clicking on dropdown button as below

shopify product types

Display list off the unique shopifyproduct types

To display the list of product types, you could use the following code:

{% for product_type in shop.types %}
{{ product_type | link_to_type }}
{% endfor %}

You can refer to this link https://help.shopify.com/en/themes/liquid/objects/shop for more information.

Filter products by product type

Being different from other source codes, Shopify does not allow user as well as developers to intervene in the source code. Therefore, we cannot directly filter products by product type but use the product tag. The core of this method is filtering products by tag. And for each product, we have to add one tag which is the same as the product type.

Get to Product of Shopify, add one product tag which is the same as the product type. You should take a look at the figure below to understand more. This product has the product type “Coat” so we add the tag “Coat”. Similarly, we add tags for the rest products.

shopify product types

Get to collection-template.liquid file to add the code below

<!--add-->
<div style="float:left">
<h2>Filter by product type</h2>
<ul class="filter-list filter-text">
{% for product_type in collection.all_types %}
{% assign product_type_tag = product_type | handle %}
{% if product_type_tag != '' %}
{% if collection.all_tags contains product_type or collection.tags contains product_type %}
<li>
<a href="{{ product_type | handle }}">{{product_type}}</a>
</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
</div>
<!----end add-->

In the debut theme, we have tested and add at line 143 at the moment. In the real project, you should customize or find the most suitable place to add.

shopify product types

Here is the result in front end.

shopify product types

You have read the article shopify product types and its application in filtering products. However, this article just guides you on filtering product by type. In the next article, we will introduce more product filter criteria. If you do not want to edit code, you could use Product filter app. This app has many criteria to filter. You do need to input them manually. This app will save your time and effort with drag and drop feature.

If you have any question, please let us know. We will help you solve your problem.

Leave a Reply

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