Skip to content

Designing with image sections

Image sections allow you to create custom elements and build unique layouts for a wide variety of uses.

Section settings and individual block settings allow you style and position elements to suit various types of imagery.

Slideshow

Slideshow sections allow you to create mobile-friendly slides that can be swiped, dragged or set to autoplay.

Images slides display at full width and will adjust their height based on the dimensions of images uploaded. Read more about image sizes in our Image size guide.

Image with text

The Image with text section allows you to display images in various ratios — full width, three quarter or half width - to establish balance and visual rhythm in your page design.

grid with overlay settings

Parallax scrolling can be enabled for images in this section to add action and depth. Parallax scrolling effects create movement and the illusion of depth by scrolling background elements at a slower pace than foreground elements. For best results, set the text position setting to center.

Image with text examples

Collection heros: image with text examples 01

Full width banners: image with text examples 02

Promotions: image with text examples 03

Information sections: image with text examples 04

Grid with overlay

This section allows you to display content in simple fixed-aspect ratio grids, justified grids, or more freeform offset grids.

Configure individual block settings to specify how blocks fall within the grid and section settings to style text overlays to optimize readability.

Configuring section settings: grid with overlay settings

Configuring block settings: grid with overlay settings

The preserve image aspect ratio block setting will display images at the ratio they're uploaded at, rather than justifying them into the grid. This will allow you to create more free-form, off-set grids with varying image heights.

grid with overlay settings

Grid with overlay examples

Collection grids grid with overlay examples 01

Custom product grids grid with overlay example 02

Product edits and promotions grid with overlay example 03

Grid with text below

This sections create grids with fixed sized blocks that display text elements below images.

Configuring section settings: grid with text below setting

Grid with text below examples

Logo lists: grid with text below example 01

Customer service call-outs: grid with text below example 02

Breakdowns: grid with text below example 03

Profiles: grid with text below example 04