Component example
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 bundleThe path to the cart page.Defaults to
/cartrequired
The slug for the collection to display products from.
The text to display on the “add to cart” button.Defaults to
Add to Cartboolean
Whether to hide the “add to cart” button for the product.Defaults to
falsenumber
The number of placeholder items to display while the products are loading.Defaults to
8boolean
Whether to redirect to the cart page after adding the product to the cart.Defaults to
falseboolean
Whether to show the quantity field for the product.Defaults to
falseboolean
Whether to show the name of the collection.Defaults to
trueboolean
Whether to show a “show more” link.Defaults to
falseThe text to display on the “show more” link.Defaults to
Moreboolean
Whether to show the product description.Defaults to
falseThe text to display on sale price badges.Defaults to
SaleThe text to display on subscriber price badges.Defaults to
SubscribersThe label text for subscriber pricing.Defaults to
for subscribersboolean
Whether to show subscriber pricing information.Defaults to
falseStyling
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.