Adding Theme Blocks

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 calculator, price summary, and quantity tiers table appear on your store's pages. You must add the appropriate blocks for your calculator to be visible to customers. Open the Theme Customizer from Shopify Admin → Online Store → Themes → Customize.

Steps

  1. Open the Shopify Theme Customizer.
  2. Go to App Embeds in the left sidebar and confirm the CalculatorAI app embed is enabled. This is required for all blocks to function.
  3. Navigate to the page template where you want the calculator (e.g., the product page template).
  4. Click Add block (or Add section) and look for the Calculator AI blocks.
  5. Choose the block you need — CalcAI Calculator (the main calculator), CalcAI Price Summary (a separate price display widget), or CalcAI Quantity Tiers (a quantity discount table). See the Details section below for what each block does.
  6. Position the block where you want it to appear by dragging it in the sidebar.
  7. Click Save.

Details

Block / Embed Description
CalculatorAI (App Embed) Activates Calculator AI on your storefront. Enable once under App Embeds. Required for all blocks to function.
CalcAI Calculator Main calculator on product pages (shows the linked calculator) or standalone calculator on non-product pages (requires a Standalone Calculator ID).
CalcAI Price Summary Separate price summary widget you can place independently from the calculator block.
CalcAI Quantity Tiers Volume discount breakdown table showing quantity tiers.

Examples

  • Product page setup — You add the CalcAI Calculator block below the product description on your product page template. The calculator options appear inline, and customers fill them in before clicking Add to Cart.
  • Landing page quote tool — You add the CalcAI Calculator block to a custom landing page template and enter your standalone calculator ID. Visitors see the calculator without needing to be on a product page.

    • Related Articles

    • 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 ...

    • 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 ...

    • Add to Cart Button Settings

      Overview Calculator AI works with your theme's Add to Cart button to include the calculated price and customer selections when an item is added to the cart. In most themes, Calculator AI detects the button automatically. If auto-detection doesn't ...

    • 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, ...