` that contains the empty cart message.
The pulsating loading elements that are shown when the cart is loading.
# Cart Icon
Source: https://docs.marzipan.co/web-components/cart-icon
The cart icon component displays a cart icon and shows the number of items in the cart. It is ideal to be placed in the header of your website.
### Code
```javascript theme={null}
```
### Props
Props should be passed as attributes to the component element.
The path to the cart page.
Defaults to `/cart`
The style of the icon to display.
Can be one of `cart-outline`, `cart-solid`, `bag-outline`, or `bag-solid`.
Defaults to `bag-outline`
### Styling
The following parts are available to style the cart icon component:
The `` element that contains the icon and cart count.
# Checkout
Source: https://docs.marzipan.co/web-components/checkout
The checkout component displays the checkout page.
### Code
```javascript theme={null}
```
The `stripe-card-element` and `express-checkout-element` slots are required for the checkout component to work.
### Props
Props should be passed as attributes to the component element.
Whether to show the forgot password link.
Defaults to `false`
The message to display to prompt the user to sign in.
Defaults to `Checkout faster by signing in and using saved details`
The slug of the page to return to when the user clicks the cart icon.
Defaults to `/cart`
The message shown to guests explaining they can create an account later.
Defaults to `You can create an account once you have ordered`
The path the "continue shopping" button goes to from the order confirmation.
Defaults to `/`
### Features
#### Background Colours
The checkout uses a split-panel layout. You can set separate background colours for the order summary (left) and checkout form (right) from your [web component settings](/web-components/customisation#background-colours).
#### Logo
Control how your store logo appears at the top of the checkout, including its position (left, centre, right) and height. Configured in [web component settings](/web-components/customisation#logo).
#### Phone Number Requirement
You can require customers to enter a phone number during checkout. This is useful for delivery notifications and fulfilment providers that need a contact number. Toggle this in [web component settings](/web-components/customisation#phone-field).
#### Referral Sources
Ask customers "How did you hear about us?" during checkout. You can configure the list of options, add follow-up questions, and auto-tag customers based on their response. This data feeds into your Attribution insights. Set up in [web component settings](/web-components/customisation#referral-sources).
#### Custom Questions
If you've set up [custom checkout fields](/settings/cart-and-checkout#custom-checkout-fields), they're asked on the details step and stored against the order and the customer. A returning customer's previous answers are filled in for them.
A **required** custom question hides the Apple Pay and Google Pay shortcut at the top of checkout in any market where it applies, since the question can only be answered on the checkout page itself. Both are still offered at the payment step.
#### Order Confirmation
Once an order is placed, the checkout renders the confirmation in the same split layout as the checkout itself: the receipt on one side and an order summary on the other. It can also carry:
* **Rewards** - a band showing what the order earned, when rewards are switched on. Its colours and corners are set in [web component settings](/web-components/customisation#reward-points-banner).
* **Create an account** - guests are offered a single password field that turns the order they just placed into an account. See below.
* **How did you hear about us?** - asked here when the order has no answer yet, if you've turned it on. See [Referral Sources](/web-components/customisation#referral-sources).
#### Create an Account
Guest checkout already attaches the order to a customer record, but without a password the shopper can't sign in to see it. The confirmation page offers a password field to finish the job. Everything else is already on the order, so nothing is retyped.
A verification code is emailed straight away, and the account area stays closed until it's entered. The wording is editable in [web component settings](/web-components/customisation#create-an-account).
The block doesn't appear for a shopper who checked out signed in, or whose email address already has an account.
#### Gifting
With [gifting](/settings/cart-and-checkout#gifting) turned on, the delivery step opens by asking **who the order is for**. Choosing someone else collects their delivery address and then asks whether the order is a gift, which adds a step for the message, the recipient's details, the date to deliver after and the date to tell them.
Every heading, option and note on those steps is editable in [web component settings](/web-components/customisation). See [Gift orders](/orders/gifts) for how the dates behave.
#### Gift Vouchers
A [gift voucher](/gift-vouchers/redeeming) code is entered in the same box as a discount code. Marzipan recognises a voucher by its checksum, applies it as stored value, and charges the card the difference.
Where a voucher covers a repeating order in full, checkout still asks for a card for the deliveries after the first one, since nothing is being charged today and the renewals would otherwise have nothing to bill. The wording of that explanation is yours to set.
#### Rewards Redemption
If you have a rewards programme enabled, customers can apply their accumulated points for a discount during checkout. The points redemption interface appears automatically for customers with available points.
#### PayFast Payments
If PayFast is configured as a payment gateway, the checkout component supports PayFast's payment flow alongside Stripe and PayPal.
### Styling
The following parts are available to style the checkout component:
The spinner element.
The cart icon link element.
The primary action button, normally the "continue" button.
The sidebar element.
The product image element.
The containing `` around a product image.
The logo element.
The discount button element.
The highlighted breadcrumb item element.
The input element.
The input checkbox element.
An `` element used for links.
The unselected option(s) of a radio group.
For example the "ship" and "pickup" delivery options
The selected option of a radio group.
For example the "ship" and "pickup" delivery options
The select element.
The options for the selected shipping method
The order confirmation adds the following parts:
The confirmation container.
The receipt column.
The order summary column.
The confirmation heading.
The order number element.
The contact details block.
The delivery details block.
The container around the confirmation's actions.
The "continue shopping" button.
The order summary container.
The order summary heading.
A line item in the order summary.
The order summary total.
The create-account form.
The create-account heading.
The create-account button.
The "how did you hear about us?" block.
The referral prompt's form.
The referral prompt's heading.
The referral prompt's button.
The discount code label.
A form label element.
# Collection
Source: https://docs.marzipan.co/web-components/collection
The collection component displays a grid of products from a specific collection.
### Component example
```javascript theme={null}
```
### Props
Props should be passed as attributes to the component element.
The text to display after the price if the product type is `bundle`.
E.g £99/pack, where pack is the bundle-text.
Defaults to `bundle`
The path to the cart page.
Defaults to `/cart`
The slug for the collection to display products from.
The text to display on the "add to cart" button.
Defaults to `Add to Cart`
Whether to hide the "add to cart" button for the product.
Defaults to `false`
The number of placeholder items to display while the products are loading.
Defaults to `8`
Whether to redirect to the cart page after adding the product to the cart.
Defaults to `false`
Whether to show the quantity field for the product.
Defaults to `false`
Whether to show the name of the collection.
Defaults to `true`
Whether to show a "show more" link.
Defaults to `false`
The text to display on the "show more" link.
Defaults to `More`
Whether to show the product description.
Defaults to `false`
The text to display on sale price badges.
Defaults to `Sale`
The text to display on subscriber price badges.
Defaults to `Subscribers`
The label text for subscriber pricing.
Defaults to `for subscribers`
Whether to show subscriber pricing information.
Defaults to `false`
### Styling
The following parts are available to style the collection component:
The containing div of placeholder items that is shown while the products are loading.
The colour of the placeholder items that is shown while the products are loading.
The containing `ul` of the products grid.
The containing `li` of a product.
The containing `div` of the product image.
The product image.
The container for the low stock badge.
The low stock badge element.
The containing `div` of the product info.
The product name.
The product price.
The product description container.
The price badge (sale/subscriber) element.
The sale price display.
The primary subscriber price (for logged-in subscribers).
The subscriber price information.
The crossed-out subscriber price.
The crossed-out regular price.
The crossed-out original price.
The upsell product selection container (visible on hover).
The upsell product dropdown container.
The upsell product select dropdown (hover state).
The "show more" link element.
### Features
#### Product Card Styles
You can choose from four product card styles in your [web component settings](/web-components/customisation#product-cards): **Minimal** (clean, no border), **Bordered** (subtle border), **Elevated** (shadow effect), or **Filled** (solid background). You can also control text alignment and image corner radius.
#### Background Colour
Set a custom background colour for your collection pages from [web component settings](/web-components/customisation#background).
You can also give the product cards their own background, separate from the collection behind them. See [Product Cards](/web-components/customisation#product-cards).
#### Restricted Collections
A collection can be [restricted to certain markets](/collections/overview#market-visibility). When a shopper is in a market the collection isn't available in, the component explains why there's nothing to show rather than rendering an empty grid, using the message and page you set on the collection.
#### Purchase Options
A product with upsells shows a **See options** button rather than an add-to-cart button, opening a chooser that lists every purchase option as a priced row: the product itself alongside its upsells, each with its own price and a quantity to multiply it by.
Each option carries a short label, such as `Case of 6`, set on the product. Options that are out of stock report their own availability, so a shopper can't pick a sold-out case and find out at the cart.
The button's wording and the label used for the product's own row are set on the [Labels tab](/web-components/customisation#labels).
The collection component uses the [add to cart](./add-to-cart) component to display the "add to cart" button for each product. If you have set styles for the add to cart component they will be applied to the "add to cart" button with this component.
# Form
Source: https://docs.marzipan.co/web-components/contact-form
The form component renders a dynamic form created in your Marzipan dashboard.
Forms are created and configured in your Marzipan dashboard under **Forms**. The `
` component fetches the form definition by slug and dynamically renders the fields you've configured.
Supported field types: text, email, phone, textarea, select, checkbox, radio, date, and hidden.
### Code
```javascript theme={null}
```
### Props
Props should be passed as attributes to the component element.
The slug of the form as defined in your Marzipan dashboard.
The text to display on the submit button.
Defaults to `Submit`
The message to display when the form is submitted successfully. If not set, the success message configured in your Marzipan dashboard will be used.
Defaults to `Thank you for your submission!`
### Styling
The form component exposes the following CSS parts for styling:
* `--form` - The form element
* `--input` - All input, textarea, and select elements
* `--form-submit-button` - The submit button (also targetable via `--primary-action-button`)
* `--form-success` - The success message container
* `--form-error` - The error message shown if the form fails to load
The previous `` component is deprecated. Use `` with a form created in your dashboard instead.
# Customisation
Source: https://docs.marzipan.co/web-components/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") |
| Shipment (singular) | What you call one subscription delivery in the customer account (default: "shipment") |
| Shipment (plural) | The plural of the above, asked for separately so nothing has to guess at an s (default: "shipments") |
| 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 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
### Account Copy
Most of the wording in the customer account can be rewritten in your own voice, under the subscription upsell on the same tab. Every field is optional: leave one blank and it shows the Marzipan wording you can see greyed out in the box, so a shop that edits nothing keeps what it has today, and clearing a field you have changed puts the default back.
#### Sign in and register
Wording on the sign in, register, email verification and password reset screens.
| Setting | Description |
| :-------------------------- | :----------------------------------------------------------------------------------------- |
| Sign in message | Sits under the sign in heading (default: "Manage your subscriptions, orders and rewards.") |
| Referral question help | Sits under "How did you hear about us?" on the register form |
| Verify email message | Explains why a six digit code has been sent |
| Password reset message | Shown on the form asking for an email address |
| Password reset sent message | Shown once the link has gone out. `{email}` is replaced with the address it went to |
#### Empty states
Shown when a customer has nothing to see yet in one of the account tabs. Titles and messages are separate, so you can change a headline without losing the explanation under it.
| Setting | Description |
| :--------------------------------------- | :--------------------------------------------------------------------------------------------------------------------- |
| Subscriptions empty title and message | A customer with no subscriptions at all |
| Subscriptions empty title (active only) | Used instead of the title above when the list is filtered to active subscriptions |
| Nothing running title and message | A customer who has subscribed before but has nothing running now, which is a different thing from never having had one |
| Orders empty title and message | A customer with no orders |
| Rewards activity empty title and message | A rewards account with no points history |
| Addresses empty title and message | A profile with no saved addresses |
#### Subscription messages
Explanations shown to a customer managing a subscription.
| Setting | Description |
| :------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------- |
| Items not decided yet | Shown in place of the item list before the contents are picked |
| Extras closed title and message | Shown once the next delivery is being prepared and nothing more can go in it |
| Extras hint (repeating) | Shown when the extras already added repeat on every delivery |
| Extras hint (delivery scheduled) | Shown when there is a delivery to add extras to |
| Extras hint (nothing scheduled) | Shown when nothing is scheduled yet |
| Skip message (one) and (several) | What the customer is told before confirming a skip. Asked for separately rather than derived, the same way the shipment labels are |
| Cancel reason title and message | The first step of the cancel flow, which asks why |
| Cancel confirmation title and message | The last step, which states the consequence |
Write `{shipment}` and `{shipments}` rather than your own word for a delivery, and they are replaced with the [shipment labels](#labels) you set. That way a shop that renames a shipment later does not end up with a message contradicting the rest of the account. A token that is not recognised is left on screen exactly as you typed it, so a typo is visible rather than quietly eating half a sentence.
# Introduction
Source: https://docs.marzipan.co/web-components/introduction
Get started with Marzipan's web components.
The Marzipan web components are a set of custom elements that can be used to add a fully functional commerce solution to your website.
## Setup
To use the web components, you will need to generate an API token from your [account settings](https://app.marzipan.co/settings/api) and add the following script to your website.
You will need to select the `read`, `cart:create`, `cart:update`, `cart:read` scopes.
Replace `YOUR_API_TOKEN` in the script with the API token that you generate.
```javascript theme={null}
```
Once you have added the script to your website, you can start adding the required web components.
If you are not sure how to add the web components to your website, you may want to get your web developer to add them for you.
## Marzipan CMS
If you are using the Marzipan CMS to power your website, you can add the account, cart, checkout and products components in the page builder by selecting the Marzipan components button from the editor toolbar.
If there are any configurable properties, you will be shown a modal where you can set them. The properties are the same as detailed in the **Props** section of the relevant web component documentation page.
# Product
Source: https://docs.marzipan.co/web-components/product
The product component displays a single product in either mini or full view mode.
### Component example
```javascript theme={null}
```
### Props
Props should be passed as attributes to the component element.
The slug or ID of the specific product to display.
The display mode for the product component.
Options: `mini`, `full`
Defaults to `mini`
The text to display on the "add to cart" button.
Defaults to `Add to Cart`
The text to display after the price if the product type is `bundle`.
E.g £99/pack, where pack is the bundle-text.
Defaults to `bundle`
The path to the cart page.
Defaults to `/cart`
Whether to hide the "add to cart" button for the product.
Defaults to `false`
Whether to redirect to the cart page after adding the product to the cart.
Defaults to `false`
Whether to show the quantity field for the product.
Defaults to `false`
Whether to show the name of the collection.
Defaults to `true`
Whether to show a "show more" link.
Defaults to `false`
The text to display on the "show more" link.
Defaults to `More`
The text to display on sale price badges.
Defaults to `Sale`
The text to display on subscriber price badges.
Defaults to `Subscribers`
The label text for subscriber pricing.
Defaults to `for subscribers`
Whether to show subscriber pricing information.
Defaults to `false`
### Views
The product component supports two different view modes:
#### Mini View
The mini view displays the product in a compact format suitable for product grids or collections. It includes the product image, name, price, and add to cart functionality.
#### Full View
The full view displays the product in an expanded format suitable for dedicated product pages. It includes:
* Image gallery with thumbnails
* Detailed product information
* Product options and variants
* Full description
* Product attributes
* Awards and reviews
* Related products
### Styling
The following parts are available to style the product component:
#### Mini View Parts
The main container for mini view.
The not found state container for mini view.
The not found text for mini view.
The loading state container.
The colour of the placeholder items that is shown while the product is loading.
The main product container.
The containing div of the product image.
The product image.
The container for the low stock badge in mini view.
The low stock badge element in mini view.
The containing div of the product info.
The product name.
The product price container.
The price badge (sale/subscriber) element.
The sale price display.
The primary subscriber price (for logged-in subscribers).
The subscriber price information.
The crossed-out subscriber price.
The crossed-out regular price.
The crossed-out original price.
The upsell product selection container.
The upsell product select dropdown.
The "show more" link element.
#### Full View Parts
The main container for full view.
The not found state container for full view.
The not found title.
The not found message text.
The not found return link.
The main image container.
The image loading state.
The main product image.
The container for the low stock badge in full view.
The low stock badge element in full view.
The image thumbnails container.
Individual thumbnail button.
Active thumbnail button state.
The product details section.
The collection name display.
The product name heading.
The price section container.
The product price.
The price badge for full view.
The sale price for full view.
The primary subscriber price for full view.
The subscriber price for full view.
The crossed-out subscriber price for full view.
The crossed-out regular price for full view.
The crossed-out original price for full view.
The actions section (add to cart, options).
The upsell container for full view.
The upsell select dropdown for full view.
The product options section.
The product description section.
The additional product details section.
The product attributes section.
Individual attribute name.
Individual attribute value.
The awards section.
The reviews section.
The related products section.
### Features
#### Subscription Products
The product component automatically detects and handles subscription products, including pick-and-mix subscriptions. For subscription products, it integrates with the subscription configuration component to provide frequency selection and item management.
#### Upsell Products
When a product has upsell variants, the component displays a dropdown selection allowing customers to choose between different options before adding to cart.
#### Quick Attributes
When enabled in your [web component settings](/web-components/customisation#quick-attributes), key product attributes (e.g. Size, Colour, Material) are displayed directly on the mini view product card. You choose which attributes to show and their display order from Settings > Branding & Web Components > Product.
#### Purchase Options
Where a product has upsells, the page can offer them either as a **dropdown** or as **priced boxes** showing every option's price at once. Set which under [Upsell Options](/web-components/customisation#product-behaviour), and add an optional heading above them with the **Upsell Picker Heading** label.
#### Billing Frequency
A subscription package sold at more than one billing frequency lets the shopper choose, as **boxes** or a **dropdown**. The frequency they pick is what the subscription is created on.
The heading above the choice is set with the **Frequency Picker Heading** label.
#### Accordion Sections (Full View)
The full view product page uses configurable accordion sections. You can control which sections appear, their order, and whether they default to open or collapsed. Available sections include description, attributes, reviews, awards, press, related products, and custom text blocks. Configure these in your [web component settings](/web-components/customisation#accordion-sections).
#### Pricing Display
The component intelligently displays pricing based on:
* Sale prices vs regular prices
* Subscriber pricing for logged-in subscribers
* Bundle pricing with custom text
* Price badges for sales and subscriber discounts
* Multi-currency pricing based on the customer's market
#### Image Gallery (Full View)
The full view includes an image gallery with:
* Main image display with loading states
* Thumbnail navigation
* Support for product images and label images
* Fallback placeholder when no images are available
#### SEO Features (Full View)
The full view automatically injects:
* Meta tags for social sharing
* Structured data (JSON-LD) for search engines
* Dynamic page titles
* Product availability and pricing information
The product component uses the [add to cart](./add-to-cart) component to handle cart functionality. If you have set styles for the add to cart component, they will be applied to the buttons within this component.
# Styling
Source: https://docs.marzipan.co/web-components/styling
Customising the appearance of the web components.
### Introduction
You can customise the appearance of the web components to match your branding in two ways:
1. **Dashboard settings** - Use the [Customisation page](/web-components/customisation) in Settings > Branding & Web Components to set colours, card styles, border radius, and more. No code required.
2. **CSS overrides** - For more control, add custom CSS to your website using CSS variables and CSS parts (described below).
Most stores only need the dashboard settings. CSS overrides are optional and recommended only if you need fine-grained control that goes beyond what the dashboard offers. If you do use CSS, ask your web developer for help.
We use TailwindCSS to style the web components, which are isolated from your global CSS so that they do not affect the rest of your website.
There are two ways to customise the styling:
1. **CSS Variables** - For simple changes like colours, border radius, and font size. Override a few variables and all components update automatically. This is the quickest way to match your brand colours.
2. **CSS Parts** - For more in-depth control over individual elements within components. Use the `::part()` selector to target specific buttons, icons, text, and other elements with full CSS flexibility.
Most sites only need CSS variables. Use parts when you need fine-grained control over specific elements.
## CSS Variables
You can override the default colours, border radius, and font size used by all web components by setting CSS custom properties (variables) on your page. These variables are defined on the `:host` selector and can be overridden globally.
### Example
```css theme={null}
:root {
--marzipan-color-primary: #8b5cf6;
--marzipan-color-primary-hover: #a78bfa;
--marzipan-radius: 0.5rem;
}
```
### Colour Variables - Primary
| Variable | Default | Description |
| :------------------------------- | :-------- | :---------------------------- |
| `--marzipan-color-primary` | `#3b82f6` | Primary brand colour |
| `--marzipan-color-primary-hover` | `#60a5fa` | Primary colour on hover state |
### Colour Variables - Secondary
| Variable | Default | Description |
| :--------------------------------- | :-------- | :------------------------------ |
| `--marzipan-color-secondary` | `#e5e7eb` | Secondary background colour |
| `--marzipan-color-secondary-hover` | `#d1d5db` | Secondary colour on hover state |
### Colour Variables - Button Borders
| Variable | Default | Description |
| :---------------------------------------- | :------------ | :------------------------------------------- |
| `--marzipan-color-button-border` | `transparent` | Border colour for primary buttons |
| `--marzipan-color-button-border-hover` | `transparent` | Border colour for primary buttons on hover |
| `--marzipan-color-secondary-border` | `transparent` | Border colour for secondary buttons |
| `--marzipan-color-secondary-border-hover` | `transparent` | Border colour for secondary buttons on hover |
### Colour Variables - Text
| Variable | Default | Description |
| :------------------------------ | :-------- | :--------------------------------------- |
| `--marzipan-color-text` | `#111827` | Primary text colour |
| `--marzipan-color-text-muted` | `#6b7280` | Muted/secondary text colour |
| `--marzipan-color-text-inverse` | `#ffffff` | Inverse text colour for dark backgrounds |
### Colour Variables - Backgrounds
| Variable | Default | Description |
| :---------------------------- | :------------------------- | :----------------------------------- |
| `--marzipan-color-bg` | `#ffffff` | Primary background colour |
| `--marzipan-color-bg-muted` | `#f9fafb` | Muted background colour |
| `--marzipan-color-bg-overlay` | `rgba(107, 114, 128, 0.4)` | Overlay background with transparency |
### Colour Variables - Borders
| Variable | Default | Description |
| :------------------------------ | :-------- | :--------------------- |
| `--marzipan-color-border` | `#d1d5db` | Standard border colour |
| `--marzipan-color-border-muted` | `#e5e7eb` | Muted border colour |
### Colour Variables - Status
| Variable | Default | Description |
| :---------------------------- | :-------- | :------------------------ |
| `--marzipan-color-error` | `#ef4444` | Error state colour |
| `--marzipan-color-error-bg` | `#fef2f2` | Error background colour |
| `--marzipan-color-success` | `#22c55e` | Success state colour |
| `--marzipan-color-success-bg` | `#f0fdf4` | Success background colour |
| `--marzipan-color-warning` | `#f59e0b` | Warning state colour |
| `--marzipan-color-warning-bg` | `#fffbeb` | Warning background colour |
### Colour Variables - Badges
| Variable | Default | Description |
| :---------------------------- | :-------- | :---------------------- |
| `--marzipan-color-badge-bg` | `#ffedd5` | Badge background colour |
| `--marzipan-color-badge-text` | `#9a3412` | Badge text colour |
### Colour Variables - Inputs
| Variable | Default | Description |
| :----------------------------------- | :-------- | :------------------------------- |
| `--marzipan-color-input-bg` | `#ffffff` | Input field background colour |
| `--marzipan-color-input-disabled-bg` | `#f9fafb` | Disabled input background colour |
### Border Radius Variables
| Variable | Default | Description |
| :--------------------- | :--------- | :--------------------- |
| `--marzipan-radius` | `0.375rem` | Standard border radius |
| `--marzipan-radius-lg` | `0.5rem` | Larger border radius |
### Font Size Variable
| Variable | Default | Description |
| :--------------------- | :------ | :---------------------------- |
| `--marzipan-font-size` | `16px` | Base font size for components |
## CSS Parts
We use the [**part**](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) attribute to style individual elements within the web components. The format is always `web-component::part(element-name)`.
### Examples
This CSS would target the button within the add to cart component, using Tailwind classes that exist with your own CSS styles.
```css theme={null}
marzipan-addtocart::part(--add-to-cart-button) {
@apply text-white py-3 px-4 uppercase no-underline text-sm hover:bg-zinc-900;
}
```
And this CSS would target the cart icon of the cart icon component using traditional CSS.
```css theme={null}
marzipan-carticon::part(cart-icon) {
color: #bebebe;
}
```
Because of how the web components are structured and how `part` works, we may use the same name for the same part in different components. For example, the `--marzipan-spinner` part is used in multiple components. However you must target each part separately:
```css theme={null}
marzipan-cart::part(--marzipan-spinner), marzipan-checkout::part(--marzipan-spinner) {
color: #399383
}
```
### Available parts
Available parts are listed under each component's **Styling** section.
# WordPress Plugin
Source: https://docs.marzipan.co/web-components/wordpress
Easily add the Marzipan web components to your WordPress site.
The Marzipan for WordPress plugin integrates Marzipan's web components directly into your WordPress site, providing Gutenberg blocks, Elementor widgets, and shortcodes for displaying products, carts, and subscription management.
## Requirements
* WordPress 6.0 or higher
* PHP 7.4 or higher
* A Marzipan account with API access
## Installation
1. Download the plugin from your Marzipan dashboard
2. Upload the `marzipan-for-wordpress` folder to `/wp-content/plugins/`
3. Activate the plugin through the **Plugins** menu in WordPress
4. Navigate to **Settings > Marzipan** to configure
## Configuration
After activation, go to **Settings > Marzipan** to enter your API token.
### Getting Your API Token
1. Log into your Marzipan dashboard
2. Navigate to **Settings > API**
3. Create an API token
### Settings Page
The settings page displays:
* **API Token** - Your Marzipan API token (required)
* **Pages** - Links to view and edit the auto-generated pages
## Auto-Generated Pages
On activation, the plugin automatically creates six pages with locked Gutenberg blocks:
| Page | URL | Purpose |
| -------- | ----------- | ---------------------------------- |
| Store | `/store` | Product collection display |
| Product | `/product` | Individual product detail template |
| Cart | `/cart` | Shopping cart |
| Checkout | `/checkout` | Checkout form |
| Account | `/account` | Customer account management |
| Contact | `/contact` | Contact form |
These pages contain locked blocks that cannot be accidentally deleted, ensuring your store functions correctly.
## Gutenberg Blocks
The plugin provides 9 Gutenberg blocks in the **Marzipan** category:
### Collection Block
Display products from a specific collection with filtering options.
### Product Block
Display a single product with configurable view modes (mini or full).
### Product Page Block
Full product detail page template with all product information.
### Add to Cart Block
A dedicated add-to-cart button with quantity options.
### Cart Block
Shopping cart displaying line items and totals.
### Checkout Block
Complete checkout form for processing orders.
### Account Block
Customer account portal for managing subscriptions and orders.
### Form Block
Dynamic form that renders a form created in your Marzipan dashboard. Select the form by slug in the block settings.
### Cart Icon Block
Cart icon with item count badge, perfect for navigation menus.
## Elementor Widgets
If you use Elementor, the plugin provides 7 widgets:
* Product
* Collection
* Add to Cart
* Cart
* Account
* Form
* Cart Icon
Find them in the Elementor widget panel under the **Marzipan** category.
They can be easily dragged and dropped into any Elementor layout and then configured via the widget settings.
## Shortcodes
For use in the classic editor, template files, or anywhere WordPress shortcodes are supported. Shortcodes accept the same settings as the web component props, using underscores instead of hyphens.
| Shortcode | Description |
| ------------------------- | ---------------------------- |
| `[marzipan_collection]` | Display a product collection |
| `[marzipan_product]` | Display a single product |
| `[marzipan_addtocart]` | Add to cart button |
| `[marzipan_cart]` | Shopping cart |
| `[marzipan_checkout]` | Checkout form |
| `[marzipan_product_page]` | Full product page |
| `[marzipan_account]` | Customer account portal |
| `[marzipan_form]` | Dynamic form |
| `[marzipan_carticon]` | Cart icon with count |
### Collection Shortcode
Display products from a specific collection with full control over display options.
```html theme={null}
[marzipan_collection
collection="featured"
show_description="true"
show_subscriber_pricing="true"
placeholder_items="12"
add_to_cart_text="Buy Now"
redirect_to_cart="false"
]
```
| Attribute | Description | Default |
| ------------------------- | --------------------------------- | ----------------- |
| `collection` | Collection slug (required) | — |
| `show_collection_name` | Show the collection title | `true` |
| `show_description` | Show product descriptions | `default` |
| `show_more_link` | Show "view more" link on products | `false` |
| `show_more_text` | Text for the "view more" link | `More` |
| `placeholder_items` | Number of loading placeholders | `8` |
| `hide_add_to_cart_button` | Hide the add to cart button | `false` |
| `show_cart_quantity` | Show quantity selector | `default` |
| `redirect_to_cart` | Redirect to cart after adding | `default` |
| `add_to_cart_text` | Custom button text | `Add to Cart` |
| `show_subscriber_pricing` | Show member pricing | `default` |
| `sale_badge_text` | Text for sale badges | `Sale` |
| `subscriber_badge_text` | Text for subscriber badges | `Subscribers` |
| `subscriber_price_label` | Label for subscriber pricing | `for subscribers` |
| `bundle_text` | Unit text for bundles | `bundle` |
Attributes set to `default` will use the value configured in your [web component settings](/web-components/customisation).
### Product Shortcode
Display a single product in either mini (card) or full (page) view.
```html theme={null}
[marzipan_product product="signature-product" view="full"]
```
| Attribute | Description | Default |
| ------------------------- | ------------------------------ | ------------- |
| `product` | Product slug or ID (required) | — |
| `view` | Display mode: `mini` or `full` | `mini` |
| `show_collection_name` | Show the collection name | `true` |
| `show_subscriber_pricing` | Show member pricing | `default` |
| `hide_add_to_cart_button` | Hide the add to cart button | `false` |
| `redirect_to_cart` | Redirect to cart after adding | `false` |
| `add_to_cart_text` | Custom button text | `Add to Cart` |
| `sale_badge_text` | Text for sale badges | `Sale` |
| `subscriber_badge_text` | Text for subscriber badges | `Subscribers` |
### Add to Cart Shortcode
A standalone add-to-cart button for embedding anywhere on your site.
```html theme={null}
[marzipan_addtocart
product_id="550e8400-e29b-41d4-a716-446655440000"
product_type="physical"
button_text="Add to Cart"
show_quantity="true"
]
```
| Attribute | Description | Default |
| --------------- | ------------------------------------------------ | ------------- |
| `product_id` | Product UUID (required) | — |
| `product_type` | `physical`, `bundle`, `event`, or `subscription` | `physical` |
| `button_text` | Custom button text | `Add to Cart` |
| `show_quantity` | Show quantity selector | `false` |
| `quantity` | Default quantity | `1` |
| `redirect` | Redirect to cart after adding | `false` |
| `availability` | `all` or `subscribers` | `all` |
| `out_of_stock` | Show as out of stock | `false` |
| `disabled` | Disable the button | `false` |
### Cart Shortcode
```html theme={null}
[marzipan_cart empty_cart_message="Your cart is empty — browse our products!"]
```
| Attribute | Description | Default |
| -------------------- | ------------------------- | -------------------------------- |
| `empty_cart_message` | Custom empty cart message | `You have nothing in your cart.` |
### Cart Icon Shortcode
A small cart icon with item count badge, ideal for navigation menus or headers.
```html theme={null}
[marzipan_carticon icon_style="bag-outline" cart_path="/cart"]
```
| Attribute | Description | Default |
| ------------ | ----------------------------------------------------------- | ------------- |
| `cart_path` | Path to the cart page | `/cart` |
| `icon_style` | `cart-outline`, `cart-solid`, `bag-outline`, or `bag-solid` | `bag-outline` |
### Account Shortcode
```html theme={null}
[marzipan_account disable_pick_mix_subscription_edit="false"]
```
| Attribute | Description | Default |
| ------------------------------------ | ---------------------------------------------------- | ------- |
| `disable_pick_mix_subscription_edit` | Prevent customers from editing pick & mix selections | `false` |
### Form Shortcode
Display a form created in your Marzipan dashboard.
```html theme={null}
[marzipan_form slug="contact-us"]
```
| Attribute | Description | Default |
| ----------------- | ------------------------------------------------- | ------------ |
| `slug` | Form slug as defined in your dashboard (required) | — |
| `button_text` | Custom submit button text | `Submit` |
| `success_message` | Custom success message | Form setting |
### Checkout Shortcode
```html theme={null}
[marzipan_checkout]
```
No attributes are required for the checkout shortcode.
## Product URLs
Product detail pages are automatically accessible at `/store/{product-slug}`. The plugin handles URL rewriting so visitors see the full product page when navigating to a product.
For example, if you have a product with the slug `signature-product`, it will be accessible at:
```
https://yoursite.com/store/signature-product
```
## SEO Integration
The plugin integrates with popular SEO plugins to ensure proper canonical URL handling on product pages:
* Yoast SEO
* RankMath
* SEOPress
* All in One SEO
## Theme Compatibility
The plugin works with any WordPress theme. All auto-generated pages use your active theme's templates, headers, and footers.
If you use a caching plugin, you may need to exclude the cart and checkout pages from caching to ensure real-time cart updates.
## Troubleshooting
### Pages Not Displaying Correctly
If a page was accidentally deleted, you can recreate it from the **Settings > Marzipan** page. Click the **Create** button next to the missing page.
### Products Not Loading
Verify that:
1. Your API token is entered correctly
2. Your Marzipan account is active
3. You have products configured in your Marzipan dashboard
### Styling the Components
See the [Styling guide](/web-components/styling) for customising the appearance of components to match your branding.
## Uninstalling
When the plugin is uninstalled:
* The API token setting is removed
* Rewrite rules are flushed
* Created pages are **not** automatically deleted (you can remove them manually if desired)