How to move the comment box above the published comments?

Shopify Discussion
1

Hi,

I’m using spotlight default theme and want to move the comment box (starting from leave a comment to post comment) above the published comments.

Can anyone help me to do that?

Please check out this page for better understanding - https://ausfin.in/blogs/latest-blogs/why-you-should-invest

1 Like
2

I use a different theme, but you need to alter the comments.liquid file to do this. Basically cut and past the ‘form’ tag and its contents and put it above the ‘div’ tag that contains the comments:

Screen Shot 2023-03-06 at 11.18.11 AM.png
Screen Shot 2023-03-06 at 11.18.11 AM.png1858×2026 587 KB

Screen Shot 2023-03-06 at 11.18.35 AM.png
Screen Shot 2023-03-06 at 11.18.35 AM.png930×110 7.72 KB

3

Hi @Abhishek_Singh ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-blog-post.css->paste below code at the bottom of the file:

.article-template__comment-wrapper #comments {
    display: flex;
    flex-wrap: wrap;
}
.article-template__comment-wrapper #comments > * {
    width: 100%;
}
.article-template__comment-wrapper #comments > h2 {
    order: 1;
}
.article-template__comment-wrapper #comments .comment-form {
    order: 2;
    margin-bottom: 60px;
}
.article-template__comment-wrapper #comments .article-template__comments {
    order: 3;
}

PageFlyRichard_0-1678198379718.png
PageFlyRichard_0-1678198379718.png942×796 23.5 KB

I hope it would help you
Best regards,

Richard | PageFly

1 Like
4

Hey @PageFly-Richard ,

How can I move 2 comments below post comment as well.

Thanks for helping me out with this.

5

Hi @Abhishek_Singh ,

Where do you want to move those 2 comments? Is there a screen shot so I can check it for you?

Best regards,

6

Hey @PageFly-Richard ,

I want to move those 2 comments below “post comment button”

7

Hi @Abhishek_Singh ,

You can try below code in section-blog-post.css file:

.article-template__comment-wrapper #comments .comment-form {
    order: -1;
}

I hope it would help you
Best regards,

Richard | PageFly

1 Like