Created on 19 March, 2018 | Updated on 5 July, 2021

Adding Facebook Conversion Tracking Pixel To Shopify

Step 1

Login to your Shopify Admin Panel

Step 2

Click on Settings (Gear Icon) and choose Checkout

Step 3

Login to Facebook Ads Manager

In the top right corner click on the menu icon > Pixels

Click on the code icon of your active pixel

Click on Set Up, in the right corner

From the popup options, choose : Manually install the code yourself

Copy the pixel code in step 2 and place it in a temporarily document, than click on continue

Now enable the purchase event and a 1 as conversion value (we will change this later) and set your currency. Now click on done.

Now lets assemble the whole code, copy the below code and paste to your pixel conversion tracking you earlier placed in a temporary document.

<script>
  fbq('track', 'Purchase', {
    value: {{ total_price | money_without_currency | remove:',' }},
    currency: '{{ shop.currency }}',
  });
</script>

You should now see something like below (example only), on the first line add {% if first_time_accessed %} and at the end add {% endif %}, this prevents the code from executing more than once to avoid double conversions.

Tip:
first_time_accessed is for the page, not for the customer. Subsequent orders will run a first_time_access again for the same person if it is a new browser session.

{% if first_time_accessed %}
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
// Insert Your Custom Audience Pixel ID below. 
fbq('init', '<FB_PIXEL_ID>');
fbq('track', 'PageView');
</script>
<!-- Insert Your Custom Audience Pixel ID below. --> 
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=<FB_PIXEL_ID>&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
<script>
  fbq('track', 'Purchase', {
    value: {{ total_price | money_without_currency | remove:',' }},
    currency: '{{ shop.currency }}',
  });
</script>
{% endif %}

Step 4

Now go back to Shopify > Checkout and scroll down until you see Order Processing, at the bottom of this section you will have a field where you can paste the code which is labeled Additional Content and Script. Here you can paste the code you assembled.

Need Help?

12 thoughts on “Adding Facebook Conversion Tracking Pixel To Shopify”

  1. Hey all,

    I really need some help and advice here.

    For some reason my purchase events doesn’t always trigger(90% of the purchases). All other events fires just fine. The pixel events are automatically integrated with shopify.

    What would possibly be the best solution for this?

    Remove the shopify fb pixel integration and manually add all events or is it possible to delete the purchase event code and add it manually at additional scripts?

    Thanks in advance

    1. I have never heard events not being triggered. My recommendation contact Shopify support. Or try installing it manually.

      I am not sure what you need to disable to avoid double tracking. This needs to be investigated.

  2. No-Nonsense Marketing

    Has the order value code changed?
    You have – ” total_price ” aka. {{ total_price | money_without_currency | remove:’,’ }}
    And I see some other blogs insert this ” checkout.total_price ”
    {{ checkout.total_price | money }}
    thanks

  3. Hey Emmanuel, we used to forward to a customer questionnaire using an “Additional Script” in Shopify. However, we figured out, that the forwarding script executes faster than the Facebook Pixel Code and therefore prevents reliable tracking in Facebook. Do you have an idea how we could forward after Facebook Pixel Code (and all other tracking scripts) have been executed? Thanks and all the best, Dominik

  4. How is using first_time_accessed the accepted solution to this? Yes, you don’t double count conversions, but you totally lose out on tracking subsequent purchases.

  5. Hi Emmanuel,I have a shopify website – mypoojabox.in in which I have installed this script recommended by you on Checkout but I have noticed that still the no. of conversions are counting twice. https://uploads.disquscdn.c…Here is the customized script that I have been using on checkout -{% if first_time_accessed %}<script> !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n; n.push=n;n.loaded=!0;n.version=’2.0′;n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window, document,’script’,’//connect.facebook.net/en_US/… fbq(‘init’, ‘294416497709223’); fbq(‘track’, “PageView”); fbq(‘track’, ‘Purchase’, { value: ‘{{ total_price | money_without_currency }}’, currency: ‘{{ shop.currency }}’, order_id: ‘{{ order_number }}’, content_ids: [{% for line in order.line_items %}’shopify_{{ line.product_id }}_{{ line.variant_id }}'{% unless forloop.last == true %}, {% endunless %}{% endfor %}], content_type: ‘product’, num_items: ‘{{ item_count }}’ });</script><noscript><img height=”1″ width=”1″ style=”display:none” src=”https://www.facebook.com/tr…”/></noscript>{% else %}{% endif %}Could you please check once and help me out. Thanks in advance!

    1. Emmanuel Flossie

      Hello Jason, most likely you have the conversion tracking installed twice, check your apps and checkout additional scripts for duplicates.

  6. That’s a pretty straight forward solution to adding facebook tracking pixel Shopify facebook pixel app is also very helpful solution.

  7. I operate a Shopify store and this article really help me in implementing theShopify Facebook pixel app in my store. Thanks.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.