> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pureclarity.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Shopify Vintage Theme Setup

> Complete guide for setting up PureClarity personalization on Shopify vintage themes with manual configuration steps

This guide walks you through setting up PureClarity on Shopify vintage themes using our personalization suite plan. **We recommend [booking in a call](https://calendly.com/john-barton-4zg/30min) if you'd like help getting started.**

<Info>
  This guide continues from the [Shopify Installation](/integrations/shopify/installation) article and focuses specifically on vintage theme implementation.
</Info>

## Overview of PureClarity Content

PureClarity shows personalized recommenders and content on your shop to convert more customers and increase average basket value.

**Available content types include:**

* Personalized product recommendations
* Dynamic banners and promotional content
* Pop-ups and overlays
* Email personalization

## Setup Process

There are 4 key steps to get PureClarity working on vintage themes:

1. **Adding required files** to your theme
2. **Enabling the PureClarity Shopify App Embed** block
3. **Adding zones** to your theme templates
4. **Setting up campaigns** for your zones

## Adding Required Files

<Warning>
  Due to Shopify changes, apps can no longer automatically modify vintage themes. You must make these changes manually or request collaborator access for us to help.
</Warning>

You need to add two essential files to your vintage theme:

### File 1: Zone Snippet (snippets/pureclarity-zone.liquid)

1. Go to **Online Store > Themes** in your Shopify admin
2. Click the **3 dots** next to the Customize button → **Edit Code**
3. In the **Snippets** folder, click **Add a new snippet**
4. Name it `pureclarity-zone` and click **Done**
5. Copy and paste this code:

```liquid theme={null}
{% 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 %}
```

6. Click **Save** in the top right

### File 2: GUI Zone Section (sections/pureclarity-zone-gui.liquid)

1. In the **Sections** folder, click **Add a new section**
2. Name it `pureclarity-zone-gui` and click **Done**
3. Replace all existing content with this code:

```liquid theme={null}
{% 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 %}
```

4. Click **Save**

## Enabling PureClarity in Your Theme

<Note>
  PureClarity must have its theme app embed block enabled for the platform to function properly.
</Note>

1. In PureClarity, click **Shopify Theme Manager**
2. Wait for your themes to load
3. Find your vintage theme and click **Enable PureClarity**
4. You'll be redirected to Shopify theme settings
5. **Enable the PureClarity App Embed block** - this activates PureClarity for your theme

## Setting Up Zones in Templates

PureClarity zones are areas where personalized content appears. Add zones to these recommended template files:

**Recommended template files:**

* `templates/product.liquid`
* `templates/collection.liquid`
* `templates/list-collections.liquid`
* `templates/cart.liquid`
* `templates/search.liquid`

### Making Theme Changes Safely

<Tip>
  Always duplicate your theme before making changes. This allows you to test PureClarity safely before going live.
</Tip>

**To duplicate your theme:**

1. Go to **Online Store > Themes**
2. Find your current theme
3. Click **Actions > Duplicate**
4. Make all changes on the duplicated theme first

### Adding Zone Snippets

To add zones to any template file, insert this snippet where you want PureClarity content to appear:

```liquid theme={null}
{% include 'pureclarity-zone' with id:'HP-01' %}
```

**Pre-configured zone references:**

| Page Type        | Zone References            |
| ---------------- | -------------------------- |
| **Homepage**     | HP-01, HP-02, HP-03, HP-04 |
| **Product Page** | PP-01, PP-02               |
| **Basket Page**  | BP-01, BP-02               |

<Info>
  PureClarity can display up to 8 zones per page, but 4 zones typically provide optimal performance and user experience.
</Info>

### Publishing Your Changes

Once you're satisfied with the integration:

1. Go to **Online Store > Themes**
2. On your duplicated theme, click **Actions > Publish**

## Adding Homepage Zones via Page Builder

The homepage uses Shopify's Page Builder, making zone addition visual and straightforward:

1. Click **Themes** in Shopify Admin
2. Click **Customize** (preferably on your theme copy)
3. Click **Add Section** on the Homepage
4. Find and select **PureClarity Zone**
5. Enter the zone ID (use **HP-01** for the first zone)
6. Click **Save**

The zone should immediately display PureClarity content if campaigns are configured.

## Setting Up Campaigns

PureClarity provides automated wizards for initial setup:

1. In PureClarity, click **Campaigns**
2. Follow the on-screen setup instructions
3. **Start with "Embedded Recommender" campaigns** for automatic setup

<Tip>
  For test stores with limited data, set the minimum number of items to show to 1, or use Custom Recommenders with Manual Product Recommender sources.
</Tip>

## Advanced Features

### Brand Recommendations

PureClarity automatically detects and promotes Shopify Vendors as brands:

* **Requirements**: Collections with single rule "Product Vendor is equal to \[Brand Name]"
* **Usage**: Collection name, description, and image represent the brand
* **Control**: Disable brand recommenders in PureClarity admin under Configuration > Recommenders

### Analytics Integration

Access real-time analytics through:

* **Dashboard summary**: Updated in real-time
* **Detailed analytics**: Available in the [Analytics section](/features/analytics/overview)

### Template Customization

Customize recommender appearance:

* Use built-in **Recommender Templates**
* Edit templates in PureClarity admin
* Contact support for custom styling assistance

## Billing and Management

* **Billing cycle**: Every 30 days through Shopify
* **Plan management**: Access via "Billing Management" on Dashboard
* **Usage monitoring**: Email notifications for plan limit approaches
* **Pricing details**: Available on [PureClarity pricing page](https://www.pureclarity.com/us/pricing/)

## Uninstalling PureClarity

<Warning>
  For vintage themes, manual cleanup is required before uninstalling to prevent site errors.
</Warning>

**Pre-uninstall cleanup:**

1. Remove all PureClarity snippets from template files
2. Look for files with small purple circles (indicates edits)
3. Remove manual zones from **Online Store > Themes > Actions > Edit Code**
4. Save each file after editing

**Final uninstall:**

1. Go to **Apps** in Shopify Admin
2. Find PureClarity in "Installed apps"
3. Click the **uninstall button** (far right)

<Info>
  PureClarity is fully GDPR compliant. All store and user data is permanently deleted upon uninstall.
</Info>

## Next Steps

* **Test thoroughly**: Visit your storefront and browse to see personalized recommendations
* **Book consultation**: [Schedule a call](https://calendly.com/john-barton-4zg/30min) for guidance
* **Explore features**: Review additional PureClarity capabilities in our documentation

The more customers interact with your site, the better PureClarity's recommendations become through machine learning optimization.