How To Link Comments In Shopify Blog Posts

Using Shopify for your store’s blog?  You may have noticed that if you post any links in the comments, they are just static text.  They don’t actually link to the URL.

If you’re cross-promoting products or trying to direct readers to a specific page, this can be a little frustrating.  Out of the box, there’s no way to link Shopify Blog comments to a URL.

Want to link comments in blog posts?  Below you’ll see how. And here is an example.

After experiencing this with many clients, we came up with two solutions.  The first one is a ‘plug and play’.  You can download our plugin, install it, and this will be added to your store (along with some other nifty features).  The second one is a ‘do-it’yourself’ setup, which requires a bit of HTML and Liquid knowledge, but not a lot.  It requires medium-level Shopify experience.  Ready?

Option 1: Download and install the Shopify Blog Supercharge.  The script needed to link the comments is one part of the four-part feature set that comes with the download.  Download or see the details over here.

[su_button url=”https://www.blackbeltcommerce.com/shopify-blog-supercharge” target=”blank” background=”#32742a” size=”4″ radius=”0″]Details & Download – Blog SuperCharge →[/su_button]

Prefer to do it yourself?  No problem here’s how.

Option 2: Install it yourself

Here are the steps to install it yourself:

1. Open up your store’s admin, and go to Themes.  Make a backup of your theme as outlined here.
2. Next, go to Edit HTML/CSS to open up your theme files.
3. Under “Assets” on the left, click “Add new asset”.  Upload these two files:
   jquery.linkify-1.0-min.js
   jquery.linkify-1.0.jsNote:  These files come from a plugin created by Maranomynet here. Full credit to Maranomynet for creating the initial script.  We’re just applying it here to a Shopify setup.
4. Once you’ve uploaded those two assets, open up theme.liquid on the left under Layouts.
5. Do a CTRL+F to find “</head>” to find the end of your head section.  Just above </head>, paste this:

   {% if template contains 'article' %}
   {{ 'jquery.linkify-1.0-min.js' | asset_url | script_tag }}
   {% endif %}
   
   <script>
   $(function(){
   jQuery('.comments .comment').linkify();
   });
   </script>

6. Lastly, find article.liquid.  CTRL+F to find “article.comments_count”.  Then wrap that whole section in <div class=”comments”.  Like this:

   —

   That’s it!  Now any links in your comments will become links automatically, like this:

Don’t forget, if you’d prefer to just have a ‘plug and play’ solution, you can download and install the Shopify Blog Supercharge. Download or see the details over here.

Script attribution: https://github.com/maranomynet/linkify under the MIT/GPL License.

Thank you for keeping up to date with our Shopify Insider Blog @ Blackbelt Commerce. Please make sure to check out our services. We also have some top blog recommendations for you to check out; How To Back Up Your Shopify Store, What We Learned From Our Rebrand, the mos exciting e-commerce marketing trends,  and Show “More Colors” If A Product Has Multiple Color Variants.  As always, keep a lookout for new blog posts.

Questions? Would be happy to help in the comments.