Shopify integration summary

It is very simple to integrate Size Adviser in a Shopify eCommerce. You only need to follow easy steps and add code in your template.

If you prefer to do the integration yourself, please complete the following steps.

Feed code

Create a page in your live Shopify template named “page.usizy_feed.liquid”

{% layout none %}id,sku,item_group_id,title,description,brand,size1,size2,product_type,tags,collections,gtin,availability,price,link,image_link,comment
{%- assign collection = collections.all -%}
{%- paginate collection.products by 25 -%}
{%- for product in collection.products -%}
{% for variant in product.variants %}
"{{ variant.id }}","{{ variant.sku }}","{{ product.id }}","{{ product.title }}","{{ product.description | strip_html | escape }}","{{ product.vendor }}","{{ variant.option1 }}","{{ variant.option2 }}","{{ product.type }}","{{ product.tags | join: ',' }}","{{ product.collections | map: 'title' | join: ',' }}","{{ variant.barcode }}",{{ variant.inventory_quantity }},"{{ variant.price | money_with_currency | strip_html }}","{{ shop.url }}{{ product.url }}","{{ product | img_url: '360x' }}",
{%- endfor -%}
{%- endfor -%}
{% if paginate.current_page > paginate.pages %},,,,,,,,,,,{{ paginate.pages }}
{%- endif -%}
{%- endpaginate -%}

Create a page as illustrated below:

Page

Size adviser product page code

Create a new “usizy.liquid” page in the Snippet section:

Add the following script within the page:

<div class="usizy-external" data-width="100%" data-user=""
data-product="{{product.id}}" data-price-vat="{{product.price}}" data-price-no-vat="" data-language= "en"></div>
Example

Example

Locate the “.liquid” product page where Size Adviser should appear and include the following code to recall the snippet in the “div” line where you wish to display Size Adviser:

{% render 'usizy' %}
Example

Example 2

Please feel free to tweak the margin options according to your needs.

API script

Include the following script in your “footer.liquid”, anywhere within a “div”:

<script src="https://static.usizy.es/js/platform.min.js"></script>
Example

Example 3

Sales conversion code

Add the following script into the “Settings \ Checkout” section, in “Additional scripts”:

<!-- uSizy integration Code - start - do not delete -->
<script src="https://static.usizy.es/js/platform.min.js"></script>
<script>
window.uSizy.push({
   "event": {% if checkout.order %}"CONFIRM"{% else %}"CHECKOUT"{% endif %},
   "order" : "{{ order_name }}",
   "user": "{{ order.customer.id }}",
   "total": "{{ order.total_price | money_without_currency | replace: ",", "." }}",
   "products": [{% for item in checkout.line_items %} "{{ item.product_id }}" {% if forloop.last != true %},{% endif %}{% endfor %}],
   "sizes": [{% for item in checkout.line_items %} "{{ item.variant.option1 }}$***${{ item.variant.option2 }}" {% if forloop.last != true %},{% endif %}{% endfor %}],
   "variations": [{% for item in checkout.line_items %} "{{ item.variant.sku }}" {% if forloop.last != true %},{% endif %}{% endfor %}],
   "prices": [{% for item in checkout.line_items %} "{{ item.product.price | money_without_currency | replace: ",", "." }}" {% if forloop.last != true %},{% endif %}{% endfor %}],
   "currency": "{{ order.currency }}"
})
</script>
<!-- uSizy integration Code - end do not delete -->
Example

Example 4

Sales webhook

In the Settings/Notifications section, create an Order payment webhook with the following URL (https://usizy.com/api/v1/orders-webhook) as illustrated below:

Example 5

Send your webhook secret key to Usizy to complete the configuration:

Example 6

Sales Customer event

In the Settings/Customer events section, click on Add custom pixel named “usizy” as illustrated below:

Event 1

Copy the following script, save and connect as illustrated below:

Event 2

Script:

const script = document.createElement('script')
script.setAttribute('src', 'https://static.usizy.es/js/shopify_pixel.min.js')
script.setAttribute('async', '')
document.head.appendChild(script)

analytics.subscribe("checkout_completed", (event) => {
  window.uSizyShopify = window.uSizyShopify || []
  
  const checkout = event.data.checkout
  const lines = checkout.lineItems
  window.uSizyShopify.push({
   "event": "CHECKOUT",
   "order_id" : checkout.order.id,
   "user": event.clientId,
   "product_ids": lines.flatMap(item => Array(item.quantity).fill(item.variant.product.id)),
   "variation_ids": lines.flatMap(item => Array(item.quantity).fill(item.variant.id)),    
   "prices": lines.flatMap(item => Array(item.quantity).fill(item.variant.price.amount)),
   "total_no_vat": checkout.subtotalPrice.amount,
   "total_vat": checkout.totalPrice.amount,    
   "currency": checkout.currencyCode,
   "ref": event.context.document.location.href
  })
})

The new custom pixel should appear in the list, as illustrated below:

Event 3

Returns integration

The returns integration cannot be done natively within Shopify.

Please read the Returns integration section to review the options available for this last part of the Integration with Usizy.