# Integrate into Shopify Themes built with Liquid

#### [1. Enable Purple Dot in your theme](#id-1.-enable-purple-dot-in-your-theme)

Having completed [Install our app](/docs/shopify-stores/install-our-app.md)

1. Navigate to a theme where you wish to test Purple Dot
2. Click "Edit theme", then "App embeds" on the sidebar of the theme code editor
3. Search for "Purple Dot"
4. Provide the "Purple Dot API Key" and "Purple Dot Shared Secret" values that you can find at the bottom of the Integrations page in our [Merchant Portal](https://www.purpledotprice.com/merchant-portal)
5. Enable the embed and save the theme

#### [2. Add the Shopper Portal](#id-6.-add-the-shopper-portal)

The shopper portal allows your customers to see their pre-order history and cancel pre-orders before they are fulfilled. 

We recommend hosting the shopper portal iframe on a new page - e.g. `/pages/manage-pre-orders` - that is linked from your support pages, similar to how a returns portal would be.

The title of the page should be **Manage Pre-orders.**

The following snippet should be placed on a Shopify page by editing the page's HTML:

```
<purple-dot-self-service />
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.getpurpledot.com/docs/shopify-stores/integrate-purple-dot-with-your-storefront/integrate-into-shopify-themes-built-with-liquid.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.