Enhance Your Shopify Collection Page: Optimizing Star Rating Placement on the Be Yours Theme

Hey fellow store owners! It's always great to dive into the Shopify community forums and see how everyone is tackling common challenges. Recently, I stumbled upon a fantastic discussion that really highlighted the power of small tweaks for a big impact on user experience. The thread, started by LeanneJ12, was all about a common aesthetic dilemma: how to move the product star rating on the collection page, specifically for the popular Be Yours theme, from beneath the price to a more prominent spot right under the product title.

LeanneJ12 had a clear vision: a cleaner, more intuitive layout where customers could immediately see product ratings alongside the title, before even glancing at the price. Take a look at the "before" visual she shared – it really helps illustrate the goal:

And honestly, it's a brilliant goal! Moving those stars can significantly improve how quickly a customer processes product information. It’s all about guiding the eye and making the purchase decision just a little bit easier. The good news? The community quickly rallied, offering up some excellent solutions that I'm excited to share with you.

The Community's Expert Solutions

Several helpful members chimed in, offering different angles to approach this. Guleria suggested checking the review app's manual or diving into the snippets/card-product.liquid file. Dan-From-Ryviu echoed this, specifically mentioning the card-product.liquid file as the place to adjust the star review code. These are solid points, especially if you're dealing with a specific review app's integration. However, for a quick and often effective visual reordering, CSS is your friend!

Two distinct CSS-based solutions emerged, both leveraging the power of Flexbox to reorder elements without needing to touch the underlying HTML structure. Let's break them down.

Method 1: Tweaking base.css for Flexbox Magic (Thanks, devcoders!)

One of the most comprehensive CSS solutions came from devcoders, who provided a step-by-step guide to modify your theme's base.css file. This method uses Flexbox's order property to tell your browser exactly where to place each element within the product card. It's super effective for re-arranging items visually.

Step-by-Step Instructions:

1. Go to your Shopify Admin.
2. Navigate to Online Store → Themes.
3. On your current theme (which is "Be Yours" in this case), click the … (three dots) button, then select Edit code.
4. Open the Assets folder.
5. Locate and open the base.css file.
6. 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;
}

7. Click Save.
8. Refresh your collection page and verify that the star rating now appears below the product title and above the price, just as LeanneJ12 wanted!

What this CSS does is essentially turn the product card's information wrapper into a flexible column. Then, it assigns an order to each element: product text first, then the rating, then any rating text/count, and finally the price. Smart, right?

Method 2: Using Custom CSS in Theme Settings (Kudos to tim_tairli!)

Another excellent CSS approach was shared by tim_tairli, who pointed out that the Be Yours theme doesn't have a built-in setting for this, but custom CSS is a perfect workaround. This method is often preferred by those who want to keep their core theme files as untouched as possible, as custom CSS can be added directly via the theme customizer.

Step-by-Step Instructions:

1. Go to your Shopify Admin.
2. Navigate to Online Store → Themes.
3. On your current theme, click Customize.
4. In the theme editor, click the Theme settings (cog icon) in the bottom left sidebar.
5. Scroll down and find the Custom CSS setting.
6. Paste the following code into the Custom CSS box:

.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;
}

7. Click Save in the top right corner.
8. Check your collection page to see the updated layout.

Tim_tairli even provided a fantastic visual comparison of the before and after, which really helps grasp the transformation:

→

This snippet also uses Flexbox to arrange the elements. The key difference here is that it explicitly sets the .price to order: 1;, effectively pushing it to the end of the flex container while the other elements maintain their natural order, or are implicitly ordered before the price. The optional margin-block for the rating is a nice touch for visual spacing.

A Word on Editing card-product.liquid

While the CSS solutions are fantastic for reordering, it's worth noting that if you ever need more fundamental structural changes – for instance, if you want to wrap elements in new divs or completely change their HTML hierarchy – you'd likely need to delve into the snippets/card-product.liquid file. This file is where the actual HTML structure of your product cards on collection pages is defined. However, for simply moving the star rating from one spot to another within the existing structure, CSS is generally the safer and quicker path.

Just remember, whenever you're making code changes to your theme, it's always a good idea to duplicate your theme first. This creates a backup, so if anything goes awry, you can easily revert to the previous version without any headaches.

LeanneJ12's initial query and the subsequent community responses really underscore how powerful small, targeted customizations can be. Whether you choose to edit base.css or use the Custom CSS section, these methods offer a straightforward way to fine-tune your Be Yours theme's collection page. It just goes to show you that with a little CSS and the collective wisdom of the Shopify community, you can make your store shine exactly how you envision it!