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.

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.

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.

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 -->

To test, you should choose Display properties > Always show the widget. Therefore, product has no reviews will still show this review widget

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

The result will be look like this