03GENERAL

Gallery in rows

This page explains how “Gallery in rows” actually behaves, which data it depends on, and what its settings change.

WHAT IT DOES

Gallery in rows

This page explains how “Gallery in rows” actually behaves, which data it depends on, and what its settings change.

Used in templates

page.ingredient-library.jsonpage.skin-concerns.json

IMPLICIT BEHAVIOR

What the theme does automatically

This section only displays elements that have content. Empty elements are ignored to preserve the layout.

CONFIGURATION

Understand the settings

Header

Enter the title, the introductory text and their alignment.

Titleheading

Texttext

Header Alignmentheader_alignment

Default: left · Options: Left, Center, Right

Layout

Adjust the width, number of columns and gallery behavior on mobile.

Widthwidth

Default: contained · Options: Content, Full width

Columns on desktopcolumns_desktop

Default: 3 · Range: 2–4

Mobile displaymobile_layout

Default: slider · Options: Horizontal slider, Vertical column

Width of a mobile slidemobile_slide_width

Default: 85 · Range: 70–95%

Card style

Adjust the framing, distance, angles and overlay intensity on images.

Image formatimage_ratio

Default: portrait · Options: Square, Portrait, Landscape, Wide 16:9

Spacinggap

Default: 16 · Range: 0–40px

Rounding imagescard_radius

Default: 24 · Range: 0–48px

Overlay intensityoverlay_opacity

Default: 55 · Range: 0–100%

Spacing

Adjust the space above and below the section.

Top marginpadding_top

Default: 80 · Range: 0–160px

Bottom marginpadding_bottom

Default: 80 · Range: 0–160px

Section palette

Applies a consistent palette to the background, text, and buttons in this section.

Section appearance

Use a dedicated paletteopaline_use_color_scheme

Default: disabled

Paletteopaline_color_scheme

Default: scheme-1

Title

Alignment on desktopopaline_heading_alignment

Default: inherit · Options: Keep the design, Left, Center, Right

Spacing

Space after sectionopaline_section_spacing

Creates space between this section and the next. Mobile spacing adjusts automatically.

Default: 0 · Range: 0–160px

Left and right insetopaline_content_inset

Moves content away from the edges. Mobile spacing adjusts automatically.

Default: 0 · Range: 0–120px

COMPOSITION

Available blocks

Pictureimage

Limit: 24

Add this block only when it provides useful information to the journey.

CHECKS

Before publishing

✓
Content remains readable in every color scheme.
✓
Labels match the storefront language.
✓
Displayed promotions match Shopify rules.
✓
Interactions remain accessible by keyboard and touch.