Vendor: Show vendor on collection grid view
Note:
Modifying the theme code will make it difficult to update your theme. Use this code at your own risk. Groupthought does not provide any warranty or further support for this code. The code provided is only a suggestion. Please work with a developer or Shopify Expert to ensure proper customization. This code may not work with all versions of of Pipeline or with other code customizations and apps you may have installed. We strongly recommend that you make duplicate of your theme before adding or changing any code in your theme.
To show the vendor/brand name on a collection grid page, you can make this code customization.
Result:
Vendor or brand name above the product name.
How to:
Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.
Make a duplicate before any code changes:
Next, open the Code Editor:
From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:
Example if you're working from your main live/published theme:
Quick link if the theme is live/published:
Open Code Editor
- 1
-
Edit snippets/product-grid-item.liquid
Open your code editor and edit the snippets/product-grid-item.liquid file:
If Pipeline is published you can use this link to open the file:
snippets/product-grid-item.liquid
Around line 66 depending on which version of Pipeline you're using:
Use the In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for product.title (1):
product.title
Once you've located the right line (2):
In Pipeline 4 and higher, you'll find the line lower near line 92:
Replace:
{{ product.title }}
With:
<span class="collection-vendor">{{ product.vendor }}</span><br>{{ product.title }}
Example after:
Or
Example after on Pipeline 4 and higher:
Save the changes.
- 2
-
Optional: Add CSS to change how the vendor title is displayed
Example if you want the vendor title in bold:
/* -- code to style collection-vendor text -- */
.collection-vendor { font-weight:bold;}
/* - end - */
That will result in bold text for the vendor:
Example if you want to modify the size, font-family and/or color here as well:
/* -- code to style collection-vendor text -- */
.collection-vendor { font-weight:bold; font-size: 1.1em; font-family: fantasy; color: #555555;}
/* - end - */
Where to add the style code:
Use this link to learn where exactly to add this code snippet: