Supercharge your Shopify pages with Liquid shortcodes for collections
Tags: webdev, shopify, liquid, tutorial
Published: 2023-06-02 11:33:14

I will share a handy trick I recently applied to a client's website selling [orthopedic insoles](https://rugexpertiseshop.nl/pages/steunzolen-bekkenpijn). 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
{% 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`:

```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](https://dev.to/seppegadeyne/unlocking-the-power-of-semantics-in-html-4e9j) and [improving your Google ranking](https://straffesites.com/en/blog/higher-search-engine-rankings), check out my other articles.

## 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.