Hi there,
I’m wanting to get my review app to display the star ratings widget next to the product price
See below screenshot to see approximate desired placement.
Thank you!
Topic summary
A user wants to reposition their review app’s star ratings widget to display next to the product price on their product page, rather than in its current location.
Proposed Solutions:
Multiple contributors offered CSS code snippets to adjust the positioning:
- One solution uses negative margins (
margin-top: -30px; margin-left: 70px) to move the review block - Another suggests
margin-top: -30px !important; margin-left: 80px !important
Both approaches include screenshots showing the desired desktop and mobile results.
Key Limitation Identified:
A critical issue was raised: the CSS solutions work for standard pricing but cause overlap when products have discounts or longer price strings (4+ digits). The fixed pixel values don’t accommodate variable price lengths.
Current Status:
The discussion remains unresolved. The original poster acknowledged the CSS works for non-discounted products but fails with discounts. Multiple participants recommended contacting the third-party review app’s support team directly, as structural changes to the app’s widget may be necessary for a robust solution that handles all pricing scenarios.
1 Like
Hello @kirsten11123 , I think these review stars are from the third-party app. So simply you need to changes in your widget structure if they provide a widget to put this code and if they provide this from the block of section in the product’s page then you have to get the support of the app.
Best regards
2 Likes
@kirsten11123 oh sorry for this issue and thanks for post can you try this code
- Go to Online Store->Theme->Edit code
- Asset->/theme.css ->paste below code at the bottom of the file.
#shopify-block-lai_product_reviews_star_rating_product_CE7Bf8 {
margin-top: -30px;
margin-left: 70px;
}
After This code apply this view
Hello @KetanKumar , What if price digits are more than 3…4. Look at the below screenshot! With CSS given by you.
It will be overlapped! Not a fair solution!
1 Like
@Darshanp712 Thanks for checking but Customer site no more price so don’t worry about its work as well
Dear @kirsten11123
I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!
Step 1: Go to Admin → Online store → Theme > Edit code:
Step 2: Search for the file theme.css. And add this code snippet to the end of the file.
.product__meta .scm-reviews-rate {
margin-top: -30px !important;
margin-left: 80px !important;
}
Step 3: Save your code and reload this page.
=>> The result:
#Desktop:
#Mobile:
I hope these instructions will help you. If they are helpful, don’t forget to like and mark as the solution.
Have a nice day sir!
1 Like
Hey @kirsten11123 ,
Just like @Darshanp712 said, these review stars are from the third-party app. And just like he said, you’ll need to change the structure.
I was able to attain this previously with the previous store I worked with, and my solution was to change the structure of the page or change how the blocks were rendered on the page. Then add necessary CSS so that it will sit beside the Product Title.
1 Like
Thanks for your suggestion - it works great when products don’t have a discount, but it overlaps when it does. I think the best bet is to contact the app developers as suggested below.
Thank you for your suggestion, yes I will contact the app to get their assistance. Thank you!