Accelerated Mobile Pages (AMP) Widgets

The Accelerated Mobile Pages (AMP) Project is an open-source Google initiative aiming to make the web better for all. The project enables the creation of websites and ads that are consistently fast, beautiful and high-performing across devices and distribution platforms. Web pages and ads published in the AMP open-source format load almost instantly, giving shoppers a smoother, more engaging experience on mobile and desktop alike.

What is AMP?

AMP is an open-source library that provides a straightforward way to create web pages that are compelling, smooth, and load almost instantly. AMP pages are just web pages that you can link to and are controlled by you. AMP builds on your existing frameworks to create web pages and is supported by many different platforms and browsers.

About Yotpo AMP Widgets

Yotpo offers versions of existing on-site widgets that are optimized to work within the AMP framework. Apart from their faster loading time, these widgets function in the exact same way as standard Yotpo widgets 

AMP widget implementation

Adding Yotpo widgets to your AMP site is as easy as copying and pasting a few lines of code. Below you'll find a brief description of each widget along with its AMP-optimized code snippet. To add these Yotpo widgets to your AMP-based site, simply copy and paste the relevant code snippet in the desired <div> on your site.

The first step is implementing Yotpo's AMP script:

<script async custom-element="amp-yotpo" src="https://cdn.ampproject.org/v0/amp-yotpo-0.1.js"></script>

This code enables the correct flow and function of all the other Yotpo Widgets. 

After you've implemented the AMP script, you can go ahead and chose which Yotpo Widget you'd like to add to your site:

Star Rating

The Star Rating widget reflects the average aggregated rating of a product's reviews and offers an easy way to link shoppers to read full reviews on your site. The Star Rating widget also includes the total amount of reviews written about the product.

<amp-yotpo
          width="550"
          height="100"
          data-app-key="###your_appkey_here###"
          data-widget-type="BottomLine"
          data-product-id="###product_id_here##">
</amp-yotpo>

Reviews Widget

The Reviews Widget allows you to prominently showcase reviews on product pages in a fully customizable format that can be easily designed to match the look and feel of your store. Each review appears with a title, review content, and star rating and can be sorted according to your preferences.

<amp-yotpo
          width="550"
          height="700"
          layout="responsive"
          data-app-key="###your_appkey_here###"
          data-widget-type="MainWidget"
          data-product-id="###product_id_here##"
          data-name="hockey skates"
          data-url="https://penguins.myshopify.com/products/skates"
          data-image-url="https://ichef.bbci.co.uk/news/320/media/images/82351000/jpg/wubba_lubba_dub_dub.jpg"
          data-descriptipn="skates"
          data-yotpo-element-id="1">
</amp-yotpo>

Badges

Badges are a great way to gain buyer trust by displaying your store's total number of published reviews in a beautifully designed badge element. Clicking on the badge opens the Reviews Tab to display reviews in scrollable lightbox to boost engagement, page views, and ultimately conversions.

<amp-yotpo
          width="200"
          height="200"
          data-app-key="###your_appkey_here###"
          data-widget-type="Badge">
  </amp-yotpo>

Reviews Tab & SEO Page

The Reviews Tab is one of Yotpo's most popular features and serves as a great way to drive traffic to your product pages and increase engagement through your site. The widget works as a standalone tab you can place on any page of your site. Clicking the Reviews Tab will display a lightbox that contains your site and/or product reviews or you can configure the Reviews Tab to display reviews on a dedicated SEO Page.

<amp-yotpo
          layout="responsive"
          data-app-key="###your_appkey_here###"
          data-widget-type="ReviewsTab">
  </amp-yotpo>

Product Gallery

The Product Gallery is a customizable photo gallery designed to showcase user-generated product photos where they count the most- right on your product pages!  When shoppers see others using a product, they can connect on a personal level and see themselves using the product- effectively alleviating buyer hesitation and increasing conversion rates!

  <amp-yotpo
          width="1280"
          height="200"
          layout="responsive"
          data-app-key="###your_appkey_here###"
          data-widget-type="ProductGallery"
          data-product-id="###product_id_here##"
          data-demo="true"
          data-layout-rows="3"
          data-layout-scroll="1"
          data-spacing="0"
          data-source="all"
          data-title="0"
          data-hover-color="#ffffff"
          data-hover-opacity="0.8"
          data-hover-icon="true"
          data-upload-button="0"
          data-preview="true"
          data-yotpo-element-id="1">
  </amp-yotpo>

UGC Gallery

The UGC Gallery is a great way to alleviate buyer hesitation and increase conversions by showcasing visual user-generated content at key conversion points on your site. Use the UGC gallery to create fully customizable widgets to beautifully display user-generated photos from your custom albums and even collect new photos right through the widget!

  <amp-yotpo
          width="550"
          height="200"
          layout="responsive"
          data-app-key="###your_appkey_here###"
          data-widget-type="VisualUgcGallery">
  </amp-yotpo>

Promoted Products

Promoted Products are a great way of automatically publicizing your most popular products (based on star rating and number of reviews) and/or products you want to promote. Yotpo displays eight different products In the Promoted Products section above the Reviews Widget. Either all eight products can be chosen by the Yotpo algorithm, which is what we recommend, or they can be up to four products of your choice and the respective remainder automatically generated by the Yotpo algorithm.

<amp-yotpo
          width="550"
          height="200"
          layout="responsive"
          data-app-key="###your_appkey_here###"
          data-widget-type="PromotedProducts"
          data-product-id="###product_id_here##"
          data-demo="true">
  </amp-yotpo>

Learn more