# Top 46 Quizzes and Finders Sections for Shopify (Updated Oct 2026)

> Compare 46 free quizzes and finders sections for Shopify across 15 themes: 42 ship as Liquid, 16 need 0 KB JS. Live demos, agent prompts. Updated Oct 2026.

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

## Items

1. [Shade finder](https://blocko.ai/library/balm/sections/shade-finder/) (Balm, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/balm/sections/quiz--shade-finder.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 "Shade finder" (id `shade-finder`, theme `balm`; live demo: https://demo.blocko.ai/html/balm/sections/quiz--shade-finder.html; Shopify bundle: sections/balm/shade-finder/ 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. [Shade finder](https://blocko.ai/library/bare/sections/shade-finder/) (Bare, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/bare/sections/quiz--shade-finder.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 "Shade finder" (id `shade-finder`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/sections/quiz--shade-finder.html; Shopify bundle: sections/bare/shade-finder/ 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. [Shade grid](https://blocko.ai/library/bare/sections/bare-shade-grid/) (Bare, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: shade-finder
   - Live demo: https://demo.blocko.ai/html/bare/sections/shade-finder--bare-shade-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 "Shade grid" (id `bare-shade-grid`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/sections/shade-finder--bare-shade-grid.html; Shopify bundle: sections/bare/bare-shade-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).
4. [Shade finder](https://blocko.ai/library/blush/sections/shade-finder/) (Blush, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/blush/sections/quiz--shade-finder.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 "Shade finder" (id `shade-finder`, theme `blush`; live demo: https://demo.blocko.ai/html/blush/sections/quiz--shade-finder.html; Shopify bundle: sections/blush/shade-finder/ 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. [Size guide](https://blocko.ai/library/clip/sections/shade-finder/) (Clip, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/clip/sections/quiz--shade-finder.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 "Size guide" (id `shade-finder`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/sections/quiz--shade-finder.html; Shopify bundle: sections/clip/shade-finder/ 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. [Shade finder](https://blocko.ai/library/dew/sections/shade-finder/) (Dew, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/dew/sections/quiz--shade-finder.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 "Shade finder" (id `shade-finder`, theme `dew`; live demo: https://demo.blocko.ai/html/dew/sections/quiz--shade-finder.html; Shopify bundle: sections/dew/shade-finder/ 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. [Scent finder](https://blocko.ai/library/isle/sections/shade-finder/) (Isle, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/isle/sections/quiz--shade-finder.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 "Scent finder" (id `shade-finder`, theme `isle`; live demo: https://demo.blocko.ai/html/isle/sections/quiz--shade-finder.html; Shopify bundle: sections/isle/shade-finder/ 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. [Scent finder](https://blocko.ai/library/lather/sections/shade-finder/) (Lather, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/lather/sections/quiz--shade-finder.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 "Scent finder" (id `shade-finder`, theme `lather`; live demo: https://demo.blocko.ai/html/lather/sections/quiz--shade-finder.html; Shopify bundle: sections/lather/shade-finder/ 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. [Shade finder](https://blocko.ai/library/prism/sections/shade-finder/) (Prism, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/prism/sections/quiz--shade-finder.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 "Shade finder" (id `shade-finder`, theme `prism`; live demo: https://demo.blocko.ai/html/prism/sections/quiz--shade-finder.html; Shopify bundle: sections/prism/shade-finder/ 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. [Shade finder](https://blocko.ai/library/shelf/sections/shade-finder/) (Shelf, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/shelf/sections/quiz--shade-finder.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 "Shade finder" (id `shade-finder`, theme `shelf`; live demo: https://demo.blocko.ai/html/shelf/sections/quiz--shade-finder.html; Shopify bundle: sections/shelf/shade-finder/ 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. [Scent finder](https://blocko.ai/library/stubble/sections/shade-finder/) (Stubble, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/stubble/sections/quiz--shade-finder.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 "Scent finder" (id `shade-finder`, theme `stubble`; live demo: https://demo.blocko.ai/html/stubble/sections/quiz--shade-finder.html; Shopify bundle: sections/stubble/shade-finder/ 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. [Skin-type quiz](https://blocko.ai/library/tide/sections/shade-finder/) (Tide, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/tide/sections/quiz--shade-finder.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 "Skin-type quiz" (id `shade-finder`, theme `tide`; live demo: https://demo.blocko.ai/html/tide/sections/quiz--shade-finder.html; Shopify bundle: sections/tide/shade-finder/ 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. [Shade finder](https://blocko.ai/library/tint/sections/shade-finder/) (Tint, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/tint/sections/quiz--shade-finder.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 "Shade finder" (id `shade-finder`, theme `tint`; live demo: https://demo.blocko.ai/html/tint/sections/quiz--shade-finder.html; Shopify bundle: sections/tint/shade-finder/ 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. [Shade finder strip](https://blocko.ai/library/tint/sections/tint-shades/) (Tint, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: shade-finder
   - Live demo: https://demo.blocko.ai/html/tint/sections/shade-finder--tint-shades.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 "Shade finder strip" (id `tint-shades`, theme `tint`; live demo: https://demo.blocko.ai/html/tint/sections/shade-finder--tint-shades.html; Shopify bundle: sections/tint/tint-shades/ 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. [Hair quiz](https://blocko.ai/library/twist/sections/shade-finder/) (Twist, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/twist/sections/quiz--shade-finder.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 "Hair quiz" (id `shade-finder`, theme `twist`; live demo: https://demo.blocko.ai/html/twist/sections/quiz--shade-finder.html; Shopify bundle: sections/twist/shade-finder/ 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. [Shade finder](https://blocko.ai/library/veil/sections/shade-finder/) (Veil, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/veil/sections/quiz--shade-finder.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 "Shade finder" (id `shade-finder`, theme `veil`; live demo: https://demo.blocko.ai/html/veil/sections/quiz--shade-finder.html; Shopify bundle: sections/veil/shade-finder/ 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. [Shade finder quiz](https://blocko.ai/library/balm/sections/beauty-extras-shade-quiz/) (Balm, beauty)
   - Shopify Liquid: ready; JavaScript: 9.0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/balm/sections/quiz--beauty-extras-shade-quiz.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 "Shade finder quiz" (id `beauty-extras-shade-quiz`, theme `balm`; live demo: https://demo.blocko.ai/html/balm/sections/quiz--beauty-extras-shade-quiz.html; Shopify bundle: sections/balm/beauty-extras-shade-quiz/ 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. [Shade finder result](https://blocko.ai/library/balm/sections/beauty-extras-shade-result/) (Balm, beauty)
   - Shopify Liquid: ready; JavaScript: 9.0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/balm/sections/quiz--beauty-extras-shade-result.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 "Shade finder result" (id `beauty-extras-shade-result`, theme `balm`; live demo: https://demo.blocko.ai/html/balm/sections/quiz--beauty-extras-shade-result.html; Shopify bundle: sections/balm/beauty-extras-shade-result/ 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. [Shade finder quiz](https://blocko.ai/library/bare/sections/beauty-extras-shade-quiz/) (Bare, beauty)
   - Shopify Liquid: ready; JavaScript: 9.0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/bare/sections/quiz--beauty-extras-shade-quiz.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 "Shade finder quiz" (id `beauty-extras-shade-quiz`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/sections/quiz--beauty-extras-shade-quiz.html; Shopify bundle: sections/bare/beauty-extras-shade-quiz/ 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. [Shade finder result](https://blocko.ai/library/bare/sections/beauty-extras-shade-result/) (Bare, beauty)
   - Shopify Liquid: ready; JavaScript: 9.0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/bare/sections/quiz--beauty-extras-shade-result.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 "Shade finder result" (id `beauty-extras-shade-result`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/sections/quiz--beauty-extras-shade-result.html; Shopify bundle: sections/bare/beauty-extras-shade-result/ 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. [Shade finder quiz](https://blocko.ai/library/blush/sections/beauty-extras-shade-quiz/) (Blush, beauty)
   - Shopify Liquid: ready; JavaScript: 9.0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/blush/sections/quiz--beauty-extras-shade-quiz.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 "Shade finder quiz" (id `beauty-extras-shade-quiz`, theme `blush`; live demo: https://demo.blocko.ai/html/blush/sections/quiz--beauty-extras-shade-quiz.html; Shopify bundle: sections/blush/beauty-extras-shade-quiz/ 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. [Shade finder result](https://blocko.ai/library/blush/sections/beauty-extras-shade-result/) (Blush, beauty)
   - Shopify Liquid: ready; JavaScript: 9.0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/blush/sections/quiz--beauty-extras-shade-result.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 "Shade finder result" (id `beauty-extras-shade-result`, theme `blush`; live demo: https://demo.blocko.ai/html/blush/sections/quiz--beauty-extras-shade-result.html; Shopify bundle: sections/blush/beauty-extras-shade-result/ 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. [Size guide quiz](https://blocko.ai/library/clip/sections/beauty-extras-shade-quiz/) (Clip, beauty)
   - Shopify Liquid: ready; JavaScript: 9.0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/clip/sections/quiz--beauty-extras-shade-quiz.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 "Size guide quiz" (id `beauty-extras-shade-quiz`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/sections/quiz--beauty-extras-shade-quiz.html; Shopify bundle: sections/clip/beauty-extras-shade-quiz/ 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. [Size guide result](https://blocko.ai/library/clip/sections/beauty-extras-shade-result/) (Clip, beauty)
   - Shopify Liquid: ready; JavaScript: 9.0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/clip/sections/quiz--beauty-extras-shade-result.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 "Size guide result" (id `beauty-extras-shade-result`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/sections/quiz--beauty-extras-shade-result.html; Shopify bundle: sections/clip/beauty-extras-shade-result/ 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. [Shade finder quiz](https://blocko.ai/library/dew/sections/beauty-extras-shade-quiz/) (Dew, beauty)
   - Shopify Liquid: ready; JavaScript: 9.0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/dew/sections/quiz--beauty-extras-shade-quiz.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 "Shade finder quiz" (id `beauty-extras-shade-quiz`, theme `dew`; live demo: https://demo.blocko.ai/html/dew/sections/quiz--beauty-extras-shade-quiz.html; Shopify bundle: sections/dew/beauty-extras-shade-quiz/ 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. [Shade finder result](https://blocko.ai/library/dew/sections/beauty-extras-shade-result/) (Dew, beauty)
   - Shopify Liquid: ready; JavaScript: 9.0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/dew/sections/quiz--beauty-extras-shade-result.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 "Shade finder result" (id `beauty-extras-shade-result`, theme `dew`; live demo: https://demo.blocko.ai/html/dew/sections/quiz--beauty-extras-shade-result.html; Shopify bundle: sections/dew/beauty-extras-shade-result/ 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. [Scent finder quiz](https://blocko.ai/library/isle/sections/beauty-extras-shade-quiz/) (Isle, beauty)
   - Shopify Liquid: ready; JavaScript: 9.0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/isle/sections/quiz--beauty-extras-shade-quiz.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 "Scent finder quiz" (id `beauty-extras-shade-quiz`, theme `isle`; live demo: https://demo.blocko.ai/html/isle/sections/quiz--beauty-extras-shade-quiz.html; Shopify bundle: sections/isle/beauty-extras-shade-quiz/ 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. [Scent finder result](https://blocko.ai/library/isle/sections/beauty-extras-shade-result/) (Isle, beauty)
   - Shopify Liquid: ready; JavaScript: 9.0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/isle/sections/quiz--beauty-extras-shade-result.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 "Scent finder result" (id `beauty-extras-shade-result`, theme `isle`; live demo: https://demo.blocko.ai/html/isle/sections/quiz--beauty-extras-shade-result.html; Shopify bundle: sections/isle/beauty-extras-shade-result/ 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. [Scent finder quiz](https://blocko.ai/library/lather/sections/beauty-extras-shade-quiz/) (Lather, beauty)
   - Shopify Liquid: ready; JavaScript: 9.0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/lather/sections/quiz--beauty-extras-shade-quiz.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 "Scent finder quiz" (id `beauty-extras-shade-quiz`, theme `lather`; live demo: https://demo.blocko.ai/html/lather/sections/quiz--beauty-extras-shade-quiz.html; Shopify bundle: sections/lather/beauty-extras-shade-quiz/ 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. [Scent finder result](https://blocko.ai/library/lather/sections/beauty-extras-shade-result/) (Lather, beauty)
   - Shopify Liquid: ready; JavaScript: 9.0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/lather/sections/quiz--beauty-extras-shade-result.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 "Scent finder result" (id `beauty-extras-shade-result`, theme `lather`; live demo: https://demo.blocko.ai/html/lather/sections/quiz--beauty-extras-shade-result.html; Shopify bundle: sections/lather/beauty-extras-shade-result/ 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. [Shade finder quiz](https://blocko.ai/library/prism/sections/beauty-extras-shade-quiz/) (Prism, beauty)
   - Shopify Liquid: ready; JavaScript: 9.0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/prism/sections/quiz--beauty-extras-shade-quiz.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 "Shade finder quiz" (id `beauty-extras-shade-quiz`, theme `prism`; live demo: https://demo.blocko.ai/html/prism/sections/quiz--beauty-extras-shade-quiz.html; Shopify bundle: sections/prism/beauty-extras-shade-quiz/ 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. [Shade finder result](https://blocko.ai/library/prism/sections/beauty-extras-shade-result/) (Prism, beauty)
   - Shopify Liquid: ready; JavaScript: 9.0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/prism/sections/quiz--beauty-extras-shade-result.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 "Shade finder result" (id `beauty-extras-shade-result`, theme `prism`; live demo: https://demo.blocko.ai/html/prism/sections/quiz--beauty-extras-shade-result.html; Shopify bundle: sections/prism/beauty-extras-shade-result/ 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. [Shade finder quiz](https://blocko.ai/library/shelf/sections/beauty-extras-shade-quiz/) (Shelf, beauty)
   - Shopify Liquid: ready; JavaScript: 9.0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/shelf/sections/quiz--beauty-extras-shade-quiz.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 "Shade finder quiz" (id `beauty-extras-shade-quiz`, theme `shelf`; live demo: https://demo.blocko.ai/html/shelf/sections/quiz--beauty-extras-shade-quiz.html; Shopify bundle: sections/shelf/beauty-extras-shade-quiz/ 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. [Shade finder result](https://blocko.ai/library/shelf/sections/beauty-extras-shade-result/) (Shelf, beauty)
   - Shopify Liquid: ready; JavaScript: 9.0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/shelf/sections/quiz--beauty-extras-shade-result.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 "Shade finder result" (id `beauty-extras-shade-result`, theme `shelf`; live demo: https://demo.blocko.ai/html/shelf/sections/quiz--beauty-extras-shade-result.html; Shopify bundle: sections/shelf/beauty-extras-shade-result/ 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. [Skin-type quiz quiz](https://blocko.ai/library/tide/sections/beauty-extras-shade-quiz/) (Tide, beauty)
   - Shopify Liquid: ready; JavaScript: 9.0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/tide/sections/quiz--beauty-extras-shade-quiz.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 "Skin-type quiz quiz" (id `beauty-extras-shade-quiz`, theme `tide`; live demo: https://demo.blocko.ai/html/tide/sections/quiz--beauty-extras-shade-quiz.html; Shopify bundle: sections/tide/beauty-extras-shade-quiz/ 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. [Skin-type quiz result](https://blocko.ai/library/tide/sections/beauty-extras-shade-result/) (Tide, beauty)
   - Shopify Liquid: ready; JavaScript: 9.0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/tide/sections/quiz--beauty-extras-shade-result.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 "Skin-type quiz result" (id `beauty-extras-shade-result`, theme `tide`; live demo: https://demo.blocko.ai/html/tide/sections/quiz--beauty-extras-shade-result.html; Shopify bundle: sections/tide/beauty-extras-shade-result/ 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. [Shade finder quiz](https://blocko.ai/library/tint/sections/beauty-extras-shade-quiz/) (Tint, beauty)
   - Shopify Liquid: ready; JavaScript: 9.0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/tint/sections/quiz--beauty-extras-shade-quiz.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 "Shade finder quiz" (id `beauty-extras-shade-quiz`, theme `tint`; live demo: https://demo.blocko.ai/html/tint/sections/quiz--beauty-extras-shade-quiz.html; Shopify bundle: sections/tint/beauty-extras-shade-quiz/ 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. [Shade finder result](https://blocko.ai/library/tint/sections/beauty-extras-shade-result/) (Tint, beauty)
   - Shopify Liquid: ready; JavaScript: 9.0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/tint/sections/quiz--beauty-extras-shade-result.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 "Shade finder result" (id `beauty-extras-shade-result`, theme `tint`; live demo: https://demo.blocko.ai/html/tint/sections/quiz--beauty-extras-shade-result.html; Shopify bundle: sections/tint/beauty-extras-shade-result/ 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. [Hair quiz quiz](https://blocko.ai/library/twist/sections/beauty-extras-shade-quiz/) (Twist, beauty)
   - Shopify Liquid: ready; JavaScript: 9.0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/twist/sections/quiz--beauty-extras-shade-quiz.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 "Hair quiz quiz" (id `beauty-extras-shade-quiz`, theme `twist`; live demo: https://demo.blocko.ai/html/twist/sections/quiz--beauty-extras-shade-quiz.html; Shopify bundle: sections/twist/beauty-extras-shade-quiz/ 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. [Hair quiz result](https://blocko.ai/library/twist/sections/beauty-extras-shade-result/) (Twist, beauty)
   - Shopify Liquid: ready; JavaScript: 9.0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/twist/sections/quiz--beauty-extras-shade-result.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 "Hair quiz result" (id `beauty-extras-shade-result`, theme `twist`; live demo: https://demo.blocko.ai/html/twist/sections/quiz--beauty-extras-shade-result.html; Shopify bundle: sections/twist/beauty-extras-shade-result/ 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. [Shade finder quiz](https://blocko.ai/library/veil/sections/beauty-extras-shade-quiz/) (Veil, beauty)
   - Shopify Liquid: ready; JavaScript: 9.0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/veil/sections/quiz--beauty-extras-shade-quiz.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 "Shade finder quiz" (id `beauty-extras-shade-quiz`, theme `veil`; live demo: https://demo.blocko.ai/html/veil/sections/quiz--beauty-extras-shade-quiz.html; Shopify bundle: sections/veil/beauty-extras-shade-quiz/ 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. [Shade finder result](https://blocko.ai/library/veil/sections/beauty-extras-shade-result/) (Veil, beauty)
   - Shopify Liquid: ready; JavaScript: 9.0 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/veil/sections/quiz--beauty-extras-shade-result.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 "Shade finder result" (id `beauty-extras-shade-result`, theme `veil`; live demo: https://demo.blocko.ai/html/veil/sections/quiz--beauty-extras-shade-result.html; Shopify bundle: sections/veil/beauty-extras-shade-result/ 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. [Fragrance finder](https://blocko.ai/library/tress/sections/haircare-extras-fragrance/) (Tress, beauty)
   - Shopify Liquid: not yet (not migrated to neutral template); JavaScript: 4.4 KB; category: fragrance
   - Live demo: https://demo.blocko.ai/html/tress/sections/fragrance--haircare-extras-fragrance.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 "Fragrance finder" (id `haircare-extras-fragrance`, theme `tress`; live demo: https://demo.blocko.ai/html/tress/sections/fragrance--haircare-extras-fragrance.html; no Shopify bundle yet (not migrated to neutral template) — port it from the HTML demo demo/tress/sections/fragrance--haircare-extras-fragrance.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).
44. [Hair quiz result](https://blocko.ai/library/tress/sections/haircare-extras-quiz-result/) (Tress, beauty)
   - Shopify Liquid: not yet (not migrated to neutral template); JavaScript: 4.4 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/tress/sections/quiz--haircare-extras-quiz-result.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 "Hair quiz result" (id `haircare-extras-quiz-result`, theme `tress`; live demo: https://demo.blocko.ai/html/tress/sections/quiz--haircare-extras-quiz-result.html; no Shopify bundle yet (not migrated to neutral template) — port it from the HTML demo demo/tress/sections/quiz--haircare-extras-quiz-result.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).
45. [Hair routine quiz](https://blocko.ai/library/tress/sections/haircare-extras-quiz/) (Tress, beauty)
   - Shopify Liquid: not yet (not migrated to neutral template); JavaScript: 4.4 KB; category: quiz
   - Live demo: https://demo.blocko.ai/html/tress/sections/quiz--haircare-extras-quiz.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 "Hair routine quiz" (id `haircare-extras-quiz`, theme `tress`; live demo: https://demo.blocko.ai/html/tress/sections/quiz--haircare-extras-quiz.html; no Shopify bundle yet (not migrated to neutral template) — port it from the HTML demo demo/tress/sections/quiz--haircare-extras-quiz.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).
46. [Gift guide](https://blocko.ai/library/tress/sections/haircare-extras-gifts/) (Tress, beauty)
   - Shopify Liquid: not yet (not migrated to neutral template); JavaScript: 4.8 KB; category: gift
   - Live demo: https://demo.blocko.ai/html/tress/sections/gift--haircare-extras-gifts.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 "Gift guide" (id `haircare-extras-gifts`, theme `tress`; live demo: https://demo.blocko.ai/html/tress/sections/gift--haircare-extras-gifts.html; no Shopify bundle yet (not migrated to neutral template) — port it from the HTML demo demo/tress/sections/gift--haircare-extras-gifts.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 quizzes and finders sections for Shopify?

Blocko lists 46 free, MIT-licensed quizzes and finders 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 Shade finder from Balm comes first.

### Are these quizzes and finders 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 quizzes and finders 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 quizzes and finders sections cover?

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

### How much JavaScript do these quizzes and finders sections ship?

16 of 46 ship 0 KB of JavaScript. The heaviest is Shade finder quiz in Balm at 9.0 KB, registered as an idempotent Custom Element.