Categories
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}}

Note

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:

all_products["product-handle"].handle
all_products["product-handle"].tags
all_products["product-handle"].template_suffix
all_products["product-handle"].title
all_products["product-handle"].type
all_products["product-handle"].url
all_products["product-handle"].variants
all_products["product-handle"].vendor
all_products["product-handle"].id
all_products["product-handle"].featured_image
all_products["product-handle"].images
all_products["product-handle"].image
all_products["product-handle"].available
all_products["product-handle"].collections
all_products["product-handle"].compare_at_price_max
all_products["product-handle"].compare_at_price_min
all_products["product-handle"].compare_at_price_varies
all_products["product-handle"].content
all_products["product-handle"].description
all_products["product-handle"].first_available_variant
all_products["product-handle"].options
all_products["product-handle"].price
all_products["product-handle"].price_max
all_products["product-handle"].price_min
all_products["product-handle"].price_varies
all_products["product-handle"].selected_variant
all_products["product-handle"].selected_or_first_available_variant

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

Categories
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 -%}
  <ul>
    {%- 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 -%}
  </ul>
{%- endif -%}

Also look at the post Create customizable products

Categories
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]">
</div>

Radio Buttons

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

Checkboxes

<div class="line-item-property__field">
   <label>Optional features</label>
   <div>
     <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>
   </div>
   <div>
     <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>
   </div>
   <div>
     <input required class="required" type="checkbox" id="Feature3" hidden-data="Optional-Features" onchange="fillHidden('Optional-Features')" value="Feature3">
     <span for="Feature3"> Feature3</span>
   </div>
   <input type="hidden" id="Optional-Features" name="properties[Optional Features]">
   <script>
    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];
      if(x.checked){
        if(hiddenfield.value==""){
          hiddenfield.value = x.value;
          }else{
          hiddenfield.value = hiddenfield.value + ", " + x.value; 
          } 
        }
      }
    }
  </script>
</div>

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>
   </select>
</div>

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]">
</div>

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 = item.properties | size %}
{% if property_size > 0 %}
{% for p in item.properties %}
{% 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 %}
<br>
{% 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.