Copy page

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.
locale	string		"en"	Locale to use for the storefront.
trackingConsent	boolean		false	When true, marketing pixels (Meta, TikTok, GA, GTM, Matomo) will be loaded. Set to false until user gives cookie consent.
analyticsIntegrations	string		""	Set to "auto" to detect existing pixels on the page (GA, GTM, Meta, TikTok). Or provide a JSON array of integrations.
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
hideFooter	boolean	false	Hide the footer.
hideLanguageSelector	boolean	false	Hide the language selector in the footer.
stickySummary	boolean	false	Stick purchase summary to the bottom of the page.
scrollIntoView	boolean	false	Scroll to top when clicking the logo.
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.
mainCategories	string	""	Comma-separated list of product categories to show. Empty shows all.
saleProductIds	string	""	Comma-separated list of product IDs to show. Empty shows all.
crossSellCategories	string	""	Comma-separated list of categories for multi-step product selection.
ageGateMode	string	"on_load"	When to show age gate. Options: "on_load", "on_cart_add".
ageGateAgeVerification	number	18	Age to verify for age gate.
ageGateVerificationMethod	string	"modal"	Age verification method. Options: "modal", "criipto".
hasRestrictedProductsVisibleDespiteRestriction	boolean	false	Show restricted products even after age gate rejection.

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".
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
checkoutSuccessUrl	string	null	URL to redirect to after a successful checkout.
checkoutCancelUrl	string	null	URL to redirect to after a cancelled checkout.
authMethod	string	"form"	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)