Make Stars in line with price

Store Design

Topic summary

A user seeks help aligning review stars horizontally with the product price on their Shopify store’s product pages (Palo Alto theme). The original layout shows stars positioned below the price.

Solutions Offered:

  • One respondent offers to implement custom code directly via store collaboration access
  • Dan from Ryviu provides CSS code using media queries and float properties to reposition the review badge element
  • Parampreet suggests alternative CSS targeting specific product block classes with float and width adjustments

Outcome:

The issue is resolved. After initial confusion about CSS placement, the original poster successfully implements Dan’s solution by adding the code to the correct settings section. Parampreet’s approach caused unintended layout shifts with elements moving to the right side.

The working solution uses CSS floats and negative margins to position the review stars inline with pricing on desktop viewports (750px+).

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

Hi all,

Happy Wednesday. I’m redesigning the product pages on our website to be neater and was hoping someone could assist me to get the review stars in line with the product price.

Theme: Palo Alto

URL: BEST AU DEALS - Gaggia Cadorna Barista Plus – Prestige Coffee

image
image775×545 45 KB

Any help would be greatly appreciated.

Thank you so much in advance. This community has been such an amazing help today and we’re almost there!

2

Hey @MollieHammond,

In order to inline the stars with the price requires to do the custom code in your theme file.

Could you please share your store collab code in the p/m so that I can do the requested changes in your theme file.

Best,

Daniel Smith

3

Please add this code to do that.

@media (min-width: 750px) {
  .product__block:has(.jdgm-preview-badge) {
    float: right;
    margin-top: -34px;
    margin-right: 170px;
  }
}

Screenshot 2025-10-15 at 14.26.23
Screenshot 2025-10-15 at 14.26.231558×864 76.5 KB

Best regards,
Dan from Ryviu: Product Reviews App

1 Like
4

Go to Online store >> Themes >> Customize >> Click on Settings icon to the left >> Scroll down to the bottom and paste it to the custom CSS tab.

.product__block.product__form__wrapper.btn–half {
clear: both;
}

.product__block.standard__app.aos-init.aos-animate {
float: right;
}

.product__block.product__price-and-badge.aos-init.aos-animate {
width: 68%;
float: left;
}

image
image1912×962 189 KB

5

Hi Dan,

Thanks so much for taking the time to help. Unfortunately putting this code into the ‘Custom CSS’ section on the front theme editor didn’t work. Do you know where I need to put this?

6

Hi Parampreet,

Thanks so much for taking the time to reply. Unfortunately that moved everything to the right hand side as below

image
image1213×562 86.3 KB

7

Hi Dan,

Sorry I added it to a different section in settings and it’s worked perfectly! Thank you so so much!