AddShoppers Installation Guide

1. Social Analytics Installation

Copy and paste this code into your global footer template:

<!-- Start AddShoppers Social Analytics -->
<script type="text/javascript">
var js = document.createElement('script'); js.type = 'text/javascript'; js.async = true; js.id = 'AddShoppers';
js.src = ('https:' == document.location.protocol ? 'https://shop.pe/widget/' : 'http://cdn.shop.pe/widget/') + 'widget_async.js#535a8c16a387641d6d80d3da';
document.getElementsByTagName("head")[0].appendChild(js);
</script>
<!-- End AddShoppers Social Analytics -->

2. ROI Tracking Installation

Copy and paste the following code into your checkout success template, then replace <order id> and <order value> with the correct order variables. 

<script type="text/javascript">
AddShoppersConversion = {
order_id: <order id>, // replace <order id> with your Order ID variable
value: <order value> // replace <order value with your Order Value variable
};
var js = document.createElement('script'); js.type = 'text/javascript'; js.async = true; js.id = 'AddShoppers';
js.src = ('https:' == document.location.protocol ? 'https://shop.pe/widget/' : 'http://cdn.shop.pe/widget/') + 'widget_async.js#535a8c16a387641d6d80d3da';
document.getElementsByTagName("head")[0].appendChild(js);
</script>

3. Sharing Button Installation

Copy and paste the following code into your product page template in the desired location in the upper right corner under the top nav section:

<div class="share-buttons share-buttons-panel" data-style="medium" data-counter="true" data-oauth="true" data-hover="true" data-promo-callout="left" data-buttons="twitter,facebook,email,pinterest"></div>

4. Custom Sharing Buttons

You can use our Javascript API to share through a custom icon or text link like in this example:

<a href="#" onclick="AddShoppersWidget.API.Social.app('facebook'); return false;">Share and save!</a>

Just change 'facebook' to the network that you want to share through.

5. Mobile Sharing Buttons

Include this code in your mobile template in the desired location where you want the buttons to show up:

<div class="share-buttons share-buttons-panel" data-style="medium" data-counter="true" data-oauth="true" data-hover="true" data-promo-callout="left" data-buttons="email,pinterest,facebook,twitter"></div>
<style type="text/css">.share-buttons .addshoppers-24 { display: none !important; }</style>