Grid bento

Use the Grid bento section to build unique layouts with flexible content and promo blocks

Key features

Highly flexible grid layout

6 content block types

Custom block height and width

Images and autoplay videos

Mobile and tablet layout options

Blocks

Media and text

Collection

Countdown

Product

Product card

Promo

Grid layout

---

For the general gird layout, set the gap between blocks and the row height for desktop and mobile.

_{Click section to find settings}

Gap	Use globals Custom
Row height	320 - 600px
Mobile row height	320 - 600px (applied as minimum)

Grid items style

Apply general styles for all grid items: adjust card padding around grid content, make the entire card clickable, and enable the corner radius and border.

_{Click section to find settings}

Card padding	Use globals Custom
Make entire card clickable
Corner radius
Border

Add grid blocks

---

Add and re-arrange 5 different types of grid blocks. You can customize the horizontal and vertical span of each block to create unique collage layouts.

Click (+) Add block to add grid blocks and use the drag handles ⋮⋮ to re-order blocks.

Media and text

Display text and buttons with a color, image, or autoplay video background.

Layout

_{Click Media and text block to find settings}

Horizontal span	1 - 4
Vertical span	1 - 2
Tablet horizontal span	1 - 2
Tablet vertical span	1 - 2
Mobile vertical span	1 - 2

Content layout

_{Click Media and text block to find settings}

Max width	Full width Custom
Position	Top / Middle / Bottom Left / Center / Right
Mobile position	Top / Middle / Bottom Left / Center / Right
Alignment	Left / Center / Right
Mobile alignment	Left / Center / Right

Content

_{Click Media and text block to find settings}

Overline	Add text for a small heading.
Overline size	1 - 4
Heading	Add text for a heading.
Heading size	1 - 4
Text	Add rich text.
Text size	1 - 4

Buttons

_{Click Media and text block to find settings}

Pin button to bottom of card
Button type	Button Icon button
Link	Enter the URL for the button to link to.
Label	Add text to the button.
Size	XS S M L
Style	Solid Outline Text
Color scheme	Default Primary Secondary Soft Overlay Overlay soft
Full width	No All screen sizes Mobile only

Background

_{Click Media and text block to find settings}

Background type	Color Image Video
Color
Background color	Color scheme Custom
Image
Image	Select or upload image.
Custom mobile image
Overlay opacity	0 - 100%
Color scheme	Use for overlay text and tint color.
Video
Video	Select or upload .mp4 file (recommended: > 10 seconds)
Video focal point	Select most important area of video content to keep centered and avoid unwanted clipping.
Custom mobile video	Optional: Upload alternate .mp4 file to best fit mobile devices.
Color scheme	Use for overlay text and tint color.

Collection

Feature one of your collections with background image or video, description, and button. You can display the number of products in the collection.

Layout

_{Click Collection block to find settings}

Horizontal span	1 - 4
Vertical span	1 - 2
Tablet horizontal span	1 - 2
Tablet vertical span	1 - 2
Mobile vertical span	1 - 2

Content layout

_{Click Collection block to find settings}

Max width	Full width Custom
Position	Top / Middle / Bottom Left / Center / Right
Mobile position	Top / Middle / Bottom Left / Center / Right
Alignment	Left / Center / Right
Mobile alignment	Left / Center / Right

Content

_{Click Collection block to find settings}

Collection	Select a collection from your Shopify admin.
Override collection name	Enter custom collection heading.
Heading size	1 - 4
Collection description	Enter subheading text with collection description.
Text size	1 - 4
Product count

Buttons

_{Click Collection block to find settings}

Pin button to bottom of card
Button type	Button Icon button
Link	Enter the URL for the button to link to.
Label	Add text to the button.
Size	XS S M L
Style	Solid Outline Text
Color scheme	Default Primary Secondary Soft Overlay Overlay soft
Full width	No All screen sizes Mobile only

Background

_{Click Collection block to find settings}

Media type	Collection (image) Image Video
Overlay opacity	0 - 100%
Color scheme	Use for overlay text and tint color.
Collection	Shows featured collection image from Shopify admin.
Image
Image	Select or upload image.
Custom mobile image
Video
Video	Select or upload .mp4 file (recommended: > 10 seconds)
Video focal point	Select most important area of video content to keep centered and avoid unwanted clipping.
Custom mobile video	Optional: Upload alternate .mp4 file to best fit mobile devices.

Countdown

Display media and text with a live countdown timer.

Layout

_{Click Countdown block to find settings}

Horizontal span	2 - 4
Vertical span	1 - 2
Tablet vertical span	1 - 2
Mobile vertical span	1 - 2

Content layout

_{Click Countdown block to find settings}

Max width	Full width Custom
Position	Top / Middle / Bottom Left / Center / Right
Mobile position	Top / Middle / Bottom Left / Center / Right
Alignment	Left / Center / Right
Mobile alignment	Left / Center / Right

Countdown timer

_{Click Countdown block to find settings}

Timer placement	Top Bottom
Font	Heading Body
Text size	20 - 120px
Mobile text size	20 - 60px
Vertical gap	1 - 4

Year	Enter the year of the end-date.
Month	Select the month of the end-date.
Day	Select the day of the end-date.
Hour	Select the hour of the end-time.
Minute	Select the minutes of the end-time.
Time zone	Choose to display the timer according to your Shop time zone or the Visitor time zone.
When complete	Leave timer at zero Hide timer

Content

_{Click Countdown block to find settings}

Overline	Add text for a small heading.
Overline size	1 - 4
Heading	Add text for a heading.
Heading size	1 - 4
Text	Add rich text.
Text size	1 - 4

Buttons

_{Click Countdown block to find settings}

Button type	Button Icon button
Link	Enter the URL for the button to link to.
Label	Add text to the button.
Size	XS S M L
Style	Solid Outline Text
Color scheme	Default Primary Secondary Soft Overlay Overlay soft
Full width	No All screen sizes Mobile only

Background

_{Click Countdown block to find settings}

Background type	Color Image Video
Color
Background color	Color scheme Custom
Image
Image	Select or upload image.
Custom mobile image
Overlay opacity	0 - 100%
Color scheme	Use for overlay text and tint color.
Video
Video	Select or upload .mp4 file (recommended: > 10 seconds)
Video focal point	Select most important area of video content to keep centered and avoid unwanted clipping.
Custom mobile video	Optional: Upload alternate .mp4 file to best fit mobile devices.
Color scheme	Use for overlay text and tint color.

Product

Feature one of your products with background image or video, description, and button. You can display the number of products in the collection.

Layout

_{Click Product block to find settings}

Horizontal span	1 - 4
Vertical span	1 - 2
Tablet horizontal span	1 - 2
Tablet vertical span	1 - 2
Mobile vertical span	1 - 2

Content layout

_{Click Product block to find settings}

Max width	Full width Custom
Position	Top / Middle / Bottom Left / Center / Right
Mobile position	Top / Middle / Bottom Left / Center / Right
Alignment	Left / Center / Right
Mobile alignment	Left / Center / Right

Content

_{Click Product block to find settings}

Product	Select a product from your Shopify admin.
Product name size	1 - 6
Space below product name	1 - 8
Price size	1 - 4
Vendor	Enter subheading text with collection description.
Out of stock badge	1 - 4
Badge position	Above name Above price
Badge background color
Badge text color
Sale price color

Buttons

_{Click Product block to find settings}

Pin button to bottom of card
Button type	Button Icon button
Link	Enter the URL for the button to link to.
Label	Add text to the button.
Size	XS S M L
Style	Solid Outline Text
Color scheme	Default Primary Secondary Soft Overlay Overlay soft
Full width	No All screen sizes Mobile only

Background

_{Click Product block to find settings}

Media type	Collection (image) Image Video
Overlay opacity	0 - 100%
Color scheme	Use for overlay text and tint color.
Collection	Shows featured collection image from Shopify admin.
Image
Image	Select or upload image.
Custom mobile image
Video
Video	Select or upload .mp4 file (recommended: > 10 seconds)
Video focal point	Select most important area of video content to keep centered and avoid unwanted clipping.
Custom mobile video	Optional: Upload alternate .mp4 file to best fit mobile devices.

Product card

Display product card with color, image, or autoplay video background.

Layout

_{Click Product card block to find settings}

Horizontal span	1 - 4
Vertical span	1 - 2
Tablet horizontal span	1 - 2
Tablet vertical span	1 - 2
Mobile vertical span	1 - 2

Product card

_{Click Product card block to find settings}

Product	Select one product to display as ca ard with a "View product" button.
Position	Top / Middle / Bottom Left / Center / Right
Mobile position	Top / Middle / Bottom

Image ratio	Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2) Custom
Image width	80 - 140px
Mobile image width	60 - 120px
Card width (Desktop only)	270 - 420px

Color scheme	Default Inverse Soft Accent Accent inverse Overlay Color scheme 1 Color scheme 2
Vendor
Out of stock badge
Badge background color
Badge text color
Sale price color
Card padding	Use globals Custom (1 - 8)
Corner radius
Button style	Solid Outline Text
Button color scheme	Default Primary Secondary Soft Overlay Overlay soft

Content

_{Click Product card block to find settings}

Product	Select a product from your Shopify admin.
Product name size	1 - 6
Space below product name	1 - 8
Price size	1 - 4
Vendor	Enter subheading text with collection description.
Out of stock badge	1 - 4
Badge position	Above name Above price
Badge background color
Badge text color
Sale price color

Background

_{Click Product card block to find settings}

Background type	Color Image Video
Color
Background color	Color scheme Custom
Image
Image	Select or upload image.
Custom mobile image
Overlay opacity	0 - 100%
Color scheme	Use for overlay text and tint color.
Video
Video	Select or upload .mp4 file (recommended: > 10 seconds)
Video focal point	Select most important area of video content to keep centered and avoid unwanted clipping.
Custom mobile video	Optional: Upload alternate .mp4 file to best fit mobile devices.
Color scheme	Use for overlay text and tint color.

Promo

Display text and buttons with a color, image, or autoplay video background.

Layout

_{Click Promo block to find settings}

Horizontal span	1 - 4
Vertical span	1 - 2
Tablet horizontal span	1 - 2
Tablet vertical span	1 - 2
Mobile vertical span	1 - 2

Content layout

_{Click Promo block to find settings}

Max width	Full width Custom
Position	Top / Middle / Bottom Left / Center / Right
Mobile position	Top / Middle / Bottom Left / Center / Right
Alignment	Left / Center / Right
Mobile alignment	Left / Center / Right

Promo content

_{Click Promo block to find settings}

Overline	Add text for a small heading.
Overline size	1 - 4
Promo text	Add text for a promo heading.
Promo text size	1 - 4
Text below	Add rich text.
Text size	1 - 4

Color scheme	Default Inverse Soft Accent Accent inverse Overlay Color scheme 1 Color scheme 2
Border
Corner radius
Drop shadow

Button

_{Click Promo block to find settings}

Pin button to bottom of card
Button type	Button Icon button
Link	Enter the URL for the button to link to.
Label	Add text to the button.
Size	XS S M L
Style	Solid Outline Text
Color scheme	Default Primary Secondary Soft Overlay Overlay soft
Full width	No All screen sizes Mobile only

Background

_{Click Promo block to find settings}

Background type	Color Image Video
Color
Background color	Color scheme Custom
Image
Image	Select or upload image.
Custom mobile image
Overlay opacity	0 - 100%
Color scheme	Use for overlay text and tint color.
Video
Video	Select or upload .mp4 file (recommended: > 10 seconds)
Video focal point	Select most important area of video content to keep centered and avoid unwanted clipping.
Custom mobile video	Optional: Upload alternate .mp4 file to best fit mobile devices.
Color scheme	Use for overlay text and tint color.

Section styles

---

Customize general style options for the section and content area. Settings for Content area allow you to adjust the width, borders, and dropshadow of the container of the section content.

_{Click section to find settings}

Content area

Full width

Section background and content span the screen's full width.

Full width padded

Section spans the screen's full width with some padding.

Page width

Section background and content span the page width.

Width	Full width Full width padded Page width
Full width on mobile	Available for Full width padded option.
Border	Top only Bottom only Both
Corner radius	Available for Full width padded and Page width options.
Dropshadow

Section

Top padding	0 - 27
Bottom padding	0 - 27
Dividers	None Top only Bottom only Both
Force dividers full width
Color scheme	Default Inverse Soft Accent Accent inverse Overlay Color scheme 1 Color scheme 2
Anchor ID	Link directly to the section on any page. Learn more