Big Cartel Theme Support

How do I add comments to my product page?

How do I add comments to my product page?

Choose a service

To add comments to your product page, first select the service you wish to use. There are many options available. We’ve listed a few below but, if you find a different service your prefer, the method for working with each service is basically the same.

Precautions

Page load speed

Your new comments code may be a little slow when first added, while it updates your site information. However, if your comments code continues to impact your product page load speed, we strongly suggest that you remove the code or switch to another service.

Comments may be nice, but page load speed is way more important!

Custom domain

If you are using a custom domain, make sure that it is set up correctly before proceeding. Otherwise, your comment code will generate an error.

Maintenance mode

When testing your comment code after installation, make sure your shop is not in maintenance mode. Otherwise, your comments may not be displayed.

Preparing your insert content page

Once you have selected the service you wish to use, choose an Insert Content method — detailed at Insert Content - Product Page — for adding your code to your product pages. The most commonly used method for product comments is x-ic-after-product, but consider other options if this does not suit your needs.

Once you have decided which insert content method you are using, navigate to the Customize design > Pages area of your Big Cartel admin.

If your insert content page does not already exist, then create it per the insert content method instructions. For example, if you are using the x-ic-after-product method:

1. In the Customize design > Pages area of your Big Cartel admin, create a new page with the exact title:

x-ic-after-product

2. Important: Switch to HTML edit mode per How do I switch to HTML edit mode?

You are now ready to add the comments code to your insert content page.

Adding the comments code

To correctly add the comments code to your insert content page, refer to the instructions provided by your comments service. In general terms you will need to:

  1. Copy the code provided by your comments service.
  2. Paste it into your insert content page (see previous section).
  3. Edit the code per the comments service’s instructions.
  4. Save your changes in your Big Cartel admin.
  5. Test your new comments system (make sure maintenance mode is turned off for testing).

Following are some examples of applying these steps.

Example 1: Facebook comments

If you want to enable moderation and other features for your Facebook comments, you must first get a Facebook App ID for your web site. To do this, refer to our support article How do I apply a Facebook application ID to my Big Cartel shop?

Once you have a Facebook app ID (or if you decided you don’t want to use one), proceed as follows:

1. Navigate to the Facebook comments code generator.

2. In the URL to comment on field, enter the following URL:

http://test.com

3. Select your other preferences, and then click the Get Code button.

4. In the popup box, ensure that HTML5 is selected.

5. If you created an app ID, ensure that the correct app is selected and it is public.

6. Copy the code from the first text box. Do not close this browser window yet.

7. Paste the code into the content of the insert content page at your Big Cartel admin (see section Preparing your insert content page above). For example, pasting the following into your x-ic-after-product page:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Do not close the page edit area yet.

8. Return to the Facebook comments code generator and copy the code from the second text box.

9. Return to your Big Cartel admin and then paste the additional code after the code you peviously pasted. For example:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-comments" data-href="http://test.com" data-width="100%" data-numposts="5" data-colorscheme="light"></div>

10. Replace the test URL http://test.com with the following Big Cartel template code that will automatically generate the URL for each product page:

{{ store.url }}{{ page.full_path | split: '?' | first }}

For our example, our code will now look like this:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

[[clearspace height="30"]]

<div class="fb-comments" data-href="{{ store.url }}{{ page.full_path | split: '?' | first }}" data-width="100%" data-numposts="5" data-colorscheme="light"></div>

Note that we added a [[clearspace]] shortcode — see Shortcodes - Add or remove space — to create some space between our standard product page content and our comments. This is optional.

11. Click the Done button and then click the Save link to apply your changes.

12. Navigate to your product pages and allow the Facebook comments to load. If your shop is in maintenance mode, you may need to turn maintenance mode off for your comments to work. It may also take a few minutes for Facebook to update your site information and then allow your Facebook comments to start working or loading quickly on your shop.

13. Once your comments are loading correctly, review page load speed and comment appearance and functionality on your desktop and mobile devices. Adjust as necessary.

Example 2: Discuss comments

1. Navigate to the Disqus embed instructions.

2. Use the Quickstart Guide link to register your web site.

3. Copy the Embed code.

4. Paste the code into the content of the insert content page at your Big Cartel admin (see section Preparing your insert content page above). For example, pasting the following into your x-ic-after-product page:

<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'example'; // Required - Replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>

5. Replace the example Disqus shortname example with your own Disqus shortname and define the disqus_url with the following Big Cartel template code that will automatically generate the URL for each product page:

{{ store.url }}{{ page.full_path | split: '?' | first }}

For our example, our code will now look like this::

[[clearspace height="30"]]

<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'aarcadeshop'; // Required - Replace example with your forum shortname
    var disqus_url = '{{ store.url }}{{ page.full_path | split: '?' | first }}'; // a unique URL for each page where Disqus is present

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>

Note that we added a [[clearspace]] shortcode — see Shortcodes - Add or remove space — above our code, to create some space between our standard product page content and our comments. This is optional.

6. Click the Done button and then click the Save link to apply your changes.

7. Navigate to your product pages and allow the Disqus comments to load. If your shop is in maintenance mode, you may need to turn maintenance mode off for your comments to work. It may also take a few minutes for Disqus to update your site information and then allow your Disqus comments to start working or loading quickly on your shop.

8. Once your comments are loading correctly, review page load speed and comment appearance and functionality on your desktop and mobile devices. Adjust as necessary.

AarcadeHow do I add comments to my product page?