` 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`
### 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-1).
#### 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).
#### 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
# 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/case, where case 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).
#### Upsell Products
For products with upsell options, the component displays a dropdown selection that appears on hover, allowing customers to choose between different product variants before adding to cart.
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 > 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 |
### 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
* **Product image corners** — Set a separate radius for product images
### 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. Region, Grape Variety, Vintage) 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. Tasting Notes) |
| 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 |
| Redirect to Cart | Whether to redirect to the cart page after adding a product |
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) |
| 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 |
| Redirect to Cart | Redirect to cart after adding a product |
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 |
### 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
### 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
# 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 use 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/case, where case 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. Region, Grape Variety, Vintage) are displayed directly on the mini view product card. You choose which attributes to show and their display order from Settings > Web Components > Product.
#### 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 > 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 colors, border radius, and font size. Override a few variables and all components update automatically. This is the quickest way to match your brand colors.
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 colors, 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;
}
```
### Color Variables - Primary
| Variable | Default | Description |
| :------------------------------- | :-------- | :--------------------------- |
| `--marzipan-color-primary` | `#3b82f6` | Primary brand color |
| `--marzipan-color-primary-hover` | `#60a5fa` | Primary color on hover state |
### Color Variables - Secondary
| Variable | Default | Description |
| :--------------------------------- | :-------- | :----------------------------- |
| `--marzipan-color-secondary` | `#e5e7eb` | Secondary background color |
| `--marzipan-color-secondary-hover` | `#d1d5db` | Secondary color on hover state |
### Color 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 |
### Color Variables - Text
| Variable | Default | Description |
| :------------------------------ | :-------- | :-------------------------------------- |
| `--marzipan-color-text` | `#111827` | Primary text color |
| `--marzipan-color-text-muted` | `#6b7280` | Muted/secondary text color |
| `--marzipan-color-text-inverse` | `#ffffff` | Inverse text color for dark backgrounds |
### Color Variables - Backgrounds
| Variable | Default | Description |
| :---------------------------- | :------------------------- | :----------------------------------- |
| `--marzipan-color-bg` | `#ffffff` | Primary background color |
| `--marzipan-color-bg-muted` | `#f9fafb` | Muted background color |
| `--marzipan-color-bg-overlay` | `rgba(107, 114, 128, 0.4)` | Overlay background with transparency |
### Color Variables - Borders
| Variable | Default | Description |
| :------------------------------ | :-------- | :-------------------- |
| `--marzipan-color-border` | `#d1d5db` | Standard border color |
| `--marzipan-color-border-muted` | `#e5e7eb` | Muted border color |
### Color Variables - Status
| Variable | Default | Description |
| :---------------------------- | :-------- | :----------------------- |
| `--marzipan-color-error` | `#ef4444` | Error state color |
| `--marzipan-color-error-bg` | `#fef2f2` | Error background color |
| `--marzipan-color-success` | `#22c55e` | Success state color |
| `--marzipan-color-success-bg` | `#f0fdf4` | Success background color |
| `--marzipan-color-warning` | `#f59e0b` | Warning state color |
| `--marzipan-color-warning-bg` | `#fffbeb` | Warning background color |
### Color Variables - Badges
| Variable | Default | Description |
| :---------------------------- | :-------- | :--------------------- |
| `--marzipan-color-badge-bg` | `#ffedd5` | Badge background color |
| `--marzipan-color-badge-text` | `#9a3412` | Badge text color |
### Color Variables - Inputs
| Variable | Default | Description |
| :----------------------------------- | :-------- | :------------------------------ |
| `--marzipan-color-input-bg` | `#ffffff` | Input field background color |
| `--marzipan-color-input-disabled-bg` | `#f9fafb` | Disabled input background color |
### 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="red-wines"
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="reserve-cabernet" 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 wines!"]
```
| 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 `reserve-cabernet`, it will be accessible at:
```
https://yoursite.com/store/reserve-cabernet
```
## 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 customizing 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)