# Top 44 Product Blocks for Shopify (Updated Oct 2026) > Compare 44 free product blocks for Shopify across 15 themes: 42 ship as Liquid, 42 need 0 KB JS. Live demos, agent prompts. Updated Oct 2026. Page: https://blocko.ai/block/product/ MCP: https://blocko.ai/mcp License: MIT. Not affiliated with Shopify. ## Items 1. [Price](https://blocko.ai/library/balm/blocks/price/) (Balm, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/balm/blocks/product--price.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 block "Price" (id `price`, theme `balm`; live demo: https://demo.blocko.ai/html/balm/blocks/product--price.html; Shopify bundle: sections/balm/price/ 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. [Product badge](https://blocko.ai/library/balm/blocks/product-badge/) (Balm, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/balm/blocks/product--product-badge.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 block "Product badge" (id `product-badge`, theme `balm`; live demo: https://demo.blocko.ai/html/balm/blocks/product--product-badge.html; Shopify bundle: sections/balm/product-badge/ 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. [Product card](https://blocko.ai/library/balm/blocks/product-card/) (Balm, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/balm/blocks/product--product-card.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 block "Product card" (id `product-card`, theme `balm`; live demo: https://demo.blocko.ai/html/balm/blocks/product--product-card.html; Shopify bundle: sections/balm/product-card/ 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. [Price](https://blocko.ai/library/bare/blocks/price/) (Bare, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/bare/blocks/product--price.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 block "Price" (id `price`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/blocks/product--price.html; Shopify bundle: sections/bare/price/ in the repo) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify). 5. [Product badge](https://blocko.ai/library/bare/blocks/product-badge/) (Bare, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/bare/blocks/product--product-badge.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 block "Product badge" (id `product-badge`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/blocks/product--product-badge.html; Shopify bundle: sections/bare/product-badge/ 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. [Product card](https://blocko.ai/library/bare/blocks/product-card/) (Bare, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/bare/blocks/product--product-card.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 block "Product card" (id `product-card`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/blocks/product--product-card.html; Shopify bundle: sections/bare/product-card/ 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. [Price](https://blocko.ai/library/blush/blocks/price/) (Blush, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/blush/blocks/product--price.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 block "Price" (id `price`, theme `blush`; live demo: https://demo.blocko.ai/html/blush/blocks/product--price.html; Shopify bundle: sections/blush/price/ 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. [Product badge](https://blocko.ai/library/blush/blocks/product-badge/) (Blush, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/blush/blocks/product--product-badge.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 block "Product badge" (id `product-badge`, theme `blush`; live demo: https://demo.blocko.ai/html/blush/blocks/product--product-badge.html; Shopify bundle: sections/blush/product-badge/ 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. [Product card](https://blocko.ai/library/blush/blocks/product-card/) (Blush, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/blush/blocks/product--product-card.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 block "Product card" (id `product-card`, theme `blush`; live demo: https://demo.blocko.ai/html/blush/blocks/product--product-card.html; Shopify bundle: sections/blush/product-card/ 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. [Price](https://blocko.ai/library/clip/blocks/price/) (Clip, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/clip/blocks/product--price.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 block "Price" (id `price`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/blocks/product--price.html; Shopify bundle: sections/clip/price/ 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. [Product badge](https://blocko.ai/library/clip/blocks/product-badge/) (Clip, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/clip/blocks/product--product-badge.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 block "Product badge" (id `product-badge`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/blocks/product--product-badge.html; Shopify bundle: sections/clip/product-badge/ 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. [Product card](https://blocko.ai/library/clip/blocks/product-card/) (Clip, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/clip/blocks/product--product-card.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 block "Product card" (id `product-card`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/blocks/product--product-card.html; Shopify bundle: sections/clip/product-card/ 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. [Price](https://blocko.ai/library/dew/blocks/price/) (Dew, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/dew/blocks/product--price.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 block "Price" (id `price`, theme `dew`; live demo: https://demo.blocko.ai/html/dew/blocks/product--price.html; Shopify bundle: sections/dew/price/ 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. [Product badge](https://blocko.ai/library/dew/blocks/product-badge/) (Dew, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/dew/blocks/product--product-badge.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 block "Product badge" (id `product-badge`, theme `dew`; live demo: https://demo.blocko.ai/html/dew/blocks/product--product-badge.html; Shopify bundle: sections/dew/product-badge/ 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. [Product card](https://blocko.ai/library/dew/blocks/product-card/) (Dew, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/dew/blocks/product--product-card.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 block "Product card" (id `product-card`, theme `dew`; live demo: https://demo.blocko.ai/html/dew/blocks/product--product-card.html; Shopify bundle: sections/dew/product-card/ 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. [Price](https://blocko.ai/library/isle/blocks/price/) (Isle, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/isle/blocks/product--price.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 block "Price" (id `price`, theme `isle`; live demo: https://demo.blocko.ai/html/isle/blocks/product--price.html; Shopify bundle: sections/isle/price/ 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. [Product badge](https://blocko.ai/library/isle/blocks/product-badge/) (Isle, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/isle/blocks/product--product-badge.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 block "Product badge" (id `product-badge`, theme `isle`; live demo: https://demo.blocko.ai/html/isle/blocks/product--product-badge.html; Shopify bundle: sections/isle/product-badge/ 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. [Product card](https://blocko.ai/library/isle/blocks/product-card/) (Isle, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/isle/blocks/product--product-card.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 block "Product card" (id `product-card`, theme `isle`; live demo: https://demo.blocko.ai/html/isle/blocks/product--product-card.html; Shopify bundle: sections/isle/product-card/ 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. [Price](https://blocko.ai/library/lather/blocks/price/) (Lather, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/lather/blocks/product--price.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 block "Price" (id `price`, theme `lather`; live demo: https://demo.blocko.ai/html/lather/blocks/product--price.html; Shopify bundle: sections/lather/price/ 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. [Product badge](https://blocko.ai/library/lather/blocks/product-badge/) (Lather, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/lather/blocks/product--product-badge.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 block "Product badge" (id `product-badge`, theme `lather`; live demo: https://demo.blocko.ai/html/lather/blocks/product--product-badge.html; Shopify bundle: sections/lather/product-badge/ 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. [Product card](https://blocko.ai/library/lather/blocks/product-card/) (Lather, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/lather/blocks/product--product-card.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 block "Product card" (id `product-card`, theme `lather`; live demo: https://demo.blocko.ai/html/lather/blocks/product--product-card.html; Shopify bundle: sections/lather/product-card/ 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. [Price](https://blocko.ai/library/prism/blocks/price/) (Prism, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/prism/blocks/product--price.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 block "Price" (id `price`, theme `prism`; live demo: https://demo.blocko.ai/html/prism/blocks/product--price.html; Shopify bundle: sections/prism/price/ 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. [Product badge](https://blocko.ai/library/prism/blocks/product-badge/) (Prism, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/prism/blocks/product--product-badge.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 block "Product badge" (id `product-badge`, theme `prism`; live demo: https://demo.blocko.ai/html/prism/blocks/product--product-badge.html; Shopify bundle: sections/prism/product-badge/ 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. [Product card](https://blocko.ai/library/prism/blocks/product-card/) (Prism, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/prism/blocks/product--product-card.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 block "Product card" (id `product-card`, theme `prism`; live demo: https://demo.blocko.ai/html/prism/blocks/product--product-card.html; Shopify bundle: sections/prism/product-card/ 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. [Price](https://blocko.ai/library/shelf/blocks/price/) (Shelf, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/shelf/blocks/product--price.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 block "Price" (id `price`, theme `shelf`; live demo: https://demo.blocko.ai/html/shelf/blocks/product--price.html; Shopify bundle: sections/shelf/price/ 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. [Product badge](https://blocko.ai/library/shelf/blocks/product-badge/) (Shelf, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/shelf/blocks/product--product-badge.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 block "Product badge" (id `product-badge`, theme `shelf`; live demo: https://demo.blocko.ai/html/shelf/blocks/product--product-badge.html; Shopify bundle: sections/shelf/product-badge/ 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. [Product card](https://blocko.ai/library/shelf/blocks/product-card/) (Shelf, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/shelf/blocks/product--product-card.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 block "Product card" (id `product-card`, theme `shelf`; live demo: https://demo.blocko.ai/html/shelf/blocks/product--product-card.html; Shopify bundle: sections/shelf/product-card/ 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. [Price](https://blocko.ai/library/stubble/blocks/price/) (Stubble, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/stubble/blocks/product--price.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 block "Price" (id `price`, theme `stubble`; live demo: https://demo.blocko.ai/html/stubble/blocks/product--price.html; Shopify bundle: sections/stubble/price/ 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. [Product badge](https://blocko.ai/library/stubble/blocks/product-badge/) (Stubble, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/stubble/blocks/product--product-badge.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 block "Product badge" (id `product-badge`, theme `stubble`; live demo: https://demo.blocko.ai/html/stubble/blocks/product--product-badge.html; Shopify bundle: sections/stubble/product-badge/ 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. [Product card](https://blocko.ai/library/stubble/blocks/product-card/) (Stubble, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/stubble/blocks/product--product-card.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 block "Product card" (id `product-card`, theme `stubble`; live demo: https://demo.blocko.ai/html/stubble/blocks/product--product-card.html; Shopify bundle: sections/stubble/product-card/ 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. [Price](https://blocko.ai/library/tide/blocks/price/) (Tide, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/tide/blocks/product--price.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 block "Price" (id `price`, theme `tide`; live demo: https://demo.blocko.ai/html/tide/blocks/product--price.html; Shopify bundle: sections/tide/price/ 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. [Product badge](https://blocko.ai/library/tide/blocks/product-badge/) (Tide, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/tide/blocks/product--product-badge.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 block "Product badge" (id `product-badge`, theme `tide`; live demo: https://demo.blocko.ai/html/tide/blocks/product--product-badge.html; Shopify bundle: sections/tide/product-badge/ 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. [Product card](https://blocko.ai/library/tide/blocks/product-card/) (Tide, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/tide/blocks/product--product-card.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 block "Product card" (id `product-card`, theme `tide`; live demo: https://demo.blocko.ai/html/tide/blocks/product--product-card.html; Shopify bundle: sections/tide/product-card/ 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. [Price](https://blocko.ai/library/tint/blocks/price/) (Tint, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/tint/blocks/product--price.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 block "Price" (id `price`, theme `tint`; live demo: https://demo.blocko.ai/html/tint/blocks/product--price.html; Shopify bundle: sections/tint/price/ 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. [Product badge](https://blocko.ai/library/tint/blocks/product-badge/) (Tint, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/tint/blocks/product--product-badge.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 block "Product badge" (id `product-badge`, theme `tint`; live demo: https://demo.blocko.ai/html/tint/blocks/product--product-badge.html; Shopify bundle: sections/tint/product-badge/ 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. [Product card](https://blocko.ai/library/tint/blocks/product-card/) (Tint, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/tint/blocks/product--product-card.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 block "Product card" (id `product-card`, theme `tint`; live demo: https://demo.blocko.ai/html/tint/blocks/product--product-card.html; Shopify bundle: sections/tint/product-card/ 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. [Price](https://blocko.ai/library/twist/blocks/price/) (Twist, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/twist/blocks/product--price.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 block "Price" (id `price`, theme `twist`; live demo: https://demo.blocko.ai/html/twist/blocks/product--price.html; Shopify bundle: sections/twist/price/ 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. [Product badge](https://blocko.ai/library/twist/blocks/product-badge/) (Twist, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/twist/blocks/product--product-badge.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 block "Product badge" (id `product-badge`, theme `twist`; live demo: https://demo.blocko.ai/html/twist/blocks/product--product-badge.html; Shopify bundle: sections/twist/product-badge/ 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. [Product card](https://blocko.ai/library/twist/blocks/product-card/) (Twist, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/twist/blocks/product--product-card.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 block "Product card" (id `product-card`, theme `twist`; live demo: https://demo.blocko.ai/html/twist/blocks/product--product-card.html; Shopify bundle: sections/twist/product-card/ 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. [Price](https://blocko.ai/library/veil/blocks/price/) (Veil, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/veil/blocks/product--price.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 block "Price" (id `price`, theme `veil`; live demo: https://demo.blocko.ai/html/veil/blocks/product--price.html; Shopify bundle: sections/veil/price/ 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. [Product badge](https://blocko.ai/library/veil/blocks/product-badge/) (Veil, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/veil/blocks/product--product-badge.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 block "Product badge" (id `product-badge`, theme `veil`; live demo: https://demo.blocko.ai/html/veil/blocks/product--product-badge.html; Shopify bundle: sections/veil/product-badge/ 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. [Product card](https://blocko.ai/library/veil/blocks/product-card/) (Veil, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: product - Live demo: https://demo.blocko.ai/html/veil/blocks/product--product-card.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 block "Product card" (id `product-card`, theme `veil`; live demo: https://demo.blocko.ai/html/veil/blocks/product--product-card.html; Shopify bundle: sections/veil/product-card/ 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. [Hair care product card](https://blocko.ai/library/tress/blocks/home-collection-product-card/) (Tress, beauty) - Shopify Liquid: not yet (not migrated to neutral template); JavaScript: 4.4 KB; category: product - Live demo: https://demo.blocko.ai/html/tress/blocks/product--home-collection-product-card.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 block "Hair care product card" (id `home-collection-product-card`, theme `tress`; live demo: https://demo.blocko.ai/html/tress/blocks/product--home-collection-product-card.html; no Shopify bundle yet (not migrated to neutral template) — port it from the HTML demo demo/tress/blocks/product--home-collection-product-card.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. [Haircare product](https://blocko.ai/library/tress/blocks/haircare-extras-product/) (Tress, beauty) - Shopify Liquid: not yet (not migrated to neutral template); JavaScript: 4.4 KB; category: product - Live demo: https://demo.blocko.ai/html/tress/blocks/product--haircare-extras-product.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 block "Haircare product" (id `haircare-extras-product`, theme `tress`; live demo: https://demo.blocko.ai/html/tress/blocks/product--haircare-extras-product.html; no Shopify bundle yet (not migrated to neutral template) — port it from the HTML demo demo/tress/blocks/product--haircare-extras-product.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 product blocks for Shopify? Blocko lists 44 free, MIT-licensed product blocks 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 Price from Balm comes first. ### Are these product blocks 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 product blocks 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 block should go before it changes any code. ### Which industries do these product blocks cover? Beauty. Every industry with at least three matching items has its own list. ### How much JavaScript do these product blocks ship? 42 of 44 ship 0 KB of JavaScript. The heaviest is Haircare product in Tress at 4.4 KB, registered as an idempotent Custom Element.