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:
- Install the Google Sales Channel
The script leverages some of the metafields that are created on by the Google Sales Channel - Install the Facebook Sales Channel
- 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.
- Go to Facebook Business Manager and then
Commerce Manager > Catalog > Data Sources - Click on your data feed and go to Settings
- Scroll down to Data Feed Rules and click on Add Rules > Set Default Values
- 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: '&', '&' }}</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: '&', '&' }}</description>{% endif %}
<g:google_product_category>{{ GoogleProductCategory | replace: '&', '&' }}</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: '&', '&' }}</description>{% endif %}
<g:google_product_category>{{ GoogleProductCategory | replace: '&', '&' }}</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 %}
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!
