Custom CSS op je Shopify-calculator, zonder het thema te raken

De velden staan. Breedte en hoogte tellen. De prijs in het thema beweegt. Alleen: de knoppen in de calculator zijn Dawn-grijs, de labels te klein op mobiel, en de “Voering”-checkbox valt in de padding van je productkolom. Je opent de theme-editor. Eén extra regel in `base.css`. De Add to cart van het thema wordt ook rood. Morgen een theme-update, en de calculator is weer grijs.

Wat je zoekt is Shopify calculator custom CSS: CSS in de app-settings, alleen op de calculator. Niet op het thema. Niet via een `<style>`-blok in een Liquid-section.

Shopify Help Adding variants blijft drie options en 2048 variants. Die limiet los je niet met CSS. CSS lost de look van extra velden op — maten, toeslagen, uploads — die native geen vierde option mogen zijn.

Eerder ging het over de selector picker: waar prijs en knop in de HTML zitten. Dat is bindings. Dit stuk is kleur, type, spacing. De listing van Options Price Calculator noemt Fully customizable styling al op Starter. De details staan in Custom CSS.

Theme-CSS is globaal. De calculator is één blok.

Een Shopify-thema stylt `button`, `.price`, `label`. Die classes zitten óók in de calculator. Plak je `.button { background: #111 }` in het thema, dan wordt élke knop donker. Inclusief de winkelwagen.

De calculator hangt in `#calculator-form-container`. Docs: alles wat je in Custom CSS zet, wordt daarnaar gescoped. Zelfde docs: elke declaration krijgt automatisch `!important`, zodat theme-regels de calculator niet terugdraaien. Jij typt geen container-selector en geen `!important`.

Voorbeeld uit die pagina. Jij schrijft:

``` .button { background: red; color: white; } ```

Intern wordt dat:

```

#calculator-form-container .button { background: red !important; color: white !important; } ```

Media queries blijven staan. `@media (max-width: 768px) { .button { font-size: 14px; } }` geldt in die container, niet in de header van Dawn.

Geen `<style>`-tags. Geen `body`, `html` of `*`. Die selectors zijn globaal; de app is er niet voor bedoeld. Custom CSS raakt alleen de calculator.

Wat shops nu in het thema stoppen

Een extra CSS-file “tot we het later netjes maken”

Werkt één sprint. Dan komt een OS 2.0-update, of een developer die `button` opnieuw definieert. De calculator volgt. De productpagina ook.

Inline styles in een Custom Liquid-block

Een `<style>` rond het app-block. Theme-editor-wissel, duplicate template, of een tweede calculator op een collection-page: de styles liggen op de verkeerde plek of dubbel.

Font Picker voor elke labelkleur

Font Picker is Premium. Dat is een veldtype: de shopper kiest een lettertype. Geen vervanging van Custom CSS. Conditional logic, live preview en Font Picker blijven Premium, ook als je CSS op Starter schrijft.

Bindings “even” met een kleurselector

Storefront Theme Bindings wijzen naar prijs, formulier, Add to cart, variantkeuze. Dat is *waar* de app leest en schrijft. Custom CSS is *hoe* de calculator eruitziet. Een verkeerde price-selector fix je niet met `color: navy`.

Geen van die routes geeft je: CSS in app-settings, scoped, media queries oké, thema ongemoeid.

App-settings, niet de formula builder

Options Price Calculator is Built for Shopify (5.0, 27 reviews). Onbeperkte productopties en formules, zonder extra varianten. Live listing, USD:

• Free — 20 uses; op een Shopify Develop-plan altijd gratis

• $9.99/maand — onbeperkte opties, AI, formula builder, metafields, styling, multilingual

• $19.99/maand (Premium) — + conditional logic, Font Picker, live preview, price breakdown, lookup tables en file uploads

• $39.99/maand — + conditional fields, draft-order checkout, admin-calculator, setup-service

Custom CSS zit bij App-wide Settings, naast bindings en server-side price validation. Overview: App settings sturen de integratie met het thema; Custom CSS is de styling-laag op diezelfde pagina. Starter noemt Fully customizable styling. Claim geen Premium-only voor deze CSS.

De Design-stap in de calculator (kleuren van velden in de builder) is iets anders. Fine-tuning in de builder is per calculator. Custom CSS in app-settings is globaal voor de calculator-component op de storefront. Gebruik de builder voor de standaardlook. CSS voor wat de builder niet dekt: mobiele font-size, een knop die exact je merkgroen moet zijn, spacing tussen twee velden.

Server-side price validation blijft een safety-toggle voor het bedrag. CSS verandert geen prijs. Wie de browser opent en `__ooCustomPrice` aanpast, loopt tegen die validatie — niet tegen jouw `background`.

Praktijk: jaloezieën, merkgroen, smaller op de telefoon

Shop “Lijnzicht”. Jaloezieën op maat. Native variant is alleen de bedieningskant (links/rechts) — één option-slot, echte SKU’s. Breedte, hoogte en lameltype zitten in de calculator. Formule in de trant van `product_price + (width * height)` plus een toeslag-checkbox. Theme-block op de productpagina. Bindings al gezet met de selector picker.

Op desktop is de calculator leesbaar. Op 390px zijn de plus/min-knoppen krap en is de primaire knop nog theme-grijs, terwijl Add to cart van het thema al merkgroen is.

1. Installeer Options Price Calculator. Starter ($9.99) dekt styling. Premium alleen als je Font Picker of live preview nodig hebt — niet voor deze CSS.

2. Calculator bouwen, varianten linken, block op de producttemplate. Bindings eerst: prijs en Add to cart moeten al meebewegen.

3. App settings → Custom CSS. Geen container-ID, geen `!important`, geen style-tags.

4. Knopkleur gelijk trekken met het thema, bijvoorbeeld `.button { background: #1a3d32; color: #fff; }`.

5. Media query voor telefoon: `@media (max-width: 768px) { .button { font-size: 14px; } }` — voorbeeld uit de docs, pas classes aan die jij in de calculator ziet.

6. Opslaan. Storefront in een privévenster, desktop én telefoon. Header, cart-drawer en productprijs van het thema mogen niet meeveranderen.

Tweede calculator op een ander product: dezelfde CSS, want het is app-wide. Wil je per product een andere look, dan is dat de Design-stap van díe calculator, niet een tweede theme-file.

Na een theme-switch: bindings opnieuw picken. Custom CSS in de app blijft staan. Test toch: een nieuw thema kan classnamen in de calculator-output niet slopen, maar jouw `.button` moet nog steeds een knop in die container zijn.

Aan de slag

1. Open de listing. Free om te voelen. $9.99 als je styling serieus neemt.

2. Zet het app-block op de productpagina. Bindings via de selector picker.

3. App settings → Custom CSS. Plak gewone CSS. Skip `body` / `html` / `*`.

4. Check mobiel met een media query. Check dat de rest van het thema hetzelfde blijft.

5. Theme-wissel: bindings opnieuw. CSS opnieuw bekijken, niet opnieuw uitvinden in `base.css`.

Theme bindings bestaan omdat HTML per thema verschilt. Custom CSS bestaat omdat de calculator zijn eigen knoppen heeft. Die twee niet door elkaar halen.

Tot slot

Shopify calculator custom CSS is geen theme-hack. Het is CSS in de app, gescoped op `#calculator-form-container`, met `!important` erachteraan, media queries inbegrepen. Geen style-tags. Geen globale selectors. De drie Shopify-options en 2048 variants blijven wat ze zijn; extra velden stylen hoort bij de calculator, niet bij een extra Color-option.

Zet de regels in Options Price Calculator. De knop wordt merkgroen. De header blijft van het thema.