--- title: "Customizing the Star Rating Widget" slug: "customizing-the-star-rating-widget" updated: 2025-05-08T13:22:04Z published: 2025-05-08T13:22:04Z canonical: "support.yotpo.com/customizing-the-star-rating-widget" --- > ## 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. # Customizing the Star Rating Widget Products Reviews ###### Supported plans Free, Starter, Pro, Premium, Enterprise ###### eCommerce Platform Shopify, Shopify Plus, BigCommerce ## Goals and Outcomes Star ratings are a subtle yet powerful way to build trust with shoppers. Displayed on product and category pages, these ratings reflect the average aggregated rating of a product’s published reviews and link directly to full review content. This helps drive engagement and increase buyer confidence right where purchase decisions are made. In this article, you’ll learn how to customize the Star Rating widget to match your brand and create a seamless customer experience. ## Accessing the Star Rating Widget Editor Follow these steps to customize your Star Rating widget: 1. In your Yotpo Admin, go to **On-Site Widgets**. 2. On the **Star Rating** tile, click **Edit**. 3. Use the editor to customize the look and feel of the widget. 4. When done, click **Save Changes**. > [!WARNING] > Note > > If you haven't yet added the widget to your store, click on the platform relevant to you to learn how to add it: > > - [Shopify](/v1/docs/adding-the-star-rating-30) > - [BigCommerce](/v1/docs/adding-30-widgets-to-bigcommerce-stencil) > - [Adobe Commerce](https://support.yotpo.com/docs/adobe-commerce-2-setting-up-yotpo-reviews-extension-400#setting-up-your-widgets) > - [WooCommerce](https://support.yotpo.com/docs/woocommerce-installing-yotpo#3-installing-yotpo-elements-on-product-pages) ### Advanced Customization > [!NOTE] > Available for > > The CSS editor is only available with the Yotpo Premium plan. For greater flexibility, you can style the widget using CSS: 1. Go to **Star Rating > Advanced**. 2. Click **Edit CSS** to open the CSS editor. ## Customization Options ### General Settings | **Setting** | **Description** | | --- | --- | | Stars | The color used for the stars. | | Font | The font used for the text indicating the number of reviews. [Learn how to add a custom font](/v1/docs/adding-a-custom-font-to-your-widget) | ### Widget Placement #### Product page These settings will only affect the Star Rating widget on product pages. | **Setting** | **Description** | | --- | --- | | Alignment | This will affect the location of the star rating and review count text in comparison to the product title. Default: Left | | Number of reviews | When on, displays the total number of reviews submitted for this product. Default: On | | Text | The text that is used in the star rating. Default: {{reviews_count}} reviews | | Text color | The color used for the text indicating the number of reviews. | | Average rating score | When on, displays the average star rating this product received. Default: On | | Clickable star rating | When activated, clicking the Star Rating will direct shoppers to read full reviews, which can be displayed in either the Reviews Widget or the Reviews Summary, as chosen in the **Click to** option. Default: On | | Click to | Choose whether to direct shoppers to read full reviews in the Reviews WIdget or the Reviews Summary. | | Show when there are no reviews | When on, Star Rating will display an empty rating. Default: On | | Allow shoppers to write a review | When on, and your reviews have not been published yet, the display will invite shoppers to submit a review. Default: On | #### Other pages These settings will affect the Star Rating widgets on your homepage, collection page, and cart page. | **Setting** | **Description** | | --- | --- | | Alignment | This will affect the location of the star rating and review count text in comparison to the title above it. | | Number of reviews | When on, displays the total number of reviews submitted. Default: On | | Average rating score | When on, displays the average star rating. Default: On | ## Reviews Summary The Reviews Summary makes it easier for shoppers to quickly find the information they need by highlighting the main topics that appear across existing reviews in the Reviews Widget. To learn more about The Reviews Summary, go to [Adding the Reviews Summary](/v1/docs/adding-the-reviews-summary) --- ### FAQ #### Can I hide the star ratings when there are no reviews? Yes, to hide the star ratings when there are no reviews to display, follow these steps: 1. Go to **Onsite Widgets > Star Rating**. 2. Select the **Star Rating widget** with the gear icon. 3. Under **Widget Placement**, click on **Product Page**. 4. Scroll to **Empty State** and toggle off **Show when there are no reviews**. 5. Save changes. > [!WARNING] > Note > > This is only applicable to Star Ratings V3, for older version of the widget The star rating will only appear next to products that have reviews. ## Related - [Adding the Star Rating to Shopify](/adding-the-star-rating-to-shopify.md) - [Adding the Reviews Widget to Shopify](/adding-the-reviews-widget-to-shopify.md)