# Top 43 Multicolumn Sections for Shopify (Updated Oct 2026)

> Compare 43 free multicolumn sections for Shopify across 15 themes: 41 ship as Liquid, 27 need 0 KB JS. Live demos, agent prompts. Updated Oct 2026.

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

## Items

1. [Brand commitments](https://blocko.ai/library/balm/sections/commitments/) (Balm, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/balm/sections/multicolumn--commitments.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 "Brand commitments" (id `commitments`, theme `balm`; live demo: https://demo.blocko.ai/html/balm/sections/multicolumn--commitments.html; Shopify bundle: sections/balm/commitments/ 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. [Values grid](https://blocko.ai/library/balm/sections/multicolumn-values/) (Balm, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/balm/sections/multicolumn--multicolumn-values.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 "Values grid" (id `multicolumn-values`, theme `balm`; live demo: https://demo.blocko.ai/html/balm/sections/multicolumn--multicolumn-values.html; Shopify bundle: sections/balm/multicolumn-values/ 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. [Brand commitments](https://blocko.ai/library/bare/sections/commitments/) (Bare, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/bare/sections/multicolumn--commitments.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 "Brand commitments" (id `commitments`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/sections/multicolumn--commitments.html; Shopify bundle: sections/bare/commitments/ 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. [Values grid](https://blocko.ai/library/bare/sections/multicolumn-values/) (Bare, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/bare/sections/multicolumn--multicolumn-values.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 "Values grid" (id `multicolumn-values`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/sections/multicolumn--multicolumn-values.html; Shopify bundle: sections/bare/multicolumn-values/ 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. [Blush commitments](https://blocko.ai/library/blush/sections/commitments/) (Blush, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/blush/sections/multicolumn--commitments.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 "Blush commitments" (id `commitments`, theme `blush`; live demo: https://demo.blocko.ai/html/blush/sections/multicolumn--commitments.html; Shopify bundle: sections/blush/commitments/ 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).
6. [Values grid](https://blocko.ai/library/blush/sections/multicolumn-values/) (Blush, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/blush/sections/multicolumn--multicolumn-values.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 "Values grid" (id `multicolumn-values`, theme `blush`; live demo: https://demo.blocko.ai/html/blush/sections/multicolumn--multicolumn-values.html; Shopify bundle: sections/blush/multicolumn-values/ 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).
7. [Brand commitments](https://blocko.ai/library/clip/sections/commitments/) (Clip, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/clip/sections/multicolumn--commitments.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 "Brand commitments" (id `commitments`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/sections/multicolumn--commitments.html; Shopify bundle: sections/clip/commitments/ 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).
8. [Values grid](https://blocko.ai/library/clip/sections/multicolumn-values/) (Clip, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/clip/sections/multicolumn--multicolumn-values.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 "Values grid" (id `multicolumn-values`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/sections/multicolumn--multicolumn-values.html; Shopify bundle: sections/clip/multicolumn-values/ 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).
9. [Brand commitments](https://blocko.ai/library/dew/sections/commitments/) (Dew, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/dew/sections/multicolumn--commitments.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 "Brand commitments" (id `commitments`, theme `dew`; live demo: https://demo.blocko.ai/html/dew/sections/multicolumn--commitments.html; Shopify bundle: sections/dew/commitments/ 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).
10. [Values grid](https://blocko.ai/library/dew/sections/multicolumn-values/) (Dew, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/dew/sections/multicolumn--multicolumn-values.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 "Values grid" (id `multicolumn-values`, theme `dew`; live demo: https://demo.blocko.ai/html/dew/sections/multicolumn--multicolumn-values.html; Shopify bundle: sections/dew/multicolumn-values/ 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).
11. [Icon claim row](https://blocko.ai/library/isle/sections/isle-claims/) (Isle, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/isle/sections/multicolumn--isle-claims.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 "Icon claim row" (id `isle-claims`, theme `isle`; live demo: https://demo.blocko.ai/html/isle/sections/multicolumn--isle-claims.html; Shopify bundle: sections/isle/isle-claims/ 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).
12. [Proven results](https://blocko.ai/library/isle/sections/isle-results/) (Isle, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/isle/sections/multicolumn--isle-results.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 "Proven results" (id `isle-results`, theme `isle`; live demo: https://demo.blocko.ai/html/isle/sections/multicolumn--isle-results.html; Shopify bundle: sections/isle/isle-results/ 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).
13. [Values grid](https://blocko.ai/library/isle/sections/multicolumn-values/) (Isle, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/isle/sections/multicolumn--multicolumn-values.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 "Values grid" (id `multicolumn-values`, theme `isle`; live demo: https://demo.blocko.ai/html/isle/sections/multicolumn--multicolumn-values.html; Shopify bundle: sections/isle/multicolumn-values/ 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).
14. [Brand commitments](https://blocko.ai/library/lather/sections/commitments/) (Lather, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/lather/sections/multicolumn--commitments.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 "Brand commitments" (id `commitments`, theme `lather`; live demo: https://demo.blocko.ai/html/lather/sections/multicolumn--commitments.html; Shopify bundle: sections/lather/commitments/ 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).
15. [Values grid](https://blocko.ai/library/lather/sections/multicolumn-values/) (Lather, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/lather/sections/multicolumn--multicolumn-values.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 "Values grid" (id `multicolumn-values`, theme `lather`; live demo: https://demo.blocko.ai/html/lather/sections/multicolumn--multicolumn-values.html; Shopify bundle: sections/lather/multicolumn-values/ 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).
16. [Brand commitments](https://blocko.ai/library/prism/sections/commitments/) (Prism, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/prism/sections/multicolumn--commitments.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 "Brand commitments" (id `commitments`, theme `prism`; live demo: https://demo.blocko.ai/html/prism/sections/multicolumn--commitments.html; Shopify bundle: sections/prism/commitments/ 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).
17. [Values grid](https://blocko.ai/library/prism/sections/multicolumn-values/) (Prism, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/prism/sections/multicolumn--multicolumn-values.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 "Values grid" (id `multicolumn-values`, theme `prism`; live demo: https://demo.blocko.ai/html/prism/sections/multicolumn--multicolumn-values.html; Shopify bundle: sections/prism/multicolumn-values/ 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).
18. [Values grid](https://blocko.ai/library/shelf/sections/multicolumn-values/) (Shelf, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/shelf/sections/multicolumn--multicolumn-values.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 "Values grid" (id `multicolumn-values`, theme `shelf`; live demo: https://demo.blocko.ai/html/shelf/sections/multicolumn--multicolumn-values.html; Shopify bundle: sections/shelf/multicolumn-values/ 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).
19. [Brand commitments](https://blocko.ai/library/stubble/sections/commitments/) (Stubble, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/stubble/sections/multicolumn--commitments.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 "Brand commitments" (id `commitments`, theme `stubble`; live demo: https://demo.blocko.ai/html/stubble/sections/multicolumn--commitments.html; Shopify bundle: sections/stubble/commitments/ 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).
20. [Values grid](https://blocko.ai/library/stubble/sections/multicolumn-values/) (Stubble, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/stubble/sections/multicolumn--multicolumn-values.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 "Values grid" (id `multicolumn-values`, theme `stubble`; live demo: https://demo.blocko.ai/html/stubble/sections/multicolumn--multicolumn-values.html; Shopify bundle: sections/stubble/multicolumn-values/ 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).
21. [Brand commitments](https://blocko.ai/library/tide/sections/commitments/) (Tide, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/tide/sections/multicolumn--commitments.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 "Brand commitments" (id `commitments`, theme `tide`; live demo: https://demo.blocko.ai/html/tide/sections/multicolumn--commitments.html; Shopify bundle: sections/tide/commitments/ 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).
22. [Values grid](https://blocko.ai/library/tide/sections/multicolumn-values/) (Tide, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/tide/sections/multicolumn--multicolumn-values.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 "Values grid" (id `multicolumn-values`, theme `tide`; live demo: https://demo.blocko.ai/html/tide/sections/multicolumn--multicolumn-values.html; Shopify bundle: sections/tide/multicolumn-values/ 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).
23. [Tint commitments](https://blocko.ai/library/tint/sections/commitments/) (Tint, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/tint/sections/multicolumn--commitments.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 "Tint commitments" (id `commitments`, theme `tint`; live demo: https://demo.blocko.ai/html/tint/sections/multicolumn--commitments.html; Shopify bundle: sections/tint/commitments/ 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).
24. [Values grid](https://blocko.ai/library/tint/sections/multicolumn-values/) (Tint, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/tint/sections/multicolumn--multicolumn-values.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 "Values grid" (id `multicolumn-values`, theme `tint`; live demo: https://demo.blocko.ai/html/tint/sections/multicolumn--multicolumn-values.html; Shopify bundle: sections/tint/multicolumn-values/ 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).
25. [Values grid](https://blocko.ai/library/twist/sections/multicolumn-values/) (Twist, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/twist/sections/multicolumn--multicolumn-values.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 "Values grid" (id `multicolumn-values`, theme `twist`; live demo: https://demo.blocko.ai/html/twist/sections/multicolumn--multicolumn-values.html; Shopify bundle: sections/twist/multicolumn-values/ 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).
26. [Brand commitments](https://blocko.ai/library/veil/sections/commitments/) (Veil, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/veil/sections/multicolumn--commitments.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 "Brand commitments" (id `commitments`, theme `veil`; live demo: https://demo.blocko.ai/html/veil/sections/multicolumn--commitments.html; Shopify bundle: sections/veil/commitments/ 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).
27. [Values grid](https://blocko.ai/library/veil/sections/multicolumn-values/) (Veil, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/veil/sections/multicolumn--multicolumn-values.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 "Values grid" (id `multicolumn-values`, theme `veil`; live demo: https://demo.blocko.ai/html/veil/sections/multicolumn--multicolumn-values.html; Shopify bundle: sections/veil/multicolumn-values/ 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).
28. [Bundle steps](https://blocko.ai/library/balm/sections/pdp-bundle-explainer/) (Balm, beauty)
   - Shopify Liquid: ready; JavaScript: 15 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/balm/sections/multicolumn--pdp-bundle-explainer.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 "Bundle steps" (id `pdp-bundle-explainer`, theme `balm`; live demo: https://demo.blocko.ai/html/balm/sections/multicolumn--pdp-bundle-explainer.html; Shopify bundle: sections/balm/pdp-bundle-explainer/ 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).
29. [Bundle steps](https://blocko.ai/library/bare/sections/pdp-bundle-explainer/) (Bare, beauty)
   - Shopify Liquid: ready; JavaScript: 15 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/bare/sections/multicolumn--pdp-bundle-explainer.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 "Bundle steps" (id `pdp-bundle-explainer`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/sections/multicolumn--pdp-bundle-explainer.html; Shopify bundle: sections/bare/pdp-bundle-explainer/ 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).
30. [Bundle steps](https://blocko.ai/library/blush/sections/pdp-bundle-explainer/) (Blush, beauty)
   - Shopify Liquid: ready; JavaScript: 15 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/blush/sections/multicolumn--pdp-bundle-explainer.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 "Bundle steps" (id `pdp-bundle-explainer`, theme `blush`; live demo: https://demo.blocko.ai/html/blush/sections/multicolumn--pdp-bundle-explainer.html; Shopify bundle: sections/blush/pdp-bundle-explainer/ 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).
31. [Bundle steps](https://blocko.ai/library/clip/sections/pdp-bundle-explainer/) (Clip, beauty)
   - Shopify Liquid: ready; JavaScript: 15 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/clip/sections/multicolumn--pdp-bundle-explainer.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 "Bundle steps" (id `pdp-bundle-explainer`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/sections/multicolumn--pdp-bundle-explainer.html; Shopify bundle: sections/clip/pdp-bundle-explainer/ 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).
32. [Bundle steps](https://blocko.ai/library/dew/sections/pdp-bundle-explainer/) (Dew, beauty)
   - Shopify Liquid: ready; JavaScript: 15 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/dew/sections/multicolumn--pdp-bundle-explainer.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 "Bundle steps" (id `pdp-bundle-explainer`, theme `dew`; live demo: https://demo.blocko.ai/html/dew/sections/multicolumn--pdp-bundle-explainer.html; Shopify bundle: sections/dew/pdp-bundle-explainer/ 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).
33. [Bundle steps](https://blocko.ai/library/isle/sections/pdp-bundle-explainer/) (Isle, beauty)
   - Shopify Liquid: ready; JavaScript: 15 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/isle/sections/multicolumn--pdp-bundle-explainer.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 "Bundle steps" (id `pdp-bundle-explainer`, theme `isle`; live demo: https://demo.blocko.ai/html/isle/sections/multicolumn--pdp-bundle-explainer.html; Shopify bundle: sections/isle/pdp-bundle-explainer/ 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).
34. [Bundle steps](https://blocko.ai/library/lather/sections/pdp-bundle-explainer/) (Lather, beauty)
   - Shopify Liquid: ready; JavaScript: 15 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/lather/sections/multicolumn--pdp-bundle-explainer.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 "Bundle steps" (id `pdp-bundle-explainer`, theme `lather`; live demo: https://demo.blocko.ai/html/lather/sections/multicolumn--pdp-bundle-explainer.html; Shopify bundle: sections/lather/pdp-bundle-explainer/ 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).
35. [Bundle steps](https://blocko.ai/library/prism/sections/pdp-bundle-explainer/) (Prism, beauty)
   - Shopify Liquid: ready; JavaScript: 15 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/prism/sections/multicolumn--pdp-bundle-explainer.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 "Bundle steps" (id `pdp-bundle-explainer`, theme `prism`; live demo: https://demo.blocko.ai/html/prism/sections/multicolumn--pdp-bundle-explainer.html; Shopify bundle: sections/prism/pdp-bundle-explainer/ 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).
36. [Bundle steps](https://blocko.ai/library/shelf/sections/pdp-bundle-explainer/) (Shelf, beauty)
   - Shopify Liquid: ready; JavaScript: 15 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/shelf/sections/multicolumn--pdp-bundle-explainer.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 "Bundle steps" (id `pdp-bundle-explainer`, theme `shelf`; live demo: https://demo.blocko.ai/html/shelf/sections/multicolumn--pdp-bundle-explainer.html; Shopify bundle: sections/shelf/pdp-bundle-explainer/ 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).
37. [Bundle steps](https://blocko.ai/library/stubble/sections/pdp-bundle-explainer/) (Stubble, beauty)
   - Shopify Liquid: ready; JavaScript: 15 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/stubble/sections/multicolumn--pdp-bundle-explainer.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 "Bundle steps" (id `pdp-bundle-explainer`, theme `stubble`; live demo: https://demo.blocko.ai/html/stubble/sections/multicolumn--pdp-bundle-explainer.html; Shopify bundle: sections/stubble/pdp-bundle-explainer/ 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).
38. [Bundle steps](https://blocko.ai/library/tide/sections/pdp-bundle-explainer/) (Tide, beauty)
   - Shopify Liquid: ready; JavaScript: 15 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/tide/sections/multicolumn--pdp-bundle-explainer.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 "Bundle steps" (id `pdp-bundle-explainer`, theme `tide`; live demo: https://demo.blocko.ai/html/tide/sections/multicolumn--pdp-bundle-explainer.html; Shopify bundle: sections/tide/pdp-bundle-explainer/ 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).
39. [Bundle steps](https://blocko.ai/library/tint/sections/pdp-bundle-explainer/) (Tint, beauty)
   - Shopify Liquid: ready; JavaScript: 15 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/tint/sections/multicolumn--pdp-bundle-explainer.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 "Bundle steps" (id `pdp-bundle-explainer`, theme `tint`; live demo: https://demo.blocko.ai/html/tint/sections/multicolumn--pdp-bundle-explainer.html; Shopify bundle: sections/tint/pdp-bundle-explainer/ 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).
40. [Bundle steps](https://blocko.ai/library/twist/sections/pdp-bundle-explainer/) (Twist, beauty)
   - Shopify Liquid: ready; JavaScript: 15 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/twist/sections/multicolumn--pdp-bundle-explainer.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 "Bundle steps" (id `pdp-bundle-explainer`, theme `twist`; live demo: https://demo.blocko.ai/html/twist/sections/multicolumn--pdp-bundle-explainer.html; Shopify bundle: sections/twist/pdp-bundle-explainer/ 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).
41. [Bundle steps](https://blocko.ai/library/veil/sections/pdp-bundle-explainer/) (Veil, beauty)
   - Shopify Liquid: ready; JavaScript: 15 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/veil/sections/multicolumn--pdp-bundle-explainer.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 "Bundle steps" (id `pdp-bundle-explainer`, theme `veil`; live demo: https://demo.blocko.ai/html/veil/sections/multicolumn--pdp-bundle-explainer.html; Shopify bundle: sections/veil/pdp-bundle-explainer/ 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).
42. [Benefits by hair type](https://blocko.ai/library/tress/sections/pdp-hair-benefits/) (Tress, beauty)
   - Shopify Liquid: not yet (not migrated to neutral template); JavaScript: 3.1 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/tress/sections/multicolumn--pdp-hair-benefits.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 "Benefits by hair type" (id `pdp-hair-benefits`, theme `tress`; live demo: https://demo.blocko.ai/html/tress/sections/multicolumn--pdp-hair-benefits.html; no Shopify bundle yet (not migrated to neutral template) — port it from the HTML demo demo/tress/sections/multicolumn--pdp-hair-benefits.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).
43. [Retail benefits strip](https://blocko.ai/library/tress/sections/home-collection-benefits/) (Tress, beauty)
   - Shopify Liquid: not yet (not migrated to neutral template); JavaScript: 4.4 KB; category: multicolumn
   - Live demo: https://demo.blocko.ai/html/tress/sections/multicolumn--home-collection-benefits.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 "Retail benefits strip" (id `home-collection-benefits`, theme `tress`; live demo: https://demo.blocko.ai/html/tress/sections/multicolumn--home-collection-benefits.html; no Shopify bundle yet (not migrated to neutral template) — port it from the HTML demo demo/tress/sections/multicolumn--home-collection-benefits.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 multicolumn sections for Shopify?

Blocko lists 43 free, MIT-licensed multicolumn sections from 15 themes. 41 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 Brand commitments from Balm comes first.

### Are these multicolumn 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 multicolumn 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 multicolumn sections cover?

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

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

27 of 43 ship 0 KB of JavaScript. The heaviest is Bundle steps in Balm at 15 KB, registered as an idempotent Custom Element.