Hi Everyone,
I need your help with one thing, when I add review section on my website it’s not showing as full width.
Is there a way to show it full width?
Thanks.
Solved
Review Section not Full Width on Shopify
Best answer by Byrne C
Hi
I believe this is happening due to the CSS of your site. You should be able to edit the CSS in a way that allows the reviews to take up the full width of the screen.
Since this involves editing the CSS of a Shopify store, I can’t guarantee that Klaviyo support will be able to provide code for this, but I have seen this CSS work in certain cases:
#klaviyo-reviews-summary { margin-left: auto; margin-right: auto; max-width: 1100px}
and
#klaviyo-reviews-list { margin-left: auto; margin-right: auto; max-width: 1100px}
This CSS would be added to the code on your product pages.
Let me know if this works! Additionally, other members of our community who have experience editing CSS in Shopify may also be able to offer advice here.
Best of luck,
Byrne
+14Hi
I believe this is happening due to the CSS of your site. You should be able to edit the CSS in a way that allows the reviews to take up the full width of the screen.
Since this involves editing the CSS of a Shopify store, I can’t guarantee that Klaviyo support will be able to provide code for this, but I have seen this CSS work in certain cases:
#klaviyo-reviews-summary { margin-left: auto; margin-right: auto; max-width: 1100px}
and
#klaviyo-reviews-list { margin-left: auto; margin-right: auto; max-width: 1100px}
This CSS would be added to the code on your product pages.
Let me know if this works! Additionally, other members of our community who have experience editing CSS in Shopify may also be able to offer advice here.
Best of luck,
Byrne
+17Hello
The review section might be restricted by your theme’s container width. Try these solutions:
-
Check Theme Settings – In your Shopify theme editor, see if there’s an option to adjust the section width to “Full Width.”
-
Edit CSS – Add this to your theme’s CSS file (
theme.cssorbase.cssin the Online Store > Edit Code section):.your-review-section-class { width: 100% !important; max-width: none !important; }Replace
.your-review-section-classwith the actual class used for your review section. -
Check the Review App Settings – If you’re using a third-party review app, check its customization options for width adjustments.
Let me know if you need help finding the exact class name or adjusting the code!
Reply
Rich Text Editor, editor1
Editor toolbars
Press ALT 0 for help
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.