Shopify

📘

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.

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

Install Emplifi's Pixlee TurnTo Social UGC app to your Shopify Store

In order to add order to add UGC content and analytics to your Shopify store, you will need to install the Pixlee TurnTo Social UGC Application in your Shopify store.

1. Log into the Shopify admin panel for your Shopify store
2. Search for the Pixlee TurnTo Social UGC Shopify app
3. Click install in the app listing and then install the app in your store admin

4. Click Install app in your store admin

Configuring your Pixlee TurnTo Social UGC app

Once the app is installed, you will need to enter your credentials in the app configurations in order to connect to your Pixlee account.

1. Open the Pixlee TurnTo Social UGC app in your Shopify store which should open to the app configurations page

   

2. Enter your *Base websites URL** in the format https://yoursite.com

3. Enter your Pixlee API Shopify Token. See Get your API Keys for help accessing your token

4. Click Save

After successfully saving your URL and Shopify Token, you will be able to access your app's Dashboard page. The app will automatically begin exporting your store's product data to Pixlee. Once this process is complete, you will see a green checkmark next to Products in sync in your Dashboard's Setup section. The rest of the checkmarks will appear within 24 hours of fully implementing widgets and analytics in your store. In case they don't or in the future if they become red for any reason, contact support at [email protected].

Enable App Embed

In order to add the javascript required for UGC widgets and analytics, you must enable the App Embed in your store's theme.

1. In your Shopify store admin, open Sales channels > Online Store in the left navigation panel and select Themes

2. In the theme editor, click the App Embed button in the far left nav panel

3. Switch on the toggle for Emplifi Analytics/Widget to enable the app embed

   

Setup Widgets in Pixlee

Once all of your products have been exported to Pixlee, you will be able to set up widgets in your Pixlee account to add to your site.

1. Log in to http://pixlee.com
2. Navigate to the Publish Center in the top navigation bar

3. Customize the widget as desired and save the widget.

Note: We recommend that you leave the "Load Priority" setting to "Low priority" when customizing.

Embedding a PDP and CDP Widgets on your site

Steps for Shopify's Theme 2.0 themes

1. In order to enable widgets, you must Enable App Embed

2. In your Shopify store admin, open Sales channels > Online Store in the left navigation panel and select Themes

3. On the Themes page, click the Customize button for the theme

   

4. In the theme editor, open the page selector dropdown in the center of the top navigation bar and select the page you want to add the widget to

   1. For the PDP widget, select Products > Default Product

      

   2. For the CDP widget. select Collections > Default Collection

5. In the Template section of the editor, click Add Block in section you want the widget to or click Add Section to create a new section with the widget block

   

Steps for vintage themes

After you Setup Widgets in Pixlee, press the "Generate Embed Code" button and you will be presented with an embed code. This script needs to be customized to work on Shopify product pages.

PDP Widget for Product Page

Copy the embed code from above and replace the skuId:"<= ENTER YOUR SKU ID CODE >" property with ecomm_platform:"shopify" in the Pixlee.addProductWidget() function. The resulting code should look like

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

CDP Widget for Collection Page

Copy the embed code from above. Replace addProductWidget with addCategoryWidget, remove the skuId and accountId and replace them with nativeCategoryId:{{ collection.id }}, and ecomm_platform:"shopify". The resulting code should look like

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

For Both Widgets

1. Log in to your Shopify store

2. Open Online Store on the left navigation panel and click Themes

3. In Themes, click the ... button next to Customize and select Edit Code from the dropdown.

   

4. In the editor, scroll down to the appropriate liquid file for where you want to add the widget. Paste the appropriate code snippet created above into the page where you want the widget to show.

   1. For PDP Widget, edit product.liquid

      

   2. For CPD Widget, edit collection.liquid

      

Adding Comments Widgets

Checkout comment capture is an add-on feature that requires additional setup. Contact your customer success manager or support to have the feature enabled.

Adding Comment Capture to Checkout

Once enabled you will need to add code to your checkout Order status page. In your Shopify store admin, go to Settings and select Checkout in the menu. Scroll down to the Order status page section and enter the following code in Additional scripts.Update the locale property if the store locale is not "en_US" which is the default. If your account has multiple regions, contact your customer success manager or support to obtain your region IDs. Uncomment the regions property and add the region IDs between the [].

{% if first_time_accessed %}
<script>
  var orderData = {
    // locale: "en_US",
    // regions: ["####", "####]],
    orderId: "{{ order.id }}",
    email: "{{ order.customer.email }}",
    postalCode: "{{ order.shipping_address.zip }}",
    firstName: "{{ order.customer.first_name }}",
    lastName: "{{ order.customer.last_name }}",
    items: [
      {% for item in order.line_items %}
        {
          title: "{{ item.title }}",
          url: "https://{{ shop.domain }}{{ item.url }}",
          itemImageUrl: "{{ item | img_url: '100x100' }}",
          price: "{{ item.original_price | divided_by: 100.0 }}",
          sku: "{{ item.sku }}",
          variant_id: "{{ item.variant_id }}",
          product_id: "{{ item.product_id }}"
        },
      {% endfor %}
    ]
  }
</script>
<script src="https://shopify.pixlee.com/api/comments/capture?shopify_domain={{ shop.domain }}" async></script>
{% endif %}

Adding Comments Display to Theme 2.0 PDP

Comments captured during checkout can be displayed on the PDP using the Comment Display widget. The app provides a block that can be easily added to the PDP page.

1. Customize the theme

   1. In your Shopify store admin, open Sales channels > Online Store in the left navigation panel and select Themes

   2. On the Themes page, click the Customize button for the theme

      

2. Edit the Products page

   1. In the theme editor, open the page selector dropdown in the center of the top navigation bar and select Products > Default Product

      

3. Add Emplifi Comments Display app block to desired location

   1. In the Template section of the editor, click Add Block in section you want the widget to or click Add Section to create a new section with the widget block. Select the Apps tab and choose the Emplifi Comments Display app block to add it to the page.

      

4. Edit the theme block settings

   1. Click on the Emplifi Comments Display block to display the default settings
   2. If necessary, update the Widget Locale and Display Locales. Display Locales should be separated by commas ex: en_CA, fr_CA.
   3. onFinish is a javascript function that will be called after the widget loads.