Most efficient way to use Discourse for comments on Shopify blog posts?

[MarximusMG]

Hey everyone!

I’ve done some searching around here for this specific application, but it seems that most questions are related to using Discourse for comments on Wordpress posts.

Aside from this how-to (Embed Discourse comments on another website via Javascript), is there any guidance anyone can share for implementing Discourse comments particularly for Shopify blog posts?

An example of what I’m picturing can be seen in how macrumors.com handles comments (i.e., when viewing an article, the top comments are displayed underneath the article, and the user is giving the option to view all comments. After clicking through that link, the forum topic that’s created as a result of the article is loaded).

Thank you in advance!

[MarximusMG]

[pfaffman (Jay Pfaffman)]

What is the problem with the javascript embed?

[MarximusMG]

Thanks for the response!

I’m implementing this today and will touch base back here with any issues that come up - I guess I didn’t realize that the javascript embed option functioned in the same way that I described above. My apologies!

[jord8on (Jordan)]

Hey @MarximusMG! How did this go for you? Would you mind sharing your experience using the JS embed? Or did you abandon this initiative?

[simon]

I’ve been wondering about this for a while, so figured I’d test it out. Note that I have very little experience with Shopify, but it’s something I was asked about a fair number of times when doing customer support work for Discourse.

If both the Shopify store and the Discourse site are configured so that they can be viewed by anonymous (not logged in) users, Discourse comments can be embedded on a Shopify product page. To do that, add your store’s domain to the Allowed Hosts section of your Discourse site’s Admin / Customize / Embedding page:

Make sure to add the username of the Discourse user who will be shown as the author of the Discourse Shopify topics to the “Username for topic creation” setting. Then click the “Save Embedding Settings” button from the bottom of the page.

Copy the embed code that’s displayed on the Embedding page into the “Description” section of the Shopify product page. Make sure to click the “show html” button on the editor before inserting the code:

Edit the embed code to replace DISCOURSE_USERNAME with the username you entered as the “Username for topic creation” on the Discourse Embedding page. Also replace the embed code’s EMBED_URL text with the URL of the product. Then save the product page.

Note, you can get more details about embedding Discourse comments here: Embed Discourse comments on another website via Javascript.

You should now see a Discourse Comments section (embedded as an iframe) on the Shopify product page. Assuming there are no errors, it may display the text “Loading discussion” the first time you visit it. What’s happening is that visiting the page has triggered Discourse to create a topic for the product page. After a few seconds, you should see the text “Start discussion.” If you click that link, you’ll be taken to the related Discourse topic.

If you visit the topic and reply to it, that reply will show up on the Shopify product page.

Possible issues:

The description section of the default Shopify theme doesn’t seem quite wide enough to display the Discourse comments section:

I’m assuming this can be easily fixed with a custom Shopify theme.

Discourse doesn’t give you much control over the content that gets pulled from the Shopify product to the Discourse topic. Here’s what I’m seeing for the product I linked to Discourse:

After clicking the “Show Full Post” button:

What I’d like to see is the product description, price, and image. I definitely don’t want the following text to be displayed:

Product variants
Couldn’t load pickup availability Refresh

It may be possible to fix this by fiddling around with the Discourse allowed embed selectors site setting. Some details about that setting are here: Configure the Allowed Embed Selectors Setting. Discourse also has a hidden blocked embed selectors site setting that might be useful. I’ve recently setup an online debugger to help with configuring the Discourse embedding settings. It’s a work in progress, but send me a PM if you’d like to try it out.

If either the Discourse site or the Shopify store are configured so that they cannot be viewed by anonymous users, I suspect you’ll run into issues with embedded comments.

Having to manually add the Discourse embed code to a large number of previously published Shopify products could be a pain. I suspect it would be possible to create a Shopify app that automatically appended the Discourse embed code to all product descriptions.

Another thing that might need to be dealt with is to get the styles of the embedded Discourse comments to match the styles of the Shopify product page. It should be possible to do this by adding some CSS to the Embed CSS section of the theme editor of your default Discourse theme. For example, this fixes the issue with the background color in my previous screenshots:

[simon]

I realized I didn’t quite answer the OP’s question. Here’s a general approach that will work for Shopify product pages or blog posts. From the your store’s Theme / Customize section, go to the page template that you want to add Discourse comments to. Depending on the page, add either a Custom Liquid block to a section, or add a new Custom Liquid section. Then add the Discourse embed code to the section.

For the embed code’s discourseEmbedUrl, use location.href . That way the discourseEmbedUrl will be automatically set. For example:

<div id='discourse-comments'></div>
<meta name='discourse-username' content='DISCOURSE_USERNAME'>

<script type="text/javascript">
  DiscourseEmbed = {
    discourseUrl: 'DISCOURSE_URL',
    discourseEmbedUrl: location.href,
    // className: 'CLASS_NAME',
  };

  (function() {
    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
  })();
</script>

For Shopify blog posts, you’ll probably need to add some custom CSS to the Liquid section to keep the comments section centered and limit its width. For example:

div#discourse-comments {
  max-width: 726px;
  margin: 0 auto;
}

With blog posts, as opposed to product pages, I’m finding that Discourse does a good job of pulling the appropriate content into the topic: