Shopify and Pinterest tag

Step 1: Base code

  1. From your Shopify admin, click Online Store​, and then Themes

  2. Navigate to the theme you want to edit and click Actions then Edit Code​

  3. Click theme.liquid.

  4. Scroll until you see “​</head>” and paste this code above it:

    <script type="text/javascript">
    !function(e){if(!window.pintrk){window.pintrk=function()
    {window.pintrk.queue.push(Array.prototype.slice.call(arguments))};var
    n=window.pintrk;n.queue=[],n.version="3.0";var
    t=document.createElement("script");t.async=!0,t.src=e;var
    r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r)}}
    ("https://s.pinimg.com/ct/core.js"); 
    
    pintrk('load','YOUR_TAG_ID', { em: '{{ customer.email }}', });
    pintrk('page');
    </script> 
    <noscript> 
    <img height="1" width="1" style="display:none;" alt=""
    src="https://ct.pinterest.com/v3/?tid=YOUR_TAG_ID&noscript=1" /> 
    </noscript>
    
  5. Replace “YOUR_TAG_ID”​ with your own unique tag ID

  6. To find this, navigate to Ads Manager and click on Ads​, then find Conversion Tracking​ and click Generate Pinterest Tag

  7. Navigate to your conversion tracking overview and find the details section

  8. Copy the 13 digit number below “Unique Tag ID” and paste it in place of “YOUR_TAG_ID” in the code

Step 2: Checkout code

 

  1. From your Shopify admin, click Settings​ and then click Checkout​

  2. In the “Order processing”​ section, find the “Additional scripts​” text box

  3. Paste the following tracking code into the text box; if there is already code in this box, paste your tracking code after it

    {% if first_time_accessed %}
    <script type="text/javascript">
    !function(e){if(!window.pintrk){window.pintrk=function()
    {window.pintrk.queue.push(Array.prototype.slice.call(arguments))};var
    n=window.pintrk;n.queue=[],n.version="3.0";var
    t=document.createElement("script");t.async=!0,t.src=e;var
    r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r)}}
    ("https://s.pinimg.com/ct/core.js");
    
    pintrk('load','YOUR_TAG_ID', { em: '{{ customer.email }}', }); 
    pintrk('page'); 
    </script> 
    <noscript> 
    <img height="1" width="1" style="display:none;" alt=""
    src="https://ct.pinterest.com/v3/?tid=YOUR_TAG_ID&noscript=1" /> 
    </noscript>
    
    <script>
    pintrk('track', 'checkout',{
    value: {{ total_price | money_without_currency }}, 
    order_quantity: 1,
    order_id: {{checkout.id}}
    });
    </script>
    <noscript>
    <img height="1" width="1" style="display:none;" alt=""
    src="https://ct.pinterest.com/v3/?tid=YOUR_TAG_ID&event=checkout&noscript=1"/>
    </noscript>
    {% endif %}
    

     

  4. Remember to replace “YOUR_TAG_ID”​ with the unique tag ID that was generated in Ads Manager

Step 3: Addtocart code

  1. From your Shopify admin, click Online Store​ then Themes.

  2. In the current theme you’re using, click Actions and Edit code.

  3. Under ‘Templates’ look for code files named “product.liquid”, “product-template.liquid”, ​or “product-form.liquid” ​and open it. Note that this may vary depending on the theme you have installed, but it’s most common to see add to cart button code in the products.liquid file or equivalent.

  4. Search the file for "addtocart" by pressing and holding command+f on Mac or control+f on PC.

  5. Place the following code within the ending caret of the <button> or <input> element:

    onclick="pintrk('track', 'addtocart', {value: {{ product.selected_variant.price | money_without_currency}}, order_quantity: 1});"

     

  6. Click Save ​in the top right corner.

 

Still need help?
Contact us