---
title: "Centering the Star Rating 3.0 on your Shopify Store"
slug: "centering-the-star-rating-30-on-your-shopify-store"
updated: 2024-04-01T08:01:09Z
published: 2024-04-01T08:01:09Z
canonical: "support.yotpo.com/centering-the-star-rating-30-on-your-shopify-store"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.yotpo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Centering the Star Rating 3.0 on your Shopify Store

Products

			
				
					
						  

					
					Reviews
		
			

				

###### Supported plans

				

Free, Starter, Pro, Premium, Enterprise

			
			

				

###### eCommerce Platform

				

Shopify, Shopify Plus

			

In this article, you'll learn how to center the star rating on your category pages and homepage using external code.

	
	Available for:
	Merchants using the new Star Rating 3.0. If you’re using the previous version, see [this article](/v1/docs/centering-the-star-rating-on-your-shopify-store)

## Important to know

- By default, the star rating is left-aligned
- The code is generic and provided as is. Implementation or modification of this code is not supported by Yotpo
- We recommend using the services of a developer for the purpose of integrating this customization into your website

## Setting it up

Add the CSS rule below to the top of any parent template (ie. category.html / collection.liquid etc.)

Avoid putting the code within the item template, as it will cause unnecessary repeats of the same CSS rule and may cause performance issues.

	

```css
<style>
.yotpo-star-ratings-layout {
justify-content: center;
padding-top: 10px;
}
</style>
```

## Troubleshooting

Centering the star rating on category pages may sometimes cause the star rating to be centered on the product pages as well. This happens if the code doesn't specify which of the star ratings should be centered, so it centers both.

You can easily fix this issue by adding an ID to the code and the CSS rule. For example, use this code on the category page:

	

```css
<div class="yotpo bottomLine" id= "category" style="display:inline-block"
         data-product-id=" product.id ">
    </div>
      **      
  <style></style>
```

A unique ID for the category page star rating ensures that only this star rating will be centered, and all the other star ratings will remain left-aligned.