Installing Calculator AI on Your Theme

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 calculators on any product page.

Steps

Enable the app embed

  1. From your Shopify admin, go to Online Store → Themes.
  2. Click Customize on your active theme.
  3. In the Theme Customizer, click App embeds (the puzzle-piece icon in the left sidebar).
  4. Find CalculatorAI in the list and toggle it on.
  5. Click Save.

This activates Calculator AI across your storefront. You only need to do this once.

Add a calculator block to your product page

  1. Still in the Theme Customizer, navigate to a product page template.
  2. In the product section, click Add block.
  3. Under the Apps category, select CalcAI Calculator.
  4. Position the block where you want the calculator to appear (typically below the product title or price).
  5. Click Save.

The block is now in place. Once you create a calculator and assign it to a product, it will appear in this block on your storefront.

Examples

  • Single product page — You sell custom picture frames. After enabling the CalculatorAI app embed and adding the CalcAI Calculator block to your product page template, every product with an assigned calculator displays it automatically.
  • Multiple templates — You have different product page templates for different collections. Add the CalcAI Calculator block to each template where you want calculators to appear.

What's Next

Your theme is ready. Now create your first calculator and assign it to a product to see it on your storefront.

    • Related Articles

    • What is Calculator AI?

      Overview This page introduces Calculator AI and explains how it works at a high level. After reading it, you'll understand the core building blocks — calculators, options, pricing formulas, and theme blocks — and be ready to create your first ...

    • Creating Your First Calculator

      Overview This tutorial walks you through creating a calculator from start to finish using the new-calculator wizard. The wizard has four sequential steps, each focused on a different aspect of your calculator. You can skip optional steps or return to ...

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

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

    • AI Style Assistant

      Overview The AI Style Assistant lets you describe the visual style you want in plain English, and it generates the CSS variable values for you. Instead of manually tweaking dozens of variables, you can describe a look — like "dark theme with rounded ...