Add Yotpo reviews to your site
The Yotpo app enables to you to use Yotpo reviews on Nyla. This article covers the following topics:
- App activation
- Adding Yotpo to your site
- Review Metafields
- Troubleshooting
Activating the Yotpo reviews app:
In order to activate the Yotpo reviews app, you should go to Apps > YotPo and switch the app on. You'll need to enter your Yotpo API key in order to connect your App to Nyla. Make sure to save and publish your app after adding these settings.
Adding Yotpo to your site:
To add a reviews to your site, you would typically add a reviews widget below the fold to your product pages, and a reviews summary (featuring with average rating and reviews count) to your PDP above the fold, as well as your product listing pages and cross sells. See below for instructions on how to add these to your site.
Adding the Yotpo reviews widget below the fold:
To add a Yotpo reviews widget to your PDP, you can use the Yotpo Reviews v2 content item. This content item will show your reviews widget as you have styled it in the Yotpo app.
To add the widget to your page you should:
- Add a source: product (the reviews widget needs to be within the relevant product source in order to know which product to reference).
- We suggest to reference the page source reference for all reviews widgets so that you don't need to override the product source on each page.
- Add the Yotpo Reviews v2 content item within the source: product
The data that is displayed in this widget is pulled directly from the Yotpo app. If you are seeing reviews for your products not showing as expected, see here for troubleshooting steps.
Updating your widget:
To make updates to the look and feel of the widget you should do this within the Yotpo app. Note that if you make these changes in your Yotpo app before you launch on Nyla, they may show up on your Shopify theme.
Reviews summary above the fold and in product listing pages:
There are 2 ways to add the star reviews widget above the fold:
1. Adding Yotpo Rating content item (pulls reviews values from metafields that are updated asynchronously):- Better site performance (faster PDP and PLP load times);
- Can be out of sync with the widgets below the fold (see below for more details).
- Slower site performance (slower PDP and PLP load times);
- Show the latest reviews information pulled directly from the Yotpo app.
Important: By using Yotpo Start Rating you should customize the Yotpo Widget on Yotpo app. Nyla won't control the widget style in this case.
The star ratings and review counts will be more reliable when accessed through the Yotpo Star Rating content item because it retrieves information directly from Yotpo. In contrast, the Yotpo Rating content item relies on metafields being updated by Yotpo asynchronously. However, using the Yotpo Rating content item will result in a faster and more performant widget load time.
Yotpo Rating Contem Item
To add a reviews summary using Yotpo Rating, you should:
- Ensure that the metafields for yotpo.reviews_count, yotpo.reviews_average and yotpo.bottomline have definitions added. See here for information on how to do that.
- Use the Yotpo Rating content item inside of a source: product or source: collection.
- You can then style the icons and content item settings to get the look and feel that you want.
- You can also use the following properties to build more custom layouts:
-
- product.reviewsAverage
- product.reviewsCount
The reviews summary pulls from metafields in order to improve page speed performance. See below for details of how this works in the context of the integration and showing reviews on your site.
Why does the ratings content item pull from metafields and what does this mean for my site?
Performance Optimization:
Nyla pulls your average rating and reviews count from metafields in order to optimize load time on key parts of the shopping experience (e.g PDP and PLPs). Reading from metafields optimizes load time by reducing the data loaded when customers access the page (as opposed to loading a heavier script-based widget above the fold on the PDP, or multiple times on a PLP).
By pulling from metafields, the data can be included at the point the page is server-side rendered, so there is less data to be pulled in your customers' browsers when they load your pages.
Impact on reviews count:
Pulling reviews count and average from metafields means that there can be a delay in updated reviews showing on your site.
The flow for updating the value shown on your site is as follows:
- Yotpo app writes the review average and review count to Shopify metafields
- Nyla updates the rating based on the values in the metafields every time the page is built
Given that Nyla needs to rebuild your page in order for the updated value to show, this means that a new review will not show in the rating until the page has been rebuilt after Yotpo writes the value.
Occasionally Yotpo can have delays in writing metafields, which can occasionally cause delays as well.
It is uncommon that this happens given that Nyla builds product pages automatically on various triggers from Shopify. However, if you do see that your reviews rating isn't what you expect to see then this will explain the issue. You can see here for steps to troubleshoot this issue.
What metafields are used:
Nyla reads data from the following locations:
- Nyla reads the reviews count and value from the yotpo.reviews_count and yotpo.reviews_average metafields in Shopify
- In the event that those metafields are empty, yotpo.bottomline is used by Nyla as a backup
- If all of the above metafields are empty, then the reviews count will show blank. Occasionally third party apps have issues or a delay in writing to metafields, so if you see the metafields above with blank or inaccurate values when it shouldn't be, you should reach out to Yotpo to look into the issue.
In order for Nyla to be able to pull in this data, the metafields need to have a definition added with storefront access.
Adding metafield definitions:
To add definitions to the reviews metafields within Shopify:
- In your Shopify dashboard, go to Settings > Custom Data > select Products > select Metafields without a definition and search for each of the three metafields (yotpo.reviews_count, yotpo.reviews_average metafields and yotpo.bottomline).
- Hit "Add definition" beside the metafield.
- Add a name (this can be anything you'd like) and select a Single line text as the type.
- Make sure to add Storefront access to the metafield
Once you are done, click save.
Troubleshooting common Yotpo issues
Why are my above the fold reviews showing a different value than what I expect?
If you choose to use the Yotpo Rating content item, Nyla reads reviews data for the stars count and average above the fold and on collection pages from metafields.
Sometimes apps have issues syncing to metafields. In some cases the update can be delayed or syncing might stop happening due to Yotpo issues.
If you are seeing above the fold reviews not showing up you should:
- Check the yotpo.yotpo.reviews_count and yotpo.reviews_average metafields in Shopify
- Check the yotpo.bottomline metafield in Shopify
1. If those values are either empty, or don't match what you expect, you should reach out to the app provider to look into the issue on their end.
2. If those values are what you expect, then you should revalidate your page in Nyla or force a rebuild of your site. Once the build is complete, the values will show as you expect.
See here for why metafields are used to pull this information.
Why are my reviews below the fold not what I expect?
Most issues in this case are due to the data source. Either:
- The data at the source is wrong (e.g there's an issue in your reviews app, or there's a misconfiguration in the reviews app)
- The data source is referencing the wrong product (e.g you need to update the product source in Nyla to match the product data you intend to pull in)
Check your Yotpo app: Nyla pulls below the fold reviews data directly from the app. If the data in the app itself is wrong, then you should review your app setup or contact the app provider for support.
Check your Nyla configuration: Reviews widgets need to use the correct product source. This is so that Nyla pulls in the right data for the page. Make sure that the product source being referenced in your reviews widget is the one you expect.
Why are my reviews below the fold different to my reviews above the fold?
Given that app providers sync data to metafields, if you choose to use the Yotpo Rating content item this can occasionally take some time on their end, so you might see a lag between the value shown on their widget (which pulls directly from the app) and the reviews above the fold (which pulls from metafields).
If you are seeing above the fold showing differently to what you expect you should:
- Check the yotpo.yotpo.reviews_count and yotpo.reviews_average metafields in Shopify
- Check the yotpo.bottomline metafields in Shopify
1. If those values are either empty, or don't match what you expect, you should reach out to the app provider to look into the issue on their end.
2. If those values are what you expect, then you should revalidate your page in Nyla or force a rebuild of your site. Once the build is complete, the values will show as you expect.
How can I add different Yotpo reviews widgets to my site?
Nyla has native support for product reviews and ratings counts, however there are additional widgets available to be used on Yotpo.
In order to add any additional widgets to your site, you should use Nyla custom app and follow instructions for adding those widgets to a generic site. Examples include the brand level reviews page.
Nyla works with a variety of frontend apps, powering your site for everything up to checkout. Learn more about Nyla & Apps here. All third party apps are managed by the app themselves, meaning that Nyla integrations and use of these apps is limited to making them available on your Nyla site. Should you have any questions beyond our below guide about 3P app management, customization options, or general functionality, please reach out to the app directly.