Shopify Integration

Shopify is one of the most popular e-commerce systems that we see. Here are some details about how to integrate AvantLink into Shopify.

PLEASE NOTE: We provide this information "as-is" as a courtesy to our clientele, and as such, it may contain typos, get outdated, go out of style, be factually incorrect, or considered 'using cheats' if playing on hard mode. We cannot vouch for it's seaworthiness; sail at your own risk, and please email us with any improvements we can make!

Contents

Tracking Integration
   Shopify Documentation
   Site-Wide Script
   Order Confirmation Script
   Shopify Variables
   Shopify Test Mode

Datafeed
   Creating a Datafeed  - Liquid Template
   Creating a Datafeed - Shopify API
   Shopify Documentation

 

Tracking Integration

Shopify's "How to add tracking" documentation can be found here:

https://docs.shopify.com/manual/configuration/store-customization/page-specific/checkout-page/thankyou-page/add-conversion-tracking-to-thank-you-page

Use our standard site-wide script:

<script type="text/javascript">
(function() {
var avm = document.createElement('script'); avm.type = 'text/javascript'; avm.async = true;
avm.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.avmws.com/[SITE_ID]/';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(avm, s);
})();
</script>

Full Order Confirmation script, with Shopify variables in place, and the 'for each item' loop:

<script type="text/javascript">
var _AvantMetrics = _AvantMetrics || [];
_AvantMetrics.push(['order',{ order_id:'{{order_number}}', amount:'{{subtotal_price | money_without_currency}}', state:'{{billing_address.province_code}}', country:'{{billing_address.country_code}}' }]);
{% for line in line_items %}
_AvantMetrics.push(['item',{ order_id:'{{order_number}}', variant_sku:'{{line.product.id}}', price:'{{line.price | money_without_currency}}', qty:'{{line.quantity}}' }]);
{% endfor %}
</script>
<script type="text/javascript">
(function() {
var avm = document.createElement('script'); avm.type = 'text/javascript'; avm.async = true;
avm.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.avmws.com/[SITE_ID]/';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(avm, s);
})();
</script>

Please notice that here it shows product.id for the SKU, but you may need a different variable, such as line.sku if you use SKUs instead of Shopify's standard "Product IDs" on your datafeed that you provide us.

See this link for even more product-related details:
 https://docs.shopify.com/themes/liquid/objects/product

Note: The "Thank You" page via Shopify's platform, requires that the first snippet (standard site-wide Tracking Script) to be placed after the Order Confirmation script, in the "Additional content and scripts" text field. (This is because Shopify places all code in this text field below all html in the DOM. Therefore, to ensure the AvantLink library is referenced after the order tracking component it must be manually placed after the order tracking component in the "Additional content and scripts" text field.)

Shopify Variables

Link to a list of Product related variables used by Shopify / Liquid

Note: A useful one may be "collections.title", as this is effectively a Category of items. By defining this, passing it to us (using the Liquid Template below, for example), we may be able to use that to target specific items, or create multiple datafeeds, etc.

Shopify Test Mode

Shopify provides a test mode. See here for more details:
https://help.shopify.com/manual/payment-settings/shopify-payments/testing-shopify-payments
This should fire any additional scripts -- just looks like it blocks the order from saving / reporting on their side.

 

Creating a Datafeed from your Shopify Inventory - Liquid Template:

This is the recommended process, but only works if you have less than 10k products. Please see the Shopify API version below, if you have a very large number of products.

  • Log into your Shopify store.
  • Select "Online Store" under Sales Channels.
  • Select "Themes" from the menu that pops appears.
  • On the right hand side of the themes page, click on the button with three dots. Select "Edit HTML/CSS" from the menu that appears.

Screenshot_1.png

  • On the left hand side, under "Templates", click "Add a New Template"

Screenshot_2.png

 

  • From the dropdown in the pop up that appears, select "collection". Type "csv" in the text box (replacing the word "alternate").
  • Replace all of the code in collection.csv.liquid with the below code. Then click "Save" (top right corner).

 

{% layout none %}{% paginate collection.products by settings.collection_ppp %}{% endpaginate %}Product Name|Parent ID|Variant ID|SKU|Retail Price|Sale Price|Variant Link|Variant Image|Medium Image|Small Image|Category|Description|Barcode|Option 1|Option 2|Option 3|Tags|Brand
{% for product in collection.products %}{% for variant in product.variants %}"{{product.title}}"|"{{product.id}}"|"{{variant.id}}"|"{{variant.sku}}"|"{{variant.price | money_without_currency | strip_html}}"|"{{variant.compare_at_price | money_without_currency | strip_html}}"|"{{shop.url}}{{variant.url}}"|"{% if variant.image != blank %}{% assign imagelevel = variant %}{% else %}{% assign imagelevel = product %}{% endif %}{{imagelevel | img_url: 'master' | prepend: 'https:'}}"|"{{imagelevel | img_url: '200x200' | prepend: 'https:'}}"|"{{imagelevel | img_url: '100x100' | prepend: 'https:'}}"|"{{product.type}}"|"{{product.description | strip_html}}"|"{{variant.barcode}}"|"{% if variant.option1 != 'Default Title' %}{{variant.option1}}{% endif %}"|"{{variant.option2}}"|"{{variant.option3}}"|"{% for tag in product.tags %}{{tag}},{% endfor %}"|"{{product.vendor}}"
{% endfor %}{% endfor %}
  • Mouse over the menu on the far left and click on "Products", then click "Collections" on the menu that appears.
  • Click ‘Create collection’ in the top right corner.

Screenshot_4.png

 

  • In the "Title" input, type in "avantlink datafeed". The "Description" input should be left blank.
  • Below, under ‘Conditions’ choose ‘Automatically select products based on conditions.’ 
  • Create a product condition such that product price is greater than -1. This is will make Shopify include all of the products in your shop.
  • For ‘Theme Templates’, on the right-hand side, choose "collection.csv" from the dropdown. This will apply the liquid file we created to this new collection.

 

Screenshot_5.png

 

  • Save your collection by clicking "Save collection" in the bottom right corner.
  • Go to the top right corner of the page and click "View". This will open a new browser tab that will take you to the page where your datafeed is hosted.
  • Copy the URL from your browser's address bar and send it to your AvantLink technical integration specialist (it should be something like https://your-domain.com/collections/avantlink-datafeed.

 

Screenshot_6.png


Congratulations! You have successfully set up your Shopify datafeed!

Creating a Datafeed - Shopify API:

This is a secondary method, which is a little more complicated, but is useful for large shops with more than 10k products.

To create that API key, you'll need to log in to your Shopify account and click Apps > Manage private apps > Generate API credentials. Under "Private app name", write "AvantLink Datafeed". Then in the Permissions section, set these two options to "Read access": "Store content like articles, blogs, comments, pages, and redirects", and "Products, variants and collections". Click Save.

Once that's done, it should take you to a page with info on the app you've just created, including an API key and Password. Send those to us, and we'll take care of the rest from there!

Shopify Documentation

Still stumped? See Shopify Documentation Here

Have more questions? Submit a request
Powered by Zendesk