Start a project

Bento grid, comparison table and pricing sections for Shopify

Grids that go beyond equal columns: mixed-size bento cells, masonry, collages, grids you filter with chips, and tables for comparing products or plans.

Install Panely free → See the demos

A standard theme gives you “image with text” and a row of equal columns. These grid sections cover the layouts that usually need a developer: a bento grid where each cell sets how many columns and rows it spans, a masonry grid that keeps each image’s proportions, and an edge-to-edge mosaic collage.

For comparing things, there’s a comparison table with rows and columns you define, a highlighted column for your own product, and pricing tiers for subscriptions, memberships or service packages. The filterable grid lets shoppers narrow a grid with category chips you set up yourself.

Filterable grid Bento grid Mosaic collage Comparison table Pricing tiers Masonry grid

Filterable grid

Filtered

A grid you narrow with category chips. Define the categories yourself.

4 designs: Chips, Pills, Underline, Sidebar. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 54

Grouped as they appear in the Panely editor. Settings marked phone & desktop can take a different value on phones.

Layout

Section
  • Padding top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Layout
  • Columns Slider, 2–6 phone & desktop
  • Gap Slider, 4–56px phone & desktop
  • Image height Slider, 100–560px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Filters
  • Label for the "everything" chip Text
  • Categories A list of categories (up to 12): Label, Key (lowercase, no spaces)
Cells
  • Cells A list of cells (up to 60): Image, Title, Meta, Link, Category key

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Heading
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 10–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.9–2.4 phone & desktop
  • Kicker letter spacing Slider, -3–8px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 10–96px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.9–2.4 phone & desktop
  • Heading letter spacing Slider, -3–8px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
  • Intro text font Google Font and weight phone & desktop
  • Intro text size Slider, 10–96px phone & desktop
  • Intro text color Colour phone & desktop
  • Intro text line height Slider, 0.9–2.4 phone & desktop
  • Intro text letter spacing Slider, -3–8px phone & desktop
  • Intro text alignment Design default · Left · Center · Right phone & desktop
Filter style
  • Chip font Google Font and weight phone & desktop
  • Chip size Slider, 10–96px phone & desktop
  • Chip color Colour phone & desktop
  • Chip line height Slider, 0.9–2.4 phone & desktop
  • Chip letter spacing Slider, -3–8px phone & desktop
  • Chip background Colour phone & desktop
  • Selected chip background Colour
  • Selected chip text Colour
  • Chip alignment Design default · Left · Center · Right phone & desktop
Cell style
  • Cell title font Google Font and weight phone & desktop
  • Cell title size Slider, 10–96px phone & desktop
  • Cell title color Colour phone & desktop
  • Cell title line height Slider, 0.9–2.4 phone & desktop
  • Cell title letter spacing Slider, -3–8px phone & desktop
  • Cell title alignment Design default · Left · Center · Right phone & desktop
  • Cell meta font Google Font and weight phone & desktop
  • Cell meta size Slider, 10–96px phone & desktop
  • Cell meta color Colour phone & desktop
  • Cell meta line height Slider, 0.9–2.4 phone & desktop
  • Cell meta letter spacing Slider, -3–8px phone & desktop
  • Cell meta alignment Design default · Left · Center · Right phone & desktop
  • Corner radius Slider, 0–32px phone & desktop

Bento grid

Mixed cells

A grid of mixed cell sizes. Each cell decides how many columns and rows it spans.

4 designs: Bento, Feature left, Thirds, Quilt. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 44

Grouped as they appear in the Panely editor. Settings marked phone & desktop can take a different value on phones.

Layout

Section
  • Padding top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Layout
  • Grid columns Slider, 2–6 phone & desktop
  • Row height Slider, 80–420px phone & desktop
  • Gap Slider, 0–48px phone & desktop
  • Cell padding Slider, 0–64px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Cells
  • Cells A list of cells (up to 20): Image, Title, Body, Link, Width (columns), Height (rows), Cell background

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Heading
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 10–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.9–2.4 phone & desktop
  • Kicker letter spacing Slider, -3–8px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 10–96px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.9–2.4 phone & desktop
  • Heading letter spacing Slider, -3–8px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
  • Intro text font Google Font and weight phone & desktop
  • Intro text size Slider, 10–96px phone & desktop
  • Intro text color Colour phone & desktop
  • Intro text line height Slider, 0.9–2.4 phone & desktop
  • Intro text letter spacing Slider, -3–8px phone & desktop
  • Intro text alignment Design default · Left · Center · Right phone & desktop
Cell style
  • Cell title font Google Font and weight phone & desktop
  • Cell title size Slider, 10–96px phone & desktop
  • Cell title color Colour phone & desktop
  • Cell title line height Slider, 0.9–2.4 phone & desktop
  • Cell title letter spacing Slider, -3–8px phone & desktop
  • Cell title alignment Design default · Left · Center · Right phone & desktop
  • Cell body font Google Font and weight phone & desktop
  • Cell body size Slider, 10–96px phone & desktop
  • Cell body color Colour phone & desktop
  • Cell body line height Slider, 0.9–2.4 phone & desktop
  • Cell body letter spacing Slider, -3–8px phone & desktop
  • Cell body alignment Design default · Left · Center · Right phone & desktop
  • Corner radius Slider, 0–40px phone & desktop

Mosaic collage

Mixed cells

Edge-to-edge images packed in a collage, each one square, tall or wide.

4 designs: Collage, Strip, Pyramid, Scatter. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 23

Grouped as they appear in the Panely editor. Settings marked phone & desktop can take a different value on phones.

Layout

Section
  • Padding top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Layout
  • Gap Slider, 0–40px phone & desktop
  • Base cell size Slider, 100–460px phone & desktop

Content

Heading
  • Heading Text
  • Intro text Text, several lines
Images
  • Images A list of images (up to 30): Image, Description, Link, Shape

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Heading
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 10–96px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.9–2.4 phone & desktop
  • Heading letter spacing Slider, -3–8px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
  • Intro text font Google Font and weight phone & desktop
  • Intro text size Slider, 10–96px phone & desktop
  • Intro text color Colour phone & desktop
  • Intro text line height Slider, 0.9–2.4 phone & desktop
  • Intro text letter spacing Slider, -3–8px phone & desktop
  • Intro text alignment Design default · Left · Center · Right phone & desktop
Style
  • Corner radius Slider, 0–32px phone & desktop

Comparison table

Tabular

Rows and columns compared against each other. Both are yours to set.

4 designs: Striped, Bordered, Plain, Highlight column. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 46

Grouped as they appear in the Panely editor. Settings marked phone & desktop can take a different value on phones.

Layout

Section
  • Padding top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Layout
  • Cell padding Slider, 4–32px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Columns
  • Columns A list of columns (up to 8): Heading, Highlight this column
Rows
  • Rows A list of rows (up to 60): Cells (separate with |), Highlight this row
  • Cell separator Text

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Heading
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 10–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.9–2.4 phone & desktop
  • Kicker letter spacing Slider, -3–8px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 10–96px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.9–2.4 phone & desktop
  • Heading letter spacing Slider, -3–8px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
  • Intro text font Google Font and weight phone & desktop
  • Intro text size Slider, 10–96px phone & desktop
  • Intro text color Colour phone & desktop
  • Intro text line height Slider, 0.9–2.4 phone & desktop
  • Intro text letter spacing Slider, -3–8px phone & desktop
  • Intro text alignment Design default · Left · Center · Right phone & desktop
Table style
  • Column heading font Google Font and weight phone & desktop
  • Column heading size Slider, 10–96px phone & desktop
  • Column heading color Colour phone & desktop
  • Column heading line height Slider, 0.9–2.4 phone & desktop
  • Column heading letter spacing Slider, -3–8px phone & desktop
  • Cell font Google Font and weight phone & desktop
  • Cell size Slider, 10–96px phone & desktop
  • Cell color Colour phone & desktop
  • Cell line height Slider, 0.9–2.4 phone & desktop
  • Cell letter spacing Slider, -3–8px phone & desktop
  • Cell alignment Design default · Left · Center · Right phone & desktop
  • Heading background Colour phone & desktop
  • Column heading alignment Design default · Left · Center · Right phone & desktop
  • Stripe color Colour phone & desktop
  • Highlight color Colour phone & desktop
  • Line color Colour phone & desktop

Pricing tiers

Tabular

Plans side by side, each with its own feature list and button.

4 designs: Cards, Table, Minimal, Stacked. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 81

Grouped as they appear in the Panely editor. Settings marked phone & desktop can take a different value on phones.

Layout

Section
  • Padding top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Layout
  • Columns Slider, 1–5 phone & desktop
  • Gap Slider, 8–60px phone & desktop
  • Card padding Slider, 8–64px phone & desktop
Buttons
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Tiers
  • Tiers A list of tiers (up to 8): Name, Price, Period, Summary, Features (one per line), Button label, Button link, Highlight this tier, Badge
Buttons
  • Button label Text
  • Button link Link

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Heading
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 10–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.9–2.4 phone & desktop
  • Kicker letter spacing Slider, -3–8px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 10–96px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.9–2.4 phone & desktop
  • Heading letter spacing Slider, -3–8px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
  • Intro text font Google Font and weight phone & desktop
  • Intro text size Slider, 10–96px phone & desktop
  • Intro text color Colour phone & desktop
  • Intro text line height Slider, 0.9–2.4 phone & desktop
  • Intro text letter spacing Slider, -3–8px phone & desktop
  • Intro text alignment Design default · Left · Center · Right phone & desktop
Tier style
  • Tier name font Google Font and weight phone & desktop
  • Tier name size Slider, 10–96px phone & desktop
  • Tier name color Colour phone & desktop
  • Tier name line height Slider, 0.9–2.4 phone & desktop
  • Tier name letter spacing Slider, -3–8px phone & desktop
  • Tier name alignment Design default · Left · Center · Right phone & desktop
  • Price font Google Font and weight phone & desktop
  • Price size Slider, 10–96px phone & desktop
  • Price color Colour phone & desktop
  • Price line height Slider, 0.9–2.4 phone & desktop
  • Price letter spacing Slider, -3–8px phone & desktop
  • Price alignment Design default · Left · Center · Right phone & desktop
  • Period font Google Font and weight phone & desktop
  • Period size Slider, 10–96px phone & desktop
  • Period color Colour phone & desktop
  • Period line height Slider, 0.9–2.4 phone & desktop
  • Period letter spacing Slider, -3–8px phone & desktop
  • Period alignment Design default · Left · Center · Right phone & desktop
  • Summary font Google Font and weight phone & desktop
  • Summary size Slider, 10–96px phone & desktop
  • Summary color Colour phone & desktop
  • Summary line height Slider, 0.9–2.4 phone & desktop
  • Summary letter spacing Slider, -3–8px phone & desktop
  • Summary alignment Design default · Left · Center · Right phone & desktop
  • Feature font Google Font and weight phone & desktop
  • Feature size Slider, 10–96px phone & desktop
  • Feature color Colour phone & desktop
  • Feature line height Slider, 0.9–2.4 phone & desktop
  • Feature letter spacing Slider, -3–8px phone & desktop
  • Feature alignment Design default · Left · Center · Right phone & desktop
  • Badge font Google Font and weight phone & desktop
  • Badge size Slider, 10–96px phone & desktop
  • Badge color Colour phone & desktop
  • Badge line height Slider, 0.9–2.4 phone & desktop
  • Badge letter spacing Slider, -3–8px phone & desktop
  • Badge background Colour phone & desktop
  • Badge alignment Design default · Left · Center · Right phone & desktop
  • Card background Colour phone & desktop
  • Card border color Colour phone & desktop
  • Highlighted border Colour phone & desktop
  • Corner radius Slider, 0–32px phone & desktop
  • Tick color Colour phone & desktop
Buttons
  • Button text size Slider, 11–28px phone & desktop
  • Button background Colour phone & desktop
  • Button text color Colour phone & desktop
  • Button corner radius Slider, 0–40px phone & desktop
  • Buttons alignment Design default · Left · Center · Right phone & desktop

Masonry grid

Uneven

Even columns, uneven heights — images keep their own proportions.

4 designs: Columns, Tight, Wide, Bordered. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 37

Grouped as they appear in the Panely editor. Settings marked phone & desktop can take a different value on phones.

Layout

Section
  • Padding top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Layout
  • Columns Slider, 2–6 phone & desktop
  • Gap Slider, 0–60px phone & desktop
  • Show captions On / off

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Cells
  • Cells A list of cells (up to 60): Image, Caption, Link

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Heading
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 10–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.9–2.4 phone & desktop
  • Kicker letter spacing Slider, -3–8px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 10–96px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.9–2.4 phone & desktop
  • Heading letter spacing Slider, -3–8px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
  • Intro text font Google Font and weight phone & desktop
  • Intro text size Slider, 10–96px phone & desktop
  • Intro text color Colour phone & desktop
  • Intro text line height Slider, 0.9–2.4 phone & desktop
  • Intro text letter spacing Slider, -3–8px phone & desktop
  • Intro text alignment Design default · Left · Center · Right phone & desktop
Style
  • Corner radius Slider, 0–32px phone & desktop
Cell style
  • Caption font Google Font and weight phone & desktop
  • Caption size Slider, 10–96px phone & desktop
  • Caption color Colour phone & desktop
  • Caption line height Slider, 0.9–2.4 phone & desktop
  • Caption letter spacing Slider, -3–8px phone & desktop
  • Caption alignment Design default · Left · Center · Right phone & desktop

How to add a Panely section to your Shopify store

  1. Install Panely from the Shopify App Store. It works with Online Store 2.0 themes, and your theme files are never edited.
  2. Pick a section and press Add. Choose a design, and change the settings in the editor with a live preview beside them. You get a short section code.
  3. Place it once. In the theme editor, add the Panely block where you want the section, and paste the code into its Section code field.
  4. Edit any time. Change the section in Panely and save. Your store shows the change on its next page load, with nothing to paste again.

Each Add is its own copy with its own settings, so you can use the same section on as many pages as you like. Panely must stay installed for its sections to show. If you uninstall, they disappear, and your theme is left exactly as it was.

Questions about grids sections

How do I add a comparison table to Shopify?

Add the Comparison table section in Panely, set your columns (your product and the alternatives) and rows (the features), and choose striped, bordered, plain or highlight-column styling. On phones the table scrolls sideways rather than squashing.

Can shoppers filter the grid?

Yes. The filterable grid shows category chips above the items, and a click narrows the grid. You define the categories and tag each item yourself.

Add these sections to your store

Install Panely from the Shopify App Store, pick a section and place it in your theme in a couple of minutes. A free plan is available.

Install Panely free →
More Panely sections
Data-shaped Chart, Progress meters, Stat counters… Forms & capture Sticky bar, Inline form, Multi step form… Interactive Before / after slider, Countdown timer, Accordion… Motion & carousel Draggable Card Stack, Advance Slideshow, Infinite Marquee… Overlay & split layouts Image with text overlay, Offset cards, Text over video… Product structures Bundle Builder, Quick Add Rows, Single Product… Typographic treatments Oversized Statement, Checklist, Icon And Text…