# Configuration Options

<style>
{`
  table td:first-child,
  table td:nth-child(2),
  table td:nth-child(3),
  table td:nth-child(4):not(:last-child) {
    white-space: nowrap;
  }
`}
</style>

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.

```html
<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) |