Linking to Products

Linking to Products

Overview

Linking a calculator to products controls which product pages display the calculator on your storefront. When linked, the calculator appears on the selected product pages through the CalcAI Calculator block in your theme and supports full Add to Cart functionality. You configure product linking in Calculator Editor → Placement & Styling under the Placement section.

Steps

  1. Open your calculator in the editor and go to the Placement & Styling tab.
  2. In the Placement section, select Linked to a product from the placement type dropdown.
  3. Click the Browse button to open the product picker.
  4. Select one or more products you want the calculator to appear on, then confirm your selection. Alternatively, choose All products to display the calculator on every product page.
  5. Save or Publish the calculator. Calculator AI syncs the assignment to the selected products.
  6. A progress indicator in the editor header shows Syncing products… while the update is in progress. A confirmation message appears briefly when the sync completes.

If you later need to change which products are assigned, return to this section and update your selections.

Details

Setting Description
Placement type Choose Linked to a product to associate the calculator with product pages.
Browse button Opens the Shopify product picker to select specific products.
All products Assigns the calculator to every product in your store. New products added later are included automatically.
Product list Shows the currently selected products. Click the × to remove one.
  • Automatic sync — Calculator AI syncs product assignments whenever you save or publish. No manual sync step is needed.
  • Removing products — Unassign a product and save. The calculator is removed from that product page on the next sync.
  • Large catalogs — Syncing many products may take a moment. The progress indicator in the editor header tracks the status.

Examples

  • Custom print shop — You sell custom posters and canvases. You link your calculator to just the poster and canvas products so customers can pick size, material, and finish — the price updates in real time and they add to cart directly.
  • Store-wide calculator — You run a store where every product has configurable options. You select All products so the same calculator loads on every product page without manual assignment.
  • New calculator launch — You build a calculator for custom engraved jewelry and assign it to 50 products. After publishing, Calculator AI syncs the assignment and the calculator appears on each product page.

    • Related Articles

    • Calculator Editor Overview

      Overview The calculator editor is the main workspace where you build and customize your product calculator. It is divided into three areas: a header bar at the top, a tabbed main panel in the center, and a live preview panel on the right. Together, ...

    • Publishing a Calculator

      Overview Publishing makes your calculator visible to customers on your storefront. Until you publish, any changes you make exist only as a draft that you can preview inside the editor. Each time you publish, a new numbered version is created so you ...

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

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

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