Elevate Your Product Display: Moving Star Ratings on Shopify's Be Yours Theme

Hey everyone! As a Shopify migration expert and someone who loves digging into what makes stores tick, I often find myself spending time in the community forums. It's a goldmine of real-world problems and ingenious solutions from fellow store owners and developers. Recently, I stumbled upon a fantastic discussion that perfectly illustrates a common pain point: getting your product page elements exactly where you want them.

The thread, started by LeanneJ12, was titled "Move Star Rating on Collection Page - Be Yours Theme". Leanne was using the popular Be Yours theme and needed a little help. She wanted to move the product star rating on her collection pages from its default spot (which was under the price) to a more prominent position directly beneath the product title. Take a look at what she was aiming for:

The Community Weighs In: Finding the Right Spot for Your Stars

This is a classic example of a small tweak that can make a big difference in how customers perceive your products at a glance. You want those social proof stars to be visible and impactful!

The community quickly jumped in to help Leanne. Guleria offered some initial advice, suggesting checking the app's manual or contacting its support team, and also pointed towards the snippets/card-product.liquid file as a place to look. Dan-From-Ryviu echoed this, specifically recommending adjusting the code in the card-product.liquid file.

While modifying Liquid files is definitely an option for deeper control, often for layout adjustments like this, a bit of CSS magic can do the trick without diving too deep into the theme's structure. And that's exactly where two other community members, tim_tairli and devcoders, provided some fantastic, actionable solutions.

Solution 1: Quick CSS via Theme Settings (Recommended for Simplicity)

Tim_tairli came in with a super helpful CSS snippet that you can easily add right within your theme's custom CSS section. This is often the safest and quickest way to make styling adjustments without touching core theme files directly.

How to Implement Tim_tairli's CSS:

1. From your Shopify Admin, go to Online Store > Themes.
2. On your current theme (like "Be Yours"), click on Customize.
3. In the theme editor, click the Theme settings (the cog icon in the bottom left).
4. Look for a section called Custom CSS or similar.
5. Paste the following code into that section:

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

6. Click Save.
7. Refresh your collection page to see the changes.

Tim_tairli even provided a great before-and-after visual, which is incredibly helpful:

→

Solution 2: More Detailed CSS in base.css

Devcoders offered another comprehensive CSS solution, targeting specific elements and using the powerful order property from Flexbox to rearrange them. This approach involves editing your theme's base.css file, which is a core stylesheet.

How to Implement Devcoders' CSS:

1. Go to your Shopify Admin > Online Store > Themes.
2. On your current theme, click the ... (three dots) button > 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 your collection page and verify that the star rating now appears below the product title and above the price.

A Quick Explainer on the CSS Magic

Both CSS solutions leverage Flexbox, a powerful CSS layout module. By setting display: flex; and flex-direction: column; on the parent container (.card-information__wrapper), we're telling the browser to treat its direct children as flexible items stacked vertically. The crucial part is the order property. This allows you to reorder flexible items within their container, regardless of their original source order in the HTML. A lower order value means it appears earlier in the sequence. This is why these CSS snippets are so effective for rearranging elements without complex Liquid edits.

The Liquid Alternative: For Deeper Control

While CSS is great for visual reordering, sometimes you might need to physically move the HTML elements themselves. This is where modifying the snippets/card-product.liquid file, as suggested by Guleria and Dan-From-Ryviu, comes into play. This file is typically responsible for rendering the individual product cards on your collection pages. If the CSS approaches don't give you the precise control you need, or if you're dealing with elements that CSS simply can't reorder (e.g., if they're not direct siblings in a flex container), then you'd open this Liquid file and physically cut and paste the code snippet responsible for rendering the star ratings to your desired location within the file.

However, be warned: directly editing Liquid files requires a bit more care. Always, always duplicate your theme before making any code changes. That way, if anything goes wrong, you have a working backup to revert to.

Wrapping Up the Stars

It was fantastic to see LeanneJ12 come back to the thread, giving a "massive thank you" and confirming that her query was solved. This really highlights the power of the Shopify community! Whether you're a seasoned developer or a store owner just dipping your toes into code, there's always someone willing to lend a hand. For those of you on the Be Yours theme, or any theme really, wanting to adjust your product star rating placement, you now have a couple of solid, community-tested CSS solutions to get started. Just remember to back up your theme, test your changes, and don't be afraid to experiment a little to get your store looking just right!