A shopper reads your guide to choosing flooring. They're convinced. They want a price for their room. Where do they get one?
On most stores, they have to leave the page, find the product, and start again. With Appify Custom Product Options, the calculator can sit right there in the guide. The same goes for your homepage, a landing page, a collection page, or any custom page.
Set the calculator's placement to Other pages, add the Appify Calculator block to the page, and paste in the Calculator ID. Pick an Associated product and shoppers can add to cart without ever opening a product page.
Why put a calculator beyond the product page?
A collection page or a blog post with no price sends shoppers off to find one, and some never do. Nobody emails to say they gave up. They just leave.
A calculator on the page answers the question where it's asked. The shopper types their size, sees their price, and can add to cart on the spot.
Which pages can show a calculator?
Any page your theme can add a block to:
- Homepage. A quick price check for your best-selling custom product, front and center.
- Landing pages. Send ad traffic straight to a page that sells, with the calculator built in.
- Collection pages. Let shoppers price a product while they browse the range.
- Blog posts. Add it to your article template, or to an alternate template for one buying guide, and turn that guide into a place to buy.
- Custom pages. A quote page, a trade page, or anything else you build.
It works both ways: one Calculator ID can serve several pages, and one page can carry several calculators, each selling a different product.
Sell from the page, or give a price estimate
A calculator away from the product page sells exactly the way one on it does. Add the Appify Calculator block, paste the Calculator ID, pick an Associated product, and put your theme's normal buy button underneath it. The calculator hands the configured price and every choice the shopper made to that button, so add to cart works as usual, from a landing page, a collection page or a blog post.
Leaving the Associated product empty is the other job, not a lesser one. The same calculator then prices without selling, which is what you want when the order needs a conversation first.
| Setup | What the shopper does | Good for |
|---|---|---|
| Calculator ID, an Associated product, and your buy button below the block | Configures, sees the real price, adds that product to cart | Landing pages that sell, kits, buying guides, collection and blog pages |
| Calculator ID only, no Associated product | Sees a price, then contacts you to order | Quote pages, homepage estimators, trade inquiries |
Selling a kit from a landing page? Set the kit as the Associated product. Visitors configure it and add it to cart right there.
Several products on one page
A page is not limited to one calculator. Add the block as many times as you need, each with its own Calculator ID and its own Associated product, and a single page can sell several configurable products side by side.
That turns a page into a small storefront of its own. A buying guide can price three products in a row, each adding its own item to the cart. A trade page can carry the full range, configured and bought without the shopper ever opening a product page.
How to put a calculator on any Shopify page
- In the calculator editor, open Placement & Styling. Under Placement, choose Other pages (homepage, landing, custom page).
- Copy the Calculator ID.
- In the Shopify Theme Customizer, open App embeds and make sure Appify CPO is turned on. You only do this once.
- Open the page where the calculator should appear.
- Add the Appify Calculator block and paste the Calculator ID into it.
- To let shoppers buy from the page, pick an Associated product in the same block.
- Save in the Theme Customizer, then publish the calculator in the app.
The other pages calculator setup is the same for every page type. Only the page you open in step 4 changes.
One calculator, every page. The price on your blog post, your landing page and your product page comes from the same calculator, so it's the same price everywhere.
Want it on the product page too?
You don't need a second calculator. Under Also show on a product page, pick the product whose template has the Appify Calculator block.
Now the landing page and the product page share one calculator. Change a rate once and both pages pick it up when you publish.
Using GemPages, PageFly or another page builder?
Page builders like GemPages and PageFly support a Liquid element even when they don't support Shopify app blocks. For those, the app dashboard has copy-paste Liquid snippets under Get Started.
Use the Other pages snippet. Set your Calculator ID or a product handle at the top of the code, then paste it into a Liquid element. The product handle is what lets that page add the product to cart.
The full pricing engine comes along
A calculator on a landing page is the same calculator as the one on your product page. Nothing is cut down for the trip.
That means your formula pricing, pricing tables, quantity discounts, fees and minimum price all work wherever the calculator appears.
A flooring guide can price a room in cartons. A sign page can price by size and quantity. A quote page can price a job from its measurements.
For a worked example, see how to sell custom flooring on Shopify. Every calculation there can live on a blog post as easily as on a product page.
Let AI build it and style it for the page
You don't have to build the calculator field by field. Chat with AI builds it from a plain description or your price sheet: the options, the formulas, the rules and the look.
A landing page often has its own design. Describe the look you want, like "match my store's earthy green with soft shadows," and the AI Style Assistant styles the calculator to fit.
If a price ever looks wrong, tell Chat with AI the number you expected. It opens that formula's Troubleshoot tab with those choices loaded, ready to fix.
FAQ
Can I add a product calculator to a Shopify landing page?
Yes. Set the calculator's placement to Other pages, add the Appify Calculator block to the landing page, and paste the Calculator ID.
Can customers add to cart from a calculator that isn't on a product page?
Yes, the same way they would on one. Pick an Associated product in the block and put your theme's buy button below it. The configured price and the shopper's choices go to the cart with the product.
Can I put more than one calculator on the same page?
Yes. Add the block once per product, each with its own Calculator ID and Associated product, and the page can sell all of them.
Can I put a calculator in a Shopify blog post?
Yes. Blog pages are one of the page types the Other pages placement is built for.
Do I need a separate calculator for each page?
No. The same Calculator ID works on as many pages as you like, and on a product page too.
Can I show a price estimate without selling online?
Yes. Leave the Associated product empty. Visitors see a price estimate and contact you to order.
Does it work with page builders?
Yes. Page builders with a Liquid element can use the copy-paste snippets from the app dashboard.
Put your price on every page shoppers read.
Whatever you sell, however you price it · The last options app you'll shop for