Move Star Rating on Collection Page - Be Yours Theme

Store Design
1

Hi,

I need help moving the product star rating on the collection page from beneath the price to under the product title (please see image).

Untitled design (40)
Untitled design (40)500Ă—500 35 KB

I am using the Be Yours theme. www.pictureperfecthomeware.co.uk.

Thanks,

3

Hello @LeanneJ12 ,

Please follow the app’s manual installation instructions, where you will find all the required steps. Alternatively, you can contact the app’s support team for assistance.

You can also check the snippet file (snippets/card-product.liquid) and adjust the code. The file name or structure may differ depending on the theme you’re using, as I don’t currently have access to your theme files.

Regards
Guleria

4

This looks like a theme own functionality. Unfortunately theme does not provide a setting to do what you want.

You can do this with a CSS code added to the “Theme settings”(cog icon)-> “Custom CSS” setting:

.card-information__wrapper {
  display: flex;
  flex-flow: column nowrap;
}

/* move price to be the last item on product card */
.card-information__wrapper .price {
  order: 1;
}

/* optional -- for better look */
.card-information__wrapper .rating {
  margin-block: -0.5rem 0.5rem;
}

Before/After:

Screenshot 2026-06-15 at 1.43.05 PM
Screenshot 2026-06-15 at 1.43.05 PM622Ă—641 72.7 KB
→
Screenshot 2026-06-15 at 1.43.13 PM
Screenshot 2026-06-15 at 1.43.13 PM622Ă—641 71.1 KB

5

Hi @LeanneJ12

  1. Go to Shopify Admin → Online Store → Themes.
  2. On your current theme, click … (three dots) → Edit code.
  3. Open the Assets folder.
  4. Open the base.css file.
  5. Scroll to the very bottom of the file and paste the following code:

.card-information__wrapper{display: flex;flex-direction: column;}

.card-information__text{
order: 1;
}

.rating{
order: 2;
margin-top: 4px;
}

.rating-text,
.rating-count{
order: 3;
margin-top: 0;
}

.price{
order: 4;
margin-top: 8px;
}
6. Click Save.
7. Refresh the collection page and verify that the star rating now appears below the product title and above the price.

6

You can adjust the placement of the star review code in the **card-product .liquid file to do that.

7

A massive thank you to everyone who has responded to my query, this has now been solved. Thank you!

8

Hi @LeanneJ12

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful, please like all posts. :white_check_mark:

Best regards,
Devcoder :laptop: