Products
The products component displays a grid of products.
Component example
Props
Props should be passed as attributes to the component element.
Boolean props have a leading dot. This is to allow the boolean props to be passed as attributes to the component element.
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
The path to the cart page.
Defaults to /cart
The slug for the collection to display products from.
Whether to hide the “add to cart” button for the product.
Defaults to false
The number of placeholder items to display while the products are loading.
Defaults to 8
Whether to redirect to the cart page after adding the product to the cart.
Defaults to false
Whether to show the quantity field for the product.
Defaults to false
Whether to show the name of the collection.
Defaults to true
Whether to show a “show more” link.
Defaults to false
The text to display on the “show more” link.
Defaults to Show more
Styling
The following parts are available to style the products 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 containing div of the product info.
The product name.
The product price.
The “show more” link element.
The products 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.