1. Knowledge Base
  2. Webshop Integration

Shopify integration guide

A Shopify integration guide: from installation to final setup.

Shopify is a webshop as a service provider. It is very easy to connect Shopify to our platform, since both retraced and Shopify have a simple API to connect to.

Prerequisites

You must have one product (that is publicly available on your shop) with an SKU linked to a supply chain on the retraced platform, with an active product story.

We need the following from you:

  • Your Shopify store URL, which is something like mybrand.shopify.com
  • Your actual shop URL like mybrand.com

We have to whitelist these URLs as only authorized websites can request information from our API.

Installation

Create a retraced helper file

In your theme code, create in the snippets folder a file called retraced.liquid. Enter the following:

<script name="retraced-tag">
window.retraced = {
initialSku: "",
shop: "",
locale: "{{ shop.locale }}" || (window.navigator ? window.navigator.language : ""),
variants: []
};

{% if product %}
window.retraced.variants = {{product.variants | json}};
window.retraced.initialSku = "{{ product.selected_or_first_available_variant.sku }}";
{% endif %}

{% if shop %}
window.retraced.shop = "{{shop.permanent_domain}}";
{% endif %}

</script>
<script async type="text/javascript" src="https://rtcd.me/shop-components.js"></script>

Add the include to your theme

Open your theme.liquid and in before the </head> tag place:

 {% include 'retraced' %} 

Add our components anywhere

This depends on your  theme. You just have to place one or many or all of our components anywhere in your DOM. Typically this can be the product.liquid:

<retraced-cards></retraced-cards>

Or use any other (or multile or all!):
<retraced-icons></retraced-icons>
<retraced-icons-with-description></retraced-icons-with-description>
<retraced-button-verified></retraced-button-verified>
<retraced-button-transparency-report></retraced-button-transparency-report>

That's it! 🚀

Check out our Widget Placement Guide to determine your preferred location for the retraced widgets and shop components!