Skip to main content

​
Component example

<marzipan-collection
  collection="store"
  placeholder-items="3"
  show-cart-quantity="true"
  show-collection-name="false"
  show-more-link="true"
  show-more-text="Learn more"
  redirect-to-cart="false"
  show-description="false"
></marzipan-collection>

​
Props

Props should be passed as attributes to the component element.
​
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
​
collection
required
The slug for the collection to display products from.
​
add-to-cart-text
The text to display on the “add to cart” button.Defaults to Add to Cart
​
hide-add-to-cart-button
boolean
Whether to hide the “add to cart” button for the product.Defaults to false
​
placeholder-items
number
The number of placeholder items to display while the products are loading.Defaults to 8
​
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
​
show-description
boolean
Whether to show the product description.Defaults to false
​
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

​
Styling

The following parts are available to style the collection component:
​
--loading-grid
The containing div of placeholder items that is shown while the products are loading.
​
--loading-colour
The colour of the placeholder items that is shown while the products are loading.
​
--product-grid
The containing ul of the products grid.
​
--product-grid-item
The containing li of a product.
​
--product-image-container
The containing div of the product image.
​
--product-image
The product image.
​
--product-collection-low-stock-badge-container
The container for the low stock badge.
​
--product-collection-low-stock-badge
The low stock badge element.
​
--product-info-container
The containing div of the product info.
​
--product-name
The product name.
​
--product-price
The product price.
​
--product-description
The product description 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-hover
The upsell product selection container (visible on hover).
​
--upsell-dropdown
The upsell product dropdown container.
​
--upsell-select-hover
The upsell product select dropdown (hover state).
​
--show-more-link
The “show more” link element.
The collection component uses the 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. 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.