Supercharge your Shopify pages with Liquid shortcodes for collections

I will share a handy trick I recently applied to a client's website selling orthopedic insoles. We needed a way to showcase collections in a page's text. Unlike WordPress, this isn't a feature directly offered by Shopify. We can achieve this with some Liquid, Shopify's template language. Look at the link above for an example of this implementation.

Making your Shopify theme shortcode-ready

The first step in our journey involves tweaking your theme's main-page.liquid file, located under the /sections directory. We'll make a small but impactful change here: replace {{ page.content }} with {% render 'shortcode', page: page.content %}. This modification tells Shopify to load the snippet named shortcode.liquid and pass it the variable named page containing page.content.

Creating the liquid shortcodes

Once we've prepped our theme, it's time to create two new files within the /snippets folder: shortcode.liquid and shortcode-collection.liquid.

In shortcode.liquid, we'll be inserting the following code:

{% liquid
   if page != empty
       assign content = page | split: '[collection='

       if content.size > 1
           assign content_parts = content[1] | split: ']'
           assign shortcode_handle = content_parts[0]

           echo content[0]

           if collections[shortcode_handle].id != empty
               render 'shortcode-collection', handle: shortcode_handle
           else
               echo '<p>No collection found with the handle "' | append: shortcode_handle | append: '".</p>'
           endif

           echo content_parts[1]
       else
           echo page
       endif
   endif
%}

This code checks if a shortcode in the format [collection=name-collection] is present within the text. If detected, the content will be split into two parts, and shortcode-collection.liquid will be loaded. If no shortcode is found, page.content is loaded as is.

Now, we'll add the following code to shortcode-collection.liquid:

{% assign collection = collections[handle] %}

{% if collection.id != empty %}
   <article>
       <h2>{{ collection.title }}</h2>
       {% for product in collection.products %}
           <article>
               <a href='{{ product.url }}'>
                   <img
                       src='{{ product.featured_image | image_url: width: '600', height: '600' }}'
                       alt='{{ product.title }}'
                       width='600'
                       height='600'
                       loading='lazy'
                   >
               </a>

               <a href='{{ product.url }}'>
                   <h3>
                       {{ product.title }}
                   </h3>
               </a>

               <p>
                   {{ product.price | money }}
               </p>
           </article>
       {% endfor %}
   </article>
{% else %}
   <p>No collection found with the handle "{{ shortcode_handle }}".</p>
{% endif %}

This code is responsible for rendering the products of a given collection. Remember, you'll likely need to style the output with CSS to match your website's looks. I intentionally used the <article> element, along with heading elements <h2> and <h3>, to leverage semantic markup, which can help your site rank higher on Google. For more information on semantic markup and improving your Google ranking, check out my other articles at Straffe Sites.

Conclusion

With some creativity and Liquid code, we've created a system that allows for the flexible insertion of Shopify collections into any part of your webpage.

This technique can be a real game-changer for those who want to provide a more dynamic and customized shopping experience. It's another example of the flexibility and power that Shopify's Liquid language offers.

But remember, with great power comes great responsibility. Always double-check your code and test your pages thoroughly to ensure everything works as expected. And remember to style your output with CSS to maintain a consistent and appealing visual aesthetic across your site.

I hope this tutorial has been helpful and has given you ideas for your Shopify projects. Remember, the possibilities are nearly endless when customizing your e-commerce store.