Shopify Dynamic Remarketing Setup

Here is how to properly install Dynamic Remarketing Tags on your Shopify store, which will let you run dynamic product ads on the Google Display network.

The code needs to be installed in two places:

  1. At the bottom of your theme.liquid
  2. In the “Additional Scripts” field in your Store’s Admin > Settings > Checkout section

Add the Code to Theme.liquid

Step 1: Create a Remarketing Snippet

In your store’s admin section go to:

  • Online Store > Themes > Edit HTML/CSS
  • Expand the Snippets section and click “Add new snippet”
  • Call the snippet “adwords-remarketing”
  • Paste the following code into the snippet
  • Update the google_conversion_id to use your specific conversion Id (you will find it in your Google AdWords account)
{% comment %} Enter your google conversion id below {% endcomment %}
{% assign google_conversion_id = 0 %}
{% assign shopify_store_country = 'US' %}
{% if shop.currency == 'CAD' %}
{% assign shopify_store_country = 'CA' %}
{% endif %}

<script type="text/javascript">

 {% if template contains 'cart' %}
 var google_tag_params = {
 ecomm_prodid: [{% for item in cart.items %}'shopify_{{ shopify_store_country }}_{{ item.product.id }}_{{ item.variant.id }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],
 ecomm_pagetype: 'cart',
 ecomm_totalvalue: {{ cart.total_price | money_without_currency | remove: ',' }}
 };

 {% elsif template contains 'collection' %}
 var google_tag_params = {
 ecomm_prodid: [{% for item in collection.products limit:5 %}'shopify_{{ shopify_store_country }}_{{ item.id }}_{{ item.variants.first.id }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],
 ecomm_pagetype: 'category',
 ecomm_category: '{{ collection.handle }}'
 };

 {% elsif template contains 'index' %}
 var google_tag_params = {
 ecomm_pagetype: 'home'
 };

 {% elsif template contains 'product' %}
 var google_tag_params = {
 ecomm_prodid: 'shopify_{{ shopify_store_country }}_{{ product.id }}_{{ product.selected_or_first_available_variant.id }}',
 ecomm_pagetype: 'product',
 ecomm_totalvalue: {{ product.selected_or_first_available_variant.price | money_without_currency | remove: ',' }}
 };

 {% elsif template contains 'search' %}
 var google_tag_params = {
 ecomm_prodid: [{% for item in search.results limit:5 %}'shopify_{{ shopify_store_country }}_{{ item.id }}_{{ item.variants.first.id }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],
 ecomm_pagetype: 'searchresults'
 };
 {% else %}
 var google_tag_params = {
 ecomm_pagetype: 'other'
 };

 {% endif %}

 /* <![CDATA[ */
 var google_conversion_id = {{ google_conversion_id }};
 var google_custom_params = window.google_tag_params;
 var google_remarketing_only = true;
 /* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/{{ google_conversion_id }}/?value=0&amp;guid=ON&amp;script=0"/></div>
</noscript>

This code is also available on GitHub: Shopify Remarketing Code Snippet

Step 2: Install the snippet in your Theme file

Open up the theme.liquid file and add the following line of code before the closing </body> tag:

<!-- Dynamic Remarketing -->
{% include 'adwords-remarketing' %}

Add the Code to Checkout Scripts

In your Shopify Store’s Admin, go to:

  • Settings > Checkout
  • Scroll down to the “Additional Scripts” field.
  • Copy and paste the code below into the “Additional Scripts” field
  • Make sure you update the code with your own custom google_conversion_id.
<!-- Google Dynamic Remarketing -->
{% comment %} Enter your account specific value below {% endcomment %}
{% assign google_conversion_id = 0 %}
{% assign shopify_store_country = 'US' %}
{% if shop.currency == 'CAD' %}
{% assign shopify_store_country = 'CA' %}
{% endif %}
<script type="text/javascript">
var google_tag_params = {
 ecomm_prodid: [{% for item in order.line_items %}'shopify_{{ shopify_store_country }}_{{ item.product.id }}_{{ item.variant.id }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],
 ecomm_pagetype: 'purchase',
 ecomm_totalvalue: {{ total_price | money_without_currency | remove: ',' }}
};
</script>
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = {{ google_conversion_id }};
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/{{ google_conversion_id }}/?guid=ON&amp;script=0"/></div>
</noscript>

Download the code from Github here: Shopify Checkout Remarketing Code

Final Step: Verification

Once you’ve installed all your code, it’s time to run through your site and main pages (collection, product, cart, and purchase pages) with Google Tag Assistant installed. This will help you troubleshoot any errors.

Common errors include:

  • Products not properly uploaded to Google Merchant Center
  • Google Conversion Id not properly set

Shopify + Facebook Product Feed: How to build your own Product Catalog

If you want to setup Facebook Dynamic Product Remarketing ads for your Shopify store, you will need to upload your store’s product catalog to Facebook. Below is a walk through of how to generate your Facebook product feed.

This is an advanced topic and so I will assume you have a basic understanding of HTML/Liquid, the Shopify Store Admin and Facebook Business Manager.

Step 1: Install the Shopify Google Shopping App

Installing this free app will allow you to configure various properties on your products such as Age Group, Gender, and Product Category.

Step 2: Create a Custom Collection Template for your Feed

This step involves getting your hands dirty with code. If you are not a developer and have a low appetite for risk, consider asking a coder to do this step for you.

What we are doing here is creating a template, that when assigned to a collection, will cause that collection to be displayed as XML instead of HTML.

In your Shopify admin, go to:

  • Online Store > Themes
  • In the dotdotdotmenu and choose Edit HTML / CSS
  • Under Templates, choose Add a new Template
  • Choose collection from the drop down and name your template fb-product-feed

Paste the following code into your new template and click Save. (This code is also available on Github here: Shopify Facebook Product Feed Template)

{% layout none %}<?xml version="1.0"?>
<rss xmlns:g="http://base.google.com/ns/1.0" version="2.0">
{% paginate collection.products by 1000 %}
{% assign CountryCode = 'US' %}
{% if shop.currency == 'CAD' %}{% assign CountryCode = 'CA' %}{% endif %}
{% assign Color = "" %}
{% assign Size = "" %}
<channel>
<title>{{ shop.name }} {{ collection.title | replace: '&', '&amp;' }}</title>
	<link>{{ shop.url }}</link>
<description>{{ collection.description | strip_html }}</description>
{% for product in collection.products %}
{% assign GoogleProductCategory = product.metafields.google.google_product_type %}
{% assign Gender = product.metafields.google.gender %}
{% assign AgeGroup = product.metafields.google.age_group %}

{% comment %}Output the top level product and then all variants{% endcomment%}
<item>
<title>{{ product.title | strip_html | strip_newlines | replace: '&', '&amp;' }}</title>
	<link>{{ shop.url }}{{ product.url }}</link>
<description>{{ product.title | strip_html | strip_newlines | replace: '&', '&amp;' }} {{ product.description | replace: '</', ' </' | strip_html | strip_newlines | replace: '&', '&amp;' }}</description>
<g:google_product_category>{{ GoogleProductCategory | replace: '&', '&amp;' }}</g:google_product_category>
<g:item_group_id>shopify_{{ CountryCode }}_{{ product.id }}</g:item_group_id>
<g:id>{{ product.id }}</g:id>
<g:condition>new</g:condition>
<g:price>{{ product.price | money_without_currency }} {{ shop.currency }}</g:price>
<g:availability>{% if product.available %}in stock{% else %}out of stock{% endif %}</g:availability>
<g:image_link>http:{{ product.featured_image.src | product_img_url: 'grande' }}</g:image_link>
<g:gtin>{{ product.barcode }}</g:gtin>
<g:brand>{{ product.vendor }}</g:brand>
<g:mpn>{{ product.sku }}</g:mpn>
<g:product_type>{{ product.type }}</g:product_type>
<g:age_group>{{ AgeGroup }}</g:age_group>
<g:gender>{{ Gender }}</g:gender>
</item>

{% for variant in product.variants %}
{% for option in product.options %}
{% if option == 'Color' %}{% capture Color %}{{ variant.options[forloop.index0] }}{% endcapture %}
{% elsif option == 'Size' %}{% capture Size %}{{ variant.options[forloop.index0] }}{% endcapture %}
{% endif %}
{% endfor %}
<item>
<title>{{ product.title | strip_html | strip_newlines | replace: '&', '&amp;' }}</title>
	<link>{{ shop.url }}{{ variant.url }}</link>
<description>{{ product.title | strip_html | strip_newlines | replace: '&', '&amp;' }} {{ variant.title | strip_html | strip_newlines | replace: '&', '&amp;' }} {{ product.description | replace: '</', ' </' | strip_html | strip_newlines | replace: '&', '&amp;' }}</description>
<g:google_product_category>{{ GoogleProductCategory | replace: '&', '&amp;' }}</g:google_product_category>
<g:item_group_id>shopify_{{ CountryCode }}_{{ product.id }}</g:item_group_id>
<g:id>{{ variant.id }}</g:id>
<g:condition>new</g:condition>
<g:price>{{ variant.price | money_without_currency }} {{ shop.currency }}</g:price>
<g:availability>{% if variant.available %}in stock{% else %}out of stock{% endif %}</g:availability>
<g:image_link>http:{{ variant.image.src | product_img_url: 'grande' }}</g:image_link>
<g:gtin>{{ variant.barcode }}</g:gtin>
<g:brand>{{ product.vendor }}</g:brand>
<g:mpn>{{ variant.sku }}</g:mpn>
<g:product_type>{{ product.type }}</g:product_type>
<g:age_group>{{ AgeGroup }}</g:age_group>
{% unless Color == "" %}<g:color>{{ Color }}</g:color>{% endunless %}
{% unless Size == "" %}<g:size>{{ Size | remove: 'Mens ' | remove: 'Ladies ' | remove: 'Child ' | remove: 'Infant ' | replace: '&', '&amp;' }}</g:size><g:size_system>US</g:size_system>{% endunless %}
<g:gender>{{ Gender }}</g:gender>
</item>

{% endfor %}
{% endfor %}
</channel>
</rss>
{% endpaginate %}

or Download from Github:  Shopify Facebook Product Feed Template

Step 3: Assign products to your Facebook Feed Collection.

You should now have a your Facebook Feed Template created. This is just the template that defines how your collection will be displayed on your site. You still need to assign products to this template so we can submit the feed to Facebook.

This involves creating a new product collection, and choosing the fb-product-feed as the template to use:

  • Go to Products > Collections
  • Click the Add Collection button
  • Enter a name for your new collection. I recommend Facebook Product Feed.
  • Add products you want published as part of this collection feed. (either manually or via dynamic rules)
  • IMPORTANT: Select your custom collection template: collection.fb-product-feed.liquid at the bottom of the right hand column.
  • Click Save.

Preview the collection to make sure it works. You should just see a bunch of unformatted text on the screen. If you do a “view source” in your browser, you should now see the formatted XML.

Make sure you copy the url of this collection, as you will need to submit this url to Facebook Business Manager.

Step 4: Add your Product Feed to Facebook Business Manager

Make sure you have your Facebook Collection url open from step 3 above.

  • Log into Facebook Business Manager
  • Go to Assets > Product Catalogs > Product Feeds and click the +Add Product Feed button to create a new feed.
  • Enter a descriptive name for your feed. eg: Shopify Facebook Feed and your store’s currency.
  • Choose Schedule Recurring Uploads
  • Enter your feed collection url in the Feed URL field, and leave the username & password fields blank. Choose a time for your daily upload to occur (early morning is usually a good time)
  • Click Create Feed and wait for the feed to be fetched and processed.
  • Fix errors: If there are errors, go back and fix any errors (either in your product data because of missing meta fields, or you may need to edit the template for custom functionality), re-fetch, and keep doing so until the file is error free.

NOTE: If you have more than 1000 variants, you will need to submit multiple feeds with a ?page=x querystring appended like so:

Step 5: Exclude your Facebook Feed Collection from Showing up on your Store Pages

If your store is setup to programatically display all your collections, then you will want to make sure your Facebook feed doesn’t show up. The exact way to do this will change depending on your theme, but generally you will want to have an “unless” statement within the loop that displays your collections:


{% unless collection.title contains "facebook" %}

... your collection code ...

{% endunless %}

Done!

You are now ready to setup Dynamic Product Remarketing on Facebook. (But that will be for another post)

Related Posts