If you want to use Facebook Dynamic Product Retargeting ads for your Shopify store, you need to upload your store’s product catalog feed to Facebook. There are several existing apps that allow you to do this without coding (Flexify and DataFeedWatch) but if you are looking for a free solution or simply want more control, here is how to create your own feed.

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

Step 1
Install the Google Shopping Channel

Install Shopify’s free Google Shopping app to configure various properties on your products such as Age Group, Gender, and Product Category.

Step 2
Create an XML Collection Template

Create a custom collection template that will output all your products as XML instead of HTML.

In your Shopify admin, go to:

  • Online Store > Themes > Action > Edit Code
  • 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. (The most recent version of the code is always 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 %}
<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.mm-google-shopping.google_product_category -%}
{%- assign Gender = product.metafields.mm-google-shopping.gender -%}
{%- assign AgeGroup = product.metafields.mm-google-shopping.age_group -%}
  {% assign Color = "" %}
  {% assign Size = "" %}
    
  {% if product.variants.size > 0 %}
  {% 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;' }}  {{ Color | 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>{{ 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:{% if variant.image.src %}{{ variant.image.src | product_img_url: 'grande' }}{% else %}{{ product.featured_image.src | product_img_url: 'grande' }}{% endif %}</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 | replace: '&', '&amp;' }}</g:product_type>
<g:age_group>{{ AgeGroup }}</g:age_group>
{% unless Color == "" %}<g:color>{{ Color | strip_html | strip_newlines | replace: '&', '&amp;' }}</g:color>{% endunless %}
{% unless Size == "" %}<g:size>{{ Size | strip_html | strip_newlines | replace: '&', '&amp;' }}</g:size><g:size_system>US</g:size_system>{% endunless %}
<g:gender>{{ Gender }}</g:gender>
<g:custom_label_0>{{ product.metafields.mm-google-shopping.custom_label_0 }}</g:custom_label_0>
<g:custom_label_1>{{ product.metafields.mm-google-shopping.custom_label_1 }}</g:custom_label_1>
<g:custom_label_2>{{ product.metafields.mm-google-shopping.custom_label_2 }}</g:custom_label_2>
<g:custom_label_3>{{ product.metafields.mm-google-shopping.custom_label_3 }}</g:custom_label_3>
<g:custom_label_4>{{ product.metafields.mm-google-shopping.custom_label_4 }}</g:custom_label_4>
<g:shipping_weight>{{ variant.weight | weight_with_unit }}</g:shipping_weight>
</item>

  {% endfor %}
  {% else %}
<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>{{ 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>
<g:custom_label_0>{{ product.metafields.mm-google-shopping.custom_label_0 }}</g:custom_label_0>
<g:custom_label_1>{{ product.metafields.mm-google-shopping.custom_label_1 }}</g:custom_label_1>
<g:custom_label_2>{{ product.metafields.mm-google-shopping.custom_label_2 }}</g:custom_label_2>
<g:custom_label_3>{{ product.metafields.mm-google-shopping.custom_label_3 }}</g:custom_label_3>
<g:custom_label_4>{{ product.metafields.mm-google-shopping.custom_label_4 }}</g:custom_label_4>
<g:shipping_weight>{{ variant.weight | weight_with_unit }}</g:shipping_weight>
</item>
  {% endif %}
{% endfor %}
</channel>
</rss>
{% endpaginate %}

or Download from Github:  Shopify Facebook Product Feed Template

Step 3
Assign products to your Collection.

You now need to assign products to your new facebook feed template:

  • Go to Products > Collections
  • Click Create Collection
  • Enter a Title for your feed collection: “Facebook Product Feed”
  • Add the products you want to upload to Facebook (either manually or using conditions)
  • CRITICAL! Assign your feed TEMPLATE to this collection. In the right column, at the bottom, under Theme Templates, choose : collection.fb-product-feed.
  • Click Save Colleciton.
  • Preview the collection to make sure it works. You should see unformatted text on the screen. Do a “view source” in your browser to see the formatted XML.
  • Copy the url of this collection as you need it in the next step.

Step 4
Upload your Product Feed to Facebook

  • Log into Facebook Business Manager
  • Go to Assets > Catalogs and click Create Catalog and select E-Commerce as the Catalog Type and give it a descriptive name
  • Click Add Products and Use Datafeed
  • Enter your feed collection url you copied in step 3 above. Leave the username & password blank. Choose a time for your daily upload to occur (early morning is usually a good time). Choose your currency.
  • Click Start Upload and wait for the feed to be fetched and processed.
  • Fix errors: If there are errors, go back, fix them, re-fetch, and keep doing so until the feed is error free. Sometimes it is necessary to delete and re-create your catalog in Facebook for some changes to appear.
  • If you have more than 1000 product variants, you will need to submit multiple feeds with a ?page=x querystring appended like so: http://mystore.myshopify.com/collections/facebook-product-feed?page=1 (This will send products 1-1000) and http://mystore.myshopify.com/collections/facebook-product-feed?page=2 (This will send products 1001-2000)

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

Depending on how your store is setup, you may need to add some code to prevent your Facebook feed collection from showing up on your store. The exact way to do this may depend 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 your Dynamic Product Remarketing campaigns!

Related Posts

32 Comments

  1. Since shopify stopped the google shopping app, does it still work as expected? I used to have google shopping app but switched over to google shopping channel offered by shopify?
    Also my facebook product feed sometimes shows no images for certain products is there a reason why it is doing that?
    Thanks!

    Like

    1. Hi Dustin,

      I think this script will eventually become obsolete as Shopify builds out more robust and proper integrations for Facebook, Shopping, etc… I have it on my Todo list over the coming weeks to revisit this and other scripts and give a more definite answer.

      As for the Facebook image ads not showing up, my only suggestion is to delete and re-create the feed (making sure to use the latest scripts available here: https://github.com/Czarto/ShopifyScripts/blob/master/Templates/collection.fb-product-feed.liquid )

      I’ve had this issue in the past, and re-creating the product feed seems to have resolved the issue for whatever reason.

      Hope that helps.

      Alex

      Like

      1. Hi Alex,

        Thanks for the quick reply! I actually did update the feed with the link from your github and the product feed images show now and takes out all duplicate variations, and it works! It was probably because I had an outdated one like you said and didn’t update the script.
        In my case, it still works even though I’m using the google shopping channel instead.

        Like

  2. Great post. It has really helped me with a different custom XML feed I have to create. It’s for an affiliate network.

    I’ve created a new Template (collection.feed) which generates a custom XML product feed. I’ve then created a new collection (feed) which uses that template. It can be accessed at https://mysite.myshopify.com/collections/feed

    The affiliate network have a requirement that the feed have an .xml suffix so the feed is named …/collections/feed.xml but can’t work out how to do it. Any ideas?

    Like

    1. Hi Darrell,

      Sorry – no good ideas on my end on how to add an extension to the collection url. One option would be to try use a 3rd party to create reverse proxy to map something like feeds.myshopify.com/feed1.xml -> mysite.myshopify.com/collecitons/feed. But I haven’t researched if such services are available, etc…

      Like

  3. Trying to get this solution to work, but it seems I’m getting an immediate error when fetching:

    “Parse Error
    Unable to parse on line 3 column 1”

    Went to the feed’s source and there’s just a blank line at line 3…

    Like

    1. Hi Wil,

      Unfortunately I haven’t had my hands dirty in the facebook feeds in many months. But planning on getting back into it shortly. I will hopefully have an answer then (and maybe an updated feed).

      Best,

      Alex

      Like

  4. Hey Alex – as I mentioned in your other post. Instead of relying on the Google Shopping Feed app, can we use this in conjunction with the custom script you made for Google Merchant?

    Like

    1. Hi Tanner,

      Although this script (and the Google Merchant Script) will run without the Shopify Google Shopping App, it relies on the app to properly set the Google Shopping Category, as well as Age and Gender properties. So if you don’t want to use the app, you will need to modify the script to assign these values in some other way (either hard-coded, or using an “if” statement)

      Hope this helps?

      Best,
      Alex

      Like

      1. Alex this helps a ton.

        I was reading through forums on people experiencing an issue involving variants and you mentioned here: https://ecommerce.shopify.com/c/shopify-discussion/t/problem-with-facebook-pixel-and-products-variants-352328

        That if you land directly on the variant page, the Facebook Pixel Helper should show the variant ID, but for me it is not the case.

        Shopify’s new Facebook Pixel integration should automatically be adding the variant shouldn’t it?

        Like

      2. Hi Tanner,

        I’ve had issues with the default Shopify integration as well (I believe the implementation has changed several times over the past year). Currently I see the same behaviour — only the top product id is being passed to Facebook.

        The work-around would be to add some custom event code to your product page to trigger an additional “viewcontent” event. I’ll try to implement this and post it as I have time (hopefully in the next couple of months).

        Best,

        Alex

        Like

      3. Hi Tanner,

        I left a reply on the original shopify thread here: https://ecommerce.shopify.com/c/shopify-discussion/t/problem-with-facebook-pixel-and-products-variants-352328 but I’ll duplicate it here again:

        You are correct — currently Shopify only fires the pixel with the product_group / product.id and NOT with the product / variant.id.

        What you **could** do is fire another facebook event on your product page that sends the VariantId (like here: https://github.com/Czarto/ShopifyScripts/blob/master/snippets/facebook-remarketing.liquid )

        HOWEVER, I’m not sure if this is a good idea, as you will now have double the product views, and double the add to cart events, etc… Which may lead to double attribution, and double the conversion value being sent to your Facebook business manager:

        But, on the positive side, your dynamic product remarketing should show the correct image / product variant, which should lead to better performance.

        It will all come down to if Facebook is smart enough to figure out that the product_group + product are actually the same thing and dedublicate it.

        Long term, I think that you either have to wait for Shopify to update their implementation, or to NOT use the default Shopify implementation and make your own custom implementation…

        Like

      4. Hey Alex,

        Half a year later.. I’m working with my client again on Facebook related retargeting and they’re now trying to provide offline conversion data to Facebook. I’m now worried that the uploaded data is going to have a high chance of being useless since they have quite a few variations per product so the purchases most likely won’t attribute to the product group advertisement.

        Have you heard from the community or Shopify of any changes in the way they submit event tracking to Facebook?

        Like

  5. Hi Alex,

    Thanks for putting this together!

    Everything has been working great for me so far, except I seem to be getting two listings for each product (one with an image and one without). I’m guessing, this has something to do with the variants, but I was wondering what might be the best way to fix this?

    Thanks!

    Like

    1. Hello Alex,

      I’m expriencing the same issue.
      From what i see, it looks like products without variant gets duplicated.
      1 feed item with an image (without variant # at the end of link)
      1 feed item with no image (with a variant # at the end of link)

      Thanks if you find a fix for that 😉

      Like

      1. thx alex, whats problem about this error?”Invalid character detected on line 34 column 24. Please make sure that the XML element is well-formed.”

        Like

  6. Hi, your tutorial is great and everything is working smoothly, except the product images. If I look in the feed, the image URLs is correct, and shows the products, but when I import to Business manager, all products successfully gets imported, but all of them has no image. Do you have a solution for this?

    Here is an example: http://prntscr.com/fasqnk

    Best regards
    Niklas

    Like

  7. Figured out the solution to the issue with invalid characters by adding ” | replace: ‘&’, ‘&’ }} ” to the rest!
    Encountered something else strange though, added page 2 as a separate feed but it says

    ‘This product already exists in the catalog:
    Another product with the same id was already uploaded to this catalog in Shopify Facebook Feed 0 – 500.”

    Shouldn’t ?page=1 load products 0-500 and ?page=2 load products 501-1000? If so how come there’s a product that exists in both feeds and how do I remove it from one of them to avoid the error?

    Thanks 😀

    Like

    1. Hi Cindy,

      Sorry for the long turn-around on this. But I believe the “This product already exists in the catalog” should now be fixed with the latest script.

      (assuming you are still using this) let me know if you are still encountering this error.

      Best,

      Alex

      Like

  8. Hi Alex,

    Thanks for getting back to me. I really appreciate it. This stuff is definitely testing my technical know how! I had been looking at various product feed management services as a solution the downside being that they are all quite expensive and could possibly be overkill?

    Following on from your reply I also had a look and found a variety of apps (both free and paid) in the Shopify app store that seems to offer pretty powerful options when it comes to adding metafields. For instance…

    https://apps.shopify.com/custom-fields-2

    https://apps.shopify.com/metafields-editor

    So with the metafields option am I correct in thinking that I could create additional metafields in order to create an alternate title and alternate product description and somehow configure it so that those fields did not display on my actual Shopify store but were used by the product feed instead of the standard title and product feed. I am not sure that the standard Google Shopping Shopify app that most stores use allows for this type of functionality?

    Would really appreciate your advice on this one.

    Like

    1. Hi Scott,

      A tool I would recommend trying first is the ShopifyFD Chrome Plugin: https://chrome.google.com/webstore/detail/shopifyfd-dashboard-tool/lffljkleilfpjlmcdnoaghhcbnemelge?hl=en

      By default, MetaFields DO NOT show up on your store unless you explicitly want them to. So you would create 2 new metafields (You need to specify a “namespace” for them — like a top level category — I recommend you use the “google” namespace to keep things consistent with how the Google Shopping app work). Assuming you call the metafields google.title and google.description, you would just update the script code to use product.metafields.google.tilte and product.metafields.google.description (instead of product.title and product.description).

      A bigger question for you to ask yourself: Is the extra effort and overhead worth the extra sales you are expecting to generate? Going this route means you will theoretically have to manage 3 sets of Titles and Descriptions (The public description, the SEO description, and then your custom Shopping descriptions). I’m not sure what your assumptions are about increased sales due to these optimizations, but I would crunch some numbers first to see if your sales volume supports the overhead of optimizing the descriptions. (Eg: Assume a 10% increase in sales — what does that come to over the period of a year).

      Additionally, in my experience, product description does very little to influence Google Shopping sales (Titles **DO** have a big influence, but not descriptions): http://searchengineland.com/advanced-optimization-google-shopping-campaigns-224627 — and so I would consider just using the SEO description for this. (..and focus heavily on negative keywords in your PLA campaigns).

      Hope some of this helps!

      Like

    2. Hi Scott,

      I just realized that we are talking about the Facebook shopping feed and not the Google shopping feed. My previous comment was related to Google Shopping and not facebook (although all the metafields comments are still correct).

      RE: Facebook – I assume you want to display the description in the product ads, and so need to make it shorter, etc… That makes sense. But I would again make the calculation of how much conversion lift you are expecting from a slightly better description, and if that’s worth the additional short & long term administrative overhead.

      Like

  9. Hi Alex, I am wanting the product descriptions for my products on Google Shopping and my Facebook Feed to be different from those on my Shopify store (basically optimised for these channels). Most of the apps I have come across ( the free Google Shopping Shopify app for instance) just pull the product descriptions directly from your Shopify store and don’t give you the option to edit/change them. Can you recommend a solution that would allow me to edit the product descriptions so they differ from those on my Shopify store?

    Like

    1. Hi Scott,

      One option is to use the Shopify SEO Title and SEO Description for your feed’s description. But if you’re already using this for your actual SEO description, then that’s not an option.

      The other option would be to use a custom Shopify MetaField to store a third description for each product. There are various metafield editor apps available, as well as a Chrome extension that will allow you to edit them easily. That’s probably your best bet.

      Hope that helps.

      Like

  10. Holy ****ing ****!!! You finally got this to work for me! I’ve been trying to get a shopify collection feed to spit out a product feed readable by Facebook for about 3 weeks. Your solution has lead me to believe that we may have stripped essential code from our standard collection template file. The one caveat I’ve found is that you have to make the collection visible on online store in order for it the link to be readable by Facebook’s Product Feed input. This means people could hit that collection page and see a giant block of text. Maybe we can find a work around but again, THANK YOU kind sir. You are a saint.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s