XboostHelp Center
Get Xboost

Display Xboost Star Rating Review

Collections pages

To display the Rating Widget on your collection pages:

  1. Inside the Shopify Themes menu, click the ... button, and select Edit code:
  2. Open the template or section you use for the product in your collections (under snippets, product-grid-item.liquid / product-loop.liquid / product-info.liquid / product-card-grid.liquid / card-product.liquid but some themes work differently).
  3. Copy the code below:
<div class="xboost-rating" data-review-rate="{{ card_product.metafields.xboost.avg_rating.value }}" data-review-count="{{ card_product.metafields.xboost.num_reviews.value }}" data-product-id="{{ card_product.id }}"></div>

Ensure the card_product object matches your theme’s product object (e.g., product_card, product). 4. Paste it where you want the rating icons to appear on your collection listing (we recommend below the product's title), and save your file.

For example (Dawn theme):

Homepage featured product

To display the Rating Widget on your homepage featured product section:

  1. Inside the Shopify Themes menu, click the ... button and select Edit code:
  2. Open the template or section you use for the homepage featured product (usually called featured-product.liquid or homepage-product.liquid, but each theme varies).
  3. Copy the code below:
<div class="xboost-rating" data-review-rate="{{ product.metafields.xboost.avg_rating }}" data-review-count="{{ product.metafields.xboost.num_reviews }}" data-product-id="{{ product.id }}"></div>
  1. Paste it where you want the rating icons to appear (we recommend below the product's title), and save your file.

For example (Dawn theme):

To display the Rating Widget on your Cart page:

  1. Inside the Shopify Themes menu, click the ... button and then select Edit code:
  2. Open the template or section you use for cart pages (usually called cart.liquid or cart-template.liquid, cart-drawer.liquid but themes by vary)
  3. Copy the code below:
<div class="xboost-rating" data-review-rate="{{item.product.metafields.xboost.avg_rating}}" data-review-count="{{item.product.metafields.xboost.num_reviews }}" data-product-id="{{ item.product.id }}"></div>
  1. Paste it where you want the rating icons to appear on the cart page, and save your file.

For example (Dawn theme):