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.

Comments

[Peter Hallander]

Clever approach. The "unlike WordPress this isn't natively supported" framing captures a real pattern — Shopify merchants who come from WordPress keep running into these gaps where the solution exists but you have to build it yourself.

The shortcode pattern you've implemented here is essentially what WordPress users take for granted with [gallery] or [product id="123"] — the kind of thing that should just work. Building it in Liquid isn't hard once you know the split trick, but it's non-obvious enough that most merchants give up or install an overbuilt page builder app.

Two other WP→Shopify gaps I've filled in this way:

Better Related Blog Posts (apps.shopify.com/better-related-blog-posts) — Shopify has no native related posts feature for blogs. In WordPress, any theme handles this. In Shopify you have to manually Liquid-loop and filter by tag, which most store owners can't do. This app does it automatically.

WP Simple WordPress Feed (apps.shopify.com/simple-wordpress-post-feed) — for merchants running WordPress alongside Shopify who want their WP blog content surfaced inside the Shopify store without migrating everything.

(Disclosure: I built both.) The insoles client use case is a good one — product-in-content is exactly the kind of thing that drives conversion on educational/informational pages.