GuidesAPI Reference

Shopify

Documentation for setting up your Shopify store to work with Pixlee

Suggest Edits

📘

Browser Compatibility Notice

Firefox currently has compatibility issues with the installation of the plugin. For the purpose of the below instructions, we recommend Chrome or Safari instead. Also make sure your browser settings allow cross site scripting and third party cookies in order to access the app (this situation usually only occurs for Safari).

Prerequisites for Safari

  1. Make sure that cross site tracking is enabled:
  • Open Safari preferences.
  • Navigate to the Privacy tab.
  • Make sure “Prevent cross-site tracking” is not selected.
800
  1. Make sure to disable cross origin restriction:
  • First make sure the develop option appears on your menu bar.
    • Open Safari Preferences.
    • Go to the Advanced tab and select “Show Develop menu in menu bar”.
  • Go to the Develop tab in your menu bar and select “Disable Cross-Origin Restrictions”.
800

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:

774
  1. Copy the value of Shopify Token.
  1. 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.

  1. Log into your shopify admin panel for your shopify store. Search for the Pixlee UGC shopify app and install it.
640
  1. Click Install app.
1019
  1. 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 Your Shopify Store URL field you need to type in the full URL of your shopify site. You will have a *.myshopify.com URL which you used previously, but we prefer the true url, generally your-site.com, instead of the myshopify.com URL.

747
  1. 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.
1356
  1. Check marks next to Products in Sync, Add to Cart analytics, Conversion analytics and Website Engagement Analytics should turn green within 24 hours of full integration (including widgets). In case, they don't or in the future if they become red for any reason, please get in touch with up at [email protected].

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

  1. Click the "Install Product Displays", and it should present you with a lightbox that looks like following.
999
  1. 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.
2012

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

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

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

1217
  1. In the editor that appears, scroll down on the inner scroll bar. Click on "product.liquid".
1340

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.

  1. Thats it! The PDP Widget should now appear on your product page.
2220

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

  1. Click the "Install Product Displays", and it should present you with a lightbox that looks like following.
999
  1. 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.
2012

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.pxlecdn.com/assets/pixlee_widget_1_0_0.js"></script>

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

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

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

1217
  1. 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.

1379
  1. Thats it! The CDP Widget should now appear on your category page.

Using the Shopify Extension for Multiple Shopify Stores

In order to use the shopify app for multiple different shopify stores, you will need to delete the shopify.pixlee.com cookies before installing it on a second store.

  1. Install the Pixlee extension on your first store

  2. Open your browser settings and delete the shopify.pixlee.com cookie

1440

  1. Install the Pixlee extension on your second store

  2. Repeat these steps for each new store.

Updated 8 months ago