> ## Documentation Index
> Fetch the complete documentation index at: https://docs.marzipan.co/llms.txt
> Use this file to discover all available pages before exploring further.
# Customisation
> Configure the appearance and behaviour of your web components from the Marzipan dashboard.
You can customise how your web components look and behave directly from your Marzipan dashboard, without writing any code. Navigate to **Settings > Branding & Web Components** to access these options.
These settings apply globally to all web components on your site. If you need more granular control over individual elements, see the [Styling guide](/web-components/styling) for CSS-based customisation.
## Styling
The Styling tab lets you set the colours, border radius, and other visual properties that all web components use by default.
### Brand Colours
| Setting | Description |
| :---------------------------- | :------------------------------------------------------------ |
| Primary button background | The main colour for buttons like "Add to Cart" and "Checkout" |
| Primary button hover | The colour buttons change to when hovered |
| Primary button text | Text colour on primary buttons |
| Primary button text (hover) | Text colour on primary buttons when hovered |
| Secondary button background | Background for secondary actions like "Continue Shopping" |
| Secondary button hover | Hover state for secondary buttons |
| Secondary button text | Text colour on secondary buttons |
| Button border | Border colour for primary buttons |
| Button border hover | Border colour for primary buttons on hover |
| Secondary button border | Border colour for secondary buttons |
| Secondary button border hover | Border colour for secondary buttons on hover |
Your button colours and [corner radius](#border-radius) also brand the [payment page](/orders/payment-links#branding), which isn't part of your storefront. Backgrounds and text colours there are left as they are.
### Text Colours
| Setting | Description |
| :----------------------- | :-------------------------------------------------- |
| Primary text | Main text colour across all components |
| Secondary/muted text | Used for supporting text and descriptions |
| Text on dark backgrounds | Text colour used on dark backgrounds (e.g. buttons) |
### Backgrounds & Borders
| Setting | Description |
| :------------------------ | :-------------------------------------------- |
| Page background | The background colour behind components |
| Card & loading background | Background for cards and loading placeholders |
| Modal overlay | The semi-transparent overlay behind modals |
| Primary borders | Main border colour for cards and inputs |
| Subtle borders | Lighter borders for internal dividers |
| Input background | Background colour for form fields |
| Disabled input background | Background for disabled form fields |
### Status Colours
| Setting | Description |
| :------ | :----------------------------------------------------------- |
| Success | Colour for success messages and icons (e.g. "Added to cart") |
| Warning | Colour for warnings (e.g. low stock notices) |
| Error | Colour for error messages (e.g. validation errors) |
Each status colour has a corresponding background colour for message containers.
### Badge Colours
| Setting | Description |
| :--------------- | :------------------------------------------------------- |
| Default badge | Background and text for standard badges |
| Sale badge | Background and text for sale price badges |
| Subscriber badge | Background and text for subscriber/member pricing badges |
### Account Accents
These accent colours are used as highlights on the customer account page sections:
| Setting | Description |
| :----------------- | :-------------------------------------------- |
| Rewards icon | Accent colour for the rewards/loyalty section |
| Profile icon | Accent colour for the profile section |
| Subscriptions icon | Accent colour for the subscriptions section |
### Border Radius
Control how rounded corners appear across your components:
* **Buttons and inputs** - Choose from Sharp, XS, SM, MD, LG, XL, 2XL, or Full (pill shape)
* **Cards and containers** - Choose from Sharp, SM, MD, LG, XL, 2XL, 3XL, or Full
* **Modals and popups** - The radius used for dialogs, drawers and the upsell option chooser
* **Product image corners** - Set a separate radius for product images
### Add-to-Cart Notification
The confirmation shown when a customer adds something to their cart without being redirected. See [After adding to cart](#product-behaviour).
* **Style** - **Dark** or **Light**. Two fixed looks, so it stays readable over whatever your page puts behind it.
* **Position** - Bottom centre, bottom left, bottom right, top centre, top left or top right
Its corners follow the **Modals and popups** radius above.
### Checkout Background
Set separate background colours for the two panels in the checkout layout:
* **Order summary (left)** - The background behind the order summary sidebar
* **Checkout form (right)** - The background behind the customer details and payment form
## Product
The Product tab controls how individual products are displayed in both mini and full views.
### Quick Attributes
Display key product attributes (e.g. Size, Colour, Material) directly on the product card without customers needing to open the full product page.
* Toggle quick attributes on or off
* Choose which attributes to display
* Drag to reorder the attributes
### Accordion Sections
Configure which content sections appear on the full product page and in what order. Drag sections to reorder them. Available section types:
| Section | Description |
| :--------------- | :-------------------------------------------------------- |
| Description | The product's main description |
| Attributes | A table of all product attributes |
| Single Attribute | Display one specific attribute (e.g. Care Instructions) |
| Reviews | Customer reviews |
| Awards | Product awards and accolades |
| Press | Press mentions and quotes |
| Related Products | A grid of related products (configurable title and count) |
| Text | A custom text section with your own title and content |
Each section can be set to open or collapsed by default.
### Product images
Control how product images are displayed on the full product page:
* **Thumbnail position** - Show thumbnails to the **side** of the main image or along the **bottom**
* **Zoom / lightbox** - Toggle an image zoom and lightbox overlay so customers can view images full-screen
### Event display
For event products, choose how upcoming occurrences are presented:
* **Default view** - Show occurrences as a **list** or a **calendar**
* **Upcoming occurrences** - Set how many upcoming occurrences to show (1–60)
### Product behaviour
| Setting | Description |
| :------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Show Subscriber Pricing | Whether to display subscriber/member pricing |
| Show Quantity Selector | Whether to show a quantity picker |
| Upsell Options | How a product with upsells offers them. **Boxes** show every price at once, a **Dropdown** takes less room |
| Billing Frequency Options | How a subscription sold at more than one frequency offers the choice: **Boxes** or **Dropdown** |
| After Adding to Cart | **Redirect** goes straight to the cart, **Notify** shows a short confirmation and leaves the shopper where they are, **Nothing** relies on the cart icon's count |
Text labels such as Add to Cart, Sale badge and Subscriber badge now live on the [Labels](#labels) tab.
## Collection
The Collection tab controls how product grids appear.
### Background
Set a background colour for collection pages.
### Product Cards
| Setting | Description |
| :--------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ |
| Card Style | Choose from **Minimal** (clean, no border), **Bordered** (subtle border), **Elevated** (shadow effect), or **Filled** (solid background) |
| Product Background | The background behind each product card. Follows the collection background until you pick a colour here, and **Reset** goes back to following it. |
| Text Alignment | Left-align or centre-align product card text |
| Image Corners | Control the roundness of product image corners |
| Show Quantity Selector | Whether to show quantity pickers on product cards |
### Collection Behaviour
| Setting | Description |
| :---------------------- | :------------------------------------------------------------- |
| Show Subscriber Pricing | Display subscriber/member pricing |
| Show Description | Show product descriptions on cards |
| Show "More" Link | Show a link to the full product page |
| After Adding to Cart | **Redirect**, **Notify** or **Nothing**, as on the Product tab |
Text labels such as Add to Cart, badges and the "More" link text now live on the [Labels](#labels) tab.
## Labels
The Labels tab consolidates the storefront text labels used across your components in one place. These previously lived under the Product and Collection tabs.
| Setting | Description |
| :------------------------------ | :----------------------------------------------------------------------------------------------------- |
| Add to Cart text | Button text (default: "Add to Cart") |
| Sale Badge text | Label on sale price badges (default: "Sale") |
| Subscriber Badge text | Label on subscriber price badges (default: "Subscribers") |
| Subscriber Price label | Text next to subscriber pricing (default: "for subscribers") |
| Bundle text | Unit text for bundles (default: "bundle") |
| Waitlist Button text | Text for waitlist buttons on sold-out items |
| Sales Closed text | Text shown when sales are closed |
| Back in Stock Button text | Text for the back-in-stock button |
| "More" Link text | Text for the link to the full product page |
| Configure Button (pick and mix) | The button that opens a configurator rather than adding anything (default: "Configure") |
| Base Option Label | Names the product's own row in the upsell chooser, beside options like "Case of 6" (default: "Single") |
| Upsell Picker Heading | An optional heading above a product's upsell options. Leave blank for no heading at all. |
| Frequency Picker Heading | The heading above the billing frequency options (default: "Delivery frequency") |
### Subscription frequency wording
Choose how subscription frequencies are described:
* **Worded** - e.g. "quarterly"
* **Interval** - e.g. "every 3 months"
## Cart
The Cart tab controls the shopping cart component.
### Container Styling
Add a background colour or border to the cart component to help it stand out on your page.
* **Background** - Toggle on and select a colour
* **Border** - Toggle on and select a border colour
### Free Shipping Notification
Show a message in the cart telling customers how much more they need to spend to qualify for free shipping.
* **Enabled** - Toggle the notification on or off
* **Message** - Customise the message text. Use `{amount}` as a placeholder for the remaining amount (e.g. "Spend {amount} more for free shipping!")
* **Display Threshold** - Set a minimum cart value per market/currency. The notification only appears when the cart value is below this threshold.
### Related Products
Display product recommendations in the cart to encourage additional purchases.
* **Enabled** - Toggle related products on or off
* **Section Title** - Customise the heading (e.g. "You might also like")
* **Number of Products** - Choose how many products to display (1–12)
## Checkout
The Checkout tab controls the checkout experience.
### Background Colours
The checkout uses a split-panel layout. You can set separate background colours for each side:
* **Order summary (left)** - Customise the background behind the order review
* **Checkout form (right)** - Customise the background behind the payment form
### Logo
Control how your logo appears at the top of the checkout:
* **Position** - Left, Centre, or Right
* **Height** - Small, Medium, Large, or Extra Large
### Phone Field
* **Require phone number** - When enabled, customers must enter a phone number to complete checkout
### Newsletter
Configure the newsletter sign-up checkbox shown to guests during checkout.
* **Message** - The wording shown next to the checkbox. Leave blank to use "Subscribe to our newsletter".
* **Pre-tick the checkbox** - When enabled, the checkbox starts ticked. Customers can still untick it before continuing.
Pre-ticked consent is **not valid consent** in the UK or EU. UK GDPR and PECR both require a clear affirmative action, so a box the customer did not tick themselves does not count as consent to marketing. Addresses collected this way may not be lawfully mailable. Only turn this on if you have taken your own legal advice.
Marzipan records the wording each customer was actually shown, and whether the box was pre-ticked, against their cart and order. Editing the wording later never rewrites consent already given.
### Create an Account
Guests are always offered a password field on the order confirmation, so the order they just placed becomes an account. Only the wording is configurable. Anyone who already has a password never sees it.
* **Label** - The only line of copy in the block. Leave blank to use "Enter a password to create an account".
* **Button** - Leave blank to use "Create account".
* **Confirmation heading** - Shown in place of the form once the account is made.
* **Confirmation message** - Use `{email}` where the customer's address should appear.
### Ask "How did you hear about us?"
Asks the referral question again on the confirmation page when the customer skipped it at checkout. Asking there costs no conversion, so it usually fills in a good share of the gaps.
Needs the [referral sources](#referral-sources) below to be configured, and it never appears on an order that already has an answer.
### Reward Points Banner
The band on the order confirmation showing what the order earned. It only appears when rewards are switched on.
* **Banner colour**
* **Text colour**
* **Icon colour**
* **Corners**
A preview shows how the band will look as you change it.
### Referral Sources
Ask customers how they heard about you during checkout. This data feeds into your Attribution insights.
* **Enable dropdown** - Show or hide the "How did you hear about us?" question
* **Allow "Other" option** - Let customers type a free-text answer
* **Source options** - Add, remove, and reorder options. Each source can include:
* A display label
* An auto-tag (automatically applied to the customer record)
* An optional follow-up question (free text or dropdown) for more detail
## Account
The Account tab controls the customer account component.
### Subscription Upsell
Display a product grid within the customer account encouraging customers to start a subscription.
* **Enable** - Toggle the upsell section on or off
* **Product Collection** - Choose which collection to display products from
* **Heading** - Customise the section heading
* **Message** - Add a message encouraging customers to subscribe
* **Grid Columns** - Set the number of columns for mobile, tablet, and desktop views