03GENERAL

Details Explorer

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

WHAT IT DOES

Details Explorer

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

Used in templates

index.jsonpage.ingredient-library.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

Content

Complete the main texts displayed in this part of the section.

Eyebroweyebrow

Titleheading

Introductionintroduction

Accessibility labelaccessibility_label

Optional. The section title is used if this field is left empty.

Presentation

Choose the layout, style and dimensions of the section elements.

Layoutlayout

Default: circles · Options: Pastilles, Cards, List

Card stylecard_style

The style applies to maps and lists. The pellets remain light.

Default: minimal · Options: Minimal, Soft surface, Liquid glass

Alignmenttext_alignment

Default: center · Options: Left, Centered

Columns on desktopcolumns_desktop

Default: 5 · Range: 2–6

Columns on mobilecolumns_mobile

Default: 2 · Options: 1, 2, 3

Spacinggap

Default: 24 · Range: 8–40px

Pellets sizethumbnail_size

Default: 180 · Range: 100–280px

Image formatimage_ratio

Default: square · Options: Square, Landscape, Portrait

Show summaries in gridshow_summary

Default: disabled

Backgroundbackground_style

Default: transparent · Options: Opaline Background, Soft veil

Drawer

Choose the side, width and accessible labels of the side panel.

Desktop sidedrawer_side

Default: right · Options: Right, Left

Width on desktopdrawer_width

Default: 620 · Range: 420–760px

Opening wordingopen_label

Drawer labeldrawer_label

Closing wordingclose_label

Spacing

Adjust the space above and below the section.

Top marginpadding_top

Default: 72 · Range: 0–120px

Bottom marginpadding_bottom

Default: 72 · Range: 0–120px

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

Detail itemdetail

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.