 |
About the Author
Mitch (@mitchellharper) is the co-founder and CEO of BigCommerce. Way back in 2007 he built what eventually became BigCommerce as you know it. Today he runs the company alongside Eddie and along with our 100+ team members, is passionate about helping businesses succeed with e-commerce. Mitch spends time between our Sydney and Austin offices and is giving the keynote at TechConnect 2012 in Sydney on April 19th. |
Update: WordPress likes to mess up double quotes so when you copy the HTML snippet in this post, make sure you delete the double quotes and re-add them using your keyboard.
What is Disqus?
Disqus is a free commenting platform which can be integrated into BigCommerce to make your product reviews truly social. Unlike a typical commenting or review system, Disqus is smart enough to pick up conversations happening about the products you sell from around the web. It brings them together and displays a threaded commenting platform on product pages in your BigCommerce store.
As well as rounding up comments and reviews on your products from around the web, shoppers can post comments by logging into their Facebook or Twitter accounts, meaning they can also share their comments and reviews with their friends automatically – meaning more people who know about your online store.
People with Disqus accounts can use the same profile to comment across multiple sites and as a Disqus administrator you can get excellent statistics regarding number of comments, frequency and more. You can see the entire feature list on the Disqus website.
If Disqus sounds good then keep reading – it’s very easy to integrate thanks to BigCommerce’s Design Mode feature.
How to integrate Disqus into your product reviews
Follow the simple steps below to switch out BigCommerce’s default product reviews/commenting system to Disqus. We’re going to be using Design Mode to make some small HTML changes but don’t worry, it’s easy to do and BigCommerce’s QuickEdit HTML editor has a built-in revert button if you mess things up.
- Login to your store and click the “Store Design” link at the top right of the page
- Click the “Design Mode” tab then click the “Open My Store in Design Mode” button
- You should now see your store with the Design Mode toolbar at the top. Click on the “Toggle” button on the blue Design Mode bar to disable design mode then click on any product in the “Featured Products” or “Top Sellers” section on your home page
- You should now be on one of your product pages – it doesn’t matter which one. Click the “Toggle” button on the blue Design Mode bar to re-enable design mode. The button should change to orange to show it’s enabled
- Scroll down the page where you see the “Product Reviews” section where customer reviews would typically appear. Right click over the top of the “Product Reviews” heading and choose the “Edit Panel” option from the popup menu
- The QuickEdit HTML editor window will open with the ProductReviews.html panel code loaded in the right pane
- Select all of the HTML code in the QuickEdit editor and delete it. Paste the following HTML in its place (but don’t click the “Save” button yet):
-
<div id=”ProductReviews”>
<h3 id=”reviews”>%%LNG_ProductReviews%%</h3>
</div> - Now it’s time to sign up for Disqus. On the step where you’re asked which options you want to enable, you can just skip that for now – you can go back and enable logins from Twitter and Facebook as well as nifty features like video comments later. On the final step make sure you choose the “Universal Code” option which should show you a page with two lots of JavaScript code, like so:
-
- Copy the HTML from the top box (the “embed code” box) and go back to your BigCommerce QuickEdit window. Paste the code after the <h3>…</h3> tag, like so:
-
<div id=”ProductReviews”>
<h3 id=”reviews”>%%LNG_ProductReviews%%</h3>
— Paste the code here —
</div> - We’re now done editing the ProductReviews.html panel so click the “Save” button in the blue toolbar at the top of the QuickEdit window but don’t close the window – we’re now going to edit another file
- On the left side of the QuickEdit window you’ll see a list of files. Scroll down until you find the “product.html” file and click on it to load its contents into the editor
- Just above the </body> tag near the very end of the product.html file, add the JavaScript from the second Disqus text box (the “comment count code” box in the screenshot above) like so:
-
— Paste the code here —
</body> - Click the “Save” button in the blue toolbar at the top of the QuickEdit window and close the window – we’re finished editing our HTML (I told you it would be easy!)
So just to recap, we’ve pasted the JavaScript from the first textbox on Disqus into our ProductReviews.html panel after the <h3> tag and we’ve pasted the JavaScript from the second textbox on Disqus into our product.html layout file, just before the </body> tag.
To see the Disqus comments in action, just click the “View Store” link in your control panel and go to a product page. Here’s a screenshot of my integration which you can see in my test store here (feel free to leave a comment too!):
If you integrate Disqus then instead of moderating comments through your BigCommerce control panel, you’d instead login to Disqus.com and moderate them there. Don’t forget to log back into Disqus so you can enable all of the extra features you saw in step two when signing up.
Well, that’s all there is to it! Disqus is a fantastic commenting system and if you do integrate it with your store feel free to leave a comment below with a link so other BigCommerce merchants can take a look!
Try BigCommerce free for 15 days and see why it's loved by over 10,000 successful businesses.
Mitchell Harper Reply:
March 14th, 2010 at 8:50 pm
Hi Jeff. It picks up tweets, etc about products in your store, so the tweet (for example) needs to link back to your product page so Disqus can find it.
[Reply]