Image with product

The Image with product section combines a full-width or padded image banner with an overlay and integrated product display, making it ideal for promotional storytelling. It supports various responsive image heights, custom overlay options, a connected product card, and flexible call-to-action buttons.

This section is commonly used for hero images, promotional features, or highlighting a product in a lifestyle context. It supports up to 5 content blocks, including headings, text, buttons, and custom Liquid code.

Settings	Type	Description
Content
Image	image_picker	Upload image. Recommended size: 3200x1200px JPG. Learn more
Image link	url	Optional link to wrap the image.
Product
Product	product	Choose a Shopify product to display.
Text	textarea	Descriptive text to accompany the product.
Text size	select	Controls font size for the description text: Extra small, Small, Medium, Large, or Extra large
Enable quick add	checkbox	Adds a button to allow quick add-to-cart.
Background	color	Background color for the product card.
Text	color	Text color for the product card.
Layout
Width	select	Controls section width: Full width or Full width padded.
Desktop
Height	select	Sets section height on desktop devices. Multiple fixed and screen-relative options.
Mobile
Image	image_picker	Upload mobile-specific image. Recommended: 1200x1600px JPG.
Height	select	Section height on mobile. Multiple options including screen-based and fixed pixel heights.
Text alignment	select	Vertical alignment of text on mobile: Top, Middle, or Bottom.
Colors
Color scheme	color_scheme	Choose from predefined color schemes.
Show text background	checkbox	Display a background behind the text content.
Overlay opacity	range	Adjusts background overlay opacity. Affects text contrast.
Overlay behind text only	checkbox	Restricts overlay to text area only (requires non-zero overlay opacity).
Padding
Top	range	Padding above content.
Bottom	range	Padding below content.
Advanced
Show placeholder image	checkbox	Show a default placeholder if no image is set. Disable when using metafields.