Theme App Extension

Theme App Extension

For step-by-step instructions on adding blocks to your theme, see Adding Theme Blocks.

Overview

The Calculator AI theme app extension is what connects your calculators to your storefront. It provides an app embed and a set of theme blocks that you add through the Shopify Theme Customizer. The app embed must be enabled once for the blocks to function, and then you add individual blocks wherever you want calculators, price summaries, or quantity tier tables to appear.

How It Works

  1. Open Shopify Admin → Online Store → Themes → Customize to enter the Theme Customizer.
  2. Enable the CalculatorAI app embed in the App Embeds section of the left sidebar. This is required once — it activates Calculator AI across your storefront.
  3. Navigate to the page template where you want a calculator (e.g., a product page template).
  4. Click Add block and choose from the Calculator AI blocks listed below.
  5. Position the block by dragging it in the sidebar, then click Save.

The app embed only needs to be enabled once. After that, you add or remove individual blocks as needed.

Key Concepts

Block / Embed What it does Notes
CalculatorAI (App Embed) Activates Calculator AI on your storefront Enable once in App Embeds. Required for all blocks to function.
CalcAI Calculator Displays the calculator on a page On product pages, shows the calculator assigned to that product. On other page types, enter a standalone calculator ID.
CalcAI Price Summary Shows the price summary separately from the calculator Place it in a sidebar or another section for visibility.
CalcAI Quantity Tiers Shows a table of quantity discount tiers Displays the discount tiers configured in the calculator.

Examples

  • Standard product page — You enable the CalculatorAI app embed, then add the CalcAI Calculator block to your product page template. Every product with an assigned calculator displays it automatically.
  • Custom landing page — You add the CalcAI Calculator block to a custom page template and enter the standalone calculator ID. Visitors see the calculator without it being tied to a specific product.

    • Related Articles

    • Adding Theme Blocks

      For an overview of all Calculator AI theme extension components, see Theme App Extension. Overview Calculator AI provides a set of theme blocks that you add to your Shopify theme through the Theme Customizer. These blocks control where and how the ...

    • Installing Calculator AI on Your Theme

      Overview Before your calculators can appear on your storefront, you need to enable Calculator AI in your Shopify theme. This is a one-time setup that takes a couple of minutes. After completing these steps, your theme will be ready to display ...

    • Storefront JavaScript API

      Overview Calculator AI exposes a browser-only integration surface on the storefront: your theme JavaScript, or another Shopify app’s script on the same page, can listen for calculator updates and set option values programmatically. There is no secret ...

    • Standalone Calculator

      Overview A standalone calculator is not tied to any Shopify product. Instead of appearing on product pages, it lives on any page you choose — a landing page, a custom page, or your homepage. Standalone calculators are ideal for quote builders, ...

    • Checkout Pricing

      Overview When a customer configures a product using a Calculator AI calculator and adds it to their cart, the calculated price is applied automatically at checkout. No manual setup or discount codes are needed — the customer is charged the amount ...