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:
