Product Items

Product Item

A simple product item wrapped in a li-snippet tag for reusability across your theme. Use li-snippet:product="product" to pass a product object into the snippet.

Product Item with variant Selector

A simple product item featuring a variant selector for choosing options like size or color.

Product Item with hover effect

A product item featuring a hover effect that shows the second product image. You need the following CSS to show the hover effect:

.product-item_component:hover 
  .product-item_overlay,
.product-item_component:has(:focus-visible) 
  .product-item_overlay {
	opacity: 1
}

Product Item with variant hover effect

A product item featuring a hover effect that shows variant images. You need the following CSS to show the hover effect:

.product-item_component:hover 
  .product-item_overlay,
.product-item_component:has(:focus-visible) 
  .product-item_overlay {
	opacity: 1
}