For Business
For Business
For Shoppers
Knowledge center
Products Widget

Reviews from HAQM

Display highly trusted product ratings and reviews on Buy with Prime product detail pages

There are two ways to set up Reviews from HAQM on your site, depending on your ecommerce provider (ESP).

Overview

The Reviews from HAQM have the same look that shoppers are familiar with on HAQM.com. Shoppers can find overall ratings, read detailed product reviews from other customers, and filter them by a particular star rating. Reviews from HAQM is a solution that encompasses two components:

  • Ratings. With this component, shoppers can find the aggregated product rating.
  • Reviews. With this component, shoppers can find the individual product reviews.

Benefits of Reviews from HAQM

Reviews from HAQM can help your business with the following:

  • Increase shopper trust and social proof. Tap into the volume and authenticity of Reviews from HAQM on your product detail page for Buy with Prime activated products to help boost shopper trust and provide social proof.
  • Boost brand credibility. Offer visibility into authentic Reviews from HAQM for Buy with Prime activated products to help improve your brand’s credibility among shoppers.
  • Keep shoppers on your site. Shoppers can see Reviews from HAQM for Buy with Prime activated products directly on your ecommerce site.
  • Expand product review volume. Amplify your site’s existing reviews solution to give shoppers more information about your Buy with Prime activated products.

Prerequisites

To set up Reviews from HAQM on your site, perform the following prerequisite steps:

Set up Reviews from HAQM for your site

Note: Before you set up Reviews from HAQM, ensure you complete the Buy with Prime prerequisites and set up steps.

  1. Sign in to merchant console.
  2. On the side menu, choose Products, and then Reviews.
  3. Read the Eligibility for Reviews from HAQM section and complete the prerequisites.
  4. On the Reviews from HAQM page, choose Get started to find a verification workflow that checks that your products are active on HAQM.com and registered with HAQM Brand Registry.

Reviews from HAQM home page

To proceed with Reviews from HAQM configuration, follow the instructions on the Reviews from HAQM home page to manage, customize, and install reviews.

  • To pick which products you want to show Reviews from HAQM, choose Manage.
  • To change how ratings and reviews look on your site without recreating your codes, choose Customize.
  • To install the Reviews from HAQM codes on your site, choose See instructions.
    Screenshot of the Reviews from HAQM page in merchant console with the options to manage reviews, customize reviews, and install codes.

Pick which products display Reviews from HAQM

To set up Reviews from HAQM you can pick an individual product or select multiple ones from a listing page.

To pick a single product:

  1. Sign in to merchant console.
  2. From the side menu, choose Products, and then Reviews.
  3. On the Reviews from HAQM home page, choose Manage.
  4. Find the product that you want to display Reviews from HAQM. Use the search bar to find a product by title or SKU. You can also sort products by title, or filter products by star rating.
  5. Confirm your product selection to activate Reviews from HAQM.
  6. Turn on Show reviews.
  7. Go to HAQM.com to validate that Reviews from HAQM is active on the product detail page.
    Note: Reviews from HAQM is only displayed on products that are Buy with Prime eligible when the detail page is refreshed and loaded.

To pick multiple products:

  1. Sign in to merchant console.
  2. From the side menu, choose Products, and then Reviews.
  3. Select the product. To select all products, select the checkbox on the Product header.
  4. From the Show reviews banner, choose Turn On.

Add Reviews from HAQM to your site

    Note: This content is applicable to standard themes.

      Note: To avoid overwriting your site content, save a copy of your product detail page template and follow the general instructions. After you finish installing the Reviews from HAQM code, preview the products that you set up on your site.

      Click the + to show the steps for installing the Reviews from HAQM on your ESP:

      Customize your Reviews from HAQM feature

      1. Sign in to merchant console.
      2. From the side menu, choose Products, and then Reviews.
      3. On the Reviews from HAQM home page, choose Customize. Notice the three design option tabs on the left navigation panel: Theme, Styles & layout, and Colors.
        You can customize the following elements in Theme:
        • Light mode: Reviews from HAQM uses light mode or the white background as a default.
        • Dark mode: If the light background doesn’t suit your website theme, choose the dark mode.
          Screenshot of the Reviews from HAQM editing page with the design options on the right, the preview image in the center, and the theme options on the left.

        You can customize the following elements in Styles & layout:

        • Reviews per page: Reviews from HAQM are organized vertically. Pagination allows shoppers to choose Previous and Next through the full list of reviews. The default setting is to show four reviews on each page. To shorten the reviews feature, you can select a minimum of four reviews on each page.
        • Rating star size: Reviews from HAQM offers three rating star sizes: small – 15px, medium – 18px, and large – 22px. The default selection is medium, 18px. You can choose ideal star size that provides the best visual presentation of your product overall rating.
        • Corner radius: Reviews from HAQM use rounded corners for the drop-down menu and pagination buttons by default. You can also choose sharp corners or pill-shape to make Reviews from HAQM look consistent with your website style.
        • Button border weight: Reviews from HAQM offers four border weight options for Sort-by and pagination buttons. You can pick from 1 to 4px for the button border weight. The default setting is 1px.
        • Font: Reviews from HAQM provides four font families for the text on the rating and reviews components, including: HAQM Ember (default), Fira Sans, Inter, and Source Serif Pro.
          Screenshot of the Reviews from HAQM editing page with the design options on the right, the preview image in the center, and the style and layout options on the left.

        You can customize the following elements in Colors:

        • Transparent background: Reviews from HAQM components use a light background color by default. You can also set the component background to be transparent, so that it uses the page background color and shows a consistent background color across the entire product detail page. Note: You should check for accessibility after setting the Reviews from HAQM component background to transparent. Go to Theme, and then adjust between the light and dark mode to find the best contrast between background and text colors.
        • Button color: You can choose the button background color from a full color palette. Note: Reviews from HAQM auto adjusts the text color to ensure that the color contrast between the button and button text colors.
        • Link color: You can choose the link color from a full color palette. The link color option includes expander, such as Read More, and link URL.
          Screenshot of the Reviews from HAQM editing page with the design options on the right, the preview image in the center, and the colors option on the left.

      Filter products by star rating

      To sort or filter reviews by star rating, perform the following steps:

      1. Sign in to merchant console.
      2. From the side menu, choose Products, and then Reviews.
      3. On the Reviews from HAQM home page, choose Manage.
      4. On the Product Table page, choose the Filter icon to see the filter pop-up screen.
      5. Filter Reviews from HAQM by star rating.

      Deactivate Reviews from HAQM

      To deactivate Reviews from HAQM, perform the following steps:

      1. Sign in to merchant console.
      2. From the side menu, choose Products, and then Reviews.
      3. On the Reviews from HAQM home page, choose Manage.
      4. Identify the products for which you want to deactivate Reviews from HAQM.
      5. Turn Show reviews off.

      Troubleshoot Reviews from HAQM

      Adding Reviews from HAQM to your site depends on how your site is built, and the theme you use. If you’re using a custom theme, or having issues with adding the Reviews from HAQM feature code to your site, use the following guidance.

      Why isn’t Reviews from HAQM showing up on my product detail page?

      Reviews from HAQM is only displayed on your product detail page when the Buy with Prime button is active. To ensure that Reviews from HAQM is displayed properly, confirm the following:

      Troubleshooting tips

      TipDescription and steps
      Find the right file to use for the Reviews from HAQM code

      Based on the different themes or site builds, it might not be obvious which file to use for inserting the Reviews from HAQM code on your site. If your site uses a different structure than the default theme from your service provider, contact your theme developer.

      When you open a file, look for HTML tags such as <div>, <p>, or <span>. If you don’t see HTML tags, it means that you’re looking at a layout file. Layout files aren’t the correct location for adding the Reviews from HAQM code. If you can’t find the correct file, search for the following key terms:

      • product-view

      • product-template

      • product-form

      • product

      • product-details

      • product-info

      Find the right section within the file to insert the Reviews from HAQM code

      To find the file section to insert the Reviews from HAQM code, search for the following names:

      • product title or title

      • pricing or price

      • image or product image

      • description

      • rating or reviews

      Find where you want the Reviews from HAQM to appear on your site

      It can take time and trial and error to find the correct location for the Reviews from HAQM code on your site. To help you understand the page layout and location for the Reviews from HAQM code, paste "<h2>Hello World</h2>" onto the page.

      Then, preview your site to see where “Hello World” appears. You can move the “Hello World” label to different sections within your page, until you find the correct location for Reviews from HAQM.

      After “Hello World” appears where you want the Reviews from HAQM to appear, replace "<h2>Hello World</h2>" with the Reviews from HAQM code from the merchant console.

      Fix any spacing issues

      If the Reviews from HAQM feature appears too close to other elements on your site, you can adjust the surrounding padding. Edit your Reviews from HAQM code by adding the following padding style

      <div
id="$ROA_REVIEWS_DIV_ID"
data-site-id="$siteId"
"data-roa-instance-id="$roaInstanceId"
data-sku="{{$PRODUCT_SKU}}"
style="padding:5px;"
></div>

      Place this padding code right before the <beginning of Reviews from HAQM code>. Ensure that the div of the other features is closed out before adding this code. If this code doesn’t work, you can add <br>; <p> right under the <beginning of Reviews from HAQM code> text.

      This padding style creates a small buffer on all sides of the Reviews from HAQM. You can create a larger or smaller buffer based on your site design. To adjust the buffer, increase or decrease the number “5" in the preceding sample code.

      You can create padding on specific sides of Reviews from HAQM, instead of padding all sides. To pad specific sides, replace “padding” in the preceding sample code with either “padding-top,” “padding-bottom,” “padding-left,” or “padding-right.” You can combine padding styles to have more control. For example:

      "padding-top: 5px;padding-left: 2px"

      Fix any alignment issues

      If the Reviews from HAQM isn’t aligned correctly with other site elements, center Reviews from HAQM. To fix alignment issues, wrap the code inside a "<div>" tag, and then use the “display:flexbox” style.

      In the following example, there’s an additional wrapper "<div>" tag (in bold) that surrounds the button code. This sample code, uses “background-color: pink,” to help you see Reviews from HAQM on the screen.

      <div
id="bwp-wrapper"
style="background-color: pink; width: 100%; display:flexbox; align-content: center">
<div
id="$ROA_REVIEWS_DIV_ID"
data-site-id="$siteId"
"data-roa-instance-id="$roaInstanceId"
data-sku="{{$PRODUCT_SKU}}"
></div>
</div>

      Check the screen, and notice a large pink box, with Reviews from HAQM centered.

      Note: This test might rearrange your site page elements. You can adjust the “width” and “align-content” styles for the wrapper "<div>" to align Reviews from HAQM as you need. For additional help to align content, search online for the Flexbox cheat sheet. After Reviews from HAQM feature is aligned correctly, remove the “background-color” style.

      Replace Reviews from HAQM code after changing or updating your theme

      To install Reviews from HAQM code, you need to edit the theme of your ecommerce site. This edit is needed on a standard or a custom theme. If you change your online store theme, the Reviews from HAQM might disappear from your site.

      To avoid this issue, if you change your theme after adding Reviews from HAQM, make a copy of your site’s code. Make a note of the location within the theme to add the Reviews from HAQM code back again.

      Looking for something else?
      Sign in to get support

      Reviews from HAQM FAQ

      Get answers to common questions about the Reviews from HAQM feature.

      For other questions, go to FAQ library.

      Back to top