Portfolio Gallery section
Masonry portfolio photos with filters, lightbox, and progressive load.
Use Portfolio gallery for tattoo, piercing, or photo portfolios. Add Portfolio piece blocks, or pull Studio specialist portfolio photos on specialist profile pages. Optional filter chips use each piece’s tags.
Progressive load
Under Progressive load, choose how many photos show first (also the batch size for each reveal). Show all keeps every photo visible. Load more button reveals the next batch when shoppers tap. On scroll reveals the next batch near the bottom of the gallery, one batch at a time with a short pause so tall screens do not dump every photo at once; shoppers who prefer reduced motion get the Load more button instead. Photos beyond the initial count stay hidden in the HTML until revealed, so the first paint matches Initial visible photos. The lightbox only walks photos that are currently visible (not filtered out and not still hidden).
Gallery masks
Primary and secondary media masks, optional cell alternation, and stagger entrance affect the image grid only—not the section heading scroll reveal.
Sections overview · Section schema reference
Schema file
portfolio-gallery.liquid — t:sections.portfolio_gallery.name
Settings
| id | type | label |
|---|---|---|
| eyebrow | text | t:sections.portfolio_gallery.settings.eyebrow.label |
| heading | text | t:sections.portfolio_gallery.settings.heading.label |
| subheading | textarea | t:sections.portfolio_gallery.settings.subheading.label |
| source_mode | select | t:sections.portfolio_gallery.settings.source_mode.label |
| load_more_label | text | t:sections.portfolio_gallery.settings.load_more_label.label |
| columns | range | t:sections.portfolio_gallery.settings.columns.label |
| gallery_mask | select | t:sections.portfolio_gallery.settings.gallery_mask.label |
| gallery_mask_secondary | select | t:sections.portfolio_gallery.settings.gallery_mask_secondary.label |
| gallery_alternate_cells | select | t:sections.portfolio_gallery.settings.gallery_alternate_cells.label |
| gallery_stagger_entrance | checkbox | t:sections.portfolio_gallery.settings.gallery_stagger_entrance.label |
| gallery_hairline | checkbox | t:sections.portfolio_gallery.settings.gallery_hairline.label |
| color_scheme | color_scheme | t:sections.all.settings.color_scheme.label |
| edge_glow_color | select | t:sections.all.settings.edge_glow_color.label |
| padding_top | select | t:sections.all.settings.section_padding.padding_top.label |
| padding_bottom | select | t:sections.all.settings.section_padding.padding_bottom.label |
| border_top | select | t:sections.all.settings.border_top.label |
| border_bottom | select | t:sections.all.settings.border_bottom.label |
| divider_style_top | select | t:sections.all.settings.divider_style_top.label |
| divider_style_bottom | select | t:sections.all.settings.divider_style_bottom.label |
| use_specialist_metaobject_portfolio | checkbox | t:sections.portfolio_gallery.settings.use_specialist_metaobject_portfolio.label |
| reveal_mode | select | t:sections.portfolio_gallery.settings.reveal_mode.label |
| initial_items | range | t:sections.portfolio_gallery.settings.initial_items.label |
| enable_motion | checkbox | t:sections.portfolio_gallery.settings.enable_motion.label |
| edge_glow | select | t:sections.all.settings.edge_glow.label |
Blocks
| type | name | setting count |
|---|---|---|
| piece | t:sections.portfolio_gallery.blocks.piece.name | 6 |
Was this page helpful?
Content is maintained by Arcanum Hollow Labs. For internal engineering notes, see the docs/ folder in the monorepo.