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 Appify CPO 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 — Appify CPO Calculator (the main calculator), Appify CPO Price Summary (a separate price display widget), or Appify CPO 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.

If the block is in the Customizer sidebar but missing on the storefront inside that section, the theme Liquid for the section is not rendering app blocks. See Calculator Block Does Not Show Inside a Section.

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
Appify CPO (App Embed) Activates Appify CPO on your storefront. Enable once under App Embeds. Required for all blocks to function.
Appify Calculator Main calculator on product pages (shows the calculator assigned to that product). On other page types, paste the Calculator ID from Placement & Styling. To add to cart from a non-product page, also pick an Associated product in the block.
Appify Price Summary Separate price summary widget you can place independently from the calculator block.
Appify Quantity Tiers Volume discount breakdown table showing quantity tiers.

Examples

  • Product page setup — You add the Appify CPO 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 that sells a product — You add the Appify Calculator block to a custom landing page, paste the Calculator ID, and pick an Associated product. Visitors configure options and add that product to cart without opening a product page.