Component example
Props
Props should be passed as attributes to the component element.required
The slug or ID of the specific product to display.
The display mode for the product component.Options:
mini, fullDefaults to miniThe text to display on the “add to cart” button.Defaults to
Add to CartThe 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
/cartboolean
Whether to hide the “add to cart” button for the product.Defaults to
falseboolean
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
MoreThe 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
falseViews
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, key product attributes (e.g. Size, Colour, Material) 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.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