GemPages is a powerful page builder for Shopify that helps online merchants create professional and customizable web pages without requiring coding knowledge.
Use the following instructions to integrate the Okendo Reviews widget with GemPages and easily display your reviews in any GemPages-powered Shopify storefront.
In this article, you will learn about:
Enabling Okendo App embeds in your theme
1. Within a preview theme, verify that the Okendo App embeds are toggled on under the App embeds menu.
Adding Okendo snippet to your GemPages templates
1. Open GemPages Admin from your App List and open the Page Builder.
2. In the Base Blocks section (left panel), drag and drop a Liquid block into a desired location on the page. The position of this block will determine where on the page the Okendo widget will be displayed.
3. Right click on the new block and open the Liquid/HTML code editor and paste the appropriate Okendo snippet. Once chosen, save this snippet.
💡 Refer to the 'Commonly Used Snippets' to learn more about snippet choices and other common Okendo widgets.
Widget Plus Star Rating snippet example
<div data-oke-star-rating data-oke-reviews-product-id="shopify-{{ product.id }}">
{{ product.metafields.okendo.StarRatingSnippet }}
</div>
Widget v1 Star Rating snippet example
<div data-oke-reviews-product-listing-rating> {{ product.metafields.okendo.ProductListingSnippet }} </div>
4. Publish the edited page and view the widgets on your store.
⚠️ Saving a page in Gempages edits all matching pages on all theme
Commonly used snippets and suggested positions
💡 Learn about Okendo's different on-site display widgets and code snippets.
Widget Plus
Star Rating
<div data-oke-star-rating data-oke-reviews-product-id="shopify-{{ product.id }}">
{{ product.metafields.okendo.StarRatingSnippet }}
</div>
Reviews Widget
{%- if shop.metafields.okendo.WidgetPreRenderBodyStyleTags != blank -%} {{- shop.metafields.okendo.WidgetPreRenderBodyStyleTags }} {%- endif -%}
<div data-oke-widget data-oke-reviews-product-id="shopify-{{ product.id }}">
{{ product.metafields.okendo.ReviewsWidgetSnippet }}
</div>
Widget v1
Star Rating widget
<div data-oke-reviews-product-listing-rating> {{ product.metafields.okendo.ProductListingSnippet }} </div>
Product Reviews Widget
<div data-oke-reviews-widget data-oke-reviews-product-id="shopify-{{ product.id }}">{{ product.metafields.okendo.ProductReviewsWidgetSnippet }}</div>