Products with image
The products with image section can help you display a collection of products.
Section settings
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.
Last updated