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

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

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

## Items

1. [Journal index](https://blocko.ai/library/balm/sections/main-blog/) (Balm, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: main-blog
   - Live demo: https://demo.blocko.ai/html/balm/sections/main-blog--main-blog.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 "Journal index" (id `main-blog`, theme `balm`; live demo: https://demo.blocko.ai/html/balm/sections/main-blog--main-blog.html; Shopify bundle: sections/balm/main-blog/ 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. [Notes index](https://blocko.ai/library/bare/sections/main-blog/) (Bare, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: main-blog
   - Live demo: https://demo.blocko.ai/html/bare/sections/main-blog--main-blog.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 "Notes index" (id `main-blog`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/sections/main-blog--main-blog.html; Shopify bundle: sections/bare/main-blog/ 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. [Notes index](https://blocko.ai/library/blush/sections/main-blog/) (Blush, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: main-blog
   - Live demo: https://demo.blocko.ai/html/blush/sections/main-blog--main-blog.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 "Notes index" (id `main-blog`, theme `blush`; live demo: https://demo.blocko.ai/html/blush/sections/main-blog--main-blog.html; Shopify bundle: sections/blush/main-blog/ 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. [Journal index](https://blocko.ai/library/clip/sections/main-blog/) (Clip, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: main-blog
   - Live demo: https://demo.blocko.ai/html/clip/sections/main-blog--main-blog.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 "Journal index" (id `main-blog`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/sections/main-blog--main-blog.html; Shopify bundle: sections/clip/main-blog/ 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. [Journal index](https://blocko.ai/library/dew/sections/main-blog/) (Dew, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: main-blog
   - Live demo: https://demo.blocko.ai/html/dew/sections/main-blog--main-blog.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 "Journal index" (id `main-blog`, theme `dew`; live demo: https://demo.blocko.ai/html/dew/sections/main-blog--main-blog.html; Shopify bundle: sections/dew/main-blog/ 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. [Island Journal index](https://blocko.ai/library/isle/sections/main-blog/) (Isle, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: main-blog
   - Live demo: https://demo.blocko.ai/html/isle/sections/main-blog--main-blog.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 "Island Journal index" (id `main-blog`, theme `isle`; live demo: https://demo.blocko.ai/html/isle/sections/main-blog--main-blog.html; Shopify bundle: sections/isle/main-blog/ 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. [The Locker Room index](https://blocko.ai/library/lather/sections/main-blog/) (Lather, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: main-blog
   - Live demo: https://demo.blocko.ai/html/lather/sections/main-blog--main-blog.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 "The Locker Room index" (id `main-blog`, theme `lather`; live demo: https://demo.blocko.ai/html/lather/sections/main-blog--main-blog.html; Shopify bundle: sections/lather/main-blog/ 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. [The Strand index](https://blocko.ai/library/prism/sections/main-blog/) (Prism, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: main-blog
   - Live demo: https://demo.blocko.ai/html/prism/sections/main-blog--main-blog.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 "The Strand index" (id `main-blog`, theme `prism`; live demo: https://demo.blocko.ai/html/prism/sections/main-blog--main-blog.html; Shopify bundle: sections/prism/main-blog/ 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. [Journal index](https://blocko.ai/library/shelf/sections/main-blog/) (Shelf, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: main-blog
   - Live demo: https://demo.blocko.ai/html/shelf/sections/main-blog--main-blog.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 "Journal index" (id `main-blog`, theme `shelf`; live demo: https://demo.blocko.ai/html/shelf/sections/main-blog--main-blog.html; Shopify bundle: sections/shelf/main-blog/ 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. [The Field Guide index](https://blocko.ai/library/stubble/sections/main-blog/) (Stubble, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: main-blog
   - Live demo: https://demo.blocko.ai/html/stubble/sections/main-blog--main-blog.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 "The Field Guide index" (id `main-blog`, theme `stubble`; live demo: https://demo.blocko.ai/html/stubble/sections/main-blog--main-blog.html; Shopify bundle: sections/stubble/main-blog/ 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. [Journal index](https://blocko.ai/library/tide/sections/main-blog/) (Tide, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: main-blog
   - Live demo: https://demo.blocko.ai/html/tide/sections/main-blog--main-blog.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 "Journal index" (id `main-blog`, theme `tide`; live demo: https://demo.blocko.ai/html/tide/sections/main-blog--main-blog.html; Shopify bundle: sections/tide/main-blog/ 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. [Journal index](https://blocko.ai/library/tint/sections/main-blog/) (Tint, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: main-blog
   - Live demo: https://demo.blocko.ai/html/tint/sections/main-blog--main-blog.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 "Journal index" (id `main-blog`, theme `tint`; live demo: https://demo.blocko.ai/html/tint/sections/main-blog--main-blog.html; Shopify bundle: sections/tint/main-blog/ 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. [blog index](https://blocko.ai/library/twist/sections/main-blog/) (Twist, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: main-blog
   - Live demo: https://demo.blocko.ai/html/twist/sections/main-blog--main-blog.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 "blog index" (id `main-blog`, theme `twist`; live demo: https://demo.blocko.ai/html/twist/sections/main-blog--main-blog.html; Shopify bundle: sections/twist/main-blog/ 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. [Journal index](https://blocko.ai/library/veil/sections/main-blog/) (Veil, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: main-blog
   - Live demo: https://demo.blocko.ai/html/veil/sections/main-blog--main-blog.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 "Journal index" (id `main-blog`, theme `veil`; live demo: https://demo.blocko.ai/html/veil/sections/main-blog--main-blog.html; Shopify bundle: sections/veil/main-blog/ 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. [Journal hero](https://blocko.ai/library/balm/sections/search-blog-journal-hero/) (Balm, beauty)
   - Shopify Liquid: ready; JavaScript: 5.2 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/balm/sections/blog--search-blog-journal-hero.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 "Journal hero" (id `search-blog-journal-hero`, theme `balm`; live demo: https://demo.blocko.ai/html/balm/sections/blog--search-blog-journal-hero.html; Shopify bundle: sections/balm/search-blog-journal-hero/ 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. [Notes hero](https://blocko.ai/library/bare/sections/search-blog-journal-hero/) (Bare, beauty)
   - Shopify Liquid: ready; JavaScript: 5.2 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/bare/sections/blog--search-blog-journal-hero.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 "Notes hero" (id `search-blog-journal-hero`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/sections/blog--search-blog-journal-hero.html; Shopify bundle: sections/bare/search-blog-journal-hero/ 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. [Notes hero](https://blocko.ai/library/blush/sections/search-blog-journal-hero/) (Blush, beauty)
   - Shopify Liquid: ready; JavaScript: 5.2 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/blush/sections/blog--search-blog-journal-hero.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 "Notes hero" (id `search-blog-journal-hero`, theme `blush`; live demo: https://demo.blocko.ai/html/blush/sections/blog--search-blog-journal-hero.html; Shopify bundle: sections/blush/search-blog-journal-hero/ 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. [Journal hero](https://blocko.ai/library/clip/sections/search-blog-journal-hero/) (Clip, beauty)
   - Shopify Liquid: ready; JavaScript: 5.2 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/clip/sections/blog--search-blog-journal-hero.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 "Journal hero" (id `search-blog-journal-hero`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/sections/blog--search-blog-journal-hero.html; Shopify bundle: sections/clip/search-blog-journal-hero/ 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. [Journal hero](https://blocko.ai/library/dew/sections/search-blog-journal-hero/) (Dew, beauty)
   - Shopify Liquid: ready; JavaScript: 5.2 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/dew/sections/blog--search-blog-journal-hero.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 "Journal hero" (id `search-blog-journal-hero`, theme `dew`; live demo: https://demo.blocko.ai/html/dew/sections/blog--search-blog-journal-hero.html; Shopify bundle: sections/dew/search-blog-journal-hero/ 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. [Island Journal hero](https://blocko.ai/library/isle/sections/search-blog-journal-hero/) (Isle, beauty)
   - Shopify Liquid: ready; JavaScript: 5.2 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/isle/sections/blog--search-blog-journal-hero.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 "Island Journal hero" (id `search-blog-journal-hero`, theme `isle`; live demo: https://demo.blocko.ai/html/isle/sections/blog--search-blog-journal-hero.html; Shopify bundle: sections/isle/search-blog-journal-hero/ 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. [The Locker Room hero](https://blocko.ai/library/lather/sections/search-blog-journal-hero/) (Lather, beauty)
   - Shopify Liquid: ready; JavaScript: 5.2 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/lather/sections/blog--search-blog-journal-hero.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 "The Locker Room hero" (id `search-blog-journal-hero`, theme `lather`; live demo: https://demo.blocko.ai/html/lather/sections/blog--search-blog-journal-hero.html; Shopify bundle: sections/lather/search-blog-journal-hero/ 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. [The Strand hero](https://blocko.ai/library/prism/sections/search-blog-journal-hero/) (Prism, beauty)
   - Shopify Liquid: ready; JavaScript: 5.2 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/prism/sections/blog--search-blog-journal-hero.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 "The Strand hero" (id `search-blog-journal-hero`, theme `prism`; live demo: https://demo.blocko.ai/html/prism/sections/blog--search-blog-journal-hero.html; Shopify bundle: sections/prism/search-blog-journal-hero/ 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. [Journal hero](https://blocko.ai/library/shelf/sections/search-blog-journal-hero/) (Shelf, beauty)
   - Shopify Liquid: ready; JavaScript: 5.2 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/shelf/sections/blog--search-blog-journal-hero.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 "Journal hero" (id `search-blog-journal-hero`, theme `shelf`; live demo: https://demo.blocko.ai/html/shelf/sections/blog--search-blog-journal-hero.html; Shopify bundle: sections/shelf/search-blog-journal-hero/ 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. [The Field Guide hero](https://blocko.ai/library/stubble/sections/search-blog-journal-hero/) (Stubble, beauty)
   - Shopify Liquid: ready; JavaScript: 5.2 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/stubble/sections/blog--search-blog-journal-hero.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 "The Field Guide hero" (id `search-blog-journal-hero`, theme `stubble`; live demo: https://demo.blocko.ai/html/stubble/sections/blog--search-blog-journal-hero.html; Shopify bundle: sections/stubble/search-blog-journal-hero/ 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. [Journal hero](https://blocko.ai/library/tide/sections/search-blog-journal-hero/) (Tide, beauty)
   - Shopify Liquid: ready; JavaScript: 5.2 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/tide/sections/blog--search-blog-journal-hero.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 "Journal hero" (id `search-blog-journal-hero`, theme `tide`; live demo: https://demo.blocko.ai/html/tide/sections/blog--search-blog-journal-hero.html; Shopify bundle: sections/tide/search-blog-journal-hero/ 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. [Journal hero](https://blocko.ai/library/tint/sections/search-blog-journal-hero/) (Tint, beauty)
   - Shopify Liquid: ready; JavaScript: 5.2 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/tint/sections/blog--search-blog-journal-hero.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 "Journal hero" (id `search-blog-journal-hero`, theme `tint`; live demo: https://demo.blocko.ai/html/tint/sections/blog--search-blog-journal-hero.html; Shopify bundle: sections/tint/search-blog-journal-hero/ 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. [blog hero](https://blocko.ai/library/twist/sections/search-blog-journal-hero/) (Twist, beauty)
   - Shopify Liquid: ready; JavaScript: 5.2 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/twist/sections/blog--search-blog-journal-hero.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 "blog hero" (id `search-blog-journal-hero`, theme `twist`; live demo: https://demo.blocko.ai/html/twist/sections/blog--search-blog-journal-hero.html; Shopify bundle: sections/twist/search-blog-journal-hero/ 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. [Journal hero](https://blocko.ai/library/veil/sections/search-blog-journal-hero/) (Veil, beauty)
   - Shopify Liquid: ready; JavaScript: 5.2 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/veil/sections/blog--search-blog-journal-hero.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 "Journal hero" (id `search-blog-journal-hero`, theme `veil`; live demo: https://demo.blocko.ai/html/veil/sections/blog--search-blog-journal-hero.html; Shopify bundle: sections/veil/search-blog-journal-hero/ 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. [Filterable article grid](https://blocko.ai/library/balm/sections/search-blog-article-grid/) (Balm, beauty)
   - Shopify Liquid: ready; JavaScript: 5.6 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/balm/sections/blog--search-blog-article-grid.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 "Filterable article grid" (id `search-blog-article-grid`, theme `balm`; live demo: https://demo.blocko.ai/html/balm/sections/blog--search-blog-article-grid.html; Shopify bundle: sections/balm/search-blog-article-grid/ 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. [Filterable article grid](https://blocko.ai/library/bare/sections/search-blog-article-grid/) (Bare, beauty)
   - Shopify Liquid: ready; JavaScript: 5.6 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/bare/sections/blog--search-blog-article-grid.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 "Filterable article grid" (id `search-blog-article-grid`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/sections/blog--search-blog-article-grid.html; Shopify bundle: sections/bare/search-blog-article-grid/ 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. [Filterable article grid](https://blocko.ai/library/blush/sections/search-blog-article-grid/) (Blush, beauty)
   - Shopify Liquid: ready; JavaScript: 5.6 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/blush/sections/blog--search-blog-article-grid.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 "Filterable article grid" (id `search-blog-article-grid`, theme `blush`; live demo: https://demo.blocko.ai/html/blush/sections/blog--search-blog-article-grid.html; Shopify bundle: sections/blush/search-blog-article-grid/ 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. [Filterable article grid](https://blocko.ai/library/clip/sections/search-blog-article-grid/) (Clip, beauty)
   - Shopify Liquid: ready; JavaScript: 5.6 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/clip/sections/blog--search-blog-article-grid.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 "Filterable article grid" (id `search-blog-article-grid`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/sections/blog--search-blog-article-grid.html; Shopify bundle: sections/clip/search-blog-article-grid/ 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. [Filterable article grid](https://blocko.ai/library/dew/sections/search-blog-article-grid/) (Dew, beauty)
   - Shopify Liquid: ready; JavaScript: 5.6 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/dew/sections/blog--search-blog-article-grid.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 "Filterable article grid" (id `search-blog-article-grid`, theme `dew`; live demo: https://demo.blocko.ai/html/dew/sections/blog--search-blog-article-grid.html; Shopify bundle: sections/dew/search-blog-article-grid/ 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. [Filterable article grid](https://blocko.ai/library/isle/sections/search-blog-article-grid/) (Isle, beauty)
   - Shopify Liquid: ready; JavaScript: 5.6 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/isle/sections/blog--search-blog-article-grid.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 "Filterable article grid" (id `search-blog-article-grid`, theme `isle`; live demo: https://demo.blocko.ai/html/isle/sections/blog--search-blog-article-grid.html; Shopify bundle: sections/isle/search-blog-article-grid/ 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. [Filterable article grid](https://blocko.ai/library/lather/sections/search-blog-article-grid/) (Lather, beauty)
   - Shopify Liquid: ready; JavaScript: 5.6 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/lather/sections/blog--search-blog-article-grid.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 "Filterable article grid" (id `search-blog-article-grid`, theme `lather`; live demo: https://demo.blocko.ai/html/lather/sections/blog--search-blog-article-grid.html; Shopify bundle: sections/lather/search-blog-article-grid/ 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. [Filterable article grid](https://blocko.ai/library/prism/sections/search-blog-article-grid/) (Prism, beauty)
   - Shopify Liquid: ready; JavaScript: 5.6 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/prism/sections/blog--search-blog-article-grid.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 "Filterable article grid" (id `search-blog-article-grid`, theme `prism`; live demo: https://demo.blocko.ai/html/prism/sections/blog--search-blog-article-grid.html; Shopify bundle: sections/prism/search-blog-article-grid/ 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. [Filterable article grid](https://blocko.ai/library/shelf/sections/search-blog-article-grid/) (Shelf, beauty)
   - Shopify Liquid: ready; JavaScript: 5.6 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/shelf/sections/blog--search-blog-article-grid.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 "Filterable article grid" (id `search-blog-article-grid`, theme `shelf`; live demo: https://demo.blocko.ai/html/shelf/sections/blog--search-blog-article-grid.html; Shopify bundle: sections/shelf/search-blog-article-grid/ 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. [Filterable article grid](https://blocko.ai/library/stubble/sections/search-blog-article-grid/) (Stubble, beauty)
   - Shopify Liquid: ready; JavaScript: 5.6 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/stubble/sections/blog--search-blog-article-grid.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 "Filterable article grid" (id `search-blog-article-grid`, theme `stubble`; live demo: https://demo.blocko.ai/html/stubble/sections/blog--search-blog-article-grid.html; Shopify bundle: sections/stubble/search-blog-article-grid/ 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. [Filterable article grid](https://blocko.ai/library/tide/sections/search-blog-article-grid/) (Tide, beauty)
   - Shopify Liquid: ready; JavaScript: 5.6 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/tide/sections/blog--search-blog-article-grid.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 "Filterable article grid" (id `search-blog-article-grid`, theme `tide`; live demo: https://demo.blocko.ai/html/tide/sections/blog--search-blog-article-grid.html; Shopify bundle: sections/tide/search-blog-article-grid/ 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. [Filterable article grid](https://blocko.ai/library/tint/sections/search-blog-article-grid/) (Tint, beauty)
   - Shopify Liquid: ready; JavaScript: 5.6 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/tint/sections/blog--search-blog-article-grid.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 "Filterable article grid" (id `search-blog-article-grid`, theme `tint`; live demo: https://demo.blocko.ai/html/tint/sections/blog--search-blog-article-grid.html; Shopify bundle: sections/tint/search-blog-article-grid/ 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. [Filterable article grid](https://blocko.ai/library/twist/sections/search-blog-article-grid/) (Twist, beauty)
   - Shopify Liquid: ready; JavaScript: 5.6 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/twist/sections/blog--search-blog-article-grid.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 "Filterable article grid" (id `search-blog-article-grid`, theme `twist`; live demo: https://demo.blocko.ai/html/twist/sections/blog--search-blog-article-grid.html; Shopify bundle: sections/twist/search-blog-article-grid/ 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. [Filterable article grid](https://blocko.ai/library/veil/sections/search-blog-article-grid/) (Veil, beauty)
   - Shopify Liquid: ready; JavaScript: 5.6 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/veil/sections/blog--search-blog-article-grid.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 "Filterable article grid" (id `search-blog-article-grid`, theme `veil`; live demo: https://demo.blocko.ai/html/veil/sections/blog--search-blog-article-grid.html; Shopify bundle: sections/veil/search-blog-article-grid/ 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).
43. [Journal article grid](https://blocko.ai/library/tress/sections/search-blog-journal-grid/) (Tress, beauty)
   - Shopify Liquid: not yet (not migrated to neutral template); JavaScript: 3.5 KB; category: blog
   - Live demo: https://demo.blocko.ai/html/tress/sections/blog--search-blog-journal-grid.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 "Journal article grid" (id `search-blog-journal-grid`, theme `tress`; live demo: https://demo.blocko.ai/html/tress/sections/blog--search-blog-journal-grid.html; no Shopify bundle yet (not migrated to neutral template) — port it from the HTML demo demo/tress/sections/blog--search-blog-journal-grid.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 blog sections for Shopify?

Blocko lists 43 free, MIT-licensed blog sections from 15 themes. 42 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 Journal index from Balm comes first.

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

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

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

14 of 43 ship 0 KB of JavaScript. The heaviest is Filterable article grid in Balm at 5.6 KB, registered as an idempotent Custom Element.