Make price and reviews show inline

[kirsten11123]

Hello, I'd like the price and review stars to show on the same line (price first) on both desktop and mobile. What code do I need to achieve this? Thanks!

https://epvaujwzri1dz8cj-86278439194.shopifypreview.com

[The_ScriptFlow]

Hey @kirsten11123.,

In order to show the review and price in one line then you need to combine the pricing and Review Star in one Block.

Like this.

<div class="custom_review_prcie">
Price Block Coding here.
Review Block Coding Here.
</div>

After that you need to apply the Css to that.

<style>
.custom_review_prcie {
  display: flex;
  gap: 10px;
}
</style>

You can find these Blocks in product.liquid file.

If you need help to implementing these then please share the collab code in the p/m.

Thanks

[kirsten11123]

That's great @The_ScriptFlow , thank you! 

Can you see if you can work out how to get the price centered to the stars? I tried but failed!

[Dan-From-Ryviu]

Hi @kirsten11123 

Please add this code to the bottom of your theme.css file. 

.product__block--price,
.product__block:has(.okeReviews) { display: inline-flex; }
.product__block:has(.okeReviews) { margin-left: 12px }

[topnewyork]

Hi @kirsten11123,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.product__block.product__block--price {
    margin-top: 3px !important;
}

Thanks!

[Sayed_Safin]

Hi @kirsten11123 ,
To get the price centered to the stars, please follow the steps -
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.custom_review_price .product__block.product__block--price{
    margin: 0 !important;
    padding: 4px !important;
}

Thanks!