Skip to main content
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 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

​
Text Colours

​
Backgrounds & Borders

​
Status Colours

Each status colour has a corresponding background colour for message containers.

​
Badge Colours

​
Account Accents

These accent colours are used as highlights on the customer account page sections:

​
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: 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

Text labels such as Add to Cart, Sale badge and Subscriber badge now live on the Labels tab.

​
Collection

The Collection tab controls how product grids appear.

​
Background

Set a background colour for collection pages.

​
Product Cards

​
Collection Behaviour

Text labels such as Add to Cart, badges and the “More” link text now live on the 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.

​
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.
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
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