Web Component

Configuration Options

The Preo storefront is a custom element (part of the Web Components standard)—a reusable HTML tag that works in any website or framework. Configure it by passing attributes directly on the element.

Code
 
<preo-storefront
  sdk-id="prod:eu:yourorg:edt_xxxxx"
  locale="en"
  color-brand="#E91E63"
  border-radius-button="8px"
></preo-storefront>

General

Property	Type	Required	Default	Description
`sdkId`	string	Yes		The SDK ID of the event edition, found in the backoffice.
`checkoutCancelUrl`	string		`null`	URL to redirect to after a cancelled checkout.
`checkoutSuccessUrl`	string		`null`	URL to redirect to after a successful checkout.
`locale`	string		`"en"`	Locale to use for the storefront.
`analytics`	boolean		`false`	Send analytics events to configured providers.
`debug`	boolean		`false`	Log debug information to the console.
`ttlStore`	number		`60`	Time to live for the store in minutes.
`overrideFromQueryParams`	boolean		`false`	Override component attributes from query params.

Cart

Property	Type	Default	Description
`disableLocalStorageCart`	boolean	`false`	Don't persist cart contents between page reloads. Useful for multiple landing pages with different products.
`emptyCartAllowed`	boolean	`false`	Allow proceeding to checkout with empty cart.
`hideCartSummary`	boolean	`false`	Hide summary of items on the checkout page.
`isCartProcessingLocally`	boolean	`false`	Process cart locally.
`isCartSummaryEditable`	boolean	`true`	Show editable cart summary.

Summary bar

Property	Type	Default	Description
`helpUrl`	string	`null`	URL for the help button.
`hideFooter`	boolean	`false`	Hide the footer.
`payButtonText`	string		Custom text for the pay button.
`stickySummary`	boolean	`false`	Stick purchase summary to the bottom of the page.
`hasGroupedProductsInSummary`	boolean	`false`	Group products in summary without division into variants and options.

Product listing

Property	Type	Default	Description
`isCatalogue`	boolean	`false`	Show product list in a grid view.
`ageGateAgeVerification`	number	`18`	Age to verify for age gate.
`ageGateMode`	string	`"on_load"`	When to show age gate. Options: `"on_load"`, `"on_cart_add"`.
`crossSellCategories`	string	`""`	Comma-separated list of categories for multi-step product selection.
`customFlowSlug`	string	`null`	Slug of the custom flow to use.
`mainCategories`	string	`""`	Comma-separated list of product categories to show. Empty shows all.

Product details

Property	Type	Default	Description
`currencyLocale`	string	`"auto"`	Price formatting locale. Options: `"auto"`, `"en-US"`, `"da-DK"`, `"sv-SE"`, `"de-DE"`, `"nl-NL"`, `"en-GB"`, `"pl-PL"`.
`crossedPriceLayout`	string	`"full"`	Style for crossed prices. Options: `"full"`, `"compact"`, `"none"`.
`includeDepositToPrice`	boolean		Include deposit in displayed price.
`productImageMode`	string	`"zoom"`	Product image behavior. Options: `"zoom"`, `"static"`, `"full"`.
`readMoreButtonDisabled`	boolean	`false`	Hide "read more" and show only short description.
`showDiscount`	boolean	`false`	Show discount input at final summary.

Checkout page

Property	Type	Default	Description
`authMethod`	string		Authentication method. Options: `"form"`, `"sso"`.
`authUserEmail`	string	`""`	Email of the authenticated user.
`authUserFirstName`	string	`""`	First name of the authenticated user.
`authUserLastName`	string	`""`	Last name of the authenticated user.
`authUserPhone`	string	`""`	Phone of the authenticated user.
`hasConfirmEmailField`	boolean	`false`	Show confirm email field.
`hasConfirmPhoneField`	boolean	`false`	Show confirm phone field.
`hasEmailField`	boolean	`true`	Show email field.
`hasFirstNameField`	boolean	`true`	Show first name field.
`hasLastNameField`	boolean	`true`	Show last name field.
`hasPhoneField`	boolean	`true`	Show phone field.
`hideDiscount`	boolean	`false`	Hide discount at checkout.
`ssoLoginUrl`	string	`""`	URL for SSO login button.

Styling

Customize the visual appearance with CSS-based properties. Colors accept standard CSS formats: #hex, rgb(), rgba(), hsl(), or named colors.

Colors

Property	Type	Description
`colorBrand`	color	Primary brand color for buttons, links, and key UI elements
`colorComplementary`	color	Secondary/accent color for highlights and hover states
`colorSection`	color	Background color for section containers
`colorTextPrimary`	color	Main text color for headings and body content
`colorTextSecondary`	color	Secondary text color for labels and descriptions
`colorTextButton`	color	Text color inside primary buttons
`colorTextButtonDisabled`	color	Text color for disabled button states
`colorButtonDisabled`	color	Background color for disabled buttons
`colorTextFooter`	color	Text color in the footer area
`colorProductBackgroundImage`	color	Background color behind product images

Discount section colors

Property	Type	Description
`colorSectionDiscount`	color	Background color for discount sections
`colorSectionDiscountTextPrimary`	color	Primary text color in discount sections
`colorSectionDiscountTextSecondary`	color	Secondary text color in discount sections
`colorSectionDiscountIcon`	color	Icon color in discount sections
`colorSectionDiscountBackgroundIcon`	color	Background color behind discount icons

Border radius

Values should be valid CSS size units (e.g., 4px, 0.5rem, 8px).

Property	Type	Description
`borderRadiusButton`	size	Border radius for buttons
`borderRadiusCard`	size	Border radius for card containers
`borderRadiusProduct`	size	Border radius for product cards
`borderRadiusInput`	size	Border radius for form inputs
`borderRadiusFull`	size	Maximum border radius (for circular elements)

Last modified on January 29, 2026

Preview Custom transaction status page