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 Feature Grid Image Grid Logo Grid Lookbook Grid Portfolio Grid Spotlight Grid Table Maker Team Grid Video Grid

Filterable grid

Free 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

Free 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

Free 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

Free 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

Free 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

Free 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

Feature Grid

Free Even cells

Features in even cells: an icon, a title and a few words in each.

4 designs: Cards, Lines between, Plain, Numbered. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 47

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, 320–1600px phone & desktop
Layout
  • Columns Slider, 1–6 phone & desktop
  • Gap Slider, 0–60px phone & desktop
  • Padding inside a cell Slider, 0–64px phone & desktop
  • Size of an icon Slider, 14–72px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
Features
  • Features A list of features (up to 24): Icon, Your own icon (optional), Title, Text, Link words (optional), Link

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Grid style
  • Cell background Colour phone & desktop
  • Icon color Colour phone & desktop
  • Lines Colour phone & desktop
  • Corner radius Slider, 0–32px phone & desktop
Title style
  • Title font Google Font and weight phone & desktop
  • Title size Slider, 9–40px phone & desktop
  • Title color Colour phone & desktop
  • Title line height Slider, 0.8–2.4 phone & desktop
  • Title letter spacing Slider, -8–12px phone & desktop
  • Title alignment Design default · Left · Center · Right phone & desktop
Text style
  • Text font Google Font and weight phone & desktop
  • Text size Slider, 9–28px phone & desktop
  • Text color Colour phone & desktop
  • Text line height Slider, 0.8–2.4 phone & desktop
  • Text letter spacing Slider, -8–12px phone & desktop
  • Text alignment Design default · Left · Center · Right phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 9–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop

Image Grid

Free Even cells

A clean gallery: pictures of one shape in even columns, with captions if you want them.

4 designs: Plain, Captions under, Captions on the picture, Framed. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 40

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, 320–1600px phone & desktop
Layout
  • Shape of the pictures Square · Portrait (4:5) · Tall (2:3) · Landscape (4:3) · Wide (16:9)
  • Columns Slider, 1–6 phone & desktop
  • Gap Slider, 0–60px phone & desktop
  • Pictures grow a little when pointed at On / off
  • Width of the frame Slider, 4–40px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
Pictures
  • Pictures A list of pictures (up to 48): Picture, What it shows, Caption (optional), Link (optional)

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Grid style
  • Corner radius Slider, 0–40px phone & desktop
  • Frame color Colour phone & desktop
Caption style
  • Caption font Google Font and weight phone & desktop
  • Caption size Slider, 9–28px phone & desktop
  • Caption color Colour phone & desktop
  • Caption line height Slider, 0.8–2.4 phone & desktop
  • Caption letter spacing Slider, -8–12px phone & desktop
  • Caption alignment Design default · Left · Center · Right phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 9–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop

Logo Grid

Free Even cells

Brand, partner or client logos in an even grid, grey until pointed at.

4 designs: Plain, Lines between, Tiles, Tight wall. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 47

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, 320–1600px phone & desktop
Layout
  • Grey until pointed at On / off
  • Columns Slider, 1–8 phone & desktop
  • Gap Slider, 0–60px phone & desktop
  • Height of a logo Slider, 16–140px phone & desktop
  • Room round a logo Slider, 0–72px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
Logos
  • Logos A list of logos (up to 48): Logo, Whose it is, Link (optional)
  • Note under it Text, several lines

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Grid style
  • Tile background Colour phone & desktop
  • Lines Colour phone & desktop
  • Corner radius Slider, 0–32px phone & desktop
Name style
  • Name font Google Font and weight phone & desktop
  • Name size Slider, 9–40px phone & desktop
  • Name color Colour phone & desktop
  • Name line height Slider, 0.8–2.4 phone & desktop
  • Name letter spacing Slider, -8–12px phone & desktop
Note style
  • Note font Google Font and weight phone & desktop
  • Note size Slider, 9–24px phone & desktop
  • Note color Colour phone & desktop
  • Note line height Slider, 0.8–2.4 phone & desktop
  • Note letter spacing Slider, -8–12px phone & desktop
  • Note alignment Design default · Left · Center · Right phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 9–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop

Lookbook Grid

Free Editorial

Fashion and lifestyle pictures laid out like a magazine: big and small, staggered, or as a strip to swipe.

4 designs: Editorial, Staggered pairs, Film strip, Collage. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 45

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, 320–1600px phone & desktop
Layout
  • Shape of the pictures Portrait (4:5) · Tall (2:3) · Square
  • Gap Slider, 0–60px phone & desktop
  • Width of a picture in the film strip Slider, 180–560px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
Looks
  • Looks A list of looks (up to 36): Picture, Caption, Link words (optional), Link
  • Word before each number Text As in "Look 01". Leave empty for no numbers.

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Grid style
  • Corner radius Slider, 0–40px phone & desktop
  • Link color Colour phone & desktop
Number style
  • Number font Google Font and weight phone & desktop
  • Number size Slider, 9–24px phone & desktop
  • Number color Colour phone & desktop
  • Number line height Slider, 0.8–2.4 phone & desktop
  • Number letter spacing Slider, -8–12px phone & desktop
  • Number alignment Design default · Left · Center · Right phone & desktop
Caption style
  • Caption font Google Font and weight phone & desktop
  • Caption size Slider, 9–32px phone & desktop
  • Caption color Colour phone & desktop
  • Caption line height Slider, 0.8–2.4 phone & desktop
  • Caption letter spacing Slider, -8–12px phone & desktop
  • Caption alignment Design default · Left · Center · Right phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 9–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop

Portfolio Grid

Free Work

Projects as a grid: a picture, a title, what kind of work it was and when.

4 designs: Words on the picture, Cards, First one large, List. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 52

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, 320–1600px phone & desktop
Layout
  • Shape of the pictures Landscape (4:3) · Square · Portrait (4:5) · Wide (16:9)
  • Columns Slider, 1–6 phone & desktop
  • Gap Slider, 0–60px phone & desktop
  • Padding round the words Slider, 0–48px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
Projects
  • Projects A list of projects (up to 36): Picture, Title, Kind of work, Year, A few words (optional), Link (optional)

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Grid style
  • Corner radius Slider, 0–40px phone & desktop
  • Card background Colour phone & desktop
  • Lines Colour phone & desktop
Title style
  • Title font Google Font and weight phone & desktop
  • Title size Slider, 9–48px phone & desktop
  • Title color Colour phone & desktop
  • Title line height Slider, 0.8–2.4 phone & desktop
  • Title letter spacing Slider, -8–12px phone & desktop
  • Title alignment Design default · Left · Center · Right phone & desktop
Kind and year style
  • Kind and year font Google Font and weight phone & desktop
  • Kind and year size Slider, 9–24px phone & desktop
  • Kind and year color Colour phone & desktop
  • Kind and year line height Slider, 0.8–2.4 phone & desktop
  • Kind and year letter spacing Slider, -8–12px phone & desktop
  • Kind and year alignment Design default · Left · Center · Right phone & desktop
A few words style
  • A few words font Google Font and weight phone & desktop
  • A few words size Slider, 9–28px phone & desktop
  • A few words color Colour phone & desktop
  • A few words line height Slider, 0.8–2.4 phone & desktop
  • A few words letter spacing Slider, -8–12px phone & desktop
  • A few words alignment Design default · Left · Center · Right phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 9–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop

Spotlight Grid

Free Interactive

A row of panels: point at one, or press it, and it opens wide while the others narrow.

4 designs: Side by side, Tall, names on their side, Stacked, Cards. 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, 320–1600px phone & desktop
Layout
  • Open to begin with The first panel · None of them
  • Height Slider, 240–800px phone & desktop
  • How many times wider the open one is Slider, 2–8 phone & desktop
  • Gap Slider, 0–40px phone & desktop
Motion
  • Seconds to open Slider, 0–3s phone & desktop 0 shows it without moving.
Button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
Panels
  • Panels A list of panels (up to 8): Picture, Title, Words shown when it is open, Button label (optional), Button link

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Panel style
  • Corner radius Slider, 0–48px phone & desktop
  • Darken the picture Slider, 0–90% phone & desktop
  • Panel with no picture Colour phone & desktop
Title style
  • Title font Google Font and weight phone & desktop
  • Title size Slider, 9–56px phone & desktop
  • Title color Colour phone & desktop
  • Title line height Slider, 0.8–2.4 phone & desktop
  • Title letter spacing Slider, -8–12px phone & desktop
  • Title alignment Design default · Left · Center · Right phone & desktop
Words style
  • Words font Google Font and weight phone & desktop
  • Words size Slider, 9–28px phone & desktop
  • Words color Colour phone & desktop
  • Words line height Slider, 0.8–2.4 phone & desktop
  • Words letter spacing Slider, -8–12px phone & desktop
  • Words alignment Design default · Left · Center · Right phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 9–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop
Button
  • 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
  • Button alignment Design default · Left · Center · Right phone & desktop

Table Maker

Free Tabular

A table you fill in like a spreadsheet: a size guide, a spec sheet, opening hours. Paste one in, or type it.

5 designs: Lines, Striped, Grid, Card, Minimal. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 67

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
  • First column names each row On / off
  • Last row is a total On / off
  • Column to pick out Slider, 0–8 0 picks out none.
  • On a phone Scroll sideways · One row at a time
  • Keep the first column in view when scrolling On / off
  • Cell padding (vertical) Slider, 2–32px phone & desktop
  • Cell padding (horizontal) Slider, 4–40px phone & desktop
  • Narrowest a column may be Slider, 40–240px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
Table
  • Table A table you fill in, cell by cell The top row is the headings. Copy cells from a spreadsheet and paste them into any cell.
  • Caption Text
  • Note under the table Text, several lines

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Table style
  • Table background Colour phone & desktop
  • Heading row background Colour phone & desktop
  • Stripe Colour phone & desktop
  • Lines Colour phone & desktop
  • Picked-out column Colour phone & desktop
  • Corner radius Slider, 0–32px phone & desktop
Heading row style
  • Heading row font Google Font and weight phone & desktop
  • Heading row size Slider, 10–32px phone & desktop
  • Heading row color Colour phone & desktop
  • Heading row line height Slider, 0.8–2.4 phone & desktop
  • Heading row letter spacing Slider, -8–12px phone & desktop
  • Heading row alignment Design default · Left · Center · Right phone & desktop
Cell style
  • Cell font Google Font and weight phone & desktop
  • Cell size Slider, 10–32px phone & desktop
  • Cell color Colour phone & desktop
  • Cell line height Slider, 0.8–2.4 phone & desktop
  • Cell letter spacing Slider, -8–12px phone & desktop
  • Cell alignment Design default · Left · Center · Right phone & desktop
Caption style
  • Caption font Google Font and weight phone & desktop
  • Caption size Slider, 10–28px phone & desktop
  • Caption color Colour phone & desktop
  • Caption line height Slider, 0.8–2.4 phone & desktop
  • Caption letter spacing Slider, -8–12px phone & desktop
  • Caption alignment Design default · Left · Center · Right phone & desktop
Note style
  • Note font Google Font and weight phone & desktop
  • Note size Slider, 10–24px phone & desktop
  • Note color Colour phone & desktop
  • Note line height Slider, 0.8–2.4 phone & desktop
  • Note letter spacing Slider, -8–12px phone & desktop
  • Note alignment Design default · Left · Center · Right phone & desktop
Kicker style
  • 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.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 10–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 10–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop

Team Grid

Free People

The people behind it: a portrait, a name, what they do and a few words about them.

4 designs: Cards, Round portraits, Name on the portrait, List. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 53

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, 320–1600px phone & desktop
Layout
  • Shape of the pictures Portrait (4:5) · Square · Tall (2:3)
  • Columns Slider, 1–6 phone & desktop
  • Gap Slider, 0–60px phone & desktop
  • Padding inside a card Slider, 0–48px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
People
  • People A list of people (up to 24): Portrait, Name, What they do, A few words (optional), Link words (optional), Link, Email (optional)
  • Words for the email link Text

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Grid style
  • Card background Colour phone & desktop
  • Accent color Colour phone & desktop
  • Corner radius Slider, 0–40px phone & desktop
Name style
  • Name font Google Font and weight phone & desktop
  • Name size Slider, 9–40px phone & desktop
  • Name color Colour phone & desktop
  • Name line height Slider, 0.8–2.4 phone & desktop
  • Name letter spacing Slider, -8–12px phone & desktop
  • Name alignment Design default · Left · Center · Right phone & desktop
What they do style
  • What they do font Google Font and weight phone & desktop
  • What they do size Slider, 9–28px phone & desktop
  • What they do color Colour phone & desktop
  • What they do line height Slider, 0.8–2.4 phone & desktop
  • What they do letter spacing Slider, -8–12px phone & desktop
  • What they do alignment Design default · Left · Center · Right phone & desktop
A few words style
  • A few words font Google Font and weight phone & desktop
  • A few words size Slider, 9–28px phone & desktop
  • A few words color Colour phone & desktop
  • A few words line height Slider, 0.8–2.4 phone & desktop
  • A few words letter spacing Slider, -8–12px phone & desktop
  • A few words alignment Design default · Left · Center · Right phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 9–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop

Video Grid

Free Media

Videos as a grid of pictures; pressing one plays it over the page.

4 designs: Titles under, Titles on the picture, First one large, List. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 47

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, 320–1600px phone & desktop
Layout
  • Columns Slider, 1–6 phone & desktop
  • Gap Slider, 0–60px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
Videos
  • Videos A list of videos (up to 24): Video, Picture shown before it plays, Title, A line under it (optional), Length (optional)
  • Word for play Text Read out by screen readers, before the title.
  • Name of the close button Text

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Grid style
  • Corner radius Slider, 0–40px phone & desktop
  • Play button Colour phone & desktop
  • Play button's arrow Colour phone & desktop
  • Picture not chosen yet Colour phone & desktop
Title style
  • Title font Google Font and weight phone & desktop
  • Title size Slider, 9–40px phone & desktop
  • Title color Colour phone & desktop
  • Title line height Slider, 0.8–2.4 phone & desktop
  • Title letter spacing Slider, -8–12px phone & desktop
  • Title alignment Design default · Left · Center · Right phone & desktop
Line under it style
  • Line under it font Google Font and weight phone & desktop
  • Line under it size Slider, 9–28px phone & desktop
  • Line under it color Colour phone & desktop
  • Line under it line height Slider, 0.8–2.4 phone & desktop
  • Line under it letter spacing Slider, -8–12px phone & desktop
  • Line under it alignment Design default · Left · Center · Right phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 9–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro 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 Availability calendar, Bubble Chart, Changelog… Forms & capture Appointment Request, Email Capture Card, Feedback Widget… Interactive Before / After Slider, Countdown Timer, Accordion… Motion & carousel Draggable Card Stack, Circular Carousel, Circular Text Marquee… Overlay & split layouts Blob Split, Diagonal Split, Foreground Cutout… Product structures Bundle Builder, Product Carousel, Product Grid… Typographic treatments Oversized Statement, Checklist, Interactive Glyph Explorer…