# Top 5 Gallery Sections for Shopify (Updated Oct 2026)

> Compare 5 free gallery sections for Shopify across 4 themes: 4 ship as Liquid, 4 need 0 KB JS. Live demos, agent prompts. Updated Oct 2026.

Page: https://blocko.ai/section/gallery/
MCP: https://blocko.ai/mcp
License: MIT. Not affiliated with Shopify.

## Items

1. [Make it yours](https://blocko.ai/library/blush/sections/blush-ugc/) (Blush, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: gallery
   - Live demo: https://demo.blocko.ai/html/blush/sections/gallery--blush-ugc.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Make it yours" (id `blush-ugc`, theme `blush`; live demo: https://demo.blocko.ai/html/blush/sections/gallery--blush-ugc.html; Shopify bundle: sections/blush/blush-ugc/ in the repo) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify).
2. [Editorial trio](https://blocko.ai/library/clip/sections/clip-trio/) (Clip, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: editorial
   - Live demo: https://demo.blocko.ai/html/clip/sections/editorial--clip-trio.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Editorial trio" (id `clip-trio`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/sections/editorial--clip-trio.html; Shopify bundle: sections/clip/clip-trio/ in the repo) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify).
3. [Photo mosaic](https://blocko.ai/library/clip/sections/clip-mosaic/) (Clip, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: social
   - Live demo: https://demo.blocko.ai/html/clip/sections/social--clip-mosaic.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Photo mosaic" (id `clip-mosaic`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/sections/social--clip-mosaic.html; Shopify bundle: sections/clip/clip-mosaic/ in the repo) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify).
4. [You + Dew strip](https://blocko.ai/library/dew/sections/dew-social-strip/) (Dew, beauty)
   - Shopify Liquid: ready; JavaScript: 0.7 KB; category: gallery
   - Live demo: https://demo.blocko.ai/html/dew/sections/gallery--dew-social-strip.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "You + Dew strip" (id `dew-social-strip`, theme `dew`; live demo: https://demo.blocko.ai/html/dew/sections/gallery--dew-social-strip.html; Shopify bundle: sections/dew/dew-social-strip/ in the repo) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify).
5. [Product carousel](https://blocko.ai/library/tress/sections/carousel/) (Tress, beauty)
   - Shopify Liquid: not yet (not migrated to neutral template); JavaScript: 0 KB; category: carousel
   - Live demo: https://demo.blocko.ai/html/tress/sections/carousel--carousel.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Product carousel" (id `carousel`, theme `tress`; live demo: https://demo.blocko.ai/html/tress/sections/carousel--carousel.html; no Shopify bundle yet (not migrated to neutral template) — port it from the HTML demo demo/tress/sections/carousel--carousel.html into a Liquid section with a {% schema %}, mirroring the structure of an existing bundle in sections/veil/) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify).

## FAQ

### What are the best gallery sections for Shopify?

Blocko lists 5 free, MIT-licensed gallery sections from 4 themes. 4 of them ship as Shopify Liquid today and the rest are complete HTML demos. The list is ranked with Liquid-ready items first, then by the least JavaScript, so Make it yours from Blush comes first.

### Are these gallery sections free to use?

Yes. Every item is MIT licensed, free to copy and edit, and needs no app or subscription. Blocko is not affiliated with Shopify.

### How do I add one of these gallery sections to my Shopify store?

Open an item, copy its one-line prompt into your coding agent, or connect the Blocko MCP server at https://blocko.ai/mcp. The agent asks where the section should go before it changes any code.

### Which industries do these gallery sections cover?

Beauty. Every industry with at least three matching items has its own list.

### How much JavaScript do these gallery sections ship?

4 of 5 ship 0 KB of JavaScript. The heaviest is You + Dew strip in Dew at 0.7 KB, registered as an idempotent Custom Element.