--- title: "Centering the Star Rating on your Shopify store Tips & Quick Solutions We are collecting votes for this issue" slug: "centering-the-star-rating-on-your-shopify-store" tags: ["Shopify", "Shopify Plus", "Reviews "] updated: 2024-04-01T23:20:54Z published: 2024-04-01T23:20:55Z canonical: "support.yotpo.com/centering-the-star-rating-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 on Shopify (Legacy) Products Reviews ###### Supported plans Free, Starter, Pro, Premium, Enterprise ###### eCommerce Platform Shopify, Shopify Plus In this article, you'll learn how to customize the Star Rating using external code. **Available for:** Merchants using the previous version of the Star Rating. If you’re using the new Star Rating, see [this article](/v1/docs/centering-the-star-rating-30-on-your-shopify-store) ## Important to know - 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 ## Aligning the star rating By default, the star rating is left-aligned. If you want to center-align the star rating, follow the instructions below according to the desired style. Please note: When the container
of the Star Rating is too small, Yotpo's text wraps and is left-aligned. The following fix will wrap the text correctly and center the elements. ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/f62cfc82-f0cb-406e-85ad-3fc6e9a732b5.png?sv=2026-02-06&spr=https&st=2026-10-31T18%3A16%3A53Z&se=2026-10-31T19%3A16%3A53Z&sr=c&sp=r&sig=sCzQ7WxnZ8GQwqC5Rfv%2F92tY2%2BEy%2F8dIFKSo0oS5qxE%3D) ## Setting it up Add the following CSS rule 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. ```markup ``` ## Troubleshooting Centering the Star Rating on Category pages may sometimes cause the Star Rating feature 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**: ```markup
** ``` A unique ID for the Category Page Star Rating insures that only this Star Rating will be centered, and all the other Star Ratings will remain left-aligned.