Categories
Digital Marketing Facebook Ads Shopify

Fix Missing Fields in Shopify’s Facebook Product Feed

Last Update: September 18, 2020

If you use the Facebook Channel on your Shopify store, you will notice that some product attributes are missing in the product catalog:

  • Google Product Category
  • Gender
  • Material
  • Additional Images

Below is the solution to add these missing details. This will give you finer control over your Facebook Product Sets and will let you create richer dynamic ads with multiple product images.

Pre-requisites

Before we start, make sure all of the following are done:

  1. Install the Google Sales Channel
    The script leverages some of the metafields that are created on by the Google Sales Channel
  2. Install the Facebook Sales Channel
  3. Setup Empty Field Rules
    This is not actually a pre-requisite, but it’s a good backup in case things break down with your feed. This sets some default values for fields such as condition and availability.
  1. Go to Facebook Business Manager and then
    Commerce Manager > Catalog > Data Sources
  2. Click on your data feed and go to Settings
  3. Scroll down to Data Feed Rules and click on Add Rules > Set Default Values
  4. Create default values for age_group, gender, availability, condition, material, and any other fields that make sense for your business.

Step 1
Create the Facebook Product Feed Template

To create the Facebook product update feed, we will use a “hack” to transform a standard Shopify Collection page into and XML data feed:

  • In the 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 facebook-feed-template

Paste the code below into your newly created template file and click Save.

{% 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 useSEOdescription = true -%}
{%- assign additionalImagesForVariants = false -%}
{%- assign filterVariantImagesByColor = false -%}
{% comment %}
This template is used to add additional information to the Facebook product catalog
</comment:title>
{% endcomment %}
<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 Material = product.metafields.mm-google-shopping.material  -%}
{%- assign Color = "" -%}

{%- 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 %}{%- endif -%}
{%- endfor -%}

{% assign additional_images = product.images %}
{% if filterVariantImagesByColor %}{% assign additional_images = product.images | where: "alt", Color | sort: 'attached_to_variant' | reverse%}{% endif %}

<item>
<g:id>{{ variant.id }}</g:id>
<g:brand>{{ product.vendor }}</g:brand>
{% if useSEOdescription and product.metafields.global.description_tag.size > 0 %}<description>{{ product.metafields.global.description_tag | strip_html | strip_newlines | replace: '&', '&amp;' }}</description>{% endif %}
<g:google_product_category>{{ GoogleProductCategory | replace: '&', '&amp;'  }}</g:google_product_category>
<g:item_group_id>{{ product.id }}</g:item_group_id>
<g:content_id>{{ variant.id }}</g:content_id>
<g:availability>{% if variant.available %}in stock{% else %}out of stock{% endif %}</g:availability>
<g:material>{{ Material }}</g:material>
<g:gender>{{ Gender }}</g:gender>
<g:age_group>{{ AgeGroup }}</g:age_group>
{% if additionalImagesForVariants %}
{% if additional_images.size > 1 %}{%- for image in additional_images offset:1 limit:10 -%}
<g:additional_image_link>https:{{ image.src | product_img_url: 'master' }}</g:additional_image_link>
{% endfor %}{% endif %}
{% endif %}
</item>

{% endfor %}
{%- else -%}

<item>
<g:id>{{ product.id }}</g:id>   
<g:brand>{{ product.vendor }}</g:brand>
{% if useSEOdescription and product.metafields.global.description_tag.size > 0 %}<description>{{ product.metafields.global.description_tag | strip_html | strip_newlines | replace: '&', '&amp;' }}</description>{% endif %} 
<g:google_product_category>{{ GoogleProductCategory | replace: '&', '&amp;'  }}</g:google_product_category>
<g:item_group_id>{{ product.id }}</g:item_group_id>
<g:availability>{% if product.available %}in stock{% else %}out of stock{% endif %}</g:availability>
<g:material>{{ Material }}</g:material>
<g:gender>{{ Gender }}</g:gender>
<g:age_group>{{ AgeGroup }}</g:age_group>
{% if product.images.size > 1 %}{%- for image in product.images offset:1 limit:10 -%}
<g:additional_image_link>https:{{ image.src | product_img_url: 'master' }}</g:additional_image_link>
{% endfor %}{% endif %}
</item>

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

or download from Github

Although the script above will work as is, there are two items that you can configure:

additionalImagesForVariants = false
Setting this to true will upload all your product’s additional images. If you use variants, all your variants will have the identical additional images (their primary image will be as-configured in Shopify)

filterVariantImagesByColor = false
Setting this to true will only upload additional images for a variant IF the ALT text of the images exactly match that variant’s color attribute.

Step 2
Select the Products to Send to Facebook

Now select which products will be included in your feed.

  • In Shopify Admin, go to
    Products > Collections > Create Collection
  • Enter a Title: “Facebook”
  • Add Products to the collection (either manually or using conditions). If you want to include all your products, then add a rule similar to “Inventory Stock is greater than 0”.
  • IMPORTANT!
    Assign the Facebook Feed Template to this collection.
    In the bottom right column of the page, you should see a section called Theme templates. Choose collection.facebook-feed-template otherwise none of this will work.
  • At the bottom of the page, click on Edit Website SEO and enter “facebook” as your collection url handle. (optional – but helps with remembering your feed url)
  • Save and Preview the collection. You should see unformatted text on the screen. This is your Facebook feed. Do a “View Source” in your browser to preview the XML data.
  • Copy the url of this page. It should look similar to https://www.yourstore.com/collections/facebook

Step 3
Upload your Product Feed to Facebook

  • Go to your Facebook Business Manager and go to Commerce Manager
  • Expand Catalogs in the left hand menu and select Data Sources
  • Click on your data source name and then on Settings
  • Scroll to the bottom of the screen and click on Single Upload and select via URL
  • Paste in the feed url generated in Step 2 and select Update your data feed
  • Click Upload File
  • Wait for Facebook to finish fetching your feed

Done

Your products should now have the missing information added. You will probably want to repeat STEP 3 anytime you modify or add new products to your shop.

It’s just a matter of time before Shopify starts uploading the full data specs to Facebook, but until that time, this is the workaround!

Related Reading

Categories
Facebook Ads Shopify

DIY Facebook Product Feed for Shopify

WARNING! I am no longer updating / maintaining this code. It should still work but use at your own risk.

UPDATE Oct 10, 2019: I have switched to using the Shopify Facebook Marketing App to sync my product catalogs with Facebook. Although not perfect, it does the job well enough!

UPDATE Dec 11, 2019: Shopify Facebook Marketing App does not upload all product attributes (Product Type is missing). If you need these missing attributes, I have documented a way to upload the missing data via a custom xml feed.

Below is a free customizable DIY solution to create a Facebook Product Feed in Shopify.

  1. This is an advanced topic and assumes you have the required understanding of HTML/XML/Liquid, the Shopify Store Admin and Facebook Business Manager.
  2. There are several existing paid apps that allow you to do this without coding (Flexify and DataFeedWatch) and a free app (Facebook Marketing App by Shopify).

1. Install the Google Shopping Channel

Install Shopify’s free Google Shopping app. This will allow you to configure product properties such as Age Group, Gender, and Product Category.

2. Create an XML Collection Template

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

  • In the 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 code below into your new template and click Save. (Best to copy the code from this link: 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 PriceAdjustment = 1.0 -%}
{%- assign PriceAdjustmentEffectiveDate =  '20181226T080000-0500/20190102T235900-0800' -%}

<channel>
<title>{{ shop.name }} {{ collection.title | replace: '&', '&' }}</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 -%}

    {% comment %} Calculate Sales vs Base Pricing {% endcomment %} 
    {%- if variant.compare_at_price == blank -%}
      {%- assign BasePrice = variant.price -%}
    {%- else -%}
      {%- assign BasePrice = variant.compare_at_price -%}
    {%- endif -%}
    {%- assign SalePrice = variant.price | times: PriceAdjustment -%}

<item>
<title>{{ product.title | strip_html | strip_newlines | replace: '&', '&' }}{% unless product.title contains Color %} {{ Color | replace: '&', '&' }}{% endunless %}</title>
<link>{{ shop.url }}{{ variant.url }}</link>
<description>{{ product.title | strip_html | strip_newlines | replace: '&', '&' }} {{ variant.title | strip_html | strip_newlines | replace: '&', '&' }} {{ product.description | replace: '</', ' </' | strip_html | strip_newlines | replace: '&', '&' }}</description>
<g:google_product_category>{{ GoogleProductCategory | replace: '&', '&'  }}</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>{{ BasePrice | money_without_currency }} {{ shop.currency }}</g:price>
{%- if SalePrice < BasePrice -%}<g:sale_price>{{ SalePrice  | money_without_currency }} {{ shop.currency }}</g:sale_price>{%-  endif -%}
{%- if PriceAdjustment < 1 -%}<g:sale_price_effective_date>{{ PriceAdjustmentEffectiveDate }}</g:sale_price_effective_date>{%- endif -%}
<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: '&', '&' }}</g:product_type>
<g:age_group>{{ AgeGroup }}</g:age_group>
{% unless Color == "" %}<g:color>{{ Color | strip_html | strip_newlines | replace: '&', '&' }}</g:color>{% endunless %}
{% unless Size == "" %}<g:size>{{ Size | strip_html | strip_newlines | replace: '&', '&' }}</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 %}

  {% comment %} Calculate Sales vs Base Pricing {% endcomment %} 
  {%- if product.compare_at_price_min == blank -%}
    {%- assign BasePrice = product.price -%}
  {%- else -%}
    {%- assign BasePrice = product.compare_at_price_min -%}
  {%- endif -%}
  {%- assign SalePrice = product.price | times: PriceAdjustment -%}

<item>
<title>{{ product.title | strip_html | strip_newlines | replace: '&', '&' }}</title>
<link>{{ shop.url }}{{ product.url }}</link>
<description>{{ product.title | strip_html | strip_newlines | replace: '&', '&' }} {{ product.description | replace: '</', ' </' | strip_html | strip_newlines | replace: '&', '&' }}</description>
<g:google_product_category>{{ GoogleProductCategory | replace: '&', '&'  }}</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>{{ BasePrice | money_without_currency }} {{ shop.currency }}</g:price>
{%- if SalePrice < BasePrice -%}<g:sale_price>{{ SalePrice  | money_without_currency }} {{ shop.currency }}</g:sale_price>{%-  endif -%}
{%- if PriceAdjustment < 1 -%}<g:sale_price_effective_date>{{ PriceAdjustmentEffectiveDate }}</g:sale_price_effective_date>{%- endif -%}
<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

3. Assign products to your Feed

In Step 2 you created your feed template. Now you need to assign products to this feed:

  • In Shopify Admin, go to Products > Collections > Create Collection
  • Enter a Title: “Facebook Product Feed”
  • Add Products to the collection (either manually or using conditions)
  • IMPORTANT! Assign your feed TEMPLATE to this collection.
    In the bottom right column choose collection.fb-product-feed as the Theme Template.
  • Save and Preview the collection. You should see unformatted text on the screen. This is your Facebook feed.
  • Copy the url as you need it in the next step.

4. Upload your Feed to Facebook

  • In Facebook Business Manager go to Assets > Catalogs > Create Catalog.
  • Catalog Type: E-Commerce
  • Click Add ProductsUse Datafeed
  • Enter the 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)

5. Prevent the Facebook Feed from Showing on your Store

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