Installation instructions

Create an account

First of all, register an account to get started. 

Choose the type of installation

If your webshop is not a Shopify webshop, you can go to the next step.

If you do have a Shopify webshop, you can either install the app from the app store, or go for the manual installation as described below.

For most Shopify shop owners, the app approach is preferred because of it's simplicity. However, if you need more control over how and where the checkboxes are displayed, you can also choose to install the widget manually.

When in doubt, try out the app first. You can always switch later.

Add the script

Add the script below to the pages where the widget should appear. Make sure it is included on the pages where the checkboxes are added or they will not work.

<script 
  type="module" 
  data-ws-website-id="<WEBSITE ID>" 
  data-ws-public-key="<PUBLIC KEY>"
  src="https://www.vergelijkingswidget.nl/scripts/index.js" defer>
</script>

Replace <WEBSITE ID> and <PUBLIC KEY> with your own website ID and public key. You can find these in the email with installation instructions or on your personal dashboard.

Optional attributes:

• data-ws-currency: If the currency is different from Euro (ISO 4217, for example EUR or AUD).

Add the comparison checkboxes

Add the code below to the products that should be comparable, preferably both in the overview pages and on the product detail pages.

<label>
  <input
    type="checkbox"
    data-ws-widget-type="checkbox-compare"
    data-ws-product-url="<URL PRODUCT>"
    data-ws-product-image="<URL IMAGE>"
    data-ws-product-name="<PRODUCT NAME>"
    data-ws-product-price="<PRICE>" 
    data-ws-product-category="<PRODUCT CATEGORY>"
  />
    <LABEL>
</label>

ELEMENT ID
Your own unique ID, only used in this example to link the label and checkbox together.

URL PRODUCT
The full link to the product detail page, i.e. https://www.yourwebshop.com/products/product-123

URL IMAGE (optional)
A link to a product image.
Preferred dimensions: 400 × 300 px

PRODUCT NAME
The name of the product.

PRICE (optional)
The price of the product.
For example: 12.95

PRODUCT CATEGORY (optional)
The category of the product (string).

This value will be used to make sure your visitors can't compare products from different categories.

LABEL
The text on the label can be adjusted as desired, usually something like "Compare" or "Compare this product"

Done!

The product comparison is now activated and ready to let your customers compare the products on your webshop.