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

Development
7

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:

image
image1061×1151 150 KB