Showing Fields from Products on Collection Pages
Overview
In this advanced guide, we'll show you an example of how to add Custom Fields from a product to the product's listing on a collection page.
It's common to want to display extra information about a product on collection pages. For example, you might want to show just one important attribute of a product along with the title, image, and price of the product.
Conceptually, this can be a confusing topic. Adding a field to Collections isn't what you want in this case since you actually want to show product information. Adding a field to the Collection, in this case, would not solve the issue, since Collections custom fields are designed to add fields to the collection itself.
Please note this is a general guide, showing key principles. You'll need to adapt it for your fields and Shopify theme.
1.) Create a new Product Field
Create a new product field that will have values for separate fields. This field could be a shipping information field or even a sale on different items! If you don't want it to appear on the product page by default, check the box that says Exclude from Display.
2.) Copy the Snippet from the Edit Code Section
After you click Create New Text Field, you will be brought to the Edit Code Section, copy the print statement from the code.
3.) Go to the collection.liquid template in your Shopify theme.
Your theme's collection.liquid may look different. If it has a statement like {% section 'collection-template' %} just go to this file instead.
4.) Open the collection-template.liquid section.
Use the search tool in the left sidebar to narrow your results by searching for “collection”.
5.) Search for the product keyword.
In your collections "Section" search for the word product. Press Ctrt+F (for Windows) or Command+F (for Mac) and type “product”.
This part might be somewhat tricky. All themes are different. Find one of the three in this list:
{% include 'product-listing' %}{% include 'product-card-grid', max_height: max_height %}{% include 'product-card-list', product: product %}
Each of these templates do different things. In this example we will go into the product-card-grid snippet because that's where we want our fields to appear.
Tip: An easy way to sort out which template you want to use is to simply add a little text to each template and look for it on your collection page.
Note, these templates may be used in other places in your store, for example, on your homepage. You may wish to add conditional logic to only show your field when on a collection. That logic is out of scope for this tutorial.
The screenshot below shows how this would work with {% include 'product-card-grid' %}
6.) Paste in the snippet from Step 1.
Once you know where you want the field. Paste the snippet from Custom Fields into the theme code. In this example we placed our code right before the price. Now if any product has a value in our field, it will show above that products price in the Collections page.
7.) Save and Test.
Hit the save button and refresh your collections page in the store. You should now see the value of your field being printed on your test product on your collection page.
