Bento grid
How to use the Bento grid section in the Meditative Folks Theme.
Bento grid
At a glance
A modular bento-style grid of image, text, and button tiles for modern homepage layouts.
Where to find it
- Theme editor path: Online Store → Customize → select the relevant page → Bento grid
- Add to a page: Add via Add section → category Media.
Settings
Content
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Heading | Controls “Heading” on the storefront. Open the theme editor to preview live. | Explore our world | Always |
| Use global H2 heading styles | When on, uses the matching style from Theme settings. Turn off to style only this section or block. | Yes | Always |
| Heading font size (mobile) | Sets heading font size (mobile) in pixels for the matching screen size. | 32 | Use global heading styles is off |
| Heading font size (tablet) | Sets heading font size (tablet) in pixels for the matching screen size. | 40 | Use global heading styles is off |
| Heading font size (desktop) | Sets heading font size (desktop) in pixels for the matching screen size. | 48 | Use global heading styles is off |
| Heading font weight | Sets how bold heading text appears. | 700 | Use global heading styles is off |
| Subheading | Controls “Subheading” on the storefront. Open the theme editor to preview live. | A flexible grid you can shape any way you like | Always |
| Use global subheading styles | When on, uses the matching style from Theme settings. Turn off to style only this section or block. | Yes | Always |
| Subheading font size (mobile) | Sets subheading font size (mobile) in pixels for the matching screen size. | 18 | Use global subheading styles is off |
| Subheading font size (tablet) | Sets subheading font size (tablet) in pixels for the matching screen size. | 20 | Use global subheading styles is off |
| Subheading font size (desktop) | Sets subheading font size (desktop) in pixels for the matching screen size. | 21 | Use global subheading styles is off |
| Subheading max width | Controls “Subheading max width” on the storefront. Open the theme editor to preview live. | 500 | subHeading is filled in |
| Hide heading and subheading visually | Controls “Hide heading and subheading visually” on the storefront. Open the theme editor to preview live. | No | Always |
| Content alignment | Controls “Content alignment” on the storefront. Open the theme editor to preview live. | center | Always |
| Button text | Controls “Button text” on the storefront. Open the theme editor to preview live. | — | Always |
| Button link | Controls “Button link” on the storefront. Open the theme editor to preview live. | — | Always |
| Button variant | Chooses the button look (primary, secondary, outline, or ghost). | primary | Button text is filled in |
| Button size | Chooses the button size from Theme settings → Button sizes. | medium | Button text is filled in |
| Use global button styles | When on, uses the matching style from Theme settings. Turn off to style only this section or block. | Yes | Button text is filled in |
| Button background | Controls “Button background” on the storefront. Open the theme editor to preview live. | #111111 | Button text is filled in and Use global button styles is off |
| Button text color | Controls “Button text color” on the storefront. Open the theme editor to preview live. | #FFFFFF | Button text is filled in and Use global button styles is off |
| Enable shimmer | Adds a moving highlight across the button or ribbon. | Yes | Button text is filled in |
Grid layout
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Columns (mobile) | How many columns show on phones. | 1 | Always |
| Columns (tablet) | How many columns show on tablets. | 2 | Always |
| Columns (desktop) | How many columns show on desktop. | 4 | Always |
| Grid layout algorithm | Controls “Grid layout algorithm” on the storefront. Open the theme editor to preview live. | row dense | Always |
| Horizontal gap | Controls “Horizontal gap” on the storefront. Open the theme editor to preview live. | 16 | Always |
| Vertical gap | Controls “Vertical gap” on the storefront. Open the theme editor to preview live. | 16 | Always |
| Row height mode | Controls “Row height mode” on the storefront. Open the theme editor to preview live. | auto | Always |
| Fixed row height | Controls “Fixed row height” on the storefront. Open the theme editor to preview live. | 240 | row height mode == 'fixed' |
| Minimum tile height | Controls “Minimum tile height” on the storefront. Open the theme editor to preview live. | 200 | Always |
| Equalize row heights on desktop | Makes tiles in the same row share the tallest tile height. | No | Always |
Section spacing
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Padding top | Adds empty space (padding top) around the section content. | 24 | Always |
| Padding bottom | Adds empty space (padding bottom) around the section content. | 24 | Always |
Color scheme
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Color scheme | Applies a color scheme from Theme settings → Colors. | scheme-1 | Always |
Blocks
| Block | Purpose | Limit |
|---|---|---|
| Image tile | Add and configure in theme editor. | — |
| Text tile | Add and configure in theme editor. | — |
| Product tile | Add and configure in theme editor. | — |
| Collection tile | Add and configure in theme editor. | — |
| Video tile | Add and configure in theme editor. | — |
| Button tile | Add and configure in theme editor. | — |
Image tile settings
Grid placement
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Column span (mobile) | Controls “Column span (mobile)” on the storefront. Open the theme editor to preview live. | 1 | Always |
| Column span (tablet) | Controls “Column span (tablet)” on the storefront. Open the theme editor to preview live. | 1 | Always |
| Column span (desktop) | Controls “Column span (desktop)” on the storefront. Open the theme editor to preview live. | 1 | Always |
| Row span (desktop) | Controls “Row span (desktop)” on the storefront. Open the theme editor to preview live. | 1 | Always |
Image
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Image | Controls the image setting “Image”. Upload clear photos for best results. | — | Always |
| Image (mobile override) | Controls the image setting “Image (mobile override)”. Upload clear photos for best results. | — | Always |
| Image (tablet override) | Controls the image setting “Image (tablet override)”. Upload clear photos for best results. | — | Always |
| Image (desktop override) | Controls the image setting “Image (desktop override)”. Upload clear photos for best results. | — | Always |
| Image alt text | Controls the image setting “Image alt text”. Upload clear photos for best results. | Bento grid image | Always |
| Image focal point | Controls the image setting “Image focal point”. Upload clear photos for best results. | center | Always |
| Link | Controls “Link” on the storefront. Open the theme editor to preview live. | — | Always |
| Accessibility label | Describes the link for screen readers. | Link to bento grid image | Always |
Card content
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Heading | Controls “Heading” on the storefront. Open the theme editor to preview live. | — | Always |
| Text | Controls “Text” on the storefront. Open the theme editor to preview live. | — | Always |
| Button text | Controls “Button text” on the storefront. Open the theme editor to preview live. | — | Always |
| Button variant | Chooses the button look (primary, secondary, outline, or ghost). | primary | Button text is filled in |
| Button size | Chooses the button size from Theme settings → Button sizes. | medium | Button text is filled in |
| Enable shimmer | Adds a moving highlight across the button or ribbon. | Yes | Button text is filled in |
| Content position | Controls “Content position” on the storefront. Open the theme editor to preview live. | bottom-left | Always |
| Corner radius | Controls “Corner radius” on the storefront. Open the theme editor to preview live. | 12 | Always |
| Content padding | Adds empty space (content padding) around the section content. | 20 | Always |
| Hover effect | Controls “Hover effect” on the storefront. Open the theme editor to preview live. | scale | Always |
Overlay content
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Show overlay | Turns “Show overlay” on or off on the storefront. | Yes | Always |
| Overlay intensity | Controls “Overlay intensity” on the storefront. Open the theme editor to preview live. | balanced | Show overlay is on |
Color scheme
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Color scheme | Applies a color scheme from Theme settings → Colors. | scheme-1 | Always |
Text tile settings
Grid placement
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Column span (mobile) | Controls “Column span (mobile)” on the storefront. Open the theme editor to preview live. | 1 | Always |
| Column span (tablet) | Controls “Column span (tablet)” on the storefront. Open the theme editor to preview live. | 1 | Always |
| Column span (desktop) | Controls “Column span (desktop)” on the storefront. Open the theme editor to preview live. | 1 | Always |
| Row span (desktop) | Controls “Row span (desktop)” on the storefront. Open the theme editor to preview live. | 1 | Always |
Content
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Heading | Controls “Heading” on the storefront. Open the theme editor to preview live. | Tile heading | Always |
| Heading font size | Sets heading font size in pixels for the matching screen size. | 24 | Heading is filled in |
| Text | Controls “Text” on the storefront. Open the theme editor to preview live. | Add your message here. | Always |
| Body font size | Sets body font size in pixels for the matching screen size. | 16 | text != blank |
| Icon | Controls “Icon” on the storefront. Open the theme editor to preview live. | none | An icon is selected |
| Icon size | Controls “Icon size” on the storefront. Open the theme editor to preview live. | 32 | An icon is selected |
| Icon color | Controls “Icon color” on the storefront. Open the theme editor to preview live. | #111111 | An icon is selected |
| Button text | Controls “Button text” on the storefront. Open the theme editor to preview live. | — | Always |
| Button link | Controls “Button link” on the storefront. Open the theme editor to preview live. | — | Button text is filled in |
| Button variant | Chooses the button look (primary, secondary, outline, or ghost). | primary | Button text is filled in |
| Button size | Chooses the button size from Theme settings → Button sizes. | medium | Button text is filled in |
| Enable shimmer | Adds a moving highlight across the button or ribbon. | Yes | Button text is filled in |
| Vertical alignment | Controls “Vertical alignment” on the storefront. Open the theme editor to preview live. | center | Always |
| Horizontal alignment | Controls “Horizontal alignment” on the storefront. Open the theme editor to preview live. | center | Always |
| Corner radius | Controls “Corner radius” on the storefront. Open the theme editor to preview live. | 12 | Always |
| Content padding | Adds empty space (content padding) around the section content. | 24 | Always |
| Hover effect | Controls “Hover effect” on the storefront. Open the theme editor to preview live. | none | Always |
Border
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Show border | Turns “Show border” on or off on the storefront. | No | Always |
| Border width | Controls “Border width” on the storefront. Open the theme editor to preview live. | 1 | show border is on |
| Border color | Controls “Border color” on the storefront. Open the theme editor to preview live. | #000000 | show border is on |
Background
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Color scheme | Applies a color scheme from Theme settings → Colors. | scheme-1 | Always |
| Background style | Controls “Background style” on the storefront. Open the theme editor to preview live. | solid | Always |
| Background color | Controls “Background color” on the storefront. Open the theme editor to preview live. | #F5F5F5 | background style == 'custom' |
| Text color | Controls “Text color” on the storefront. Open the theme editor to preview live. | #111111 | background style == 'custom' |
| Gradient start | Controls “Gradient start” on the storefront. Open the theme editor to preview live. | #111111 | Background style is Gradient |
| Gradient end | Controls “Gradient end” on the storefront. Open the theme editor to preview live. | #444444 | Background style is Gradient |
| Gradient angle | Controls “Gradient angle” on the storefront. Open the theme editor to preview live. | 135 | Background style is Gradient |
Product tile settings
Grid placement
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Column span (mobile) | Controls “Column span (mobile)” on the storefront. Open the theme editor to preview live. | 1 | Always |
| Column span (tablet) | Controls “Column span (tablet)” on the storefront. Open the theme editor to preview live. | 1 | Always |
| Column span (desktop) | Controls “Column span (desktop)” on the storefront. Open the theme editor to preview live. | 1 | Always |
| Row span (desktop) | Controls “Row span (desktop)” on the storefront. Open the theme editor to preview live. | 1 | Always |
Product
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Product | Controls “Product” on the storefront. Open the theme editor to preview live. | — | Always |
Content card
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Show image | Turns “Show image” on or off on the storefront. | Yes | Always |
| Show title | Turns “Show title” on or off on the storefront. | Yes | Always |
| Title font size | Sets title font size in pixels for the matching screen size. | 24 | show title |
| Title font weight | Sets how bold title text appears. | 600 | show title |
| Title color | Controls “Title color” on the storefront. Open the theme editor to preview live. | #ffffff | show title |
| Show price | Turns “Show price” on or off on the storefront. | Yes | Always |
| Price font size | Sets price font size in pixels for the matching screen size. | 16 | show price |
| Price font weight | Sets how bold price text appears. | 500 | show price |
| Price color | Controls “Price color” on the storefront. Open the theme editor to preview live. | #ffffff | show price |
| Show quick buy | Turns “Show quick buy” on or off on the storefront. | Yes | Always |
Content placement
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Content direction | Controls “Content direction” on the storefront. Open the theme editor to preview live. | column | Always |
| Vertical alignment | Controls “Vertical alignment” on the storefront. Open the theme editor to preview live. | center | Always |
| Horizontal alignment | Controls “Horizontal alignment” on the storefront. Open the theme editor to preview live. | center | Always |
| Content padding | Adds empty space (content padding) around the section content. | 20 | Always |
| Corner radius | Controls “Corner radius” on the storefront. Open the theme editor to preview live. | 12 | Always |
| Hover effect | Controls “Hover effect” on the storefront. Open the theme editor to preview live. | lift | Always |
| Button variant | Chooses the button look (primary, secondary, outline, or ghost). | outline | Always |
| Button size | Chooses the button size from Theme settings → Button sizes. | small | Always |
| Enable shimmer | Adds a moving highlight across the button or ribbon. | Yes | Always |
Overlay
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Show overlay | Turns “Show overlay” on or off on the storefront. | Yes | Always |
| Overlay intensity | Controls “Overlay intensity” on the storefront. Open the theme editor to preview live. | balanced | show overlay |
Color scheme
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Color scheme | Applies a color scheme from Theme settings → Colors. | scheme-1 | Always |
Collection tile settings
Grid placement
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Column span (mobile) | Controls “Column span (mobile)” on the storefront. Open the theme editor to preview live. | 1 | Always |
| Column span (tablet) | Controls “Column span (tablet)” on the storefront. Open the theme editor to preview live. | 1 | Always |
| Column span (desktop) | Controls “Column span (desktop)” on the storefront. Open the theme editor to preview live. | 1 | Always |
| Row span (desktop) | Controls “Row span (desktop)” on the storefront. Open the theme editor to preview live. | 1 | Always |
Collection
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Collection | Controls “Collection” on the storefront. Open the theme editor to preview live. | — | Always |
| Custom image | Controls the image setting “Custom image”. Upload clear photos for best results. | — | Always |
| Custom title | Controls “Custom title” on the storefront. Open the theme editor to preview live. | — | Always |
| Accessibility label | Controls “Accessibility label” on the storefront. Open the theme editor to preview live. | — | Always |
Content card
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Show title | Turns “Show title” on or off on the storefront. | Yes | Always |
| Title font size | Sets title font size in pixels for the matching screen size. | 24 | show title |
| Title font weight | Sets how bold title text appears. | 600 | show title |
| Title color | Controls “Title color” on the storefront. Open the theme editor to preview live. | #ffffff | show title |
| Show product count | Turns “Show product count” on or off on the storefront. | Yes | Always |
| Product count font size | Sets product count font size in pixels for the matching screen size. | 16 | show product count |
| Product count font weight | Sets how bold product count text appears. | 400 | show product count |
| Product count color | Controls “Product count color” on the storefront. Open the theme editor to preview live. | #ffffff | show product count |
Content placement
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Content direction | Controls “Content direction” on the storefront. Open the theme editor to preview live. | column | Always |
| Vertical alignment | Controls “Vertical alignment” on the storefront. Open the theme editor to preview live. | center | Always |
| Horizontal alignment | Controls “Horizontal alignment” on the storefront. Open the theme editor to preview live. | center | Always |
| Content padding | Adds empty space (content padding) around the section content. | 20 | Always |
| Corner radius | Controls “Corner radius” on the storefront. Open the theme editor to preview live. | 12 | Always |
| Hover effect | Controls “Hover effect” on the storefront. Open the theme editor to preview live. | scale | Always |
Overlay
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Show overlay | Turns “Show overlay” on or off on the storefront. | Yes | Always |
| Overlay intensity | Controls “Overlay intensity” on the storefront. Open the theme editor to preview live. | balanced | show overlay |
Color scheme
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Color scheme | Applies a color scheme from Theme settings → Colors. | scheme-1 | Always |
Video tile settings
Grid placement
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Column span (mobile) | Controls “Column span (mobile)” on the storefront. Open the theme editor to preview live. | 1 | Always |
| Column span (tablet) | Controls “Column span (tablet)” on the storefront. Open the theme editor to preview live. | 1 | Always |
| Column span (desktop) | Controls “Column span (desktop)” on the storefront. Open the theme editor to preview live. | 2 | Always |
| Row span (desktop) | Controls “Row span (desktop)” on the storefront. Open the theme editor to preview live. | 1 | Always |
Video
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Video type | Controls “Video type” on the storefront. Open the theme editor to preview live. | shopify | Always |
| Video | Controls “Video” on the storefront. Open the theme editor to preview live. | — | video type == 'shopify' |
| External video URL | Controls “External video URL” on the storefront. Open the theme editor to preview live. | — | video type == 'external' |
| Poster image | Optional thumbnail before video loads. | — | Always |
Playback
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Autoplay | Automatically advances slides without the customer clicking. | No | Always |
| Loop | Controls “Loop” on the storefront. Open the theme editor to preview live. | Yes | Always |
| Muted | Controls “Muted” on the storefront. Open the theme editor to preview live. | Yes | Always |
| Show controls | Turns “Show controls” on or off on the storefront. | No | Always |
Overlay content
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Overlay heading | Controls “Overlay heading” on the storefront. Open the theme editor to preview live. | — | Always |
| Overlay text | Controls “Overlay text” on the storefront. Open the theme editor to preview live. | — | Always |
Style
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Color scheme | Applies a color scheme from Theme settings → Colors. | scheme-1 | Always |
| Corner radius | Controls “Corner radius” on the storefront. Open the theme editor to preview live. | 12 | Always |
| Hover effect | Controls “Hover effect” on the storefront. Open the theme editor to preview live. | none | Always |
Button tile settings
Grid placement
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Column span (mobile) | Controls “Column span (mobile)” on the storefront. Open the theme editor to preview live. | 1 | Always |
| Column span (tablet) | Controls “Column span (tablet)” on the storefront. Open the theme editor to preview live. | 1 | Always |
| Column span (desktop) | Controls “Column span (desktop)” on the storefront. Open the theme editor to preview live. | 1 | Always |
| Row span (desktop) | Controls “Row span (desktop)” on the storefront. Open the theme editor to preview live. | 1 | Always |
Content card
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Show heading | Turns “Show heading” on or off on the storefront. | Yes | Always |
| Heading | Controls “Heading” on the storefront. Open the theme editor to preview live. | — | Always |
| Heading font size | Sets heading font size in pixels for the matching screen size. | 24 | show heading |
| Heading font weight | Sets how bold heading text appears. | 600 | show heading |
| Heading color | Controls “Heading color” on the storefront. Open the theme editor to preview live. | #ffffff | show heading |
| Show text | Turns “Show text” on or off on the storefront. | Yes | Always |
| Text | Controls “Text” on the storefront. Open the theme editor to preview live. | — | Always |
| Text font size | Sets text font size in pixels for the matching screen size. | 16 | show text |
| Text font weight | Sets how bold text text appears. | 400 | show text |
| Text color | Controls “Text color” on the storefront. Open the theme editor to preview live. | #ffffff | show text |
| Button text | Controls “Button text” on the storefront. Open the theme editor to preview live. | Shop now | Always |
| Button link | Controls “Button link” on the storefront. Open the theme editor to preview live. | — | Always |
| Button accessibility label | Controls “Button accessibility label” on the storefront. Open the theme editor to preview live. | — | Always |
| Icon | Controls “Icon” on the storefront. Open the theme editor to preview live. | arrow-right | Always |
| Icon position | Controls “Icon position” on the storefront. Open the theme editor to preview live. | after | Always |
Content placement
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Content direction | Controls “Content direction” on the storefront. Open the theme editor to preview live. | column | Always |
| Vertical alignment | Controls “Vertical alignment” on the storefront. Open the theme editor to preview live. | center | Always |
| Horizontal alignment | Controls “Horizontal alignment” on the storefront. Open the theme editor to preview live. | center | Always |
| Content padding | Adds empty space (content padding) around the section content. | 20 | Always |
| Corner radius | Controls “Corner radius” on the storefront. Open the theme editor to preview live. | 12 | Always |
| Hover effect | Controls “Hover effect” on the storefront. Open the theme editor to preview live. | lift | Always |
Background
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Background style | Controls “Background style” on the storefront. Open the theme editor to preview live. | solid | Always |
| Background image | Controls the image setting “Background image”. Upload clear photos for best results. | — | background style == 'image' |
| Show overlay on image | Turns “Show overlay on image” on or off on the storefront. | Yes | background style == 'image' |
| Overlay intensity | Controls “Overlay intensity” on the storefront. Open the theme editor to preview live. | balanced | background style == 'image' and show overlay |
| Gradient start | Controls “Gradient start” on the storefront. Open the theme editor to preview live. | #111111 | Background style is Gradient |
| Gradient end | Controls “Gradient end” on the storefront. Open the theme editor to preview live. | #333333 | Background style is Gradient |
| Gradient angle | Controls “Gradient angle” on the storefront. Open the theme editor to preview live. | 135 | Background style is Gradient |
Button
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Button variant | Chooses the button look (primary, secondary, outline, or ghost). | primary | Always |
| Button size | Chooses the button size from Theme settings → Button sizes. | large | Always |
| Enable shimmer | Adds a moving highlight across the button or ribbon. | Yes | Always |
Color scheme
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Color scheme | Applies a color scheme from Theme settings → Colors. | scheme-1 | Always |
Setting details
Each control from the tables above, explained simply:
Heading
Controls “Heading” on the storefront. Open the theme editor to preview live. Default: Explore our world.
Use global H2 heading styles
When on, uses the matching style from Theme settings. Turn off to style only this section or block. Default: Yes.
Heading font size (mobile)
Sets heading font size (mobile) in pixels for the matching screen size. Default: 32. This control appears when: Use global heading styles is off.
Heading font size (tablet)
Sets heading font size (tablet) in pixels for the matching screen size. Default: 40. This control appears when: Use global heading styles is off.
Heading font size (desktop)
Sets heading font size (desktop) in pixels for the matching screen size. Default: 48. This control appears when: Use global heading styles is off.
Heading font weight
Sets how bold heading text appears. Default: 700. This control appears when: Use global heading styles is off.
Subheading
Controls “Subheading” on the storefront. Open the theme editor to preview live. Default: A flexible grid you can shape any way you like.
Use global subheading styles
When on, uses the matching style from Theme settings. Turn off to style only this section or block. Default: Yes.
Subheading font size (mobile)
Sets subheading font size (mobile) in pixels for the matching screen size. Default: 18. This control appears when: Use global subheading styles is off.
Subheading font size (tablet)
Sets subheading font size (tablet) in pixels for the matching screen size. Default: 20. This control appears when: Use global subheading styles is off.
Subheading font size (desktop)
Sets subheading font size (desktop) in pixels for the matching screen size. Default: 21. This control appears when: Use global subheading styles is off.
Subheading max width
Controls “Subheading max width” on the storefront. Open the theme editor to preview live. Default: 500. This control appears when: subHeading is filled in.
Hide heading and subheading visually
Controls “Hide heading and subheading visually” on the storefront. Open the theme editor to preview live. Default: No.
Content alignment
Controls “Content alignment” on the storefront. Open the theme editor to preview live. Default: center.
Button text
Controls “Button text” on the storefront. Open the theme editor to preview live. Default: —.
Button link
Controls “Button link” on the storefront. Open the theme editor to preview live. Default: —.
Button variant
Chooses the button look (primary, secondary, outline, or ghost). Default: primary. This control appears when: Button text is filled in.
Button size
Chooses the button size from Theme settings → Button sizes. Default: medium. This control appears when: Button text is filled in.
Use global button styles
When on, uses the matching style from Theme settings. Turn off to style only this section or block. Default: Yes. This control appears when: Button text is filled in.
Button background
Controls “Button background” on the storefront. Open the theme editor to preview live. Default: #111111. This control appears when: Button text is filled in and Use global button styles is off.
Button text color
Controls “Button text color” on the storefront. Open the theme editor to preview live. Default: #FFFFFF. This control appears when: Button text is filled in and Use global button styles is off.
Enable shimmer
Adds a moving highlight across the button or ribbon. Default: Yes. This control appears when: Button text is filled in.
Columns (mobile)
How many columns show on phones. Default: 1.
Columns (tablet)
How many columns show on tablets. Default: 2.
Columns (desktop)
How many columns show on desktop. Default: 4.
Grid layout algorithm
Controls “Grid layout algorithm” on the storefront. Open the theme editor to preview live. Default: row dense.
Horizontal gap
Controls “Horizontal gap” on the storefront. Open the theme editor to preview live. Default: 16.
Vertical gap
Controls “Vertical gap” on the storefront. Open the theme editor to preview live. Default: 16.
Row height mode
Controls “Row height mode” on the storefront. Open the theme editor to preview live. Default: auto.
Fixed row height
Controls “Fixed row height” on the storefront. Open the theme editor to preview live. Default: 240. This control appears when: row height mode == 'fixed'.
Minimum tile height
Controls “Minimum tile height” on the storefront. Open the theme editor to preview live. Default: 200.
Equalize row heights on desktop
Makes tiles in the same row share the tallest tile height. Default: No.
Padding top
Adds empty space (padding top) around the section content. Default: 24.
Padding bottom
Adds empty space (padding bottom) around the section content. Default: 24.
Color scheme
Applies a color scheme from Theme settings → Colors. Default: scheme-1.
Column span (mobile)
Controls “Column span (mobile)” on the storefront. Open the theme editor to preview live. Default: 1.
Column span (tablet)
Controls “Column span (tablet)” on the storefront. Open the theme editor to preview live. Default: 1.
Column span (desktop)
Controls “Column span (desktop)” on the storefront. Open the theme editor to preview live. Default: 1.
Row span (desktop)
Controls “Row span (desktop)” on the storefront. Open the theme editor to preview live. Default: 1.
Image
Controls the image setting “Image”. Upload clear photos for best results. Default: —.
Image (mobile override)
Controls the image setting “Image (mobile override)”. Upload clear photos for best results. Default: —.
Image (tablet override)
Controls the image setting “Image (tablet override)”. Upload clear photos for best results. Default: —.
Image (desktop override)
Controls the image setting “Image (desktop override)”. Upload clear photos for best results. Default: —.
Image alt text
Controls the image setting “Image alt text”. Upload clear photos for best results. Default: Bento grid image.
Image focal point
Controls the image setting “Image focal point”. Upload clear photos for best results. Default: center.
Link
Controls “Link” on the storefront. Open the theme editor to preview live. Default: —.
Accessibility label
Describes the link for screen readers. Default: Link to bento grid image.
Heading
Controls “Heading” on the storefront. Open the theme editor to preview live. Default: —.
Text
Controls “Text” on the storefront. Open the theme editor to preview live. Default: —.
Button text
Controls “Button text” on the storefront. Open the theme editor to preview live. Default: —.
Button variant
Chooses the button look (primary, secondary, outline, or ghost). Default: primary. This control appears when: Button text is filled in.
Button size
Chooses the button size from Theme settings → Button sizes. Default: medium. This control appears when: Button text is filled in.
Enable shimmer
Adds a moving highlight across the button or ribbon. Default: Yes. This control appears when: Button text is filled in.
Content position
Controls “Content position” on the storefront. Open the theme editor to preview live. Default: bottom-left.
Corner radius
Controls “Corner radius” on the storefront. Open the theme editor to preview live. Default: 12.
Content padding
Adds empty space (content padding) around the section content. Default: 20.
Hover effect
Controls “Hover effect” on the storefront. Open the theme editor to preview live. Default: scale.
Show overlay
Turns “Show overlay” on or off on the storefront. Default: Yes.
Overlay intensity
Controls “Overlay intensity” on the storefront. Open the theme editor to preview live. Default: balanced. This control appears when: Show overlay is on.
Color scheme
Applies a color scheme from Theme settings → Colors. Default: scheme-1.
Column span (mobile)
Controls “Column span (mobile)” on the storefront. Open the theme editor to preview live. Default: 1.
Column span (tablet)
Controls “Column span (tablet)” on the storefront. Open the theme editor to preview live. Default: 1.
Column span (desktop)
Controls “Column span (desktop)” on the storefront. Open the theme editor to preview live. Default: 1.
Row span (desktop)
Controls “Row span (desktop)” on the storefront. Open the theme editor to preview live. Default: 1.
Heading
Controls “Heading” on the storefront. Open the theme editor to preview live. Default: Tile heading.
Heading font size
Sets heading font size in pixels for the matching screen size. Default: 24. This control appears when: Heading is filled in.
Text
Controls “Text” on the storefront. Open the theme editor to preview live. Default: Add your message here.
Body font size
Sets body font size in pixels for the matching screen size. Default: 16. This control appears when: text != blank.
Icon
Controls “Icon” on the storefront. Open the theme editor to preview live. Default: none. This control appears when: An icon is selected.
Icon size
Controls “Icon size” on the storefront. Open the theme editor to preview live. Default: 32. This control appears when: An icon is selected.
Icon color
Controls “Icon color” on the storefront. Open the theme editor to preview live. Default: #111111. This control appears when: An icon is selected.
Button text
Controls “Button text” on the storefront. Open the theme editor to preview live. Default: —.
Button link
Controls “Button link” on the storefront. Open the theme editor to preview live. Default: —. This control appears when: Button text is filled in.
Button variant
Chooses the button look (primary, secondary, outline, or ghost). Default: primary. This control appears when: Button text is filled in.
Button size
Chooses the button size from Theme settings → Button sizes. Default: medium. This control appears when: Button text is filled in.
Enable shimmer
Adds a moving highlight across the button or ribbon. Default: Yes. This control appears when: Button text is filled in.
Vertical alignment
Controls “Vertical alignment” on the storefront. Open the theme editor to preview live. Default: center.
Horizontal alignment
Controls “Horizontal alignment” on the storefront. Open the theme editor to preview live. Default: center.
Corner radius
Controls “Corner radius” on the storefront. Open the theme editor to preview live. Default: 12.
Content padding
Adds empty space (content padding) around the section content. Default: 24.
Hover effect
Controls “Hover effect” on the storefront. Open the theme editor to preview live. Default: none.
Show border
Turns “Show border” on or off on the storefront. Default: No.
Border width
Controls “Border width” on the storefront. Open the theme editor to preview live. Default: 1. This control appears when: show border is on.
Border color
Controls “Border color” on the storefront. Open the theme editor to preview live. Default: #000000. This control appears when: show border is on.
Color scheme
Applies a color scheme from Theme settings → Colors. Default: scheme-1.
Background style
Controls “Background style” on the storefront. Open the theme editor to preview live. Default: solid.
Background color
Controls “Background color” on the storefront. Open the theme editor to preview live. Default: #F5F5F5. This control appears when: background style == 'custom'.
Text color
Controls “Text color” on the storefront. Open the theme editor to preview live. Default: #111111. This control appears when: background style == 'custom'.
Gradient start
Controls “Gradient start” on the storefront. Open the theme editor to preview live. Default: #111111. This control appears when: Background style is Gradient.
Gradient end
Controls “Gradient end” on the storefront. Open the theme editor to preview live. Default: #444444. This control appears when: Background style is Gradient.
Gradient angle
Controls “Gradient angle” on the storefront. Open the theme editor to preview live. Default: 135. This control appears when: Background style is Gradient.
Column span (mobile)
Controls “Column span (mobile)” on the storefront. Open the theme editor to preview live. Default: 1.
Column span (tablet)
Controls “Column span (tablet)” on the storefront. Open the theme editor to preview live. Default: 1.
Column span (desktop)
Controls “Column span (desktop)” on the storefront. Open the theme editor to preview live. Default: 1.
Row span (desktop)
Controls “Row span (desktop)” on the storefront. Open the theme editor to preview live. Default: 1.
Product
Controls “Product” on the storefront. Open the theme editor to preview live. Default: —.
Show image
Turns “Show image” on or off on the storefront. Default: Yes.
Show title
Turns “Show title” on or off on the storefront. Default: Yes.
Title font size
Sets title font size in pixels for the matching screen size. Default: 24. This control appears when: show title.
Title font weight
Sets how bold title text appears. Default: 600. This control appears when: show title.
Title color
Controls “Title color” on the storefront. Open the theme editor to preview live. Default: #ffffff. This control appears when: show title.
Show price
Turns “Show price” on or off on the storefront. Default: Yes.
Price font size
Sets price font size in pixels for the matching screen size. Default: 16. This control appears when: show price.
Price font weight
Sets how bold price text appears. Default: 500. This control appears when: show price.
Price color
Controls “Price color” on the storefront. Open the theme editor to preview live. Default: #ffffff. This control appears when: show price.
Show quick buy
Turns “Show quick buy” on or off on the storefront. Default: Yes.
Content direction
Controls “Content direction” on the storefront. Open the theme editor to preview live. Default: column.
Vertical alignment
Controls “Vertical alignment” on the storefront. Open the theme editor to preview live. Default: center.
Horizontal alignment
Controls “Horizontal alignment” on the storefront. Open the theme editor to preview live. Default: center.
Content padding
Adds empty space (content padding) around the section content. Default: 20.
Corner radius
Controls “Corner radius” on the storefront. Open the theme editor to preview live. Default: 12.
Hover effect
Controls “Hover effect” on the storefront. Open the theme editor to preview live. Default: lift.
Button variant
Chooses the button look (primary, secondary, outline, or ghost). Default: outline.
Button size
Chooses the button size from Theme settings → Button sizes. Default: small.
Enable shimmer
Adds a moving highlight across the button or ribbon. Default: Yes.
Show overlay
Turns “Show overlay” on or off on the storefront. Default: Yes.
Overlay intensity
Controls “Overlay intensity” on the storefront. Open the theme editor to preview live. Default: balanced. This control appears when: show overlay.
Color scheme
Applies a color scheme from Theme settings → Colors. Default: scheme-1.
Column span (mobile)
Controls “Column span (mobile)” on the storefront. Open the theme editor to preview live. Default: 1.
Column span (tablet)
Controls “Column span (tablet)” on the storefront. Open the theme editor to preview live. Default: 1.
Column span (desktop)
Controls “Column span (desktop)” on the storefront. Open the theme editor to preview live. Default: 1.
Row span (desktop)
Controls “Row span (desktop)” on the storefront. Open the theme editor to preview live. Default: 1.
Collection
Controls “Collection” on the storefront. Open the theme editor to preview live. Default: —.
Custom image
Controls the image setting “Custom image”. Upload clear photos for best results. Default: —.
Custom title
Controls “Custom title” on the storefront. Open the theme editor to preview live. Default: —.
Accessibility label
Controls “Accessibility label” on the storefront. Open the theme editor to preview live. Default: —.
Show title
Turns “Show title” on or off on the storefront. Default: Yes.
Title font size
Sets title font size in pixels for the matching screen size. Default: 24. This control appears when: show title.
Title font weight
Sets how bold title text appears. Default: 600. This control appears when: show title.
Title color
Controls “Title color” on the storefront. Open the theme editor to preview live. Default: #ffffff. This control appears when: show title.
Show product count
Turns “Show product count” on or off on the storefront. Default: Yes.
Product count font size
Sets product count font size in pixels for the matching screen size. Default: 16. This control appears when: show product count.
Product count font weight
Sets how bold product count text appears. Default: 400. This control appears when: show product count.
Product count color
Controls “Product count color” on the storefront. Open the theme editor to preview live. Default: #ffffff. This control appears when: show product count.
Content direction
Controls “Content direction” on the storefront. Open the theme editor to preview live. Default: column.
Vertical alignment
Controls “Vertical alignment” on the storefront. Open the theme editor to preview live. Default: center.
Horizontal alignment
Controls “Horizontal alignment” on the storefront. Open the theme editor to preview live. Default: center.
Content padding
Adds empty space (content padding) around the section content. Default: 20.
Corner radius
Controls “Corner radius” on the storefront. Open the theme editor to preview live. Default: 12.
Hover effect
Controls “Hover effect” on the storefront. Open the theme editor to preview live. Default: scale.
Show overlay
Turns “Show overlay” on or off on the storefront. Default: Yes.
Overlay intensity
Controls “Overlay intensity” on the storefront. Open the theme editor to preview live. Default: balanced. This control appears when: show overlay.
Color scheme
Applies a color scheme from Theme settings → Colors. Default: scheme-1.
Column span (mobile)
Controls “Column span (mobile)” on the storefront. Open the theme editor to preview live. Default: 1.
Column span (tablet)
Controls “Column span (tablet)” on the storefront. Open the theme editor to preview live. Default: 1.
Column span (desktop)
Controls “Column span (desktop)” on the storefront. Open the theme editor to preview live. Default: 2.
Row span (desktop)
Controls “Row span (desktop)” on the storefront. Open the theme editor to preview live. Default: 1.
Video type
Controls “Video type” on the storefront. Open the theme editor to preview live. Default: shopify.
Video
Controls “Video” on the storefront. Open the theme editor to preview live. Default: —. This control appears when: video type == 'shopify'.
External video URL
Controls “External video URL” on the storefront. Open the theme editor to preview live. Default: —. This control appears when: video type == 'external'.
Poster image
Optional thumbnail before video loads. Default: —.
Autoplay
Automatically advances slides without the customer clicking. Default: No.
Loop
Controls “Loop” on the storefront. Open the theme editor to preview live. Default: Yes.
Muted
Controls “Muted” on the storefront. Open the theme editor to preview live. Default: Yes.
Show controls
Turns “Show controls” on or off on the storefront. Default: No.
Overlay heading
Controls “Overlay heading” on the storefront. Open the theme editor to preview live. Default: —.
Overlay text
Controls “Overlay text” on the storefront. Open the theme editor to preview live. Default: —.
Color scheme
Applies a color scheme from Theme settings → Colors. Default: scheme-1.
Corner radius
Controls “Corner radius” on the storefront. Open the theme editor to preview live. Default: 12.
Hover effect
Controls “Hover effect” on the storefront. Open the theme editor to preview live. Default: none.
Column span (mobile)
Controls “Column span (mobile)” on the storefront. Open the theme editor to preview live. Default: 1.
Column span (tablet)
Controls “Column span (tablet)” on the storefront. Open the theme editor to preview live. Default: 1.
Column span (desktop)
Controls “Column span (desktop)” on the storefront. Open the theme editor to preview live. Default: 1.
Row span (desktop)
Controls “Row span (desktop)” on the storefront. Open the theme editor to preview live. Default: 1.
Show heading
Turns “Show heading” on or off on the storefront. Default: Yes.
Heading
Controls “Heading” on the storefront. Open the theme editor to preview live. Default: —.
Heading font size
Sets heading font size in pixels for the matching screen size. Default: 24. This control appears when: show heading.
Heading font weight
Sets how bold heading text appears. Default: 600. This control appears when: show heading.
Heading color
Controls “Heading color” on the storefront. Open the theme editor to preview live. Default: #ffffff. This control appears when: show heading.
Show text
Turns “Show text” on or off on the storefront. Default: Yes.
Text
Controls “Text” on the storefront. Open the theme editor to preview live. Default: —.
Text font size
Sets text font size in pixels for the matching screen size. Default: 16. This control appears when: show text.
Text font weight
Sets how bold text text appears. Default: 400. This control appears when: show text.
Text color
Controls “Text color” on the storefront. Open the theme editor to preview live. Default: #ffffff. This control appears when: show text.
Button text
Controls “Button text” on the storefront. Open the theme editor to preview live. Default: Shop now.
Button link
Controls “Button link” on the storefront. Open the theme editor to preview live. Default: —.
Button accessibility label
Controls “Button accessibility label” on the storefront. Open the theme editor to preview live. Default: —.
Icon
Controls “Icon” on the storefront. Open the theme editor to preview live. Default: arrow-right.
Icon position
Controls “Icon position” on the storefront. Open the theme editor to preview live. Default: after.
Content direction
Controls “Content direction” on the storefront. Open the theme editor to preview live. Default: column.
Vertical alignment
Controls “Vertical alignment” on the storefront. Open the theme editor to preview live. Default: center.
Horizontal alignment
Controls “Horizontal alignment” on the storefront. Open the theme editor to preview live. Default: center.
Content padding
Adds empty space (content padding) around the section content. Default: 20.
Corner radius
Controls “Corner radius” on the storefront. Open the theme editor to preview live. Default: 12.
Hover effect
Controls “Hover effect” on the storefront. Open the theme editor to preview live. Default: lift.
Background style
Controls “Background style” on the storefront. Open the theme editor to preview live. Default: solid.
Background image
Controls the image setting “Background image”. Upload clear photos for best results. Default: —. This control appears when: background style == 'image'.
Show overlay on image
Turns “Show overlay on image” on or off on the storefront. Default: Yes. This control appears when: background style == 'image'.
Overlay intensity
Controls “Overlay intensity” on the storefront. Open the theme editor to preview live. Default: balanced. This control appears when: background style == 'image' and show overlay.
Gradient start
Controls “Gradient start” on the storefront. Open the theme editor to preview live. Default: #111111. This control appears when: Background style is Gradient.
Gradient end
Controls “Gradient end” on the storefront. Open the theme editor to preview live. Default: #333333. This control appears when: Background style is Gradient.
Gradient angle
Controls “Gradient angle” on the storefront. Open the theme editor to preview live. Default: 135. This control appears when: Background style is Gradient.
Button variant
Chooses the button look (primary, secondary, outline, or ghost). Default: primary.
Button size
Chooses the button size from Theme settings → Button sizes. Default: large.
Enable shimmer
Adds a moving highlight across the button or ribbon. Default: Yes.
Color scheme
Applies a color scheme from Theme settings → Colors. Default: scheme-1.
Tips
- Open the theme editor and select this section to preview changes live.
- Use Theme settings for fonts, colors, and buttons that apply store-wide.