> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.custompricecalculator.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to Add a Calculator to a Non-Product Page

You can use the **Non-products** feature to display a Custom Price Calculator on pages other than Shopify product pages, such as landing pages, service pages, or custom templates.

Follow the steps below to configure it.
## Step 1: Open the Non-products Section
![](https://storage.crisp.chat/users/helpdesk/website/-/6/7/3/d/673d74301cfde400/image_eplk9.png)

1. Open your calculator in the app.
2. Navigate to the **Non-products** tab.
3. Click **Add Non-products**.

## Step 2: Fill Out the Form
Complete the following fields:
![](https://storage.crisp.chat/users/helpdesk/website/-/6/7/3/d/673d74301cfde400/image_5gl8pn.png)

### Name
Enter a descriptive name to help identify this configuration.
**Example:**
```
Custom Quote Page
```
### Page URL
Enter the full URL of the page where you want the calculator to appear.
**Example:**
```
https://yourstore.com/pages/custom-quote
```
### Element Selector
This tells the app **where to insert the calculator** on the page.
To obtain the correct selector, follow the steps in the next section.




# Step 3: Find the Element Selector
The easiest way to find an element selector is by using your browser's Developer Tools.
![](https://storage.crisp.chat/users/helpdesk/website/-/6/7/3/d/673d74301cfde400/image_1tejd2l.png)

### 1. Open the desired page
Navigate to the page where you want the calculator to appear.
### 2. Open Developer Tools
* **Windows/Linux:** Press **F12** or **Ctrl + Shift + I**
* **Mac:** Press **⌥ Option + ⌘ Command + I**
### 3. Select the target element
Click the **Inspect Element** tool (arrow icon), then click the area on your page where you'd like the calculator to be inserted.
### 4. Copy the selector
In the HTML panel:
1. Right-click the highlighted element.
2. Select **Copy**.
3. Click **Copy selector**.


# Step 4: Paste the Selector
Return to the app and paste the copied selector into the **Element Selector** field.
For example:
```
#MainContent > div.page-width
```
or
```
.main-content
```
Then click **Add** to save the configuration.


# Verify the Calculator
Visit the page you configured and confirm that:
* The calculator is displayed.
* It appears in the correct location.
* All calculator elements function as expected.


## Troubleshooting
### The calculator doesn't appear
* Verify that the **Page URL** exactly matches the page you're visiting.
* Ensure the **Element Selector** is valid and points to an existing element on the page.
* Try copying the selector again if the page structure has changed.
### The calculator appears in the wrong place
Choose a different parent element and copy its selector instead. The calculator will be inserted relative to the element specified by the selector.


## Tip
For the best results, select a **stable container element** (such as a main content wrapper or page section) instead of temporary or dynamically generated elements. This helps ensure the calculator continues to display correctly even if your theme receives updates.