Manual App Installation with Theme Code Editor

If your Shopify theme doesn't support Shopify's new drag-and-drop theme editor to install the widget on your theme, follow this guide to manually install the comments widget into your theme code.

Step 1: Add Snippet to Your Theme

1. Navigate to the Snippets Folder
   • From your Shopify dashboard, go to Online Store > Themes.
   • Click on Actions > Edit Code.
2. Create a New Snippet
   • In the left sidebar, find the Snippets folder.
   • Click on Add a new snippet.
   • Name the new snippet bbcomments.liquid .
3. Add Content to the Snippet:
   • Copy and paste the content from this link into the bbcomments.liquid file:
   • https://gist.github.com/patrickbolle/5ebf48e1dda4899aee63ff52e516b308#file-bbcomments-liquid
4. Create new Assets
   1. In the left sidebar, open the Assets folder
   2. Click on "Add a new asset"
   3. Create two new assets, bbcomments.js and bbcomments.css
5. Add Content to the Assets
   • Copy and paste the content from this link into the bbcomments.css and bbcomments.js files:
   • bbcomments.js: https://gist.github.com/patrickbolle/5ebf48e1dda4899aee63ff52e516b308#file-bbcomments-js
   • bbcomments.css: https://gist.github.com/patrickbolle/5ebf48e1dda4899aee63ff52e516b308#file-bbcomments-css
6. Save the theme
   • Click Save in the top right corner of the code editor.

Step 2: Find the Article Template Liquid File

1. Locate the Article Template File:
   • The article template file is generally one of the following:
     • sections/article-template.liquid
     • snippets/article.liquid
     • sections/article.liquid
     • sections/article-content.liquid
2. Search for the Article Content Code:
   • Open each of the files listed above and search for the following code:
     • {{ article.content }}

Step 3: Add the bbcomments Render String

1. Insert the Render String:
   • Once you find the {{ article.content }} code, add the following string directly below it:
     • {% render 'bbcomments' %}
2. If You Have the Recipe Kit App Installed:
   • If you have already installed the RecipeKit app, add the bbcomments render string underneath the {% render 'recipekit' %} code in order to have your blog comments displaying underneath the recipe card.
3. Save the Changes:
   • Click Save in the top right corner of the code editor.

Additional Notes

• Ensure Compatibility: Make sure that the bbcomments.liquid snippet and the render string are compatible with your Shopify theme.
• Test the Integration: After saving the changes, test your blog posts to ensure that the comments section appears correctly and functions as expected.
• Seek Help if Needed: If you encounter any issues, feel free to contact our support team for assistance.

By following these steps, you can seamlessly integrate the Better Blog Comments app into your Shopify store, enhancing your blog posts with a robust commenting system.