11 Easy-to-Learn Tips For Using Liquid (Shopify's Template Language): Vision Infotech

1. Grant Eagon – Bongo Themes

Sometimes you have to hot-fix a live site, but you don’t want to mess up the site for users. Just dump your data out inside a hidden div to see what’s going on.

2. Charlie Friedemann – Conjectural Technologies

It’s an implementation of search autocomplete using Liquid and Javascript, and leverages the SOLR search Shopify uses. You can find the writeup here:https://ecommerce.shopify.com/c/ecommerce-design/t/diy-implementing-autocomplete-with-search-144104

The original implementation of this tip can be found here:http://www.flipsidegaming.com

3. Dan Gold – Dan Gold

My tip is how to update the product subtotal when the quantity changes (jQuery).

Sometimes you want to show a subtotal when a user chooses more than one quantity of a product. This updates a div on the page ‘.subtotal’ with the new dollar amount. Simply put, it multiples the quantity chosen by the user with the product price.

4. Tony Vanderzanden – VZ Tech Solutions

Here are my tips:

A code snippet that displays the product/collection feature image when the when the user hovers over the navigation link.

And a code snippet that allows an admin to divide the product description into multiple named sections that can be displayed as tabs on the products page when there is content in the specified section.. More verbose then just using the split function.

Or a code snippet that produces a running total in the cart is there is a minimum total for free shipping.

All snippets are seen in action on earthmamaangelbaby.myshopify.com

For product images in the navigation, add this to the Navigation Snippet:

<div class="child1_link_img_con {{link.title}}_con">
 
  {% for child1_link in linklists[child1].links %}
 
     <div class="child1_link_img {{link.title}}{{child1_link.object.id}}_img">
 
        <img id="{{child1_link.object.id}}_img" src="{{child1_link.object.featured_image | product_img_url: 'compact'}}" />
 
     </div>
 
  {% endfor %}
 
</div>

and add this to the js file

function show_thumb(imgId) {
   $(".child1_link_img").hide();
   $("."+imgId).show();
}
 
 
function hide_thumb() {
   $(".child1_link_img").hide();
}

and style as appropriate.

For the division of the description into multiple tabs, First you would need a theme that supports tabs. Then add this code where appropriate. (Note, the tab names are specific to our needs and can be made to be more generic.)

{% if product.description contains 'Ingredients_tab:'%}
  {% assign ingredients_split = product.description | split: 'Ingredients_tab:' %}
  {% assign faqs_split = product.description | split: 'Faqs_tab:' %}
 
  {% assign description = ingredients_split[0] %}
  {% assign ingredients_holding = ingredients_split[1] %}
  {% assign ingredients = ingredients_holding | split: 'Faqs_tab:'%}
  {% assign faqs = faqs_split[1] %}
 
  {% assign description_size = description | size %}
  {% assign ingredients_size = ingredients.first | size %}
  {% assign faq_size = faqs | size %}
{% else %}
  {% assign description = product.description %}
{% endif %}
 
<div id="product-description" class="rte" itemprop="description">
  <div class="responsive-tabs">
    <h2>What is it?</h2>
    <div>
      {{description}}
    </div>  
    
    {% if ingredients_size > 20 %}
      <h2>What is in it?</h2>
      <div>
        {{ingredients.first}}
      </div>
    {% endif %}
    
    <h2>What do people think?</h2>
    <div>
      <div id="shopify-product-reviews" data-id="{{product.id}}">
        {{ product.metafields.spr.reviews }}
      </div>
    </div>  
    
    {% if faq_size > 20 %} 
      <h2>What else?</h2>
      <div>
        {{ faqs}}
      </div>  
    {%endif%}
 
  </div>
</div>

And for the running cart total:

{% assign minCartAmount = settings.minCartAmount  %}
{% assign shippingPrice =   minCartAmount | minus: cart.total_price %} 
 
{%if shippingPrice > 0 %}
  <h3 class='free-shipping'>Add {{shippingPrice | money }} to your order to get free shipping!</h3>
{%endif%}

5. Brian Jones – Web Work Garage

Here is my tip – nothing fancy or difficult but hopefully useful: How to list links to all collections in Shopify (and how to leave out certain collections from that list).

Sometimes in Shopify you might want to have a certain piece of content or a specific design element on only the homepage of your Shopify store, or on every page except the homepage of your Shopify store. You can do this by putting some conditional statements in your code using Shopify’s Liquid templating language.

Let’s say we wanted to add some kind of home feature image thing to the homepage only. I won’t write out all the code for the feature image, but I published a full tutorial on my website, which you can take a look at here.

6. Rick Davies – Tricky3 Web Mangling

I think the best tip I have learned is to follow Shopify’s liquid Github repo. Comprehensive docs are all linked from the readme file and understanding how it works obviously helps no end. Seeing bleeding-edge developments provides a lot of high-level insight. You can see where and how bugs arise, what other people are getting stuck on and why, and sometimes contribute, which is nice (I am not an expert programmer by any stretch of the imagination!).

My Blog Date Archive loop is pretty cool, although a lot of links in that post are dead / not relevant, it’s a shame I can’t update some of those posts any more.Tricky3’s Infinite Scroll plugin that my team developed works pretty well too. My all-time favourite trick though is your Ordinal Date madness.

7. Caroline Keim – Milk & Pixels

I think one of the best tips I learned was using the fields and data you have to manipulate other areas. For instance, you can define variants and colors – so to display color swatches, you could name the swatch images exactly the same as the variant and spit out a color swatch list.

I think this type of engineering and backwards thinking is the key to creating complex and innovative themes. See below.

{% for option in product.options %}
  {% if option == 'Color' %}
    {% assign index = forloop.index0 %}
    {% assign colorlist = '' %}
    {% assign color = '' %}
    
    {% for variant in product.variants %}
      {% capture color %}
        {{ variant.options[index] }}
      {% endcapture %}
      {% unless colorlist contains color %}
        <img src="{{ color | downcase | append: '.gif' | asset_url }}"
         alt="{{ color }}" width="16" height="16" />
        {% capture tempList %}
          {{colorlist | append: color | append: ‘ ‘}}
        {% endcapture %}
        {% assign colorlist = tempList %}
      {% endunless %}
    {% endfor %}
    
  {% endif %}
{% endfor %}

8. Cory Gwin – Analog Forest

Not really a Liquid trick, but I have created a grunt workflow for working with Bower, Shopify, Compass, jshint etc.

This starter tool utilizes many tools I have used over and over for development and attempts to wrap them all into a sensible starting place. It includes the following tools:

Bower – for js package managment http://bower.io
Grunt – to run processes like jshint, compass, live reload etc..http://gruntjs.com
Bootstrap 3 – don’t just use it on its own it is a framework 🙂http://getbootstrap.com
Watch with Live reload – Runs all the grunt tasks and reloads the webpage once upload to shopify is completed.https://github.com/gruntjs/grunt-contrib-watch
Compass – This Sass add on comes with sass and a bunch of helpers to make your life easier.http://compass-style.org
Grunt Shopify – Once configured this will upload the updated files to shopify.https://github.com/wilr/grunt-shopify
Shopify Skeleton theme – The skeleton template theme is included although slightly altered to work with above technologies.https://github.com/Shopify/skeleton-theme
Grunt modernizr – Custom modernizr build based on what your are usinghttps://github.com/Modernizr/grunt-modernizr
jshint – offers useful advice about how to improve your jshttps://github.com/gruntjs/grunt-contrib-jshint
grunt concat – concatinates all js files into a single file –https://github.com/gruntjs/grunt-contrib-concat
grunt concat bower – same thing but understand bowers folder structure –https://github.com/sapegin/grunt-bower-concat
grunt uglify – minimizes your javascript – https://github.com/gruntjs/grunt-contrib-uglify

You can find my Shopify Starter here.

9. Phill Tran, Divine Apparitions

My client primarily sells downloadable files using Shopify. We were saddened when Shopify ceased sending live web hook data to Fetchapp once a sale was completed.

The client didn’t like having to make the customer wait for an email to download the file they purchased.

I used a jquery timed function to display an “order processing” animation for 120 seconds then displays the fetchapp download link.

Here is the code for https://wordoffaith.myshopify.com:

{% capture downloads %}
  {% for line in line_items %}
    {% if line.sku contains "AUD" %}1{% endif %}
    {% if line.sku contains "EBK" %}1{% endif %}
    {% if line.sku contains "MP3" %}1{% endif %}
    {% if line.sku contains "VID" %}1{% endif %}
  {% endfor %}
{% endcapture %}
 
{% if downloads.size > 0 %}
 
  <h3>Digital File Downloads</h3>
  
  <script>// window.jQuery || document.write("<script src='{{ "jquery-1.8.3.min.js" | asset_url }}'>x3C/script>")</script>
  <script type="text/javascript">
  
  jQuery(document).ready(function(){
    var $downloadButton = jQuery('#downloadButton');
    var $loadingMessage = jQuery('#loadingMessage');
    $loadingMessage.empty();
    $loadingMessage.append('<div style="text-align:center;"><p>Your download link will appear below once your order is processed. This may take up to one minute. <br />An email will also be sent to you with a link to download your order. </p><p style="text-align:center;font-size:1.3em;color:#4679bd;">Please wait while your order is processing.</p><img src="http://cdn.shopify.com/s/files/1/0214/4032/files/ajax-loader.gif?484" /></div>');
    $downloadButton.hide();
    
    setTimeout(function () {
     $downloadButton.fadeIn(300);
     $loadingMessage.fadeOut(100);
    }, 60000);
  });
  </script>
  
  <div id="loadingMessage" >
    <p>Your file download is being processed. An email will be sent to you with a link to download your order. </p>
  </div>
  
  <div id="downloadButton" >
    <a href="http://wordoffaith.fetchapp.com/orders?email={{ email }}&number={{ order_name }}&submit=true" style="display:block;background:#4e4e4e;color:#eee;padding:1em 1em;width:80%;margin:auto;text-align:center;font-size:1.3em;line-height:130%;text-decoration:none;">CLICK HERE to download your files</a>
  </div>
  
  <p>If you ordered an MP3 Series, the file may be delivered as a ZIP archive. Please use archive extraction software such as WinZip to unpack the archive to individual MP3 files. Download your mp3 to a COMPUTER. Attempts to download to any other electronic device will delete available downloads. *NOTE: You will be able to download the message five times within seven (7) days of purchase.</p>
{% endif %}
 
<p>Thanks for shopping the Word of Faith E-store.</p>

10. Amine Ouahidi – NINE15

This isn’t a complicated trick but our clients love it. Several of our clients always ask us if there is an easy way to modify a product or page directly from the website, instead of going to the admin > Products > Search for the product > Edit & Save.

I think the harder part is finding the correct product as some of our clients have thousands of them.

So what we do is create a customer account for the client and add something like this to the liquid templates (products, articles, pages):

{% if customer.id == xxx %}
  <a href="/admin/products/{{ product.id }}">Edit</a>
{% endif %}

…And so on for the pages and articles.

This adds an edit link to the product pages, articles, etc. when the client is logged in. They can easily switch back and forth between the admin and front-end interface.

11. Matt Haff – Matt Haff

One tip/trick that I’ve done is in the .css.liquid files. I put the styles using variables last in the list so that all the regular ones will have proper syntax highlighting. On top of that I use the .liquid syntax highlighting package for Sublime Text.

Subject	Your Message
Your Name (required)
Your Email (required)
Enter the captcha as shown below

11 Easy-to-Learn Tips For Using Liquid (Shopify’s Template Language)