Reviews

1. Review Placement on Product Detail Pages

Review Widget

Add the following HTML element where you'd like reviews to appear

<div id="yotpo-widget-container">Yotpo Reviews</div>

This requires the Widget and Stars Script below.

Stars Rating

Add the following HTML element where you'd like stars to appear

<div class="yotpo bottomLine">Yotpo Stars</div>

This requires the Widget and Stars Script below.

2. Storefront Product Detail Pages (COMING SOON)

To add the Yotpo widget and stars:

1. Navigate to a Product Page

2. Open the Product Settings Tab

3. Place the full script in the “Code” section for the product detail page

   • This supports both the widget and star rating

Placement Notes

• The code section renders elements at the bottom of the page.

• To place reviews and stars dynamically within the layout:

  • Use a reserved metafield like storefront-detail-1, storefront-detail-2, ..., storefront-detail-9

  • These will appear as "Detail (#)" options in the Page Layout editor

3. Yotpo Widget and Stars Script

Place the following script on your Product Detail Page:

Be sure to update the app key. The first line of the script should look like

const yotpoAppKey = 'xxxxxxxxxxxxxxxxxxxxxx'

<script>
  const yotpoAppKey = '{{ APP KEY }}';

  function getProductFromSession() {
    const sessionProductRaw = sessionStorage.getItem("ccProduct");
    if (sessionProductRaw) {
      try {
        return JSON.parse(sessionProductRaw);
      } catch (err) {
        console.warn("Failed to parse ccProduct:", err);
      }
    }
    return null;
  }

  function getProductFromFallback() {
    const currentItem = sessionStorage.getItem("currentItem");
    if (!currentItem || !window.pageData?.selectedCampaign?.products) {
      return null;
    }

    const [campaignProductId] = currentItem.split(".");
    return pageData.selectedCampaign.products.find(
      (p) => p.campaignProductId == campaignProductId
    ) || null;
  }

  function buildYotpoWidget(product) {
    const container = document.getElementById("yotpo-widget-container");
    if (!container || !product) {
      return;
    }

    const currency = window.pageData?.selectedCampaign?.currency || "USD";

    container.innerHTML = "";

    const widget = document.createElement("div");
    widget.className = "yotpo yotpo-main-widget";
    widget.id = "cc-id-dLCT1UskDWeD";
    widget.setAttribute("data-product-id", product.externalProductId);
    widget.setAttribute("data-price", product.variants ? product.variants[0].price : product.price);
    widget.setAttribute("data-currency", currency);
    widget.setAttribute("data-name", product.productName);
    widget.setAttribute("data-url", window.location.href);
    widget.setAttribute("data-image-url", product.imageUrl);

    container.appendChild(widget);

    const reviewStars = document.querySelector(".yotpo.bottomLine");
    if (reviewStars) {
      reviewStars.setAttribute("data-yotpo-product-id", product.externalProductId);
    }
  }

  function loadYotpoScript(appKey) {
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.async = true;
    script.src = `//staticw2.yotpo.com/${appKey}/widget.js`;
    const firstScript = document.getElementsByTagName("script")[0];
    firstScript.parentNode.insertBefore(script, firstScript);
  }

  const immediateProduct = getProductFromSession();
  // Initiate For Storefront
  if (immediateProduct) {
    buildYotpoWidget(immediateProduct);
    loadYotpoScript(yotpoAppKey);
  } else {
    window.onload = function () {
      const fallbackProduct = getProductFromFallback();
      if (!fallbackProduct) {
        return;
      }

      buildYotpoWidget(fallbackProduct);
      loadYotpoScript(yotpoAppKey);
    };
  }
</script>

4. Yotpo Conversion Tracking (optional)

Place the following script on your Thank You page or Upsell confirmation page to enable conversion tracking:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const yotpoAppKey = '{{ APP KEY }}';

    const script = document.createElement("script");
    script.type = "text/javascript";
    script.async = true;
    script.src = `//staticw2.yotpo.com/${yotpoAppKey}/widget.js`;
    document.head.appendChild(script);

    const orderDataRaw = sessionStorage.getItem("orderData");
    if (orderDataRaw) {
      try {
        const orderData = JSON.parse(orderDataRaw);
        if (orderData?.orderId && orderData?.totalAmount && orderData?.currencyCode) {
          window.yotpoTrackConversionData = {
            orderId: String(orderData.orderId),
            orderAmount: String(orderData.totalAmount),
            orderCurrency: String(orderData.currencyCode)
          };
        }
      } catch (err) {
        console.warn("Invalid orderData in sessionStorage:", err);
      }
    }
  });
</script>

Be sure to update the app key. The first line of the script should look like const yotpoAppKey = 'xxxxxxxxxxxxxxxxxxxxxx'