# Add star rating to product card

Before the restriction of [Asset API](https://shopify.dev/docs/api/admin-rest/2023-10/resources/asset), we could automatically add the snippet to your theme code. However, we can no longer since the recent update of Shopify, you will need to add our snippet to your theme in the meantime. 

{% hint style="info" %}
We are actively asking for the whitelist of the Asset API. We will soon bring this back to the automatic mode.
{% endhint %}

## **Option 1: Use Theme Default Star Rating**

For products that meet Shopify's standards, you can use the default star rating display from review apps. 

This option aligns with your theme design but may not be as visually appealing and won't show for products without reviews.

<figure><img src="/files/iJOZDE37bOVMtKEfKtWh" alt=""><figcaption></figcaption></figure>

## **Option 2: Add Our Snippet to Your Theme Code**

Shopify encourages merchants to manually add custom liquid blocks for transparency. Here’s how to add the star rating snippet to your theme, specifically using the Dawn theme as an example.

**Find the Product Card Liquid File and Insert Snippet**

1. **Locate the Product Card Liquid File:** In the Dawn theme, find the position before the theme rating display.

<figure><img src="/files/bAKtSuJf6pSqZC9EE6m7" alt=""><figcaption></figcaption></figure>

2. **Insert the Snippet:**

```html
<div
  class="AirReviews-Widget AirReviews-Widget--Stars"
  style="margin-top:0.7rem"
  data-review-avg="{{ card_product.metafields.air_reviews_product.review_avg }}"
  data-review-count="{{ card_product.metafields.air_reviews_product.review_count }}"
></div>
```

Ensure the `card_product` object matches your theme’s product object (e.g., `product_card`, `product`).

3. **Save Your Changes:** Save the file and check your store to see the star ratings displayed.

<figure><img src="/files/RQMc9Pcl46AAnbfn63Vj" alt=""><figcaption></figcaption></figure>

*By following these steps, you can effectively add star ratings to your product cards, enhancing the overall shopping experience on your Shopify store.*


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.airreviews.io/display-reviews/star-rating/add-star-rating-to-product-card.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.