POP fiscal fields on cart for non-Plus Shopify stores
Goal
Add POP’s fiscal fields (customer type, VAT number, Tax Code, PEC/SDI) to the cart and/or cart drawer on a non-Plus Shopify store (Basic/Grow/Advanced), without a Checkout UI Extension.
Prerequisites
- Non-Plus Shopify account.
- Access to the theme code (
theme.liquidor the cart section).
Steps
-
Paste the
pop-noplus-embed.jsscript (provided by POP, loaded frompub.popapi.io) just before</body>intheme.liquid, or in the cart section/template, preceded by thewindow.POP_EMBED_CONFIGblock with your parameters. -
Full example configuration for an EU store (
mode: 'peppol'), with custom text:<script> window.POP_EMBED_CONFIG = { mode: 'peppol', scope: 'b2b+b2c', cartContainerSelector: '.cart__blocks', drawerContainers: [ { selector: '.drawer__footer', insertMode: 'prepend' } ], insertMode: 'prepend', customerOptions: ['private', 'company'], toggle: { enabled: true, label: 'Add billing details' }, labels: { title: 'Billing details', customerType: 'Customer type', private: 'Private', company: 'Business', vat: 'VAT number', vatPlaceholder: 'DE123456789' }, prefill: { customerType: '{{ cart.attributes.pop_customer_type | default: customer.metafields.app.pop_customer_type | default: "private" | escape }}', vat: '{{ cart.attributes.pop_vat | default: customer.metafields.app.pop_vat | default: "" | escape }}' } }; </script> <script defer src="https://pub.popapi.io/shopify/scripts/pop-noplus-embed.min.js"></script> -
Save the theme.
Key config options: mode ('sdi' Italy — Tax Code required for private customers, validates
PEC/SDI; 'peppol' EU — hides PEC/SDI, Tax Code not required; 'ksef' Poland — VAT/NIP; 'zugferd'
Germany — hides PEC/SDI and Tax Code, VAT only for companies), scope ('b2b' forces “company”;
'b2b+b2c' shows the private/company/freelance selector), cartContainerSelector /
drawerContainers / insertMode (where/how fields are inserted), toggle (show/hide a link to
open the fields), prefill (initial values from cart.attributes, falling back to customer
metafields customer.metafields.app.pop_*), and taxCodeOptOut (checkbox for sdi mode only,
enabled by default — see below, its built-in default text is Italian-only).
Customizing text (labels)
Every visible label can be overridden via labels: {...} — omit a key to keep its default (in
English, except toggle.label and taxCodeOptOut.label/note, whose built-in defaults are already
in Italian):
| Key | Default | Controls |
|---|---|---|
title | ”Electronic invoicing details” | Heading of the fields block |
customerType | ”Customer type” | Label of the customer-type select |
private / company / freelance | ”Private” / “Company” / “Freelance” | Customer-type select options |
vat | ”VAT number” (“VAT/NIP” in ksef mode) | VAT number field label |
taxCode | ”Tax code” | Tax Code field label (sdi mode only) |
pec | ”PEC or Recipient code” | PEC/SDI field label (sdi mode only) |
vatPlaceholder | IT12345678901 (PL1234567890 in ksef, DE123456789 in zugferd) | VAT field placeholder |
taxPlaceholder | RSSMRA80A01H501Z | Tax Code field placeholder |
pecPlaceholder | you@pec.it / Z4G7P1Q | PEC/SDI field placeholder |
errorVat, errorTax, errorRequiredVat, errorPec | English validation messages | Per-field validation error text |
globalError | ”Complete billing details to proceed to checkout.” | Message shown when checkout is blocked for missing data |
Alternative without an external script
If you’d rather have a self-contained form (inline HTML+CSS+JS, no external script from
pub.popapi.io), ready-to-copy drop-in snippets are available, one per mode, in the public
pop-snippets-library
repository: cart-attributes-for-sdi.liquid, cart-attributes-for-peppol-b2b.liquid, and
cart-attributes-for-peppol-b2b-b2c.liquid. They cover fewer cases (no dedicated zugferd/ksef
support) but don’t require managing POP_EMBED_CONFIG.
Verify
- Add a product to the cart.
- Open the cart page (or the cart drawer, depending on where you inserted the containers).
- Fill in the fields (e.g. VAT number).
- Proceed to checkout.
- Check that POP receives the data when the invoice is generated (see shopify-fiscal-data-management for where to verify it on the order).
Common errors
- The fields don’t appear on a page — if the indicated CSS container (
cartContainerSelectorordrawerContainers) doesn’t exist on that page, the script simply shows nothing: it is not an error, check the selector. - Switching from “company” to “private” doesn’t clear the fields — this is expected behavior only if
the change isn’t intercepted: in
peppol/zugferdswitching to “private” clears the VAT number, insdiit also clears PEC/SDI, immediately syncing the cart attributes. - Shopify Plus stores — no need to modify the theme: use POP’s native Checkout Extension instead of the embed script.
Related configuration
On non-Plus stores, required/optional fields are configured here in the embed script
(customerOptions, taxCodeOptOut), not in Settings > Checkout (that section applies to Shopify
Plus only, see shopify-checkout-vat-tax-code-fields).