This guide continues from the Shopify Installation article and walks you through setting up PureClarity on our personalisation suite plan. We recommend booking in a call if you'd like help getting started.
Showing PureClarity Content
PureClarity shows personalised recommenders and content on your shop. This converts more customers, and increases the average basket value.
There are lots of different content types PureClarity can show, including personalised recommendations, banners, pop ups and unique chat experiences. PureClarity can also personalise your customer emails as well.
There are 4 steps to getting started and showing PureClarity recommenders and content on vintage themes:
Adding 2 files to your theme
Enabling the PureClarity Shopify App Embed block
Adding zones to your theme
Setting up what to show in your zones
Adding required files to your theme
Due to new changes introduced by Shopify, apps are no longer allowed to modify vintage themes. Changes are now required to be made manually by the user.
You can follow the instructions below to make these changes, or if you are unsure, you can send us your collaboration code and we will request access to your theme to make the changes for you. Click here to find out more about Shopify collaborator accounts.
There are 2 files that need adding to your vintage theme:
snippets/pureclarity-zone.liquid
sections/pureclarity-zone-gui.liquid
The first file, pureclarity-zone.liquid, goes in the snippets folder. It lets you add the zones snippet throughout your theme, wherever you wish a zone to appear. To add this file, follow these steps:
Go to the Themes page in your stores Shopify admin
Click the 3 dots button (ellipsis) next to the Customize button to get a drop down menu
Click the Edit Code option, this will load a new screen showing you your theme files
On the left hand side, scroll down until you see the Snippets folder. Open this folder
Click the Add a new snippet button
Enter pureclarity-zone as the name and click the Done button. This will open a new blank page
Copy the code below and paste it into the blank page, then click the Save button in the top right
{% comment %}
/**
* PureClarity Zone snippet for Shopify stores.
*
* To use:
*
* Insert the following inside any .liquid file where you want to show a PureClarity Zone:
* {% include 'pureclarity-zone' with id:'<REFERENCE>' %}
*
* Where <REFERENCE> is the Id of the Zone you created in the PureClarity admin (ie. 'HOME-01' etc)
* For more details on PureClarity, please visit our website: www.pureclarity.com
*
* Copyright: (c) PureClarity. All rights reserved
*/
{% endcomment %}
{% if shop.metafields.pureclarity.isActive == 1 %}
{% capture _pc_sku %}{% if product %}sku:{{product.id}};{% endif %}{% endcapture %}
{% capture _pc_brand %}{% if product %}brand:{{product.vendor}};{% endif %}{% endcapture %}
{% capture _pc_collection %}{% if collection %}categoryid:{{collection.id}};{% endif %}{% endcapture %}
<div data-pureclarity="bmz:{{id}};{{_pc_sku}}{{_pc_brand}}{{_pc_collection}}"></div>
{% endif %}
The second file, pureclarity-zone-gui.liquid, goes in the sections folder of your theme. It lets you add zones to the homepage via the Page Builder. To add this file, follow these steps:
Go to the Themes page in your stores Shopify admin
Click the 3 dots button (ellipsis) next to the Customize button to get a drop down menu
Click the Edit Code option, this will load a new screen showing you your theme files
On the left hand side, scroll down until you see the Sections folder. Open this folder
Click the Add a new section button
Enter pureclarity-zone-gui as the name and click the Done button. This will open a new page with some text on it
Copy the code below and paste it over the existing text, replacing it, then click the Save button in the top right
{% include 'pureclarity-zone' with id: section.settings.zone-reference %}
{% schema %}
{
"name": "PureClarity Zone",
"settings": [
{
"id": "zone-reference",
"type": "text",
"label": "Reference ID",
"default": "Add your reference ID here"
}
],
"presets": [
{
"name": "PureClarity Zone",
"category": "PureClarity"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
Setting up PureClarity in your theme
PureClarity must have it's theme app embed block enabled for PureClarity to work.
Click on "Shopify Theme Manager" within PureClarity. After a few seconds the themes in your store will appear.
In the sample store pictured above, you can see we have some Online Store 2.0 themes, one of which is also the published store. This will also display vintage themes if they are available. To set up PureClarity on this theme, simply click the "Enable PureClarity" button. You will be redirected to the theme settings in Shopify.
Enable the PureClarity App Embed block. This turns PureClarity "on" for this theme.
Setting up zones in your themes
PureClarity zones are the areas on your site where you want to show PureClarity content. Campaigns setup within PureClarity will display their content in them.
PureClarity recommends adding the zone snippet into the following files in a theme:
templates/product.liquid
templates/collection.liquid
templates/list-collections.liquid
templates/cart.liquid
templates/search.liquid
The zone snippets can be added to the bottom of each file, or if you have a good understanding of your theme, you can place them in a more appropriate location in the file. See the Adding and editing zones section below for more.
This is discussed in the section Altering Your Theme below. Note that there is a GUI zone option for the homepage - we discuss this further below.
Altering your liquid theme
If you need to add zones, or move where the zone snippets are we recommend that you make a copy of your current store theme before starting this. This allows you to be confident of how PureClarity will look before you use it on your live site.
To make a copy of your Theme, go to:
Online Store -> Themes
Your current theme will be shown. Click the “Actions” button and click “Duplicate”.
Follow the instructions above to enable the PureClarity app embed on the duplicate theme.
Next, on the duplicated theme (which will be shown below your current theme), click “Actions” and then “Edit code”.
Adding and editing zones
PureClarity zones are used to show personalised recommenders and content to your customers. These can be recommenders (such as “Suggested for You”) – image banners, carousels, or custom HTML. The content is setup in the PureClarity admin.
To include zones on your site – all you need to do is find where in your liquid templates you want to show the zones and add the following snippet:
{% include 'pureclarity-zone' with id:'HP-01' %}
Replace HP-01 with the zone reference you want. PureClarity comes with some merchandising zones setup out of the box for you. These are set to show personalised recommendations. Simply add the pureclarity-zone reference as required, and use the following references:
Homepage: HP-01, HP-02, HP-03, HP-04
Product Page: PP-01, PP-02
Basket Page: BP-01, BP-02
PureClarity can show up to 8 zone’s per page, but 4 is usually enough. There are many other page types you can add zone’s to. Please see our Best Practice Guide on the placement of merchandising zones on your site.
Once you are happy with your changes, and the PureClarity integration – simply make your theme the live theme on your site. To do this:
Go to “Online Store” -> “Themes”
On your copied theme, click on “Actions” and then “Publish”
Setting up campaigns
PureClarity has some automated wizards to help you get started. You can follow these to set up our automated recommendations for your customers.
Simply click on "Campaigns" and follow the on screen instructions to get started!
We recommend you add the "Embedded Recommender" Campaigns to get started.
If you do, PureClarity will create some campaigns for you:
Please note that for test stores PureClarity may not always show recommendations on all pages. If you want to test the recommendations we recommend you:
Set the minimum number of items to show for a campaign to 1. Often there are not many recommendations PureClarity can make in test stores, so setting to 1 gives a greater chance of the recommender showing.
Use a Custom Recommender, and set the source to be Manual Product Recommender. This allows you to choose the products to show.
Adding a zone to the homepage
The homepage of your theme is controlled using the Shopify Page Builder. This means you can edit it and see changes as they are made. This makes adding PureClarity zones to the Homepage quick and simple.
Click on Themes in the Shopify Admin:
Click Customize. Remember - it is safest to make a copy of your theme first, and make changes to the copy.
Click "Add Section" on the Homepage.
Find "PureClarity Zone", click on it, and then "Select"
Enter the ID of the zone. For the homepage, choose "HP-01" as this matches to the ID used in one of the "Embedded Recommender Campaigns" you set up in PureClarity. If you add more zones use "HP-02", "HP-03" etc.
Hit "Save" (top right of the screen), and your new zone should show some PureClarity content!
If you have followed the steps above now would be a great time to visit your store front and click around. You should see PureClarity recommend products, and the more it learns about what you like - the better the recommendations!
Next steps
Now PureClarity is enabled, you can start to use all of our features. If you'd like some guidance or would like to discuss your needs and intentions, we recommend booking in a call. You can also peruse the docs.
Analytics
PureClarity shows a summary of some useful analytics in the dashboard, which are updated in real time. You can find more detailed analytics in the Analytics section.
PureClarity Recommender Templates
Recommenders can be styled to match the design of your site. We provide a number of out of the box Recommender Templates that you can adapt. You can edit the Recommender Templates in the PureClarity admin. More information can be found in our template documentation. Please contact support if you need help styling up the recommendations to match your site.
Brands
PureClarity allows you to promote brands (Shopify Vendors) on your site. PureClarity will show brands in the following area:
Brand Recommenders – PureClarity will show appropriate brand recommenders in the merchandising zone. These include recommenders such as, “Recommended Brands for You” and “Best Selling Brands”.
In order to use these, PureClarity looks for Collections that are setup with a single rule – “Product Vendor is equal to “. Collections like this are interpreted as being “Brands”, and the Name, Description and Image of the collection will be used for the brand. If you don’t want to show brand recommenders, then you can turn them off from the PureClarity admin, under “Configuration” – “Recommenders”.
You might already have collections setup for this. If not then you can create them and PureClarity will automatically start to use them.
Billing
When you install PureClarity from the app store you will be asked to select a plan for your needs. You will then be redirected to Shopify to authorise the future charge, for when the free trial ends. Your free trial will then begin. At the end of the trial you will then start to be charged.
As a Shopify customer you will be billed via your Shopify account every 30 days. Click on "Billing Management" on the Dashboard, or go to "My Account" -> "Billing" to view your billing details.
PureClarity offers a tiered pricing structure. You can find out more about our pricing on our pricing page. If your usage goes over the maximum for your chosen plan you will be prompted via email and in the app to upgrade to a higher plan.
During this time PureClarity will attempt to contact you in order to resolve this issue and answer any questions you might have regarding the payment increase. Eventually, if after a notable amount of time we have failed to make contact or the increase has not been authorised, we may suspend the service until this issue is resolved.
Uninstalling the application
With vintage themes (pre OS 2.0), to avoid any errors occurring on your site after uninstalling PureClarity, the first step is to remove any PureClarity snippets that you have added to any of your pages. Please see the section above, Working With Themes that lists the files you may have added for PureClarity.
You will also need to remove zones that you have manually added. To do this go to the “Online Store” section of the Shopify Admin, click the “Actions” button and select “Edit Code”. Go to any file that contains PureClarity snippets (files that have been edited can be identified by looking for the small purple circle next to the name of the file) and remove the snippet from the file, remembering to save after each edit.
Finally, go to the “Apps” section of your Shopify Admin, find the PureClarity Application inside of the “Installed apps” section and click the uninstall application button to the far right of the application name, as shown in the following image:
PureClarity will be uninstalled, and data associated with your store and your users will be deleted. Please note that PureClarity is fully GDPR compliant.
We'd love if you could let use know why you're uninstalling as this helps us improve our offering so we that can deliver the best possible service.