Adding Theme Blocks

Adding Theme Blocks

For an overview of all Appify CPO theme extension components, see Theme App Extension.

Overview

Appify CPO 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 Appify CPO 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.

Page builders (manual Liquid install)

Some page builder apps do not support Shopify app blocks. If yours supports a Liquid or Custom Liquid element, use the copy-paste snippets in the app dashboard (Get Started → Step 2 → Manual install for page builders) instead of adding blocks in the Theme Customizer.

See Manual Liquid Install (Page Builders) for requirements (app embed, one method per page), which snippets to use, and step-by-step instructions.

Details

Block / Embed Description
CalculatorAI (App Embed) Activates Appify CPO 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 Appify CPO 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 ...

    • Installing Appify CPO on Your Theme

      Overview Before your calculators can appear on your storefront, you need to enable Appify CPO 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 Appify CPO 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, Appify CPO detects the button automatically. If auto-detection doesn't work — or ...

    • Manual Liquid Install (Page Builders)

      Overview Some page builder apps (GemPages, PageFly, and similar) support Liquid or Custom Liquid elements but not Shopify app blocks. For those stores, Appify CPO provides copy-paste Liquid snippets in the app dashboard (Get Started → Step 2 → Manual ...

    • Storefront JavaScript API

      Overview Appify CPO 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 ...