Activating the MAG: Product Review on the 1.0 version theme

By, Dhruv Jain05 Apr, 2024

Step 1: Enable Mag: Product Review app embed

      1. From your Shopify admin, go to Online Store > Themes.
      2. Find the theme you want and click Customize.
      3. Go to App embeds and enable Mag: Product Review.
      4. Click Save.

Step 2: Add the Star Ratings code

      1. Once you've enabled our app embed, go back to Online Store > Themes.
      2. Click "..." > Edit code.
      3. Then depending on your theme, the next steps might differ.

ThemeĀ  Ā Installation Steps
Vintage Themes
  • Open product-template.liquid.
  • Under the line that containsĀ <h1Ā class="product_name" itemprop="name">{{ product.title }}</h1>Ā , add the following code:
  • <div id="epr-product-title-review" data-product-id="{{ product.id }}" data-product-handle="{{ product.handle }}" data-product-title="{{ product.title }}"></div>
  • Click Save.

Refresh Theme

Dawn Theme

Origin Theme

Colorblock Theme

Other Themes
  • OpenĀ product-template.liquid.
  • Add the following code under the {{ product.title }} element and click Save.
  • Code:Ā <div id="epr-product-title-review" data-product-id="{{ product.id }}" data-product-handle="{{ product.handle }}" data-product-title="{{ product.title }}"></div>

Step 3: Add the Review Form

      1. Open product.liquid.
      2. Under {% section 'product-template' %}, add the following code: <div id="mag-product-review" data-product="{{ product.id }}" data-product-handle="{{ product.handle }}"></div>
      3. Click Save.

Step 4: Add the Stars on the Collection Page

Collections streamline the browsing experience for customers by organizing products into relevant categories, eliminating the need to sift through numerous pages of items.

      1. Once you've enabled MAG: Product Review app embed, go back to Online Store > Themes.
      2. Click "..." > Edit code.
      3. Then depending on your theme, the next steps might differ.
ThemeĀ  Ā Installation Steps

Refresh Theme

Dawn Theme

Origin Theme

Colorblock Theme

Other Themes
  • Open card-product.liquid.
  • Above the line that containsĀ  {%- if show_rating , add the following code:
  • <div id="epr-product-collection-review" data-product-id="{{ product.id }}" data-product-handle="{{ product.handle }}"></div>
  • Click Save.

Debut
  • Open product-card-grid.liquid.
  • Under the line that containsĀ  {{ product.title }} , add the following code:<div id="epr-product-collection-review" data-product-id="{{ product.id }}" data-product-handle="{{ product.handle }}"></div>
  • Click Save