Facebook Product Catalog Shopify Setup Using Facebook Pixel

Last modified: May 25, 2020
Estimated reading time: 3 min
In this article

One of the best Facebook campaign objectives to create for an eCommerce website is the D.P.A (Dynamic Product Ads). Setting it up on Facebook Ad Manager could be easy for some, but implementing the product catalog, and FB pixel somehow requires advanced knowledge in coding.

In this article, I'm going to teach you how to add products to Facebook Catalog feed without needing any application.
The implementation requires Shopify default Facebook PIxel integration.

The Microdata Tags

There are 3 options to choose to add or update products to your Product Catalog feed. These are OpenGraph, Schema.org, and JSON-LD for Schema.org.

For this implementation, I’m going to use the OpenGraph microdata tag. Just follow my step-by-step instructions on what you need to do, and you’ll be fine. 🙂

The OpenGraph

If you’re wondering what OpenGraph looks like? I’m pretty sure you’re familiar with it. This is the code you’ll need to add to one of your Shopify liquid file.  All the value will be dynamically populated.

Sample OpenGraph

<meta property="og:title" content="Tracking Pixel">
<meta property="og:description" content="Helping everyone with tracking pixel">
<meta property="og:url" content="https://trackingpx.com/isawesome">
<meta property="og:image" content="https://tracking.com/guide.jpg">
<meta property="product:brand" content="TrackingPX">
<meta property="product:availability" content="in stock">
<meta property="product:condition" content="new">
<meta property="product:price:amount" content="6.99">
<meta property="product:price:currency" content="USD">
<meta property="product:retailer_item_id" content="tracking_px_001">
<meta property="product:item_group_id" content="tracking_px">

Adding OpenGraph Tag To Your Liquid File

  1. Go to Online Store > Themes
  2. On the Live Theme, Edit code
  3. Search the liquid file named social-meta-tags.liquid
  4. On this next step, you need to follow my instructions carefully.

There are 2 types of script that you need to check. This is where you will add the OpenGraph tags.

  • {% if request.page_type == ‘product’ %}
  • {% if template.name == ‘product’ %}

One from these exist in your social-meta-tags.liquid, and there are two instances of it.  But what you need to change is in line 48 or find it using browser search on MAC (cmd + F) or PC (ctrl + F). All you need to do is to replace the two og:price meta tag.

This is how it looks like.

Replace with this code:

Premium Content
Unlock Content for $25.00
Purchase to Unlocked everything on this post only.
 One Year Access after Purchase

Connecting Your Pixel To Your Product Catalog Feed

Now that you’re done adding the OpenGraph tags. Creating the catalog feed is the next step. There are two ways to develop it. First, browse to the menu and click Catalog Manager, or if you already setup your business account, then you can create under Business Setting.

Once done creating the catalog, and you have your pixel setup correctly, then you’re ready to connect your Facebook Pixel to your catalog.

Connecting FB Pixel to your Catalog Feed to Start Adding and Updating Products

  1. In your catalog, go to Event data sources
  2. Select the correct pixel you used and assigned to your website. If you have multiple pixels, then I suggest you list down all the pixels that you want to assign to your catalog and enable them all. (In my case, I have 3 pixels to add).
  3. Once done enabling your pixel/s, click the Product data sources
  4. You’ll see the options on how to add your product to your feed, from the 3 options just Use a Pixel
  5. Continue the setup and you’re done.

Video Guide

Watch the step-by-step process of setting up the catalog feed.

Premium Content
Unlock Content for $25.00
Purchase to Unlocked everything on this post only.
 One Year Access after Purchase

Conclusion

Using FB Pixels to add products to a catalog is one of the features that are not being widely used by many. The majority are still using ready-made applications to do this. Some are even paying for paid subscriptions to have the catalog up and running. 

But the truth is, Facebook Pixel, together with the Microdata can do all this stuff even better. Imagine getting your product updated on the fly the moment it receives an interaction. While using application with scheduled upload can take some time to get your product updated. Also, an application could be compromised at any time, while your pixel will only stop when your account gets ban or shutdown and your pixel backup can save your data. 🙂

Written by: John D.
Was this article helpful?
Dislike
Views: 617
0 0 votes
Article Rating
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
kkiernan
kkiernan
3 years ago

Hi John, I just purchased your hidden content. Thank you, this is good info, as I have struggled to gather this data through Facebook and Shopify’s vague documentation. I have a question, and that is, does this setup work for feeding products AND its variants? I’m having trouble getting the Shopify API to feed the actual variants to Facebook’s shop through the pixel. Can you add this in or contact me directly about how this might look with Open Graph and liquid variables? In particular, for product:retailer_item_id and product:item_group_id. Thanks again.

0
Reply