# Top 58 Cart Blocks for Shopify (Updated Oct 2026)

> Compare 58 free cart blocks for Shopify across 15 themes: 56 ship as Liquid, 28 need 0 KB JS. Live demos, agent prompts. Updated Oct 2026.

Page: https://blocko.ai/block/cart/
MCP: https://blocko.ai/mcp
License: MIT. Not affiliated with Shopify.

## Items

1. [Cart line item](https://blocko.ai/library/balm/blocks/cart-line-item/) (Balm, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/balm/blocks/cart--cart-line-item.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 "Cart line item" (id `cart-line-item`, theme `balm`; live demo: https://demo.blocko.ai/html/balm/blocks/cart--cart-line-item.html; Shopify bundle: sections/balm/cart-line-item/ 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. [Cart summary](https://blocko.ai/library/balm/blocks/cart-summary/) (Balm, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/balm/blocks/cart--cart-summary.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 "Cart summary" (id `cart-summary`, theme `balm`; live demo: https://demo.blocko.ai/html/balm/blocks/cart--cart-summary.html; Shopify bundle: sections/balm/cart-summary/ 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. [Cart line item](https://blocko.ai/library/bare/blocks/cart-line-item/) (Bare, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/bare/blocks/cart--cart-line-item.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 "Cart line item" (id `cart-line-item`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/blocks/cart--cart-line-item.html; Shopify bundle: sections/bare/cart-line-item/ 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. [Cart summary](https://blocko.ai/library/bare/blocks/cart-summary/) (Bare, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/bare/blocks/cart--cart-summary.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 "Cart summary" (id `cart-summary`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/blocks/cart--cart-summary.html; Shopify bundle: sections/bare/cart-summary/ 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. [Cart line item](https://blocko.ai/library/blush/blocks/cart-line-item/) (Blush, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/blush/blocks/cart--cart-line-item.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 "Cart line item" (id `cart-line-item`, theme `blush`; live demo: https://demo.blocko.ai/html/blush/blocks/cart--cart-line-item.html; Shopify bundle: sections/blush/cart-line-item/ 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. [Cart summary](https://blocko.ai/library/blush/blocks/cart-summary/) (Blush, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/blush/blocks/cart--cart-summary.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 "Cart summary" (id `cart-summary`, theme `blush`; live demo: https://demo.blocko.ai/html/blush/blocks/cart--cart-summary.html; Shopify bundle: sections/blush/cart-summary/ 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. [Cart line item](https://blocko.ai/library/clip/blocks/cart-line-item/) (Clip, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/clip/blocks/cart--cart-line-item.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 "Cart line item" (id `cart-line-item`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/blocks/cart--cart-line-item.html; Shopify bundle: sections/clip/cart-line-item/ 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. [Cart summary](https://blocko.ai/library/clip/blocks/cart-summary/) (Clip, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/clip/blocks/cart--cart-summary.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 "Cart summary" (id `cart-summary`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/blocks/cart--cart-summary.html; Shopify bundle: sections/clip/cart-summary/ 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. [Cart line item](https://blocko.ai/library/dew/blocks/cart-line-item/) (Dew, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/dew/blocks/cart--cart-line-item.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 "Cart line item" (id `cart-line-item`, theme `dew`; live demo: https://demo.blocko.ai/html/dew/blocks/cart--cart-line-item.html; Shopify bundle: sections/dew/cart-line-item/ 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. [Cart summary](https://blocko.ai/library/dew/blocks/cart-summary/) (Dew, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/dew/blocks/cart--cart-summary.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 "Cart summary" (id `cart-summary`, theme `dew`; live demo: https://demo.blocko.ai/html/dew/blocks/cart--cart-summary.html; Shopify bundle: sections/dew/cart-summary/ 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. [Cart line item](https://blocko.ai/library/isle/blocks/cart-line-item/) (Isle, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/isle/blocks/cart--cart-line-item.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 "Cart line item" (id `cart-line-item`, theme `isle`; live demo: https://demo.blocko.ai/html/isle/blocks/cart--cart-line-item.html; Shopify bundle: sections/isle/cart-line-item/ 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. [Cart summary](https://blocko.ai/library/isle/blocks/cart-summary/) (Isle, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/isle/blocks/cart--cart-summary.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 "Cart summary" (id `cart-summary`, theme `isle`; live demo: https://demo.blocko.ai/html/isle/blocks/cart--cart-summary.html; Shopify bundle: sections/isle/cart-summary/ 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. [Cart line item](https://blocko.ai/library/lather/blocks/cart-line-item/) (Lather, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/lather/blocks/cart--cart-line-item.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 "Cart line item" (id `cart-line-item`, theme `lather`; live demo: https://demo.blocko.ai/html/lather/blocks/cart--cart-line-item.html; Shopify bundle: sections/lather/cart-line-item/ 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. [Cart summary](https://blocko.ai/library/lather/blocks/cart-summary/) (Lather, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/lather/blocks/cart--cart-summary.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 "Cart summary" (id `cart-summary`, theme `lather`; live demo: https://demo.blocko.ai/html/lather/blocks/cart--cart-summary.html; Shopify bundle: sections/lather/cart-summary/ 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. [Cart line item](https://blocko.ai/library/prism/blocks/cart-line-item/) (Prism, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/prism/blocks/cart--cart-line-item.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 "Cart line item" (id `cart-line-item`, theme `prism`; live demo: https://demo.blocko.ai/html/prism/blocks/cart--cart-line-item.html; Shopify bundle: sections/prism/cart-line-item/ 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. [Cart summary](https://blocko.ai/library/prism/blocks/cart-summary/) (Prism, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/prism/blocks/cart--cart-summary.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 "Cart summary" (id `cart-summary`, theme `prism`; live demo: https://demo.blocko.ai/html/prism/blocks/cart--cart-summary.html; Shopify bundle: sections/prism/cart-summary/ 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. [Cart line item](https://blocko.ai/library/shelf/blocks/cart-line-item/) (Shelf, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/shelf/blocks/cart--cart-line-item.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 "Cart line item" (id `cart-line-item`, theme `shelf`; live demo: https://demo.blocko.ai/html/shelf/blocks/cart--cart-line-item.html; Shopify bundle: sections/shelf/cart-line-item/ 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. [Cart summary](https://blocko.ai/library/shelf/blocks/cart-summary/) (Shelf, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/shelf/blocks/cart--cart-summary.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 "Cart summary" (id `cart-summary`, theme `shelf`; live demo: https://demo.blocko.ai/html/shelf/blocks/cart--cart-summary.html; Shopify bundle: sections/shelf/cart-summary/ 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. [Cart line item](https://blocko.ai/library/stubble/blocks/cart-line-item/) (Stubble, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/stubble/blocks/cart--cart-line-item.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 "Cart line item" (id `cart-line-item`, theme `stubble`; live demo: https://demo.blocko.ai/html/stubble/blocks/cart--cart-line-item.html; Shopify bundle: sections/stubble/cart-line-item/ 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. [Cart summary](https://blocko.ai/library/stubble/blocks/cart-summary/) (Stubble, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/stubble/blocks/cart--cart-summary.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 "Cart summary" (id `cart-summary`, theme `stubble`; live demo: https://demo.blocko.ai/html/stubble/blocks/cart--cart-summary.html; Shopify bundle: sections/stubble/cart-summary/ 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. [Cart line item](https://blocko.ai/library/tide/blocks/cart-line-item/) (Tide, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/tide/blocks/cart--cart-line-item.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 "Cart line item" (id `cart-line-item`, theme `tide`; live demo: https://demo.blocko.ai/html/tide/blocks/cart--cart-line-item.html; Shopify bundle: sections/tide/cart-line-item/ 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. [Cart summary](https://blocko.ai/library/tide/blocks/cart-summary/) (Tide, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/tide/blocks/cart--cart-summary.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 "Cart summary" (id `cart-summary`, theme `tide`; live demo: https://demo.blocko.ai/html/tide/blocks/cart--cart-summary.html; Shopify bundle: sections/tide/cart-summary/ 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. [Cart line item](https://blocko.ai/library/tint/blocks/cart-line-item/) (Tint, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/tint/blocks/cart--cart-line-item.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 "Cart line item" (id `cart-line-item`, theme `tint`; live demo: https://demo.blocko.ai/html/tint/blocks/cart--cart-line-item.html; Shopify bundle: sections/tint/cart-line-item/ 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. [Cart summary](https://blocko.ai/library/tint/blocks/cart-summary/) (Tint, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/tint/blocks/cart--cart-summary.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 "Cart summary" (id `cart-summary`, theme `tint`; live demo: https://demo.blocko.ai/html/tint/blocks/cart--cart-summary.html; Shopify bundle: sections/tint/cart-summary/ 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. [Cart line item](https://blocko.ai/library/twist/blocks/cart-line-item/) (Twist, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/twist/blocks/cart--cart-line-item.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 "Cart line item" (id `cart-line-item`, theme `twist`; live demo: https://demo.blocko.ai/html/twist/blocks/cart--cart-line-item.html; Shopify bundle: sections/twist/cart-line-item/ 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. [Cart summary](https://blocko.ai/library/twist/blocks/cart-summary/) (Twist, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/twist/blocks/cart--cart-summary.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 "Cart summary" (id `cart-summary`, theme `twist`; live demo: https://demo.blocko.ai/html/twist/blocks/cart--cart-summary.html; Shopify bundle: sections/twist/cart-summary/ 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. [Cart line item](https://blocko.ai/library/veil/blocks/cart-line-item/) (Veil, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/veil/blocks/cart--cart-line-item.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 "Cart line item" (id `cart-line-item`, theme `veil`; live demo: https://demo.blocko.ai/html/veil/blocks/cart--cart-line-item.html; Shopify bundle: sections/veil/cart-line-item/ 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. [Cart summary](https://blocko.ai/library/veil/blocks/cart-summary/) (Veil, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/veil/blocks/cart--cart-summary.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 "Cart summary" (id `cart-summary`, theme `veil`; live demo: https://demo.blocko.ai/html/veil/blocks/cart--cart-summary.html; Shopify bundle: sections/veil/cart-summary/ 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. [Free-shipping progress](https://blocko.ai/library/balm/blocks/cart-checkout-free-shipping/) (Balm, beauty)
   - Shopify Liquid: ready; JavaScript: 7.3 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/balm/blocks/cart--cart-checkout-free-shipping.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 "Free-shipping progress" (id `cart-checkout-free-shipping`, theme `balm`; live demo: https://demo.blocko.ai/html/balm/blocks/cart--cart-checkout-free-shipping.html; Shopify bundle: sections/balm/cart-checkout-free-shipping/ 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. [Free-shipping progress](https://blocko.ai/library/bare/blocks/cart-checkout-free-shipping/) (Bare, beauty)
   - Shopify Liquid: ready; JavaScript: 7.3 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/bare/blocks/cart--cart-checkout-free-shipping.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 "Free-shipping progress" (id `cart-checkout-free-shipping`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/blocks/cart--cart-checkout-free-shipping.html; Shopify bundle: sections/bare/cart-checkout-free-shipping/ 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. [Free-shipping progress](https://blocko.ai/library/blush/blocks/cart-checkout-free-shipping/) (Blush, beauty)
   - Shopify Liquid: ready; JavaScript: 7.3 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/blush/blocks/cart--cart-checkout-free-shipping.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 "Free-shipping progress" (id `cart-checkout-free-shipping`, theme `blush`; live demo: https://demo.blocko.ai/html/blush/blocks/cart--cart-checkout-free-shipping.html; Shopify bundle: sections/blush/cart-checkout-free-shipping/ 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. [Free-shipping progress](https://blocko.ai/library/clip/blocks/cart-checkout-free-shipping/) (Clip, beauty)
   - Shopify Liquid: ready; JavaScript: 7.3 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/clip/blocks/cart--cart-checkout-free-shipping.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 "Free-shipping progress" (id `cart-checkout-free-shipping`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/blocks/cart--cart-checkout-free-shipping.html; Shopify bundle: sections/clip/cart-checkout-free-shipping/ 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. [Free-shipping progress](https://blocko.ai/library/dew/blocks/cart-checkout-free-shipping/) (Dew, beauty)
   - Shopify Liquid: ready; JavaScript: 7.3 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/dew/blocks/cart--cart-checkout-free-shipping.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 "Free-shipping progress" (id `cart-checkout-free-shipping`, theme `dew`; live demo: https://demo.blocko.ai/html/dew/blocks/cart--cart-checkout-free-shipping.html; Shopify bundle: sections/dew/cart-checkout-free-shipping/ 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. [Free-shipping progress](https://blocko.ai/library/isle/blocks/cart-checkout-free-shipping/) (Isle, beauty)
   - Shopify Liquid: ready; JavaScript: 7.3 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/isle/blocks/cart--cart-checkout-free-shipping.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 "Free-shipping progress" (id `cart-checkout-free-shipping`, theme `isle`; live demo: https://demo.blocko.ai/html/isle/blocks/cart--cart-checkout-free-shipping.html; Shopify bundle: sections/isle/cart-checkout-free-shipping/ 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. [Free-shipping progress](https://blocko.ai/library/lather/blocks/cart-checkout-free-shipping/) (Lather, beauty)
   - Shopify Liquid: ready; JavaScript: 7.3 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/lather/blocks/cart--cart-checkout-free-shipping.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 "Free-shipping progress" (id `cart-checkout-free-shipping`, theme `lather`; live demo: https://demo.blocko.ai/html/lather/blocks/cart--cart-checkout-free-shipping.html; Shopify bundle: sections/lather/cart-checkout-free-shipping/ 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. [Free-shipping progress](https://blocko.ai/library/prism/blocks/cart-checkout-free-shipping/) (Prism, beauty)
   - Shopify Liquid: ready; JavaScript: 7.3 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/prism/blocks/cart--cart-checkout-free-shipping.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 "Free-shipping progress" (id `cart-checkout-free-shipping`, theme `prism`; live demo: https://demo.blocko.ai/html/prism/blocks/cart--cart-checkout-free-shipping.html; Shopify bundle: sections/prism/cart-checkout-free-shipping/ 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. [Free-shipping progress](https://blocko.ai/library/shelf/blocks/cart-checkout-free-shipping/) (Shelf, beauty)
   - Shopify Liquid: ready; JavaScript: 7.3 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/shelf/blocks/cart--cart-checkout-free-shipping.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 "Free-shipping progress" (id `cart-checkout-free-shipping`, theme `shelf`; live demo: https://demo.blocko.ai/html/shelf/blocks/cart--cart-checkout-free-shipping.html; Shopify bundle: sections/shelf/cart-checkout-free-shipping/ 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. [Free-shipping progress](https://blocko.ai/library/stubble/blocks/cart-checkout-free-shipping/) (Stubble, beauty)
   - Shopify Liquid: ready; JavaScript: 7.3 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/stubble/blocks/cart--cart-checkout-free-shipping.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 "Free-shipping progress" (id `cart-checkout-free-shipping`, theme `stubble`; live demo: https://demo.blocko.ai/html/stubble/blocks/cart--cart-checkout-free-shipping.html; Shopify bundle: sections/stubble/cart-checkout-free-shipping/ 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. [Free-shipping progress](https://blocko.ai/library/tide/blocks/cart-checkout-free-shipping/) (Tide, beauty)
   - Shopify Liquid: ready; JavaScript: 7.3 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/tide/blocks/cart--cart-checkout-free-shipping.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 "Free-shipping progress" (id `cart-checkout-free-shipping`, theme `tide`; live demo: https://demo.blocko.ai/html/tide/blocks/cart--cart-checkout-free-shipping.html; Shopify bundle: sections/tide/cart-checkout-free-shipping/ 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. [Free-shipping progress](https://blocko.ai/library/tint/blocks/cart-checkout-free-shipping/) (Tint, beauty)
   - Shopify Liquid: ready; JavaScript: 7.3 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/tint/blocks/cart--cart-checkout-free-shipping.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 "Free-shipping progress" (id `cart-checkout-free-shipping`, theme `tint`; live demo: https://demo.blocko.ai/html/tint/blocks/cart--cart-checkout-free-shipping.html; Shopify bundle: sections/tint/cart-checkout-free-shipping/ 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. [Free-shipping progress](https://blocko.ai/library/twist/blocks/cart-checkout-free-shipping/) (Twist, beauty)
   - Shopify Liquid: ready; JavaScript: 7.3 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/twist/blocks/cart--cart-checkout-free-shipping.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 "Free-shipping progress" (id `cart-checkout-free-shipping`, theme `twist`; live demo: https://demo.blocko.ai/html/twist/blocks/cart--cart-checkout-free-shipping.html; Shopify bundle: sections/twist/cart-checkout-free-shipping/ 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. [Free-shipping progress](https://blocko.ai/library/veil/blocks/cart-checkout-free-shipping/) (Veil, beauty)
   - Shopify Liquid: ready; JavaScript: 7.3 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/veil/blocks/cart--cart-checkout-free-shipping.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 "Free-shipping progress" (id `cart-checkout-free-shipping`, theme `veil`; live demo: https://demo.blocko.ai/html/veil/blocks/cart--cart-checkout-free-shipping.html; Shopify bundle: sections/veil/cart-checkout-free-shipping/ 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. [Editable cart line item](https://blocko.ai/library/balm/blocks/cart-checkout-line-item/) (Balm, beauty)
   - Shopify Liquid: ready; JavaScript: 8.2 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/balm/blocks/cart--cart-checkout-line-item.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 "Editable cart line item" (id `cart-checkout-line-item`, theme `balm`; live demo: https://demo.blocko.ai/html/balm/blocks/cart--cart-checkout-line-item.html; Shopify bundle: sections/balm/cart-checkout-line-item/ 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).
44. [Editable cart line item](https://blocko.ai/library/bare/blocks/cart-checkout-line-item/) (Bare, beauty)
   - Shopify Liquid: ready; JavaScript: 8.2 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/bare/blocks/cart--cart-checkout-line-item.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 "Editable cart line item" (id `cart-checkout-line-item`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/blocks/cart--cart-checkout-line-item.html; Shopify bundle: sections/bare/cart-checkout-line-item/ 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).
45. [Editable cart line item](https://blocko.ai/library/blush/blocks/cart-checkout-line-item/) (Blush, beauty)
   - Shopify Liquid: ready; JavaScript: 8.2 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/blush/blocks/cart--cart-checkout-line-item.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 "Editable cart line item" (id `cart-checkout-line-item`, theme `blush`; live demo: https://demo.blocko.ai/html/blush/blocks/cart--cart-checkout-line-item.html; Shopify bundle: sections/blush/cart-checkout-line-item/ 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).
46. [Editable cart line item](https://blocko.ai/library/clip/blocks/cart-checkout-line-item/) (Clip, beauty)
   - Shopify Liquid: ready; JavaScript: 8.2 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/clip/blocks/cart--cart-checkout-line-item.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 "Editable cart line item" (id `cart-checkout-line-item`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/blocks/cart--cart-checkout-line-item.html; Shopify bundle: sections/clip/cart-checkout-line-item/ 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).
47. [Editable cart line item](https://blocko.ai/library/dew/blocks/cart-checkout-line-item/) (Dew, beauty)
   - Shopify Liquid: ready; JavaScript: 8.2 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/dew/blocks/cart--cart-checkout-line-item.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 "Editable cart line item" (id `cart-checkout-line-item`, theme `dew`; live demo: https://demo.blocko.ai/html/dew/blocks/cart--cart-checkout-line-item.html; Shopify bundle: sections/dew/cart-checkout-line-item/ 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).
48. [Editable cart line item](https://blocko.ai/library/isle/blocks/cart-checkout-line-item/) (Isle, beauty)
   - Shopify Liquid: ready; JavaScript: 8.2 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/isle/blocks/cart--cart-checkout-line-item.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 "Editable cart line item" (id `cart-checkout-line-item`, theme `isle`; live demo: https://demo.blocko.ai/html/isle/blocks/cart--cart-checkout-line-item.html; Shopify bundle: sections/isle/cart-checkout-line-item/ 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).
49. [Editable cart line item](https://blocko.ai/library/lather/blocks/cart-checkout-line-item/) (Lather, beauty)
   - Shopify Liquid: ready; JavaScript: 8.2 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/lather/blocks/cart--cart-checkout-line-item.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 "Editable cart line item" (id `cart-checkout-line-item`, theme `lather`; live demo: https://demo.blocko.ai/html/lather/blocks/cart--cart-checkout-line-item.html; Shopify bundle: sections/lather/cart-checkout-line-item/ 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).
50. [Editable cart line item](https://blocko.ai/library/prism/blocks/cart-checkout-line-item/) (Prism, beauty)
   - Shopify Liquid: ready; JavaScript: 8.2 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/prism/blocks/cart--cart-checkout-line-item.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 "Editable cart line item" (id `cart-checkout-line-item`, theme `prism`; live demo: https://demo.blocko.ai/html/prism/blocks/cart--cart-checkout-line-item.html; Shopify bundle: sections/prism/cart-checkout-line-item/ 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).
51. [Editable cart line item](https://blocko.ai/library/shelf/blocks/cart-checkout-line-item/) (Shelf, beauty)
   - Shopify Liquid: ready; JavaScript: 8.2 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/shelf/blocks/cart--cart-checkout-line-item.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 "Editable cart line item" (id `cart-checkout-line-item`, theme `shelf`; live demo: https://demo.blocko.ai/html/shelf/blocks/cart--cart-checkout-line-item.html; Shopify bundle: sections/shelf/cart-checkout-line-item/ 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).
52. [Editable cart line item](https://blocko.ai/library/stubble/blocks/cart-checkout-line-item/) (Stubble, beauty)
   - Shopify Liquid: ready; JavaScript: 8.2 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/stubble/blocks/cart--cart-checkout-line-item.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 "Editable cart line item" (id `cart-checkout-line-item`, theme `stubble`; live demo: https://demo.blocko.ai/html/stubble/blocks/cart--cart-checkout-line-item.html; Shopify bundle: sections/stubble/cart-checkout-line-item/ 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).
53. [Editable cart line item](https://blocko.ai/library/tide/blocks/cart-checkout-line-item/) (Tide, beauty)
   - Shopify Liquid: ready; JavaScript: 8.2 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/tide/blocks/cart--cart-checkout-line-item.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 "Editable cart line item" (id `cart-checkout-line-item`, theme `tide`; live demo: https://demo.blocko.ai/html/tide/blocks/cart--cart-checkout-line-item.html; Shopify bundle: sections/tide/cart-checkout-line-item/ 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).
54. [Editable cart line item](https://blocko.ai/library/tint/blocks/cart-checkout-line-item/) (Tint, beauty)
   - Shopify Liquid: ready; JavaScript: 8.2 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/tint/blocks/cart--cart-checkout-line-item.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 "Editable cart line item" (id `cart-checkout-line-item`, theme `tint`; live demo: https://demo.blocko.ai/html/tint/blocks/cart--cart-checkout-line-item.html; Shopify bundle: sections/tint/cart-checkout-line-item/ 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).
55. [Editable cart line item](https://blocko.ai/library/twist/blocks/cart-checkout-line-item/) (Twist, beauty)
   - Shopify Liquid: ready; JavaScript: 8.2 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/twist/blocks/cart--cart-checkout-line-item.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 "Editable cart line item" (id `cart-checkout-line-item`, theme `twist`; live demo: https://demo.blocko.ai/html/twist/blocks/cart--cart-checkout-line-item.html; Shopify bundle: sections/twist/cart-checkout-line-item/ 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).
56. [Editable cart line item](https://blocko.ai/library/veil/blocks/cart-checkout-line-item/) (Veil, beauty)
   - Shopify Liquid: ready; JavaScript: 8.2 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/veil/blocks/cart--cart-checkout-line-item.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 "Editable cart line item" (id `cart-checkout-line-item`, theme `veil`; live demo: https://demo.blocko.ai/html/veil/blocks/cart--cart-checkout-line-item.html; Shopify bundle: sections/veil/cart-checkout-line-item/ 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).
57. [Free-shipping progress](https://blocko.ai/library/tress/blocks/cart-checkout-free-shipping/) (Tress, beauty)
   - Shopify Liquid: not yet (not migrated to neutral template); JavaScript: 3.4 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/tress/blocks/cart--cart-checkout-free-shipping.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 "Free-shipping progress" (id `cart-checkout-free-shipping`, theme `tress`; live demo: https://demo.blocko.ai/html/tress/blocks/cart--cart-checkout-free-shipping.html; no Shopify bundle yet (not migrated to neutral template) — port it from the HTML demo demo/tress/blocks/cart--cart-checkout-free-shipping.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).
58. [Subscription line item](https://blocko.ai/library/tress/blocks/cart-checkout-line-item/) (Tress, beauty)
   - Shopify Liquid: not yet (not migrated to neutral template); JavaScript: 3.4 KB; category: cart
   - Live demo: https://demo.blocko.ai/html/tress/blocks/cart--cart-checkout-line-item.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 "Subscription line item" (id `cart-checkout-line-item`, theme `tress`; live demo: https://demo.blocko.ai/html/tress/blocks/cart--cart-checkout-line-item.html; no Shopify bundle yet (not migrated to neutral template) — port it from the HTML demo demo/tress/blocks/cart--cart-checkout-line-item.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 cart blocks for Shopify?

Blocko lists 58 free, MIT-licensed cart blocks from 15 themes. 56 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 Cart line item from Balm comes first.

### Are these cart 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 cart 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 cart blocks cover?

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

### How much JavaScript do these cart blocks ship?

28 of 58 ship 0 KB of JavaScript. The heaviest is Editable cart line item in Balm at 8.2 KB, registered as an idempotent Custom Element.