Products with image

The products with image section can help you display a collection of products.

Section settings

Settings	Type	Description
Collection	collection	Select a product collection to feature.
Product list	product_list	Manually select specific products to display.
Image position	select	Position of the background image relative to products: Image left, or Image right.
Products	range	Number of products to display.
Products per row on desktop	select	Number of products per row on desktop: 1 or 2.
Products per row on mobile	select	Number of products per row on mobile: 1 or 2.
Background image
Desktop image	image_picker	Upload background image for desktop view.
Mobile image	image_picker	Upload background image for mobile view.
Overlay opacity	range	Set overlay darkness.
Text
Position	select	Text block alignment over image: Top left, Middle center, Bottom center, and etc.
Color	select	Text color: Light or Dark.
Heading	richtext	Main heading (supports HTML, including italic highlights).
Heading size	range	Adjust heading size.
Highlight
Type	select	Highlight style for emphasized words in the heading: Circle, Underline, Stroke, and etc.
Highlight color	color	Color used for highlight.
Text color	color	Color of the highlighted text.
Text	richtext	Descriptive or promotional content under the heading.
Text size	range	Adjust supporting text size.
Button
Text	text	Button label. Leave blank to link the whole image area.
Link	url	URL to navigate to on button click.
Button color	select	Choose button color style: Primary, Secondary, Black, or White.
Button style	select	Button design: Solid, Outline, Text, and etc.
Size	select	Choose button size: Small, Medium, or Large.
Colors
Background color	color	Set section background color.
Mobile layout
Enable slider	checkbox	Enable horizontal scrolling slider for mobile devices.
Section spacing
Width	select	Section width: Full width padded or Page width.
Padding top	range	Top spacing in pixels.
Padding bottom	range	Bottom spacing in pixels.