# Integrate review scores from other apps.

In this guide, we will demonstrate how to integrate the review score from an external application into the product card, positioning it below the product title.

### 1. Edit Product Card

#### 1.1. Inspect the Product Title Element

To accurately place the review score, it is necessary to identify the class associated with the product title. Follow these steps:

* Open your collection page, such as <https://demo-clo.myshopify.com/collections/clothing-1-2>
* Highlight the product title then right-click and select Inspect (or press `F12` to use the browser's developer tools).
* In the Elements tab of the developer tools, locate the class assigned to the product title.

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

For example, in Smind’s collection page, the product title is assigned this class. By identifying the correct class, you ensure that the review score is displayed consistently within the product card layout

```
smi-product-title
```

#### 1.2. Edit Product Code To Insert Integration Code

To integrate the review score correctly, follow these steps:

**Step 1: Access the Theme Code Editor**

* Navigate to **Shopify Admin > Sales Channels > Online Store**.
* Select your **current theme**, then click **Customize**.
* Click on the **three-dot icon** in the top-left corner and choose **Edit code**.

<figure><img src="/files/5baXS2rsb9XmkZx5OyC5" alt=""><figcaption></figcaption></figure>

**Step 2: Locate the Product Card File**

Since you are editing the **Smind product card**, locate the relevant file `smi-product-card.liquid`.

**Step 3: Insert the Integration Code**

* In the code editor, press `Ctrl + F` to search for the line containing `smi-product-title`
* Insert the integration code **at the end of those lines** to ensure the review score appears directly below the product title.

By following these steps, you will successfully integrate the review score into the product card layout.

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

### 2. Insert Code From Review App

#### 2.1. Judge.Me Review

Navigate to Shopify Admin > Apps > Judge.me Reviews > Widgets > Star Rating Badge > Customize then copy the widget code

```
<!-- Start of Judge.me code --> 
  <div class='jdgm-widget jdgm-preview-badge' data-id='{{ product.id }}'> 
    {{ product.metafields.judgeme.badge }} 
  </div> 
<!-- End of Judge.me code -->
```

{% hint style="info" %}
To test, you should choose Display properties > Always show the widget. Therefore, product has no reviews will still show this review widget
{% endhint %}

Paste the code to the place which have been determine in 1.2

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

The result will be look like this&#x20;

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


---

# 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://docs.smind.io/faqs/integrate-review-scores-from-other-apps..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.