Bento grid
The Bento grid lays out tiles of four sizes in a tight grid: feature tiles with an icon, big number, title and text, image or video tiles, and product tiles. Big numbers can count up as they scroll into view, and tiles can tilt toward the cursor.
How to set it up
Step 1: Add the Bento grid section
- In the theme editor, open the page you want and click Add section under Template.
- Search for Bento grid and select it (1).
Step 2: Set up the grid
- Choose the Row height (1), and turn on Count up big numbers (2) and Tilt tiles toward the cursor.
Step 3: Add tiles
- Add Tile blocks: pick a Size (small, wide, tall, large), an icon, a Big number such as
40hor-45 dB, a title and text. - Add an image (fill the tile, or a floating product shot) or a video that plays muted behind the text, a link and a color scheme per tile.
- Add Product blocks to show a product with its price.
Settings reference
Bento grid
| Grid | |
|---|---|
| Row height | Options: Compact, Medium, Tall. |
| Count up big numbers | Numbers animate when they scroll into view. |
| Tilt tiles toward the cursor | Desktop with mouse only. |
Tile block
| Size | Options: Small, Wide, Tall, Large. |
|---|---|
| Content position | Options: Top, Bottom. |
| Icon | Options: None, Check, Star, Heart, Sparkle, Bolt, Leaf, Globe, Clock, Chat, Mail, Location, Phone, Tag, Gift, Eye, Layers, Shipping, Returns, Warranty, Protection, Refresh, Package, Cart, Headphones, Earbuds, Speaker, Waveform, Noise cancelling, Microphone, Volume, Bluetooth, Battery, USB-C, Plug, Power, Chip, Wi-Fi, Signal, Screen, Phone, Camera, Water resistance, Temperature, Gauge, Gear, Wrench, Hammer, Dimensions, Weight, Precision, Cube. |
| Custom icon | Replaces the icon. Use a square SVG or PNG. |
| Icon size | Slider. |
| Big number | For example 40h, -45 dB or 2×. Leave blank to hide. |
| Title | |
| Text | |
| Media | |
| Image | An image from your files. |
| Image style | Product shot keeps the whole image visible above the text. Options: Fill the tile, Product shot, floating. |
| Video | Plays muted on a loop behind the text. Replaces the image. |
| Link | |
| Link | Where the link goes. |
| Cursor label | Follows the mouse over linked tiles. |
| Color scheme | Colors from Theme settings > Colors. |
Product block
| Product | A product. |
|---|---|
| Size | Options: Small, Wide, Tall, Large. |
| Label | |
| Show price | Turns this on or off. |
| Color scheme | Colors from Theme settings > Colors. |
Section width, corners, padding, color scheme, divider and visibility work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.
How it works
- Tiles fill the grid in order; mix sizes to avoid gaps.
- Tilt only works on desktop with a mouse.