Shopify
ProductDetailBlockBanner

ProductDetailBlockBanner

Detailed Shopify product detail block with image gallery, variant selection, pricing, and cart add.

Includes the common banner props.

Product detail block

Props

id
string
required

CMS id.

product
Shopify.Storefront.Product
required

Shopify storefront product selected in CMS.

Behavior notes

  • Chooses a default variant (cheapest) on initial render.
  • Updates gallery and purchase state based on selected variant.
  • Integrates with cart session via merchandise variant id + quantity.
  • Renders additional product metafields in detail tabs.

Example

const banner: ProductDetailBlockBanner = {
  typename: BannerTypename.ProductDetailBlock,
  id: 'b_123',
  title: 'Produktdetails',
  titleTag: 'h2',
  titleAlign: 'left',
  cssId: null,
  cssClasses: null,
  product: {} as Shopify.Storefront.Product
};