---
title: "PageFly - Integration Guide for Reviews"
slug: "pagefly-integration-guide-for-reviews"
tags: ["Reviews ", "Shopify", "Shopify Plus"]
updated: 2024-04-01T14:05:10Z
published: 2024-04-01T14:05:10Z
canonical: "support.yotpo.com/pagefly-integration-guide-for-reviews"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.yotpo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# PageFly - Integration Guide for Reviews

Products

			
				
					
						  

					
					Reviews
		
			

				

###### Supported plans

				

Free, Starter, Pro, Premium, Enterprise

			
			

				

###### eCommerce Platform

				

Shopify, Shopify Plus

			

Implement Yotpo through [PageFly](https://apps.shopify.com/pagefly?utm_source=app-providers&utm_medium=yotpo&utm_campaign=app-listing&utm_content=integration-guide) 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.

	
	Please note:
	

		

The Yotpo code is generic and provided as-is. Implementation or modification of this code is not supported by Yotpo.

		

We recommend using the services of a developer or contacting the Page Builder App team for the purpose of integrating this customization into your website.

	

## 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](/v1/docs/finding-your-yotpo-app-key-and-secret-key).

## Step 1: Add product reviews

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

- [Star Rating](/v1/docs/adding-the-star-rating)
- [Separated Q&A Widget](/v1/docs/displaying-a-separate-qa-widget)
- [Reviews Highlight](/v1/docs/review-highlights)
- [Reviews Carousel](/v1/docs/configuring-and-installing-the-reviews-carousel)
- [All Reviews Badge](/v1/docs/)

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

	
	Tip:
	You can learn more about PageFly settings and configurations in the [PageFly Help Center](https://help.pagefly.io/manual/yotpo-product-site-and-visual-reviews/?utm_source=app-providers&utm_medium=yotpo&utm_campaign=manual&utm_content=integration-guide).

## 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](/v1/docs/finding-product-ids-in-your-ecommerce-platform)). 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:

	

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

#### Code for adding Yotpo's Reviews Widget:

	

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

	
	Please note:
	The information in the curly brackets must be manually replaced with the actual on-site information of the product. For example, the {{ product.id }} portion of the code needs to be replaced with the actual product ID.