Installing the Pixlee BigCommerce App

Get your Pixlee Account Secret key

We need the Pixlee Account Secret Key for your account. This key is generated when you create a Pixlee account, and is unique to your account.

1. Go to https://www.pixlee.com, log in, navigate to the Settings button (the dropdown on the top-right corner) and click Pixlee API.

(Alternatively, point your browser to https://app.pixlee.com/app#settings/pixlee_api while logged in).

The Pixlee API page looks like this:

2. Record the value of Account Secret Key. We will need it later.

Get the official Pixlee BigCommerce app from the BigCommerce marketplace

1. Go to the official BigCommerce page for the Pixlee app and click "Get it Now".

2. If you're prompted to login to your store, please do so. Otherwise skip to the next step.

3. Next, you will be prompted that "Pixlee is requesting access to your BigCommerce store", Click Confirm. If you have any questions about why Pixlee needs access to a certain resource, please feel free to get in touch with us here.

4. You'll be asked to login to your Pixlee account on the next page. Please use the same credentials that you use when logging into Control Panel. Also, you'll be asked to enter the Account Secret Key that we collected in the previous section.

5. If the login was successfull, you should see the Pixlee BigCommerce panel. Please note that it might take about a minute or so for the first time you login.

---

Enabling Analytics Tracking

Website Engagement and Add to Cart Analytics

1. In your BigCommerce store management panel. Click on "Storefront", and then click "Script Manager" in the left navigation panel.

2. In Script Manager, click "Create a Script"
   

3. Fill in Create Script form

   1. Name of script: Pixlee Analytics Script
   2. Location on page: Footer
   3. Select pages where script will be added: All pages
   4. Script category: Analytics
   5. Script type: Script
   6. Script contents:
      HTML

      <script src="https://assets.pixlee.com/bigcommerce/pixlee.bigcommerce.v1.prod.js"></script>
      

4. Click Save

Conversion Analytics

1. Copy the following line of code

   	<script src="https://assets.pixlee.com/bigcommerce/pixlee.bigcommerce.v1.prod.js" order-id="%%ORDER_ID%%"></script>
   

2. In your BigCommerce store management panel, select "Setting". Scroll down to "Advanced" and click "Data solutions". BigCommerce Affiliate Conversion Tracking
   

3. Under "Web analytics", click "Affiliate Conversion Tracking".
   

4. Paste the previously copied text in the input field under "Conversion Tracking Code"
   

5. Click Save. You might get a warning saying that the embed code is missing the order's total amount. Don't worry about that. Click OK.

Embedding a PDP Widget on your Product Page

Assuming that all of your products are in sync with Pixlee, you can embed a PDP Widget on your product page by doing the following.

1. Go to http://pixlee.com, log in, and navigate to the Publish tab.

(Alternatively, point your browser to https://app.pixlee.com/app#publish while logged in).

2. Click the "Install Product Displays" and it should present you with a lightbox that looks like following.

3. Customize the widget as you wish. At the end, press the "Generate Embed Code" button and you'll be presented with an embed code. Note - We recommend that you leave the "Load Priority" setting to "Low priority" when customizing.

We'll need to make a small modification to this code to adapt it to the BigCommerce environment.

Get rid of the 'skuId' property that is being passed to the Pixlee.addProductWidget function and replace it with a property called 'ecomm_platform', value must be equal to 'bigcommerce'. In other words, replace

skuId:"<= ENTER YOUR SKU ID CODE >"

with

'ecomm_platform': 'bigcommerce'

The resulting snippet should look like

<div id="pixlee_container"></div><script type="text/javascript">window.PixleeAsyncInit = function() {Pixlee.init({apiKey:"<YOUR API KEY>"});Pixlee.addProductWidget({ecomm_platform:"bigcommerce",widgetId:<YOUR WIDGET_ID>,accountId:<YOUR ACCOUNT ID>});};</script><script src="//assets.pxlecdn.com/assets/pixlee_widget_1_0_0.js"></script>

Copy this snippet, you'll need to paste it in your product page template later.

4. Log in to your BigCommerce store admin panel and click on Storefront on the left navigation panel. Click on My Themes in the submenu.

5. On the right panel, under the Current Theme section. Click on the Advanced drop down menu and then select Edit Theme Files option.

6. Theme editor should open in a new page. On the left navigation panel, navigate to templates and then pages. Under pages select product.html.

7. This template is the HTML template of your product page. Paste in the snippet that you constructed in Step 3 where you'd like to position the widget in your page.

8. After pasting the snippet, click Save & apply file. That's it! The PDP Widget should now appear on your product page.

---

Embedding a Category Widget on your Category Page

Assuming that all of your products are in sync with Pixlee, you can also embed a Category Widget on your category page by doing the following.

1. Go to http://pixlee.com, log in, and navigate to the Publish tab.

(Alternatively, point your browser to https://app.pixlee.com/app#publish while logged in).

2. Click the "Install Product Displays" and it should present you with a lightbox that looks like following.

3. Customize the widget as you wish. At the end, press the "Generate Embed Code" button and you'll be presented with an embed code. Note - We recommend that you leave the "Load Priority" setting to "Low priority" when customizing.

We'll need to make a small modification to this code to adapt it to the BigCommerce environment.

Replace the name of the function from Pixlee.addProductWidget to Pixlee.addCategoryWidget

Get rid of the 'skuId' property that is being passed to the Pixlee.addProductWidget function and replace it with a property called 'ecomm_platform', value must be equal to 'bigcommerce'. In other words, replace

skuId:"<= ENTER YOUR SKU ID CODE >"

with

'ecomm_platform': 'bigcommerce'

The resulting snippet should look like

<div id="pixlee_container"></div><script type="text/javascript">window.PixleeAsyncInit = function() {Pixlee.init({apiKey:"<YOUR API KEY>"});Pixlee.addCategoryWidget({ecomm_platform:"bigcommerce",widgetId:<YOUR WIDGET_ID>,accountId:<YOUR ACCOUNT ID>});};</script><script src="//assets.pxlecdn.com/assets/pixlee_widget_1_0_0.js"></script>

Copy this snippet, you'll need to paste it in your product page template later.

4. Log in to your BigCommerce store admin panel and click on Storefront on the left navigation panel. Click on My Themes in the submenu.

5. On the right panel, under the Current Theme section. Click on the Advanced drop down menu and then select Edit Theme Files option.

6. Theme editor should open in a new page. On the left navigation panel, navigate to templates and then pages. Under pages select category.html.

7. This template is the HTML template of your category page. Paste in the snippet that you constructed in Step 3 where you'd like to position the the widget in your page.

8. After pasting the snippet, click Save & apply file. Thats it! The Category Widget should now appear on your product page.