Adding a commenting system to Shopify with Hyvor Talk

We have released our own blogging platform: Hyvor Blogs. Start your own blog for free today!! ✌✌

Hyvor Talk is a commenting system for websites. Compared to Shopify's default comments system, Hyvor Talk provides more features like real-time comments, voting, reactions, ratings, email notifications, etc. which will help you build an engaging audience in your store. In this guide, I am going to explain how to add Hyvor Talk commenting system to your Shopify store (product or article pages) and how to connect your Shopify login with Hyvor Talk. After setting up, your customers will be able to comment using their accounts on your store.

Installing Hyvor Talk on Shopify is easy. All you have to do is copy and paste the installation code given below to your template files.

First, make sure Shopify's default comment system is turned off at Online Store -> Blog Posts -> Manage Blogs -> Your Blog -> Comments are Disabled.

Setting up Hyvor Talk

First, head over to the Hyvor Talk console. You will be asked to create a Hyvor account. After that, you will see the Add Website section in the console. You can register your website with Hyvor Talk here. Make sure to use your Shopify domain as the Website Domain.

After adding your website, you will see your website ID. We will use this in the last step.

Setting up Single Sign-on

Single Sign-on is a fancy technical term for "connecting Shopify customer login with Hyvor Talk". You have to turn on Single Sign-on from the console first. You will need the Private Key in the next step.

Note: If you haven't turned on customer login in your Shopify store. You can keep this option turned off. Then, users will need a Hyvor account to log in. Or, they can comment as guests. Check out Shopify's official documentation on turning on/off customer login.

Single Sign-on is only available in the business plan.

Installing Hyvor Talk Commenting System on Shopify

Next, we want to add the installation code to the theme files. Go to Online Store -> Themes -> Actions -> Edit Code.

Next, click Snippets -> Add New Snippet.

Name the snippet hyvor-talk.liquid.

Then, paste the following code in the editor with the following changes, and save.

• Replace YOUR_WEBSITE_ID (line 1) with your website ID from the first step.

• Replace YOUR_PRIVATE_KEY (line 2) with your Single Sign-on private key from the previous step (keep quotes).

 1{% assign HT_WEBSITE_ID = YOUR_WEBSITE_ID %}
 2{% assign PRIVATE_KEY = "YOUR_PRIVATE_KEY" %}
 3
 4{% assign user_data = "{}" %}
 5{% if customer %}
 6    {% capture user_data %}{ "id": "{{ customer.id | escape }}", "name": "{{ customer.name | escape }}", "email": "{{ customer.email | escape }}" }{% endcapture %}
 7{% endif %}
 8{% assign hash = user_data | hmac_sha1: PRIVATE_KEY %}
 9
10{% if template contains "product" %}
11	{% assign hyvor_page_id = product.id %}
12{% elsif template contains "article" %}
13	{% assign hyvor_page_id = article.id %}
14{% else %}
15	{% assign hyvor_page_id = 'false' %}
16{% endif %}
17
18<div id="hyvor-talk-view"></div>
19<script type="text/javascript">
20  var HYVOR_TALK_WEBSITE = {{ HT_WEBSITE_ID }}
21  var HYVOR_TALK_CONFIG = {
22    id: {{hyvor_page_id}},
23    url : false,
24    sso: {
25    	hash: "{{hash}}",
26    	userData: '{{user_data}}',
27    	loginURL: "{{ shop.url | append: "/account/login"}}"
28  	}
29  };
30</script>
31<script async type="text/javascript" src="//talk.hyvor.com/web-api/embed.js"></script>

Here's a preview of a sample code pasted in hyvor-talk.liquid

Now, you have set up the Snippet, which can be used to embed Hyvor Talk on any page you need. Usually, comments are used in Articles or Product pages.

You have to add the following code to the place where you need the comments section to load.

1{% render 'hyvor-talk' %}

For article pages, adding it after the </article> tag works best (in Templates -> article.liquid).

For product pages, adding it to the bottom of the file works best (in Templates -> product.liquid)

You can also add the code to any other liquid template page of your online store.

What's next?

Hyvor Talk comes with a lot of customization options. You can change the appearance of the comments section in the Appearance section of the console. To change the language (we support 25+ languages), guest commenting options, voting options, etc., go to the Community section.

You can find more details about customizing and moderating in our documentation.

If you have any questions, feel free to comment below.