Look at you, you’re a renaissance man… or woman! You aren’t constrained by anything. Your products have as many variants as YOU decide, not what your platform tells you. Only three slides allowed? Not on your watch! So let’s expand your Rich Text Editor too… why not?

First… what is the rich text editor, exactly?

The Shopify Rich Text Editor is the standard box you see on products, pages and blog posts that is used to manage the main body content. While it is quite flexible and provides a wide range of features and styles, it does have one notable limitation which is that it can only be used for the content in just one part of the page.

Let me explain. For example, it’s not possible to use the rich text editor to display some intro text at the top of the page, then output a row of dynamically generated products below that, and then use the rich text editor again to output some more text below those products. Or at least, the way it is currently designed. But using this clever trick you can do this and a whole lot more.

The secret to this technique is using pre-defined shortcodes inside the rich text editor content to define multiple pieces of content. Whereas a typical piece of text in the rich text editor would look something like this...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed pulvinar ipsum. Ut blandit maximus tincidunt. Integer placerat, nunc et rutrum lobortis, ipsum arcu eleifend sapien, quis iaculis ipsum justo non lectus. Vivamus lorem dolor, rutrum quis nisi quis, vehicula placerat dui

Instead, we can define two separate pieces of text by doing this...

 

[intro]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed pulvinar ipsum. Ut blandit maximus tincidunt. Integer placerat, nunc et rutrum lobortis, ipsum arcu eleifend sapien, quis iaculis ipsum justo non lectus. Vivamus lorem dolor, rutrum quis nisi quis, vehicula placerat dui[/intro]
[second]This is the second paragraph, which we can place anywhere we like in the template.[/second]

So essentially, we wrap each piece of text inside shortcodes using specific tags inside square brackets. In this instance we have chosen intro and second as our tag names.

The next step is to customize our page template to utilize these. This is what we use to output the aforementioned intro text, followed by a row of products, and then finally with the second text below that.

{% assign content = page.content | split: '[/intro]' %}
{% assign intro = content[0] | remove: '[intro]' %}
{% assign second = content[1] | remove: '[second]' | remove: '[/second]' %}
<div id="intro">{{ intro }}</div>
<div id="products">      
{% for product in collections["all"].products limit: 4 %}
<div class="product">
    <img src="{{ product.featured_image | img_url }}" alt="{{ product.title }}">
    <p>{{ product.title }}</p>
</div>
{% endfor %}
</div>
<div id="second">{{ second }}</div>

So first of all we get the page.content object, which is the full contents of the rich text editor. We then use the split filter to separate it into an array of two items, splitting it at the closing tag of the intro content. This means that all we need to do is remove the opening [intro] tag and we can then assign that to a variable called intro which contains the text without the shortcode tags.

Did you follow all of that? Read it again if you need to, it’s all there. You’ve got customizing to do!

Once you have worked through that section, now we do the same for the second text. Except this time we start off with the second part of the content array and remove both the opening and closing shortcode tags.

Finally we can render the content in the order we need. We output the intro content first, followed by a simple loop that outputs four products and finally the second content below that. This is the finished result.

Now you can have as many variants as you want, and as many slides as you need, but now you are also a master Rich Text Editor Customizer. This could be a very useful little piece of customization which can save you a lot of time and effort, and make your website look that much more unique from everyone else’s. For more tips and tricks, check out our Shopify blog.

Now get out there and customize!