Product Page Shopify Tech

Use all_products in a Shopify Theme

In this liquid Shopify post, we’ll be looking at a way to access product information using all_products. Here’s a quick example:

{{ all_products["product-handle"].id}}


all_products uses product handle as its arguement. While creating the product the handle is created automatically, but if the product title changed the handle is not updated automatically it needs to be changed and do the changes wherever neccessary.

By using all_products one can access any product related property:


When to use all_products

all_products makes a great option when you have need of outputting a single, or small number of products, that won’t frequently change.

You can explore more by going through this article in detail

Product Page Shopify Tech

Add 3 or more specific related products to a product page using only Liquid

We’ll be looking at a way to access product information for adding specific related products on a product detail page. 

We can achieve this by using all_products

Let us have a quick look at what’s happening. the syntax is pretty simple, all_products takes product handle as its arguement.

For this week’s Liquid Shopify tutorial, we’ll be looking at a way to access product information using all_products and metafields to add specific related products.

EXAMPLE for related products.

The logic for this code is pretty simple

  • get the metafield
  • split the metafield value
  • loop the array
  • use all_products to reference a product, and show title on the page.
{%- comment -%}
  Grab product handles from metafield.
  Loop the handles, showing the product title.
  The metafields fields value to be stored:
  Namespace: related
  Key: products
  Value: (comma separated String value)
{%- endcomment -%}

{%- if product.metafields.related.products != blank -%}
    {%- assign relatedProductArray = product.metafields.related.products | split:',' -%}
    {%- for relatedProductValue in relatedProductArray -%}
    {%- assign b = all_products[relatedProductValue] -%}
    <li><a href="/products/{{ relatedProductValue }}">{{ b.title }}</a></li>
    {%- endfor -%}
{%- endif -%}

Also look at the post Create customizable products

Cart Product Page Shopify Tech

Create customizable products/add 1 or more custom fields in Shopify without an app

Sometimes you need to let your customers customize a product before checkout on your Shopify store by adding custom fields. For instance, you offer monograms, or you need to let them choose from other custom options.

There are apps that can do this, but they are mostly expensive and they bloat your store by adding extra scripts and slows down your site.

Fortunately, a lot you can do to offer customized products without paying for an app or hiring a developer. Plus, these methods only requires a tiny amount of code (no JavaScript), so your site doesn’t get unnecessarily slowed down.

Steps for the Custom fields

Below is the example of the types of custom product options you can set up. You can create any combination of the options shown below, including text inputs (small or large text areas), checkboxes, file uploads, drop-down selects, and radio buttons.

Custom Fields
View live demo →

1. Create a new product template

In your Shopify Dashboard, go to Online Store > Themes > … > Edit HTML/CSS.

Create customizable products/add 1 or more custom fields in Shopify without an app 7

In the Templates section, click “Add a new template.”

Create customizable products/add 1 or more custom fields in Shopify without an app 9

In the window that appears, choose product from the template & name it ‘ custom ‘.

Create customizable products/add 1 or more custom fields in Shopify without an app 11

Click on the Create template button.

After this, go to products from the dashboard, open particular product you want to customize & choose template ‘ custom from right bottom side of the product dashboard.

Create customizable products/add 1 or more custom fields in Shopify without an app 13

Note: if your theme uses section instead of creating a product template create the section template and the functionality will still work the same

2. Add code for the form fields

Now the question arises where to add the code? Well the code need o be inside the form tag

You can add the code wherever you want the fields to appear on the site. I recommend adding it above the quantity field.

In some themes, you’ll not find the form in the template file, you can find it in the snippets section and look for a Snippet called “product-form,”

In the themes which works on sections, check in the Section titled “product-template.liquid”.

Create customizable products/add 1 or more custom fields in Shopify without an app 15
For the Themes which uses section

You can add the custom fields code just above the highlighted text below

Create customizable products/add 1 or more custom fields in Shopify without an app 17

add the following code:

{% if template contains 'custom-1' %}

[replace this with your custom fields]

{% endif %}

Small Text

<div class="line-item-property__field">
  <label for="customize-text">Customize Text</label>
  <input id="customize-text" type="text" name="properties[Customize Text]">

Radio Buttons

<div class="line-item-property__field">
    <label>Choose an option</label>
      <input required class="required" type="radio" name="properties[Choose an option]" value="Option 1"> 
      <span>Option 1</span>
      <input required class="required" type="radio" name="properties[Choose an option]" value="Option 2">
      <span>Option 2</span>
      <input required class="required" type="radio" name="properties[Choose an option]" value="Option 3">
      <span>Option 3</span></div>

Large Text(Custom Message)

<div class="line-item-property__field">
   <label for="custom-message">Custom Message</label>
   <textarea required class="required" id="custom-message" name="properties[Custom Message]">


<div class="line-item-property__field">
   <label>Optional features</label>
     <input required class="required" type="checkbox" id="Feature-1" hidden-data="Optional-Features" onchange="fillHidden('Optional-Features')" value="Feature 1">
     <span for="Feature-1"> Feature 1</span>
     <input required class="required" type="checkbox" id="Feature-2" hidden-data="Optional-Features" onchange="fillHidden('Optional-Features')" value="Feature 2">
     <span for="Feature-2"> Feature 2</span>
     <input required class="required" type="checkbox" id="Feature3" hidden-data="Optional-Features" onchange="fillHidden('Optional-Features')" value="Feature3">
     <span for="Feature3"> Feature3</span>
   <input type="hidden" id="Optional-Features" name="properties[Optional Features]">
    function fillHidden(hiddenname) {
    var checkboxes = document.querySelectorAll('[hidden-data="'+hiddenname+'"]');
    var hiddenfield = document.getElementById(hiddenname);
    hiddenfield.value = ""
    var i;
    for (i = 0; i < checkboxes.length; i++) {
      var x = checkboxes[i];
          hiddenfield.value = x.value;
          hiddenfield.value = hiddenfield.value + ", " + x.value; 

Dropdown select

<div class="line-item-property__field" style="margin: 0 0 20px;">
   <label>Choose an Option</label>
   <select required class="required" id="choose-an-option" name="properties[Choose an Option]">
     <option value="Option 1">Option 1</option>
     <option value="Option 2">Option 2</option>
     <option value="Option 3">Option 3</option>

File upload

<div class="line-item-property__field">
  <label for="custom_photo">Photo (JPG or PNG)</label>
  <input required id="custom_photo" type="file" name="properties[Photo]">

Note: Kindly note that the file upload will not work if the cart is of drawer functionality / popup (ajax) cart update.

Customize cart to show the custom options

Some themes already have the necessary code present on the cart page to show the line item properties. To check and see if your theme already have this, just try adding the product in cart which has the line-item properties if the data is shown, then its already present.

if its not then next step is waiting for you 🙂

1) In your Theme Editor, open the cart.liquid template.

2) Find the code {{ item.product.title }}. Just below it, add the following code:

{% assign property_size = | size %}
{% if property_size > 0 %}
{% for p in %}
{% unless p.last == blank %}
{{ p.first }}:
{% if p.last contains '/uploads/' %}
<a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}
{% endunless %}
{% endfor %}
{% endif %}

Voila its done, Now you can test the baby out!

Incase of any query do comment down below, will surely get back to your queries if any.