How to Use all_products in a Shopify Theme
For this week’s advanced Liquid Shopify tutorial, we’ll be looking at a way to access product information without having to loop over a collection or be on a product detail page.
We can achieve this by using all_products. Here’s a quick example:
1 | {{ all_products["coffee-cup"].title }} |
Let’s have a look at what’s happening. The syntax is pretty simple: all_products takes a quoted product handle as it’s argument.
Liquid Handles
If you aren’t familiar with handles, the Shopify docs provide a great explanation:
The handle is used to access the attributes of a Liquid object. By default, it is the object’s title in lowercase with any spaces and special characters replaced by hyphens (-). Every object in Liquid (product, collection, blog, menu) has a handle. For example, a page with the title “About Us” can be accessed in Liquid via its handle “about-us”.
In the above example, we have a handle of coffee-cup which represents the product available at yourstore.com/products/coffee. We follow that by .title. When rendered, this will output the title of the product with the handle of coffee-cup.
Using all_products we can access any property of the product:
all_products[“coffee-cup”].available
all_products[“coffee-cup”].collections
all_products[“coffee-cup”].compare_at_price_max
all_products[“coffee-cup”].compare_at_price_min
all_products[“coffee-cup”].compare_at_price_varies
all_products[“coffee-cup”].content
all_products[“coffee-cup”].description
all_products[“coffee-cup”].featured_image
all_products[“coffee-cup”].first_available_variant
all_products[“coffee-cup”].handle
all_products[“coffee-cup”].id
all_products[“coffee-cup”].images
all_products[“coffee-cup”].image
all_products[“coffee-cup”].options
all_products[“coffee-cup”].price
all_products[“coffee-cup”].price_max
all_products[“coffee-cup”].price_min
all_products[“coffee-cup”].price_varies
all_products[“coffee-cup”].selected_variant
all_products[“coffee-cup”].selected_or_first_available_variant
all_products[“coffee-cup”].tags
all_products[“coffee-cup”].template_suffix
all_products[“coffee-cup”].title
all_products[“coffee-cup”].type
all_products[“coffee-cup”].url
all_products[“coffee-cup”].variants
all_products[“coffee-cup”].vendor
Note that some of the returned values will be a Liquid collection and because of this would need to be “looped” over. Let’s use the images collection as an example:
1 2 3 | {% for image in all_products["coffee-cup"].images %} <img src="{{ image.src | img_url: 'grande' }}" /> {% endfor %} |
This example would output all of the images associated with the coffee-cup product.
More than one handle
You can go one step further and create a simple Liquid array of handles that you can use to output specific products. Here’s an example:
1 2 3 4 5 6 | {% assign favourites = "hand-made-coffee-tamper|edible-coffee-cup" | split: "|" %} <ul> {% for product in favourites %} <li>{{ all_products[product].title }}<li> {% endfor %} </ul> |
Using the Liquid assign tag, we create a new variable called favourites, which are product handles separated by a | character. The | is used as a delimiter to divide the string into an array that we can loop over using for.
We now have access to both products in turn and can output any property associated with it — in the example above I simply display the title.
When to use all_products
all_products is a great option when you need to pull out a couple of products in a particular template. Of course, if you are outputting a lot of products, a collection is still the best way forward — principally as you won’t have to manually know all the different product handles. However, all_products makes a great option when you have need of outputting a single, or small number of products, that won’t change frequently.
Via Shopify
