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 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>
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 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!