Product dossier

Grouped disclosures for specifications, usage, ingredients, and shipping. Panels animate to their measured height on open and close, so the page does not snap. Up to 14 groups.

Merchant-addable
Yes
Settings
44
Block types
2
Max blocks
14
File
sections/product-dossier.liquid

Used by default on: Home , Product , product.set , Product (stage)

Screenshots pending

Captures for Product dossier at desktop and mobile widths are generated from a live store by npm run shots. They appear here automatically once that has run.

When to use it

Any product with more reference detail than belongs in the description.

Setting it up

  1. Add the section to a product template.
  2. Write the heading under Content.
  3. Add a Dossier group block per topic — specifications, how to use, shipping.
  4. Add Proof point blocks for short factual callouts that do not need a full panel.
  5. For an ingredients or certifications group, set Value source on the block so the body fills from the product. Prose panels stay typed. See Per-product content.

Where the content comes from

Blocks own all panel content.

Notes and cautions

  • Panels respect the global motion setting and fall back to an instant native toggle when motion is off or JavaScript is unavailable.
  • Do not hide anything that affects the purchase decision behind a disclosure. Shipping cost belongs in the open.

Section settings

Every setting on the section itself, in the order it appears in the theme editor. Group headings match the editor's own grouping.

Content

EyebrowText
ID
eyebrow
Default
Formula intelligence
HeadingText
ID
heading
Default
Product dossier
Heading sizeDropdown
ID
heading_size
Default
Medium
  • Smallsmall
  • Mediummedium
  • Largelarge
Body textRich text
ID
introduction
Default
<p>A clear account of the formula, its purpose, and the standards behind it.</p>
ProductProduct

Used for product images and the optional product link. On product pages, the current product supplies product images.

ID
fallback_product
Open the first group by defaultCheckbox
ID
open_first
Default
On
Show product linkCheckbox
ID
show_product_link
Default
On
Product link labelText
ID
product_link_label
Default
View product
Shown when
show_product_link

Media

Show mediaCheckbox
ID
show_media
Default
On
Media layoutDropdown
ID
media_layout
Default
Scrollable images
Shown when
show_media
  • Single imagesingle
  • Stacked imagesfolio
  • Scrollable imagesscroll
Image sourceDropdown

Choose product images or upload only the images you want to show.

ID
folio_source
Default
Product images
Shown when
show_media
  • Product imagesproduct
  • Uploaded imagescustom
Maximum product imagesDropdown
ID
folio_limit
Default
Three
Shown when
show_media and media_layout is not 'single' and folio_source is 'product'
  • Two2
  • Three3
Scrollable image heightSlider

Applies on desktop. On tablets and mobile, images display in the normal page flow.

ID
scroll_height
Default
680
Range
480px to 800px, in steps of 40px
Shown when
show_media and media_layout is 'scroll'
First imageImage

Upload the first image. Leave the remaining image fields blank to show only this image. 4:5 aspect ratio recommended.

ID
image
Shown when
show_media and folio_source is 'custom'
First image badgeText
ID
media_label
Default
Formula profile
Shown when
show_media and folio_source is 'custom'
First image captionText
ID
image_caption
Shown when
show_media and folio_source is 'custom'
Second image badgeText

Leave blank to hide the badge from the second folio image.

ID
image_2_label
Shown when
show_media and media_layout is not 'single' and folio_source is 'custom'
Third image badgeText

Leave blank to hide the badge from the third folio image.

ID
image_3_label
Shown when
show_media and media_layout is not 'single' and folio_source is 'custom'
Second imageImage

Shown after the first image.

ID
image_2
Shown when
show_media and media_layout is not 'single' and folio_source is 'custom'
Second image captionText
ID
image_2_caption
Shown when
show_media and media_layout is not 'single' and folio_source is 'custom'
Third imageImage

Shown after the second image.

ID
image_3
Shown when
show_media and media_layout is not 'single' and folio_source is 'custom'
Third image captionText
ID
image_3_caption
Shown when
show_media and media_layout is not 'single' and folio_source is 'custom'
Image position on desktopDropdown
ID
image_position
Default
Left
Shown when
show_media
  • Leftleft
  • Rightright
Media vertical alignment on desktopDropdown
ID
media_vertical_alignment
Default
Center
Shown when
show_media
  • Toptop
  • Centercenter
  • Bottombottom
Image width on desktopSlider
ID
desktop_media_width
Default
46
Range
38% to 54%, in steps of 2%
Shown when
show_media
Image ratioDropdown
ID
image_ratio
Default
Portrait
Shown when
show_media
  • Portraitportrait
  • Squaresquare
  • Landscapelandscape
Image fitDropdown
ID
image_fit
Default
Cover
Shown when
show_media
  • Covercover
  • Containcontain
Use custom corner radiusCheckbox
ID
use_custom_image_radius
Default
Off
Shown when
show_media
Image corner radiusSlider
ID
image_corner_radius
Default
0
Range
0px to 32px, in steps of 2px
Shown when
show_media and use_custom_image_radius

Style

Color schemeColor scheme
ID
color_scheme
Default
scheme-1
Top paddingSlider
ID
padding_top
Default
80
Range
0px to 120px, in steps of 4px
Bottom paddingSlider
ID
padding_bottom
Default
80
Range
0px to 120px, in steps of 4px

Blocks

Blocks are added, reordered, duplicated, and removed inside the section. Each type has its own settings.

Dossier group group max 10

IconDropdown
ID
icon
Default
Ingredients
  • Nonenone
  • Ingredientsformula
  • Benefitsbenefits
  • Suitabilitysuitability
  • Testingtesting
  • Warningswarning
  • Usageusage
  • Sourcingsourcing
HeadingText
ID
heading
Default
Ingredients
Scan textText

Use a short phrase that helps shoppers understand the group before opening it.

ID
summary
Default
What is inside and why it is here
Value sourceDropdown

Fills the body from the product, which suits an ingredients or certifications group. The typed content is used when the product has no value.

ID
attribute
Default
Manual value (same on every product)
  • Manual value (same on every product)manual
  • Certifications and standardsproduct-certifications-standards
  • Active ingredientsactive-ingredient
  • Constitutive ingredientsconstitutive-ingredients
  • Ingredient originingredient-origin
  • Skin typesuitable-for-skin-type
  • Skin care effectskin-care-effect
  • Skin care featuresskin-care-features
  • Product formproduct-form
  • Texturetexture
  • pH levelph-level
  • SPF levelspf-level
DetailsRich text

Connect this setting to a product metafield to maintain different information for each product.

ID
content
Default
<p>Highlight the ingredients that define this formula and explain the role each one plays.</p>
Fallback contentRich text

Shown when nothing else resolves, including when a dynamic source connected to the content is empty for a product. Leave blank to hide the group instead.

ID
fallback_content
Evidence noteText

Optional. Name the study, certification, standard, or documentation behind the information.

ID
source_label
Evidence linkLink

Optional. Link to supporting documentation or a relevant page in the store.

ID
source_link
Open this group by defaultCheckbox
ID
open_by_default
Default
Off

Proof point proof max 3

IconDropdown
ID
icon
Default
Verified
  • Nonenone
  • Verifiedverified
  • Leafleaf
  • Recyclablerecycle
  • Traceabletraceable
HeadingText
ID
heading
Default
Transparent formula
Supporting textText

Keep claims factual and remove any proof point that does not apply to the product.

ID
text