Atomic Smash homepage splash

Using shortcodes with the Shopify content editor

Words by David DarkeSeptember 8, 2016

Shopify is a fantastic e-commerce system, it marries an elegant admin interface, powerful sales tools and fast development times. However one of the most complained about features is the lack of flexibility when it comes to using it’s page content editor. A typical admin page will look something like this:

Shopify content editor

On every product we only have places to edit:

  1. Title
  2. Body content
  3. Images / Gallery
  4. Other granular details like category and tags.

Having only 1 body content field is very limiting and forces your content to be kept to one wysiwyg editor. So to get around this there are a couple of techniques that can used to break up your content, our favourite is using bespoke shortcodes.

Why bother using shortcodes?

Here is an example of where they would work well (screenshot taken from the ‘Venture‘ theme available in the Shopify theme store)

Shopify admin panel

So above it a standard product page with images/gallery placed on the left and text on the right. Yet under the images (marked with ‘2’) there is a unutilised space that could house anything from a key product details, to critical purchase information or even delivery details.

To separate out text content for the left hand side wouldn’t be possible without the use of shortcodes. This is how:

1. Create a logical name for the new content area

Having a logical name for this area will pay dividends in the future when you are trying to remember how to populate that section of your product quickly.

2. Add your shortcode output to the product

At Atomic Smash we usually keep the format very simple “[[name-of-area start]]” and “[[name-of-area end]]” seem to work well for us. So just add this content to a product:

Screenshot of shopify admin

I have used “[[details start]]” and “[[details end]]” but it could be anything.

3. Update your theme to split this content at the shortcode

So on inside your ‘product.liquid’ file, add the following content splits where you would like your end content to appear (number 2 in that previous layout):

{% assign all_content = product.content | split: "<p>[[details start]]</p>" %}

{% assign details = all_content[1] | split: "<p>[[details end]]</p>" %}

{{ details[0] }}

This essentials cuts all the text above “[[details start]]” and saves it to a variable, then cuts everything below “[[details end]]” and outputs to the screen. The result is all the content between your two shortcodes.

There is also another method called ‘Splitting’, details can be found here, yet we don’t tend to use this as it reduces flexibility.

Profile picture of David Darke

David Darke

As the lead developer and co-founder at Atomic Smash, David’s wealth of knowledge in website development means that all sites work seamlessly across desktop, tablet and mobile devices.

Go back to top

Keep up to date with Atomic news