Comments are an important part of a blog article. Comments help you have a multi-dimensional perspective on the content you have written and can also receive a lot of praise, agreement or suggestions from people who have read your article.

You can set comments for this post to be allowed and published automatically, also can change the way comments are handled on Blog Post Shopify.

When you click on "News", it will show 3 options to manage how comments are handled on this blog: "Comments are disabled", "Comments are allowed, pending moderation". If you choose "Comments are allowed, and are automatically published" comments will appear freely on your Blog post.

You can mark the comment as spam and it will be hidden, or if you want it to appear again, then unmark the comment. You can also remove comments by selecting Delete on Shopify.

To add Article Comments on Blog post, you click on Elements > Articles. You will see the Comments element in the list. Drag and drop it to any position in the selected structure.

1. Content

PREVIEW: Select an article to preview the Article Comments on the editor page. Click Change to pick an article.


Date format : You can choose the format for the date and time.

Comments per page: Customize the number of comments displayed in each page.
Comment gap : Customize column gap between comments.


Comment pagination allows users to navigate through multiple item pages. It is usually referred to by numbers, hints, arrows as well as “previous” and “next”-buttons.
Pagination style: helps to customize the style of the pagination element in the comments. There are 2 styles Block and Inline.
Pagination layout: helps you to customize the layout of pagination numbers, hints, arrows as well as “previous” and “next”-buttons.
Prev page icon - Next page icon Allow you can change the icon "Prev" "Next" button.
Spacing between page number The slider allow you can customize the spacing between page number in px.

2. Design


You can customize the alignment, background, box shadow, etc for the Article Comments.
To understand more about the configurations for the General at Design Tab, you can read the guide


Typography: This option allow you customize the Font-size, Font-weight, Font-family, Line Height, Text-transform, etc... for the content on this element. You can customize it on many devices.
Text color: Choose a color for the text of the comments here.
Text Shadow: Allow you add a shadow for the content by changing the Blur, Horizontal, Vertical, etc.
Spacing: Adjust the spacing by increasing the margin/padding between the above and below elements (available for desktop, tablet, and mobile devices).


The Author component will help you customize the style of the commenter's name and time. The functions here are similar to the Comments component.


The Date component will help you customize the style of the date. The functions here are similar to the Comments component.


In Pagination component allows you to customize the content referred to by numbers, hints, arrows as well as “previous” and “next”-buttons of Pagination Bar.


Background: Choose a background color for the general pagination.
Box Shadow: Set the shadow for the general pagination.
Border: Choose a color for the border.
Border Radius: Set the border radius to control the corner.
Spacing: Set the space general pagination.


Item is numbers, hints, arrows as well as “previous” and “next”-buttons of Pagination Bar.
You can customize the typography, text shadow, box shadow, text color, background, etc for the Items.
Padding: Set the padding around the Items.

There are NORMAL, HOVER, and ACTIVE. NORMAL is the pagination that you see first when browsing the article comment. HOVER is the tags you see when you hover on. ACTIVE is your current position of the pagination bar. You can customize both with different designs.
Hover Tab: The settings under this tab are used to select elements when you mouse over them.
Hover Animation: When a customer hovers over an animated item, it can change grow, shrink, and rotate. This is enjoyable for the customer and shows that your site is working.
Transition Durations: Specifies how many milliseconds a transition effect takes to complete. It allows you to change property values smoothly (from one value to another) when hovering.


Size: You can change the size of the arrows's pagination (available for desktop, tablet, and mobile devices).

Thank you for reading our articles!
Was this article helpful?
Thank you!