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) linked to a supply chain on the Retraced platform, with an active product story.
Your products don’t need an SKU in Retraced. The product can be matched with an SKU, variant or style code.
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 will then 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 : "en"),
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>
This snippet uses the SKU field of your Shopify variants. Retraced looks for that value as an SKU, variant or style code, in this order: SKU → Variant → Style, among products with an active product story. So the value in the Shopify SKU field must match one of these codes in Retraced.
Add the include to your theme
Open your theme.liquid and, 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 multiple or all!):
<retraced-icons></retraced-icons>
<retraced-button-verified></retraced-button-verified>
That's it!
Check out our Widget Placement Guide to determine your preferred location for the retraced widgets and shop components!