Shopify Tips: Replying to blog comments

A (very crude) method of replying to specific blog post comments in Shopify.

Introduction

When I received my first comment after starting this Shopify Tips blog I found that there was no way of replying to the comment other than just adding another standard comment myself. A bit of searching around revealed quite a lot of people frustrated with the lack of functionality in Shopify's simple blog system. They tend to be directed towards getting an app to extend the functionality but many people don't want to have to do that. I decided to see what was possible to improve things without the need for an app - to be honest, it's not great, but this is what I came up with, and it's a big compromise.

This is not the solution you're looking for

Let's just say, right from the start, that this is not the solution you're looking for. It just isn't possible to create an all singing, all dancing, amazing blog system without writing an app. Shopify Liquid was not designed for that, it is a design templating language, not a fully fledged programming language with access to files and databases and all sorts of nice back end server-side functionality. So, with no way of storing any additional data (for example the ID number of the comment you are replying to) things are limited. What I chose to do is crude and fairly manual, it's not what you'd want to do, but is a way around the limitations of not using an app. So, with that very large caviat, what does the code on this page provide you with?

What will it do?

If you are an admin logged into Shopify and viewing a blog post every main comment (not a reply) will display a reply tag next to it (next to the comment author's name). It will look something like this (edited to not show any real life details):

If you want to write a reply to that comment you highlight and copy that reply tag to your clipboard, then you go to write your own comment and paste the reply tag at the start of the content of your comment. Like this:

I have (and recommend) comment moderation on. As normal, once you have approved your reply for publication it will appear on the blog post. Your blog posts will now display so that non-replies appear most recent first (as before). Replies to any comments appear indented beneath the comment they are related to and in a different background colour (the replies do not show the reply code that you entered at the start of writing your reply - it is still there but not shown). If you have made multiple replies to a comment then they appear in the order they were written beneath the comment they are replying to. (Take a look at the comment and reply on my guide to changing the old Twitter bird icon to an X icon).

It's as simple, and manual, as that I'm afraid. You will now be stuck with reply tags at the start of your reply text comments and forever more need to have some custom code to not show them.

Before you get started

Note: This guide uses the Shopify Dawn version 13 theme. If you have a different theme, or a drastically different version of the theme, things may not match or work as expected!

Before getting started it is always advisable to make it as easy as possible to revert back to the state everything was in beforehand. You then have peace of mind that if anything goes wrong you can instantly undo it! With this in mind I recommend going to your online store themes, clicking on the three dots button next to your current live theme and choosing "Duplicate". You will then have a copy of the current live state of your store which you can revert back to if needed. However, even if you don't do this, Shopify keeps a copy of all your file changes when editing your theme code so that you can revert back to an earlier version on each individual file if need be (when in the code editor, at the top of the code window it says "Recent changes" with "Current" and a drop down list beneath - just choose the file version you want to revert to.

Editing your theme code

After navigating to your themes and choosing "Edit code..." go to the "Sections" area (folders on the left) and choose the file:

main-article.liquid

Find the line of code, at around line 107 which looks like this:

{% paginate article.comments by 5 %}

Recommendation: to increase the pagination to a much larger number (I've increased 5 to 20 for the moment, but you could go much higher), to allow for replies, and because replies will be counted in the pagination and may therefore result in very uneaven pages of comments, e.g. just 1 comment on one page and 5 on another.

Now also find the line of code, further down the file, that ends the pagination and looks like this:

{% endpaginate %}

What you need to do is highlight all the content from that starting paginate line to the end paginate line (inclusive) and replace it all with the content below, which you can copy and paste from here:

See the Pen Shopify reply to blog comments by Fiona Reeves (@freeves) on CodePen.

To change the background colour used for your reply simply change this (in the code above) to have a different colour value:

background: #dddddd

Save the file and you're ready to try it out. Obviously if this hasn't worked out for you then you can simply revert back to the previous version of the file.

Found this useful?

If this guide has helped you please leave a comment to let me know :) If it's really helped you, or you're just feeling generous, please consider buying me a coffee via Ko-Fi as a thank you - or buy an item from this website.

If you want to suggest other things you'd like me to write a Shopify guide about please let me know!

 blog (5)