Zeppelin StudioOpaline
  1. Docs
  2. Sections
  3. Products & collections

Products & collections

Product mosaic

Products from a collection laid out in a mosaic around a promotional glass panel with heading, subtitle and two links.

19 section settingsAvailable on every template
COLLECTION123
  1. 1Product tiles
  2. 2Center card with heading
  3. 3Link to the collection

Add the section#

Available on every template.

  1. From your Shopify admin, go to Online Store > Themes, then click Customize next to Opaline.
  2. Use the page selector at the top of the editor to open the template you want to change.
  3. In the sidebar, click Add section where you want it to appear.
  4. Select Product mosaic. Click the section in the sidebar to open its settings.
  5. Click Save in the top right corner when you are done.

Settings#

General

Collection
Collection

Choose one of your collections.

Number of products
Slider
Default: 18From 8 to 30, in steps of 1
Columns (desktop)
Slider
Default: 6From 4 to 8, in steps of 1
Mobile columns
Slider
Default: 4From 2 to 4, in steps of 1
Background color
Color

Pick a color, or type its hex code.

Default: #ffffff

Central promo block

Liquid glass effect (promo block)
Toggle

Turn on or off.

Default: On
Panel shape
Dropdown
Default: Rounded cornersRight angles
Panel text color
Color

Global color for the promo text.

Default: #151515
Title color
Color

Pick a color, or type its hex code.

Subtitle color
Color

Pick a color, or type its hex code.

Heading
Rich text

Use … for italics

Subtitle
Text

The text shown in this place.

Link 1 — label
Text

The text shown in this place.

Link 1 — URL
Link

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

Link 2 — label
Text

The text shown in this place.

Link 2 — URL
Link

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

Button text color
Color

Pick a color, or type its hex code.

Color scheme
Color scheme

The color scheme of the section. Schemes are set under Theme settings > Colors.

Default: Scheme 1
Heading typeface
Dropdown

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

Default: Theme defaultHeading fontBody fontSans-serif heading font