Zeppelin StudioOpaline
  1. Docs
  2. Sections
  3. Template sections

Template sections

Product grid

The collection page: title, description, filters and sorting, the product grid, and promotional tiles placed among the products.

31 section settings2 block types · 24 settingsAvailable on every template

Find the section#

It belongs to its page template and is already in place. Open that template with the page selector at the top of the editor, then click the section in the sidebar.

Settings#

General

Products per page
Slider
Default: 16From 8 to 48, in steps of 4
Columns (desktop)
Slider
Default: 4From 2 to 5, in steps of 1
Columns (mobile)
Dropdown
Default: 21
Feature every Nth product (wide)
Slider

0 = off. Makes every Nth product span 2 columns for a mixed-size layout.

Default: 0From 0 to 12, in steps of 1
Image ratio
Dropdown
Default: PortraitAdaptiveSquareLandscape
2nd image on hover
Toggle

Turn on or off.

Default: On
Breadcrumb
Toggle

Turn on or off.

Default: On
Show breadcrumbs on mobile
Toggle

Turn on or off.

Default: Off
Show collection image
Toggle

Uses the image set on the collection in your admin.

Default: On

Collection header

Overline
Text

A small line set above the collection title.

Overline size
Slider
Default: 100%From 60 to 200%, in steps of 5
Overline size (mobile)
Slider

Multiplies the setting above.

Default: 100%From 50 to 200%, in steps of 5
Heading size
Slider
Default: 100%From 60 to 220%, in steps of 5
Heading size (mobile)
Slider

Multiplies the setting above.

Default: 100%From 50 to 200%, in steps of 5

Category navigation

Show category navigation
Toggle

Turn on or off.

Default: Off
Category menu
Menu

Pick a menu — each link points to its own collection.

Navigation label (mobile)
Text

The text shown in this place.

Mobile behavior
Dropdown
Default: Scrolling bar (always visible)Dropdown menu
Navigation text size
Slider
Default: 100%From 70 to 180%, in steps of 5
Navigation text size (mobile)
Slider
Default: 100%From 70 to 200%, in steps of 5

Filters and sorting

Enable filters
Toggle

Turn on or off.

Default: On
Enable sorting
Toggle

Turn on or off.

Default: On

Layout

Spacing
Slider
Default: 4pxFrom 0 to 24px, in steps of 2
Grid padding
Slider
Default: 0pxFrom 0 to 120px, in steps of 4
Product name — top padding
Slider
Default: 12pxFrom 0 to 48px, in steps of 2
Product name — bottom padding
Slider
Default: 0pxFrom 0 to 48px, in steps of 2
Name size
Dropdown
Default: SmallVery smallMediumLarge
Name alignment
Dropdown
Default: LeftCenter

Margins

Top padding
Slider
Default: 36pxFrom 0 to 100px, in steps of 4
Bottom padding
Slider
Default: 48pxFrom 0 to 100px, in steps of 4
Heading typeface
Dropdown

Theme default follows the section heading font chosen in Theme settings > Typography.

Default: Theme defaultHeading fontBody fontSans-serif heading font

Blocks#

Click Add block under the section in the sidebar to add one, then drag blocks to reorder them.

Promo / editorial tile#

General

An image or video tile placed inside the product grid. It can span several columns (wide) or rows (tall).
Image
Image

Select an image from your Files, or upload a new one.

Video
Video

Optional. Replaces the image, autoplays muted and looped.

Background color
Color

Pick a color, or type its hex code.

Default: #E8E3DA
Position (before product #)
Slider

1 = before the first product. A value past the last product pins it to the end.

Default: 3From 1 to 48, in steps of 1
Width (columns)
Dropdown
Default: 2 columns1 column3 columns
Height (rows)
Dropdown
Default: 1 row2 rows (tall)
Eyebrow
Text

The text shown in this place.

Eyebrow size
Slider
Default: 100%From 60 to 200%, in steps of 5
Heading
Text

The text shown in this place.

Heading size
Slider
Default: 100%From 60 to 400%, in steps of 5
Button label
Text

The text shown in this place.

Button size
Slider
Default: 100%From 60 to 200%, in steps of 5
Link
Link

Where the link leads: a product, a collection, a page, or any web address.

Text color
Color

Pick a color, or type its hex code.

Default: #FFFFFF
Text position
Dropdown
Default: Bottom leftTop leftTop centerMiddle centerBottom center
Image overlay
Slider
Default: 0%From 0 to 80%, in steps of 5
Parallax effect
Toggle

Turn on or off.

Default: Off
Heading typeface
Dropdown

Theme default follows the section heading font chosen in Theme settings > Typography.

Default: Theme defaultHeading fontBody fontSans-serif heading font

Wide product#

General

Shows a catalog product spanning several columns for a mixed-size layout.
Product
Product

Choose one of your products.

Position (before product #)
Slider

1 = before the first product. A value past the last product pins it to the end.

Default: 3From 1 to 48, in steps of 1
Width (columns)
Dropdown
Default: 2 columns3 columns
Image ratio
Dropdown

Auto keeps the same height as the other cards so the product names line up.

Default: Auto (align with grid)LandscapeSquarePortraitAdapt to image

Layout

Product name — top padding
Slider
Default: 12pxFrom 0 to 48px, in steps of 2
Product name — bottom padding
Slider
Default: 0pxFrom 0 to 48px, in steps of 2

Good to know#

Good to know

Filters come from Shopify's Search & Discovery app. Add or remove filters there; the theme displays them.