PageFly - Integration Guide for Reviews

Implement Yotpo through PageFly and easily display reviews from Yotpo on your PageFly pages.

How it works

PageFly is a Page Builder Application that allows you to easily create product pages on your website. Just drag and drop different element blocks to design your product page and optimize your eCommerce business with high-converting landing pages.

You can use PageFly together with Yotpo widgets by implementing some simple customizations.

Before you start

If you’re planning to add the Star Rating to your site, you’ll need your Yotpo app key. If you’re not sure how to find it, see Finding your Yotpo App Key and API Secret.

Step 1: Add product reviews

You can add any of the following elements to your page:

• Star Rating
• Separated Q&A Widget
• Reviews Highlight
• Reviews Carousel
• All Reviews Badge

All elements can be used many times on a page.

To add an element:

1. Select the element in the layout to see its variation.
2. Drag and drop the element on to your page.
   Note: In the Product page, the element will auto-generate data from the chosen product. For other page types, the elements (except the All Reviews badge) must stay inside the Product Details element. This is to ensure it will have the product ID of the chosen product in the Product Details.
3. Click Publish.

Step 2: Customize your integration

When using PageFly, the Liquid tags used in the Custom Element feature exists in a separate environment than the Shopify theme. This means that product details will not be populated automatically.

To get the Yotpo code to display in your PageFly content, the Liquid tags need to be replaced with actual product data. For example, if the embedded code contains a liquid tag like "{{product.id}}", it can be replaced with "123456789" (the product's actual ID). This code can be added into PageFly if the Liquid tags are replaced with actual data for each product page.

Once the Liquid tags are replaced with the product data, the modified code can be pasted into an HTML element on your PageFly page.

If you would like to install the Yotpo Widgets on a product page, the Liquid tags will need to be manually replaced with the data of the product page the code has been added to:

Code for adding Yotpo's Star Rating:

<div class="yotpo bottomLine"
data-product-id="{{ product.id }}">
</div>

Code for adding Yotpo's Reviews Widget:

<div class="yotpo yotpo-main-widget"
data-product-id="{{ product.id }}"
data-price="{{ variant.price | money_without_currency }}"
data-currency="{{ shop.currency }}"
data-name="{{ product.title | escape }}"
data-url="{{ shop.url }}{{ product.url }}"
data-image-url="{{ product.featured_image | product_img_url: "large" |replace: '?', '%3F' | replace: '&','%26'}}"
data-description="{{ product.description | escape }}">
</div>