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

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:

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.

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.

Updated on: 26/07/2026