Shopify
UpsellBlockBanner

UpsellBlockBanner

Shopify upsell slider that renders products and optionally a funnel slide with nested banners.

Includes the common banner props.

Upsell block

Props

id●
string
required

CMS id.

products●
Array<Shopify.Storefront.Product>
required

Ordered Shopify products rendered as upsell slides.

funnelBanners●
Array<AnyBanner>
required

Optional nested banners rendered as first slide when present.

showNavigation●
boolean
required

Controls previous/next navigation controls in the slider UI.

recommendationMode●
boolean
required

When true, first CMS product is used as seed for Shopify product recommendations.

recommendationLimit●
number
required

Maximum number of recommended products requested from Shopify (1..10).

Behavior notes

  • If funnelBanners is non-empty, it is rendered as the first slide.
  • Product cards show stock state and use storefront product pricing.
  • Recommendation mode resolves recommendation ids against synced local data before rendering.

Example

const banner: UpsellBlockBanner = {
  typename: BannerTypename.UpsellBlock,
  id: 'b_123',
  title: 'Mehr für dich',
  titleTag: 'h2',
  titleAlign: 'left',
  cssId: null,
  cssClasses: null,
  products: [],
  funnelBanners: [],
  showNavigation: true,
  recommendationMode: false,
  recommendationLimit: 10
};
CollectionArchiveBannerProductDetailBlockBanner