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.
Content
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.
Last updated