1. Home
  2. Web Components

Web Components

1. Add the following code in <head>

<link rel="preload" href="https://cdn.opinew.com/shop-widgets-components/v1/static/i18n/lang.json" as="fetch">
<link rel="stylesheet" href="https://cdn.opinew.com/shop-widgets-components/v1/static/css/index.css">
<link rel="stylesheet" href="https://cdn.opinew.com/styles/opw-icons/style.css">
<script src="https://cdn.opinew.com/shop-widgets-components/v1/static/js/index.js" async ></script>

2. Insert widget tag in desired place in shop code

General usage

<opinew-plugin type="<WIDGET_TYPE>" product-id="<PRODUCT_ID>" domain="<SHOP_DOMAIN>.myshopify.com"></opinew-plugin>

You will need to change <WIDGET_TYPE>, <PRODUCT_ID> and <SHOP_DOMAIN> to data specific for your shop. Please note that you need to use your myshopify.com shop domain and not your custom domain.

Tag attributes

typeRequired value to choose desired widget type. Available options are:
product, floating,all,carousel, request,product-stars, collection-stars
product-idShopify product id. Required for: product, floating, product-stars, collection-stars
domainShop domain – Optional. When not set, domain is read from browser window.location.host property. Recommended to set to make sure widgets work properly on dev environment. This needs to be your myshopify.com domain provided by Shopify and not your custom domain (if you use one).
lang (optional)ISO 639-1 language code to specify language of the widget eg. fr, en, pt
(optional for type=”product”)
soecify theme of the product review widget eg. theme=”carousel”
possible values are default, minimal, modern, carousel

Widget examples

Product review widget

<opinew-plugin type="product" product-id="123142412" domain="shop.myshopify.com"></opinew-plugin>

Floating all reviews widget

Floating widget preview
<opinew-plugin type="floating" product-id="123142412" domain="shop.myshopify.com"></opinew-plugin>
<opinew-plugin type="carousel" domain="shop.myshopify.com"></opinew-plugin>  

Review request form

<opinew-plugin type="request" domain="shop.myshopify.com"></opinew-plugin>

Product page stars badge

<opinew-plugin type="product-stars" product-id="123142412" domain="shop.myshopify.com"></opinew-plugin>  

Collection page stars badge

<opinew-plugin type="collection-stars" product-id="123142412" domain="shop.myshopify.com"></opinew-plugin> 

3. Check out our example Hydrogen app

If you want to see an example of how our widgets can be integrated with Shopify Hydrogen, check out our demo project at https://github.com/opinewdev/opinew-headless-hydrogen-examples.

Updated on March 11, 2023

Was this article helpful?

Leave a Comment