​
Component example

<marzipan-product
  product="product-slug"
  view="mini"
  show-cart-quantity="true"
  show-collection-name="true"
  show-more-link="false"
  show-more-text="More"
  redirect-to-cart="false"
  show-subscriber-pricing="false"
></marzipan-product>

​
Props

Props should be passed as attributes to the component element.
​
product
required
The slug or ID of the specific product to display.
​
view
The display mode for the product component.Options: mini, fullDefaults to mini
​
add-to-cart-text
The text to display on the “add to cart” button.Defaults to Add to Cart
​
bundle-text
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
​
cart-path
The path to the cart page.Defaults to /cart
​
hide-add-to-cart-button
boolean
Whether to hide the “add to cart” button for the product.Defaults to false
​
redirect-to-cart
boolean
Whether to redirect to the cart page after adding the product to the cart.Defaults to false
​
show-cart-quantity
boolean
Whether to show the quantity field for the product.Defaults to false
​
show-collection-name
boolean
Whether to show the name of the collection.Defaults to true
​
show-more-link
boolean
Whether to show a “show more” link.Defaults to false
​
show-more-text
The text to display on the “show more” link.Defaults to More
​
sale-badge-text
The text to display on sale price badges.Defaults to Sale
​
subscriber-badge-text
The text to display on subscriber price badges.Defaults to Subscribers
​
subscriber-price-label
The label text for subscriber pricing.Defaults to for subscribers
​
show-subscriber-pricing
boolean
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

​
--product-mini-view
The main container for mini view.
​
--product-mini-not-found
The not found state container for mini view.
​
--product-mini-not-found-text
The not found text for mini view.
​
--loading-item
The loading state container.
​
--loading-colour
The colour of the placeholder items that is shown while the product is loading.
​
--product-item
The main product container.
​
--product-image-container
The containing div of the product image.
​
--product-image
The product image.
​
--product-mini-low-stock-badge-container
The container for the low stock badge in mini view.
​
--product-mini-low-stock-badge
The low stock badge element in mini view.
​
--product-info-container
The containing div of the product info.
​
--product-name
The product name.
​
--product-price
The product price container.
​
--product-price-badge
The price badge (sale/subscriber) element.
​
--product-sale-price
The sale price display.
​
--product-subscriber-primary-price
The primary subscriber price (for logged-in subscribers).
​
--product-subscriber-price
The subscriber price information.
​
--product-subscriber-price-crossed
The crossed-out subscriber price.
​
--product-regular-price-crossed
The crossed-out regular price.
​
--product-original-price-crossed
The crossed-out original price.
​
--upsell-container
The upsell product selection container.
​
--upsell-select
The upsell product select dropdown.
​
--show-more-link
The “show more” link element.

​
Full View Parts

​
--product-full-view
The main container for full view.
​
--product-not-found
The not found state container for full view.
​
--product-not-found-title
The not found title.
​
--product-not-found-message
The not found message text.
​
--product-not-found-link
The not found return link.
​
--product-full-image-container
The main image container.
​
--product-full-image-loading
The image loading state.
​
--product-full-image
The main product image.
​
--product-full-low-stock-badge-container
The container for the low stock badge in full view.
​
--product-full-low-stock-badge
The low stock badge element in full view.
​
--product-full-thumbnails
The image thumbnails container.
​
--product-full-thumbnail
Individual thumbnail button.
​
--product-full-thumbnail-active
Active thumbnail button state.
​
--product-full-details
The product details section.
​
--product-full-collection
The collection name display.
​
--product-full-name
The product name heading.
​
--product-full-price-container
The price section container.
​
--product-full-price
The product price.
​
--product-full-price-badge
The price badge for full view.
​
--product-full-sale-price
The sale price for full view.
​
--product-full-subscriber-primary-price
The primary subscriber price for full view.
​
--product-full-subscriber-price
The subscriber price for full view.
​
--product-full-subscriber-price-crossed
The crossed-out subscriber price for full view.
​
--product-full-regular-price-crossed
The crossed-out regular price for full view.
​
--product-full-original-price-crossed
The crossed-out original price for full view.
​
--product-full-actions
The actions section (add to cart, options).
​
--upsell-container-full
The upsell container for full view.
​
--upsell-select-full
The upsell select dropdown for full view.
​
--product-full-options
The product options section.
​
--product-full-description
The product description section.
​
--product-full-additional-details
The additional product details section.
​
--product-full-attributes
The product attributes section.
​
--product-full-attribute-name
Individual attribute name.
​
--product-full-attribute-value
Individual attribute value.
​
--product-full-awards
The awards section.
​
--product-full-reviews
The reviews section.
​
--product-full-related-products
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.

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