How to connect your Squarespace eCommerce website to the Pinterest Verified Merchant Program

How to Become a Verified Merchant on Pinterest with Squarespace in 2020 (Updated November 18, 2020).

Pinterest recently announced the opportunity for creators and sellers to become verified merchants on their site. As a verified merchant, your Pinterest account would display a checkmark within your profile page similar to Twitter’s verified badge. Additionally, your account would be able to post shoppable Pins to the platform. To read all about the benefits and requirements of the Pinterest Verified Merchant Program, click here.

I love the benefits I get from the Pinterest program, so I worked with my team to create this guide for myself and others, sharing how we were able to achieve Verified Merchant status on Pinterest using my Squarespace eCommerce website. (One quick note - at the time of this writing, you must be a US based merchant to become Verified.) Also I should give the standard disclaimer that although these steps are what worked or me and my team, there are a LOT of variables at play here and you follow this guide at your own risk! Incorrectly working with code can easily break your site severely, maybe even permanently. Ok, enough of that, let’s get moving!

in this post I will cover the following -

• Claiming your website

• Uploading your product catalog

• Installing your Pinterest Tag

• Adding the event code of ‘page view’

• Adding the event code ‘add to cart’

• Adding the event of ‘check out’

Let’s Get You Verified!

Step 1 - Claim your website

First, before attempting to integrate your Squarespace store onto Pinterest, you have to claim your website. See here for details.

Step 2 - Connect your product catalog to Pinterest.

By doing this, you will be telling Pinterest what you have available for sale, as well as a variety of metadata about the inventory. You will give Pinterest a URL to your store catalog, which is a CSV file that meets their product catalog requirements. To create a Pinterest product catalog the way I did, please use the awesome free service provided here, that will translate a Squarespace product catalog into a Pinterest product catalog:

* IMPORTANT* - Once you follow the instructions given by the above catalog converter tool, and download your converted product catalog, you must then upload and host it somewhere. Since Pinterest requires that the product catalog URL exist on the same domain as your e-commerce store, you will have to upload it to your Squarespace back end - thereby giving the catalog a web address matching your store’s domain.

Here is a video demonstrating how to upload and host a CSV file on your Squarespace site :

Step 3 - Install the Pinterest base code on every page of your website.

We need to make sure that when people visit ANY page on your website, we tell Pinterest about it, and give credit to your Pinterest account. That’s what the base code is for. Go to your Squarespace admin panel and go to Settings ->Advaced -> Code Injection. There, insert the following code snippet, AFTER any code that may already be inside that text area:

 <!-- Pinterest Pixel Base Code -->
 <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 PINTEREST ADD ACCOUNT ID HERE>');
   pintrk('page');
 </script>
 <noscript>
   <img height="1" width="1" style="display:none;" alt="" src="https://ct.pinterest.com/v3/?tid=YOUR_TAG_ID&event=init&noscript=1" />
 </noscript>
<!-- End Pinterest Pixel Base Code -->

*IMPORTANT* - In the above Javascript snippet, you must replace the part of the code that says <YOUR PINTEREST TAG HERE>, with the Pinterest ad account ID that is available in your Pinterest business account control panel.

Step 4 - Add Pinterest tracking event code for product viewed

Now that we have the base code installed on every page of our site, we need to fulfill Pinterest’s second requirement, which is to report a specific tracking event when your customers visit a product page.  In order to do that, we need to inject another Javascript snippet into Squarespace.  Since Squarespace does not afford us a unique place to inject Javascript into ONLY A PRODUCT PAGE, we can only inject Javascript into EVERY PAGE..  So, we will inject JS onto every page on your site, that will detect if the page is a product detail page, and if so, fire off the Pinterest “pageVisit” event code.  But first… In order to do that, we need to activate developer mode.

Step 4.1 - Activate developer mode on Squarespace

The first thing we need to do in order to unlock the full power of Squarespace is to go into developer mode.  By going this we can edit the site template and expose data that we want to access.  The tradeoff of turning on developer mode is that once you activate it, you won’t get template updates anymore.  For me this is a non-issue since I care much more about getting on the Pinterest Verified Merchant program, That, and I simply want an added level of power and control over my website as well.

It almost goes without saying but yes, in developer mode you have the potential to cause serious harm to your site.. but only if you do something foolish.  I promise for the purposes of this blog post, we are doing something simple.  For more info about developer mode please read the official documentation.  Now, if you want to supercharge your site and decide to take the next step, please go to your website and activate developer mode. When you’ve done it, read on! 

Step 4.2 - Edit the site template 

Once you have activated developer mode, you should get the credentials to login to an FTP server.  This server is where files are stored that define how your site works (the template).  You’ll need a decent FTP client program. There are many good free ones, I use Transmit for MacOS.  On your website, go to Settings->Advaced->Developer Mode.  There you will see the login credentials needed for FTP:

Using the username, password and SFTP information provided here, you’ll want to access to your site template, then edit the site.region file.  Before editing this file, make sure to save a backup of it.  (Again, the edit we are making is very simple, but you can’t be too careful.)  So, in site.region, you will insert a short code snippet into the <head> area of the page.  The snippet will expose information about a possible product that is being viewed on the site. This data will be accessed by Javascript from the Squarespace code injection panel. Here’s the code snippet to paste into site.region:

{.section order} 
<script>  
    var orderJson = {@|json-pretty};            
</script>


{.section website}
<script>  
    var siteJson = {@|json-pretty};         
    var myItem = {item|json-pretty};
</script>

And here’s what the snippet looks like pasted into the <head> area of site.region:

Save the new and improved site.region file back on your FTP server, then go back and reload your website (your normal store website) from a different browser or private window.   This is just to quickly test that you didn’t break anything when editing your site.region file. 

Step 4.3 - Add Pinterest tracking event code for “product viewed”

So after that short detour to turn on developer mode and edit the template, we can get back to our current task of calling the Pinterest “product viewed” tracking event whenever someone views a product on your site.  So go back to your site control panel and go to Settings->Advanced->Code Injection. Using the data we just exposed in your site template, we’re going to detect if we are on a product page and if so, call the tracking event.  Here’s the code snippet that gets pasted in at the end of your header code injection: 

<!-- Below is Custom Code for Determining if we are on a product page and calling Pinterest pintrk if so. -->
<script type="text/javascript">
    function getProductID(){      
      return myItem.variants[0].sku;
    }
    function addToCartClicked(){
      var id = getProductID();
        pintrk('track', 'addtocart', {
            line_items: [{ product_id: id }]
        });   
    }
    function isProductPage(){
      //Defined in the Template
      return (myItem != null);
    }
    document.addEventListener("DOMContentLoaded", function(){
        if(isProductPage()){
            var id = getProductID();
            pintrk('track', 'pagevisit', {
                line_items: [{ product_id: id }]
            });   
        }
        var elements = document.getElementsByClassName("sqs-add-to-cart-button");
        if(elements.length > 0){
            elements[0].onclick = function fun() {              
                addToCartClicked();
            }
        }
    });
</script>

Step 5 - Add Pinterest tracking event code for “add to cart”

We already added the Pinterest base code, and in the last step we reported when a product is viewed. Next we need to report when a product is added to the cart.  If you were paying attention in the last step, you saw that code was already included in that snippet.  There, we use JS to search for the add to cart button in the HTML document and add a click listener. That click listener then calls Pinterest’s pintrk function with the addToCart option, and includes the product ID from the data we exposed in our template edits.  So we’re good there, and on to the last step. (Disclaimer : I haven’t worked with too many Squarespace templates and can’t guarantee that the button class name is the same on every template and version. )

Step 6 - Add Pinterest tracking event code for “checkout”

The last step we will accomplish in order to satisfy Pinterest’s Merchant requirements is to report an event when a customer actually completes (converts) their purchase (YAY!). Thankfully, this is easy since Squarespace provides us with a way to inject JS code into the post-purchase page, called the thank you page.

• In your Squarespace control panel, again navigate to Settings->Advanced->Code Injection, and then scroll the left panel to (ORDER CONFIRMATION PAGE) and insert this code snippet :

<script>
var items = orderJSON.items;
for (var i = 0; i < items.length; i++) {
    var item = items[i];
    var line_item = {
        product_name: item.productName,
        product_id: item.sku,
        product_price: item.unitPrice.decimalValue,
        product_quantity: 1
    };
    pintrk('track', 'checkout', {
            value: {orderGrandTotal},
            order_quantity: 1,
            currency: 'USD',
            line_items: [line_item]
        },
        function(didInit, error) {
            if (!didInit) {
                console.log("pintrk error:", error);
            }
        });
}
</script>

You can see how we are using {orderGrandTotal} as part of the argument passed into the pintrk function. This is because the template provides some dynamic data in the form of Squarespace markup. That’s where the {orderGrandTotal} comes from.

Complete the Steps and Enjoy the Benefits

From here, you will need to have some sales convert on your site, at which point you should see everything working on Pinterest. Keep in mind that sales need to be coming in fairly constantly so that your site keeps reporting all these different events to Pinterest. If these events stop happening, Pinterest will assume your link is broken and you will get a bad tag “health” rating on the Pinterest dashboard. If you need to, you can create a $0.00 item on your site to test with by completing some sales yourself.

Remember to stay patient. Each step of the way is fairly complicated and this stuff isn’t easy! Also Pinterest can take some time to recognize certain things. For example, once you upload your product catalog, it can take a while for Pinterest to recognize the changes. 24 hours for sure. Similarly once sales start flowing through those pintrk calls, they aren’t recognized by Pinterest instantly. We found ourselves waiting 24-48 hours before seeing changed results on Pinterest sometimes, so don’t panic.

If you have any questions or comments please leave them below and we will do our best to respond if at all possible.

Becoming a verified merchant on the Pinterest platform is useful to increase the reach of your Squarespace eCommerce store. The blue checkmark on your account signals to other Pinterest users that you have been vetted by Pinterest as a trustworthy vendor. The steps provided here were the path that we took to become verified. Hopefully, this information will be of help to you and others looking to do the same.