Installing the Pixlee Shopify App

Get your Pixlee Shopify API key

First, we need the Pixlee Shopify Token. This key is generated when you create a Pixlee account, and is unique to your account.

1) Go to http://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:

Products


2) Copy the value of Shopify Token.

2) When installing Pixlee for Shopify, enter this license key:

In this example, the key is d509fe452538712dd12ae09d9cb7ab25.


Install the Pixlee App to your Shopify Store

Now that you have your Shopify Token, we have all we need to install the Pixlee Application to your Shopify store.

3) Go to http://shopify.pixlee.com and type in the full URL of your shopify site.

In this example, it’s https://pixlee-demo.myshopify.com.

http://shopify.pixlee.com


4) Click Install app.

Install Pixlee for Shopify


5) Log in to the Pixlee app with your credentials

In the Pixlee Shopify Key field paste the Pixlee Shopify Token you got from http://pixlee.com in step 2

In this example, the key is d509fe452538712dd12ae09d9cb7ab25.

In the FULL Shopify URL field paste the same URL as you did in step 3.

In this example, it’s https://pixlee-demo.shopify.com.

Pixlee Application Login


6) Once the Pixlee application is finished installing, it should automatically redirect you and you should see a similar page. Upon installation, Pixlee will automatically begin importing all of our products into the platform.

Pixlee Application Dashboard

7) Check marks next to Products in Sync, Add to Cart analytics, Conversion analytics and Website Engagement Analytics should turn green in the next few minutes automatically. In case, they don’t or in the future if they become red for any reason, please get in touch with up at support@pixleeteam.com.



Embedding a PDP Widget on your Product Page

Assuming that you have now exported all of your products to 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 of the Albums section.

(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.

Products


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.

Pixlee PDP Widget

We’ll need to make a small modification to this code to adapt it to the Shopify 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 ‘shopify’. In other words, replace

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

with

'ecomm_platform': 'shopify'

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:"shopify",widgetId:<YOUR WIDGET_ID>,accountId:<YOUR ACCOUNT ID>});};</script><script src="//assets.pixlee.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 Shopify store and navigate to Online Store on the left navigation panel. Under Online Store click Themes.

5) In the resulting page, click the Actions dropdown button under the Current Theme section. And then click Edit Code from the dropdown.

Edit Code


6) In the editor that appears, scroll down on the inner scroll bar. Click on “product.liquid”.

Edit HTML

This is the template for your product page. Depending on where you want the PDP Widget to appear, paste the snippet that we copied earlier.

7) Thats it! The PDP Widget should now appear on your product page.

Product Page



Embedding a CDP Widget on your Category Pages

The first three steps are exactly the same as embedding a PDP widget as they only involve getting a widgetId from the Control Panel.

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.

Products


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.

Pixlee PDP Widget

Copy the value of widgetId from the resulting snippet and replace the part with it in the following snippet

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

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

4) Log in to your Shopify store and navigate to Online Store on the left navigation panel. Under Online Store click Themes.

5) In the resulting page, click the Actions dropdown button under the Current Theme section. And then click Edit Code from the dropdown.

Edit Code


6) In the editor that appears, scroll down on the inner scroll bar. Click on “collection.liquid”.

This is the template for your category/collection page. Depending on where you want the CDP Widget to appear, paste the snippet that we copied earlier. For example, if you want the widget to appear near the top of the page, paste it like following.

Edit HTML

7) Thats it! The CDP Widget should now appear on your category page.

Collection Page