Shopify: Liquid's Capture Tag

This post is a part of a series of technical notes and tutorials on Shopify. Shopify is an eCommerce platform built with merchants in mind, check it out!

The Liquid templating language, invented by Shopify CEO & Founder Tobias Lütke, is used to create theme files within Shopify. You can apply conditional logic with {% raw %}{% if %}{% endraw %}, create loops using {% raw %}{% for %}{% endraw %} and support variables in your code with {% raw %}{% assign %}{% endraw %}. The combination of these allows you to do almost anything with your themes.

However, another lesser-used function tag exists which underpins some of the most powerful features in popular apps and themes — the {% raw %}{% capture %}{% endraw %} tag. Capture as defined in Shopify's documents:

Captures the string inside of the opening and closing tags and assigns it to a variable.

Simple, right? But when used in conjunction with elements that use a string variable to find things in our store - {% raw %}{% capture %}{% endraw %} starts to show its versatility.

For instance, Shopify's Theme Customization menu allows us to set up fieldsets for customizing pages. If we wanted to add a link_list sidebar nav for a group of related pages you could set up a setting like:

// settings_schema.json
{
  "type": "link_list",
  "id": "<page.handle>-sidebar-linklist",
  "label": "Sidebar Navigation Linklist",
  "info": "List of links for the page's sidebar"
}

If you replace <page.handle> above with the desired pages handle - you can copy and paste this code to set up the field for any number of pages you want.

You can then use the store customization panel to enter any linklist you’d want to feature on that page.

Then in the page template, you can make use of the capture tag to look up the page.handle variable and append our setting suffix to it so we can access the linklist, like so:

// page.liquid
{% raw %}
{% capture linklist_setting_name %}{{ page.handle }}-sidebar-linklist{% endcapture %}
{% assign linklist_name = settings[linklist_setting_name] %}
{% assign linklist = linklists[linklist_name] %}
{% if linklist %}
  <aside>
    <nav>
      {% for link in linklist.links %}
        <li>
          <a href="{{ link.url }}">{{  link.title }}</a>
        </li>
      {% endfor %}
    </nav>
  </aside>
{% endif %}
{% endraw %}

The code above does this:

• Finds the linklist's setting name using the current page handle.
• Assigns that setting (if available) to a variable called linklist_name.
• Finally, finds that linklist in the globally accessible object called linklists, using its name that we retrieved from the settings!
• If all the above goes swimmingly, our sidebar will display!

As you can see, using various tags in tandem in Shopify will allow you to do even more with your themes and allow you to make sections of pages content editable via the CMS.

Let me know if you find any further uses for the {% raw %}{% capture %}{% endraw %} tag or if you have any questions @markgono