How to show vendor name on collection pages in Shopify?

Information about the supplier (vendor) of the product may be useful to the buyer. And if in most cases the Shopify theme has the ability to display their names on the product page, then on the collection page it is not possible to show the vendor only using the theme settings in all Shopify stores. For example, there is no such option in the free Shopify theme Supply.

But don't despair. You can display vendor names using standard Shopify tools - with just one line of Liquid code (Liquid is the Shopify store template language, more details):

{{ product.vendor }}

The only difficulty that can arise is understanding where exactly this line should be placed in the code of your theme.

For example, in the Supply theme, the vendor name can be displayed right above the product name. To do this, follow these instructions:

1. In the administrative panel of your store, go to the Themes subsection of the Online store section:

   

2. Open the theme editor by clicking the Edit code link, which is located in the Actions drop-down list:

   

3. In the theme editor, in the left sidebar, expand the Snippets section:

   

4. In the Snippets section, find the product-grid-item.liquid file and click on it:

   

5. In the opened file, find the line of code <p>{{ product.title }}</p>:

   

6. Before this line, place the code <div>{{ product.vendor }}</div>:

   

7. If necessary, add styling to the element using the HTML style parameter:

   

8. After that, the collection page of your online store should display the vendor of each product: