How To Add A Comment Box On The Shopify Product Page
Table Of Contents
Adding a comment box on your Shopify product page is a great way to encourage customer interaction with your products. Our guide will walk you through two ways to insert a comment box to your Shopify store with and without code.
2 Ways To Add A Comment Box On Shopify Product Page
In option one, we will instruct you to add a comment box by code. This way, you have full power over how your comment part looks and works. But you need to know some simple HTML and CSS to do it.
Don't worry if you don't know how to code. We've listed option two below, which works great for people of all technical levels.
Option 1: Manually Add A Shopify Comment Box
If you don't know how to code, we recommend using the other options outlined below.
If you know how to code, you can insert code to add a comment box on your Shopify product page. However, you must use custom CSS to design a customer comment box that fits your store.
Here's a basic guide:
Step 1: Click the Online Store > Customize from your Shopify admin.
Step 2: Then the Shopify theme editor will appear; go to the product page if you want to add a comment box on the Shopify product page.
Step 3: In the "Template" section, click on the "Add section" option. Then select the "Custom Liquid" option and drag and drop it to the position where you want the comment box to appear.
For example, in this step, we will put the comment box above the footer.
Step 4: Paste these code at the desired location on the page:
<div id="comments"> <h2>Customer Reviews</h2> <form action="/comments" method="post"> <textarea name="comment{body}" required></textarea> <input type="submit" value="Submit"> </form> </div> |
Step 5: Choose the "Save" button to apply the modifications.
NOTE: This is a basic example. You might need to customize the code further to match your theme's style and add features like comment moderation or display.
An example is using code to insert a comment box into a Shopify product page.
In the tip section below, we suggest custom CSS codes for the comment box. If you are interested, scroll down and refer to it.
Option 2: Add A Shopify Comment Box With Third-Party Apps
To avoid errors caused by using code, you can use an application with a comment box template. This section will guide you in using the POWR Customer Comments application.
Step 1: Search the Shopify App Store for the "POWR Customer Comments" application.
Step 2: Then, you can choose templates from the application's customer comment box and click the "Use template" button.
Step 3: You'll be taken to the "Settings" menu after that. In the "Admin Emails" part, type in the email address that admin members will use to be informed when someone posts a review.
Step 4: In the "Design" option, custom for your needs:
- Colors & Font option to customize the color and font for the comment box.
- The buttons option is in the button customization section in the comment box.
- Border is an option to customize the border of the comment box.
- The advanced option is for you to add custom CSS code.
Step 5: Click the "Publish" button in the top right area of the screen to save the change.
We suggest other apps supporting comment box templates in the following section for more options.
3 Shopify Comment Box Apps You Should Try
If coding isn't your forte, or if you prefer a more streamlined approach, Shopify apps offer a user-friendly solution for adding comment boxes to your store. Let's explore some popular options:
Stamped Product Reviews & UGC
Stamped Product Reviews & UGC provides a complete toolkit for companies using user-generated material.
Rating in 2024: 4.8/5.0 ⭐ (6368+)
Stamped Product Reviews & UGC on the Shopify App Store.
Key features:
- Comprehensive display options offer multiple ways to showcase comments, reviews, and other content, including carousels, grids, and social feeds.
- The diverse collection gathers user-generated content, including reviews, photos, videos, and questions.
- In-depth analytics provides detailed insights into customer behavior and engagement.
- Seamless integrations with various platforms for broader reach and automation.
Pricing:
POWR: Customer Comments
POWR: Customer Comments offers many tools that can help you get more comments and interaction from your website visitors.
Rating in 2024: 4.5/5.0 ⭐ (132+)
POWR Customer Comments on Shopify App Store.
Key features:
- Comprehensive comment management allows for easy moderation, approval, and denial of comments.
- Automated responses provide the option to set up automated responses for comment submissions.
- Rich media integration enables customers to share visual feedback through image uploads.
- Flexible display options offer various layouts and display options to suit different website designs.
- Detailed analytics tracks user engagement and comment performance.
Pricing:
Comments Plus: Blog Comments
Comments Plus offers several features to enhance blog engagement and interaction.
Rating in 2024: 4.4/5.0 ⭐ (52+)
Key features:
- Thread replies enable users to engage in threaded conversations within comments.
- Rich text editor provides formatting options for comments, improving readability.
- Likes/Dislikes allows users to express their opinions in comments.
- Comment management offers tools to edit or delete comments for moderation.
- Customization adapts to website design with dark and light themes.
Pricing:
Tips For Add Shopify Comment Box Effective
A well-placed and managed comment box can significantly enhance your Shopify store's customer engagement and overall success. Let's look at some good ways to improve your comment box.
Custom CSS Comment Box On Shopify Store
Edelman's study shows that about 4 out of 5 people have to believe a company before buying from it. For online shops that sell things, having a store design that stays true to your brand will show how skilled your business is.
But we're sorry to say that even if you use a customer comment box template like the POWR Customer Comments app, it doesn't always match your brand. You can insert the custom CSS comment box code in this part.
For example, if you manually insert the customer comment box code using the customized Shopify theme.
In the "Custom Liquid" section, scroll down to the "Custom CSS" section and insert the code below.
#comments { background-color: #f2f2f2; padding: 20px; border-radius: 5px; margin-bottom: 20px; } #comments h2 { font-size: 18px; margin-bottom: 10px; } #comments textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } #comments input[type="submit"] { background-color: #007bff; color: #fff; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } |
You can change these characteristics below. This will help your comment box to complement the look of your website.
General comment box styling:
- Background color: background-color: #f2f2f2;
- Padding: padding: 20px;
- Border radius: border-radius: 5px;
- Margin: margin-bottom: 20px;
Heading styles:
- Font size: font-size: 18px;
- Margin: margin-bottom: 10px;
Text area styling:
- Width: width: 100%;
- Padding: padding: 10px;
- Border: border: 1px solid #ccc;
- Border radius: border-radius: 5px;
Submit button styling:
- Background color: background-color: #007bff;
- Text color: color: #fff;
- Padding: padding: 10px 20px;
- Border: border: none;
- Border radius: border-radius: 5px;
- Cursor: cursor: pointer;
You can read a detailed guide to editing CSS on the Shopify store.
For example, the customer comment box is customized by CSS.
Spam Prevention By Turn On Shopify reCAPTCHA
The simplest way to prevent spam comments on your Shopify page is to use Shopify's built-in reCAPTCHA. Allow reCAPTCHA to examine user behavior to distinguish between real people and artificial bots. This greatly reduces spam entries by making users finish a simple task.
Here is our guide to enable Shopify reCAPTCHA:
Step 1: The Spam Protection setting can be found in Shopify Admin > Online Store > Preferences > Spam Protection.
Step 2: To protect the login and signup forms, check the "Enable hCaptcha on contact and comment forms" option.
This should also protect you from Shopify fake accounts and API accounts used to create accounts. You can use the above choice to protect contact and comment forms while you are there.
Step 3: Then Save button.
Consider Other Solutions Based On Your Goals
Obviously, adding a customer comment box alone is not enough.
If your goal is to get customers to leave reviews on your product page, we encourage you to integrate customer reviews from review apps into your product page. Get ideas as the REI brand did in the image below.
REI’s customer reviews on their product page.
Check out: 15+ Best Shopify Reviews Apps You Should Try.
If you aim to answer customer questions through comments, refer to the article guide on adding a Contact Us Button on Shopify.
Also, consider creating an FAQ page to answer common customer questions. The EComposer Builder Page allows you to create an FAQ page with a pre-made template easily. With a drag-and-drop editor, this Shopify page builder app also helps you customize the page easily without coding.
FAQs
Is There A Free Way To Add A Comment Box To Shopify Products?
Yes, as instructed in this article, there are two main ways to add a comment box to the Shopify product page.
Option 1: Add manually by adding code.
Option 2: Use the comment box template of the third app.
Can I Integrate My Comment Box With Social Media?
Yes, you can. Here are some ways to achieve this:
- Social login allows users to comment using their social media credentials.
- Social sharing buttons enable visitors to share comments on social platforms.
- Embed social media feeds or relevant posts within the comment section.
You can make the online community for your goods or services more active and interesting by connecting your comment box to social media.
Can I Track Comment Performance And User Engagement?
Yes, tracking comment performance and user engagement is crucial for optimizing your comment box and understanding its impact. This data may be collected and analyzed using tools and platforms. Choices include:
- Shopify Analytics.
- Other analytics tools include Google Analytics and Facebook Insights.
By monitoring these metrics, you can identify trends, measure the effectiveness of your comment box, and make data-driven improvements.
Key Takeaway
Adding a comment box to the page for your Shopify goods lets you get more customer feedback and get them more involved. By following the steps in this guide, you can add a comment box to your store and make it work how you want it to.
Read our blog for ideas and tips on how to make your Shopify store popular and improve the customer experience.
comments