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.
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.
Top comments (0)