Shopify theme app extension prijscalculator: zo zet je hem in de theme editor

Je calculator staat in de app. Velden, formule, koppeling naar de variant: klaar. Op de storefront zie je alleen de standaardprijs en Add to cart. Geen breedteveld, geen live totaal. Dat is geen bug in de formule. De Shopify theme app extension prijscalculator zit niet vanzelf op de productpagina. Shopify plaatst app-functies niet in je Liquid; jij zet het block in de theme editor.

Dit artikel laat zien waarom een calculator zonder theme-block onzichtbaar blijft, wat merchants improviseren (snippets, Custom Liquid, thema’s hacken), en hoe je met Options Price Calculator het app block op Default product zet — onder de prijs, boven Add to cart. Daarna: storefront bindings en de selector picker als je thema afwijkt van Dawn.

We schreven eerder over productopties zonder extra Shopify-varianten. Daar ging het om de catalogus. Hier gaat het om het stuk dat de klant écht ziet: het block op de productpagina.

Het Shopify-probleem: een app is nog geen productpagina

Volgens Adding variants mag een product maximaal drie options hebben en maximaal 2048 variants. Meer options of continue maten? Shopify zelf: gebruik een app of thema-code die line item properties ophaalt. Die app lost de limiet op. Ze lost de plaatsing niet op.

Shopify-thema’s werken met templates, secties en blocks. Een prijscalculator is geen native block zoals Quantity of Buy buttons. Hij komt binnen als app block: een theme app extension die je in de editor sleept. Shopify’s handleiding Extend your theme with apps is daar duidelijk over. App blocks voeg je toe, verplaats je en sla je op in de theme editor. Ze werken alleen in secties die app blocks ondersteunen. En: wissel je van gepubliceerd thema, dan zijn die apps niet automatisch actief op het nieuwe thema. Je moet ze opnieuw toevoegen.

Gevolg: merchants installeren de app, bouwen `product_price + (width * height)`, linken de variant — en de storefront blijft leeg. Meestal ontbreekt het block, of de CSS-selectors van het thema matchen prijs en Add to cart niet.

Wat merchants nu proberen

1. Een Liquid-snippet in `product.json` of `main-product.liquid`

Copy-paste uit een forum, `{% render 'calculator' %}` ergens tussen prijs en knop. Bij de volgende theme-update is het weg. Online Store 2.0-thema’s verwachten JSON-templates, geen handmatige includes. Je onderhoudt dan twee systemen: de app én je eigen Liquid.

2. Custom Liquid-sectie met embed-code

Shopify noemt dit als omweg voor apps die code in je thema injecteren. Het voelt “zonder developer”. Tot het thema de prijs in een andere `span` zet, de cart drawer een andere button gebruikt, of je een tweede producttemplate hebt (gordijn vs. stalen profiel) waar de snippet ontbreekt.

3. Alleen de homepage-test of één duplicate product

De calculator staat toevallig op een template die je ooit hebt aangepast. Nieuwe producten gebruiken Default product zonder block. Klanten van de nieuwe collectie zien niets. Je denkt dat de koppeling kapot is; de template is het.

Geen van die routes geeft je: één app block op de producttemplate, sleepbaar, zonder thema-code, plus bindings die je na een theme-switch opnieuw kunt prikken.

Hoe Options Price Calculator dit oplost

Options Price Calculator is Built for Shopify (5.0 uit 26 reviews op de listing). Unlimited product options zonder extra varianten, dynamic pricing met formules, AI-generatie van velden en formules, multilingual support. Starter $9.99/maand: onbeperkte opties, formula builder, metafields, embed unlimited calculators, styling. Premium $14.99/maand: + conditional logic, Font Picker, live preview, real-time price breakdown. Free: 20 uses; op een Shopify Develop-plan altijd gratis. Facturatie in USD.

De listing belooft easy no-code setup. Dat is geen marketingzin voor “installeer en klaar”. De docs splitsen het in twee lagen: het theme app extension-block (zichtbaarheid) en Storefront Theme Bindings (waar de app de prijs en Add to cart van jouw thema vindt).

Het app block op Default product

How to Add the Extension to the Product Page is kort, omdat de stappen in de theme editor zitten — niet in Liquid.

1. Shopify admin → Online Store → Themes → Customize op je gepubliceerde thema.

2. Bovenin: Products → Default product (of de template die je maatwerk-SKU’s gebruiken).

3. In de sectie waar de calculator moet staan: Add block → Apps → Options Price Calculator.

4. Aanbevolen plek: onder de productprijs, boven Add to cart.

5. Save.

6. Open een gekoppeld product op de storefront, kies opties, check of de prijs meeloopt.

Zonder dit block toont de storefront geen calculator, ook al is de formule in de app perfect. De install-checklist zet het block daarom als eerste stap ná het dashboard: extension op de producttemplate, dan calculator bouwen, dan varianten linken, dan selectors controleren.

Heb je meerdere producttemplates — bijvoorbeeld “Default product” voor stoffen en “Product maatwerk metaal” voor profielen — zet het block op elke template die een calculator moet tonen. Shopify hergebruikt het block niet automatisch over templates.

Bindings: de app moet jouw thema herkennen

Dawn, Craft, een custom OS 2.0-thema: de prijs zit zelden in dezelfde CSS-class. Storefront Theme Bindings koppelt de app aan die HTML.

• Product URL / domain: plak een productpagina die jouw hoofdlayout is. De picker laadt die URL.

• Price selectors: waar de prijs staat. Eén selector per regel; de eerste match wint. Meerdere regels = fallbacks.

• Product form selectors: het formulier dat de variant naar de cart stuurt.

• Add to Cart (ATC) button selectors: de knop — standaard submit, thema-knop of payment button.

• Variant selector elements: radio’s, dropdowns, custom components. De app luistert hier om de calculator te wisselen als de variant wisselt.

Optioneel, alleen als je de Customizer (live preview) gebruikt: product image selectors en cart line item image selectors. Die mag je overslaan als je geen live preview over de productfoto hangt.

Schakel Show currency with prices uit als je thema de valuta al formatteert. Enable server-side price validation is de safety-toggle: cart transform en draft-order checkout controleren de calculatorprijs server-side. Uit = `__ooCustomPrice` wordt vertrouwd zoals die binnenkomt.

Selector picker in plaats van CSS gokken

Handmatig `span.price-item.price-item--sale` intypen is foutgevoelig. Using the Selector Picker is de aanbevolen route, vooral bij custom thema’s.

• Pick price on storefront: nieuw venster, klik de prijs, de CSS-selector landt in Price selectors.

• Pick add to cart on storefront: klik Add to cart, selector naar ATC.

• Pick product image on storefront: klik de media; nodig voor live preview.

Je mag selectors daarna nog bewerken, extra fallbacks toevoegen of resetten naar default. Docs-tip: na een theme-wissel alle drie de pickers opnieuw draaien. Shopify zegt hetzelfde over app blocks: nieuw thema = apps opnieuw activeren.

Voorbeeld uit de praktijk: gordijnshop wisselt van thema

Een gordijnzaak draait een m²-calculator: number fields `width` en `height`, formule `product_price + (width * height)`. Op het oude thema stond het block onder de prijs. Ze publiceren een nieuw OS 2.0-thema. De catalogus is hetzelfde, de koppeling in Link calculator forms ook. De storefront toont weer alleen €89.

Oorzaak 1: het app block zat op het oude thema. Nieuw thema, leeg Default product. Oplossing: Customize → Default product → Add block → Options Price Calculator, weer boven Add to cart.

Oorzaak 2 (als het block er wél staat maar de prijs niet ververst): de prijs zit nu in een andere class, Add to cart is een custom button. In App settings: Product URL van een gordijnproduct plakken, Pick price, Pick add to cart, opslaan, storefront testen. Variantwissel (linnen vs. velvet) moet de calculator laten staan of wisselen, afhankelijk van de koppeling per variant.

Daarna pas Fine-tuning: styling in de calculator, eventueel Premium price breakdown. Eerst zichtbaarheid, dan bindings, dan esthetiek.

Wat je nodig hebt om te starten

1. Installeer Options Price Calculator vanuit de listing. Kies Free om te testen, of Starter/Premium voor onbeperkte berekende orders.

2. Voeg de theme app extension toe op je producttemplate — verplicht voordat er iets op de storefront verschijnt.

3. Maak een calculator (handmatig of met AI op Starter+) en link hem aan de juiste varianten. Bulk-koppelen beschreven we in calculators bulk koppelen aan Shopify producten.

4. Bevestig storefront selectors. Custom thema: gebruik de picker. Test prijs-update, Add to cart, variantwissel.

5. Optioneel: server-side price validation aanzetten.

Docs: How to install, Add the extension, Theme bindings.

Tot slot

Een Shopify theme app extension prijscalculator is geen snippet in je thema. Het is een app block op de producttemplate, plus selectors die prijs en Add to cart van *jouw* HTML kennen. Zonder block geen velden. Zonder bindings een block dat de verkeerde prijs bijwerkt of de cart mist.

Zet het block onder de prijs en boven Add to cart, sla de theme editor op, en prik selectors opnieuw als je van thema wisselt. Daarna ziet de klant wat je in de formula builder hebt gebouwd.

Installeer Options Price Calculator en voeg het block toe in de theme editor — zonder Liquid-hack.