Skip to main content
All CollectionsIntegrating our serviceShopify
How to add a custom pixel in Shopify
How to add a custom pixel in Shopify

If you have switched to Shopify's new one-page checkout, you will need to add code via a custom pixel.

Updated over a month ago

If you have switched to Shopify's new one-page checkout (checkout extensibility), please add the code below via a custom pixel. With this code we will capture the customer email address, order number, and products they purchased (if you are collecting product reviews). ​

In order for this to work, you must have the "Email All" setting enabled in your Shopper Approved account. To enable this setting, log in to your Shopper Approved account, navigate to Setup > Seller Ratings and scroll down until you see the "Email All" setting.


​You will also want to make a note in your privacy policy that you share email addresses with a third party. We only use email addresses in this instance to send customers the post purchase email asking for a review.


​With the "Email All" setting enabled, we will send your customers a post purchase email asking them for a review.

Placing the Custom Pixel Code


1. To place the code in Shopify, login to your Shopify store, go to Settings > Customer Events > click "Add a custom pixel".



2. Name the pixel "Shopper Approved" or similar.

3. Place the following custom pixel code snippet in the Code Section.
Here is a video for you to reference.

Note: You must replace the siteID and siteToken with your unique values. See the next step on how to do that.




var siteID = XXXXX; //populate SA Site ID
var siteToken = 'YYYYY'; //populate SA Token
window.sa_values = { "site":siteID, "token":siteToken, 'orderid':'', 'name':'', 'email':'', 'country':'', 'state':'' }; //declare sa_values
window.sa_products = {}; //declare sa_products

analytics.subscribe("checkout_completed", event => { //Subscribe to the checkout_completed order events
const checkout = event.data.checkout;
for(var i = 0; i < checkout.lineItems.length; i++){ //loop through purchased items
sa_products[checkout.lineItems[i].variant.id] = checkout.lineItems[i].title;
}
if(sa_values.country!=undefined) sa_values.country=checkout.billingAddress.countryCode;
if(sa_values.state!=undefined) sa_values.state=checkout.billingAddress.provinceCode;
if(sa_values.orderid!=undefined) sa_values.orderid=checkout.order.id;
if(sa_values.name!=undefined) sa_values.name=checkout.billingAddress.firstName + " " + checkout.billingAddress.lastName;
if(sa_values.email!=undefined) sa_values.email=checkout.email;
function saLoadScript(src) { var js = window.document.createElement("script"); js.src = src; js.type = "text/javascript"; document.getElementsByTagName("head")[0].appendChild(js); } saLoadScript("https://www.shopperapproved.com/thankyou/rate/" + siteID + ".js")
});



4. Replace the site ID and siteToken with your unique Site ID and Initial Survey Token in the first two lines of the code snippet.

To find your Site ID and Initial Survey Token, log in to your Shopper Approved account, click on your name in the upper right hand corner > Settings and you will find this information under Domain Information.


5. Select the following options under Customer privacy:

  • For Permission, select "Not Required"

  • For Data Sale, select "Data collected qualifies as data sale"



6. Click "Connect".

7. Test to make sure it's working properly.

Placing a Test Order

Once the code has been added, please place a test order to make sure the pixel is working correctly. Here is an article on how to test:

Troubleshooting

If it's not working properly, make sure you have replaced the siteID and siteToken with your unique values.

Make sure "email all" is enabled.


If you need help, please reach out to [email protected].

Did this answer your question?