Shopify
CompactProductDetailBlockBanner

CompactProductDetailBlockBanner

Compact Shopify product detail block with a CMS-preselected variant.

Includes the common banner props.

Compact product detail block

Props

id●
string
required

CMS id.

product●
Shopify.Storefront.Product
required

Shopify storefront product selected in CMS.

selectedVariantId●
string
required

Preselected Shopify variant gid configured in CMS.

Behavior notes

  • Uses selectedVariantId as fixed selection source.
  • Keeps cart integration and quantity handling from the full detail block.
  • Shows variant hint text when a product has multiple variants.

Example

const banner: CompactProductDetailBlockBanner = {
  typename: BannerTypename.CompactProductDetailBlock,
  id: 'b_123',
  title: 'Produkt kompakt',
  titleTag: 'h2',
  titleAlign: 'left',
  cssId: null,
  cssClasses: null,
  product: {} as Shopify.Storefront.Product,
  selectedVariantId: 'gid://shopify/ProductVariant/123'
};
ProductDetailBlockBannerImageProps