# Top 20 Promotions Sections for Shopify (Updated Oct 2026)

> Compare 20 free promotions sections for Shopify across 14 themes: 20 ship as Liquid, 17 need 0 KB JS. Live demos, agent prompts. Updated Oct 2026.

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

## Items

1. [Message band](https://blocko.ai/library/balm/sections/message-band/) (Balm, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: promotion
   - Live demo: https://demo.blocko.ai/html/balm/sections/promotion--message-band.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Message band" (id `message-band`, theme `balm`; live demo: https://demo.blocko.ai/html/balm/sections/promotion--message-band.html; Shopify bundle: sections/balm/message-band/ 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. [Message band](https://blocko.ai/library/bare/sections/message-band/) (Bare, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: promotion
   - Live demo: https://demo.blocko.ai/html/bare/sections/promotion--message-band.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Message band" (id `message-band`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/sections/promotion--message-band.html; Shopify bundle: sections/bare/message-band/ 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. [Message band](https://blocko.ai/library/blush/sections/message-band/) (Blush, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: promotion
   - Live demo: https://demo.blocko.ai/html/blush/sections/promotion--message-band.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Message band" (id `message-band`, theme `blush`; live demo: https://demo.blocko.ai/html/blush/sections/promotion--message-band.html; Shopify bundle: sections/blush/message-band/ 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. [Message band](https://blocko.ai/library/clip/sections/message-band/) (Clip, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: promotion
   - Live demo: https://demo.blocko.ai/html/clip/sections/promotion--message-band.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Message band" (id `message-band`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/sections/promotion--message-band.html; Shopify bundle: sections/clip/message-band/ 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. [Message band](https://blocko.ai/library/dew/sections/message-band/) (Dew, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: promotion
   - Live demo: https://demo.blocko.ai/html/dew/sections/promotion--message-band.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Message band" (id `message-band`, theme `dew`; live demo: https://demo.blocko.ai/html/dew/sections/promotion--message-band.html; Shopify bundle: sections/dew/message-band/ 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. [Claim ticker](https://blocko.ai/library/isle/sections/isle-ticker/) (Isle, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: promotion
   - Live demo: https://demo.blocko.ai/html/isle/sections/promotion--isle-ticker.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Claim ticker" (id `isle-ticker`, theme `isle`; live demo: https://demo.blocko.ai/html/isle/sections/promotion--isle-ticker.html; Shopify bundle: sections/isle/isle-ticker/ 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. [Message band](https://blocko.ai/library/lather/sections/message-band/) (Lather, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: promotion
   - Live demo: https://demo.blocko.ai/html/lather/sections/promotion--message-band.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Message band" (id `message-band`, theme `lather`; live demo: https://demo.blocko.ai/html/lather/sections/promotion--message-band.html; Shopify bundle: sections/lather/message-band/ 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. [Message band](https://blocko.ai/library/prism/sections/message-band/) (Prism, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: promotion
   - Live demo: https://demo.blocko.ai/html/prism/sections/promotion--message-band.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Message band" (id `message-band`, theme `prism`; live demo: https://demo.blocko.ai/html/prism/sections/promotion--message-band.html; Shopify bundle: sections/prism/message-band/ 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. [Subscribe and save](https://blocko.ai/library/prism/sections/prism-subscribe/) (Prism, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: promo
   - Live demo: https://demo.blocko.ai/html/prism/sections/promo--prism-subscribe.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Subscribe and save" (id `prism-subscribe`, theme `prism`; live demo: https://demo.blocko.ai/html/prism/sections/promo--prism-subscribe.html; Shopify bundle: sections/prism/prism-subscribe/ 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. [Message band](https://blocko.ai/library/shelf/sections/message-band/) (Shelf, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: promotion
   - Live demo: https://demo.blocko.ai/html/shelf/sections/promotion--message-band.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Message band" (id `message-band`, theme `shelf`; live demo: https://demo.blocko.ai/html/shelf/sections/promotion--message-band.html; Shopify bundle: sections/shelf/message-band/ 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. [Rewards band](https://blocko.ai/library/shelf/sections/shelf-rewards/) (Shelf, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: promo
   - Live demo: https://demo.blocko.ai/html/shelf/sections/promo--shelf-rewards.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Rewards band" (id `shelf-rewards`, theme `shelf`; live demo: https://demo.blocko.ai/html/shelf/sections/promo--shelf-rewards.html; Shopify bundle: sections/shelf/shelf-rewards/ 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. [Message band](https://blocko.ai/library/stubble/sections/message-band/) (Stubble, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: promotion
   - Live demo: https://demo.blocko.ai/html/stubble/sections/promotion--message-band.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Message band" (id `message-band`, theme `stubble`; live demo: https://demo.blocko.ai/html/stubble/sections/promotion--message-band.html; Shopify bundle: sections/stubble/message-band/ 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. [Subscription banner](https://blocko.ai/library/stubble/sections/stubble-trial-banner/) (Stubble, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: promo-banner
   - Live demo: https://demo.blocko.ai/html/stubble/sections/promo-banner--stubble-trial-banner.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Subscription banner" (id `stubble-trial-banner`, theme `stubble`; live demo: https://demo.blocko.ai/html/stubble/sections/promo-banner--stubble-trial-banner.html; Shopify bundle: sections/stubble/stubble-trial-banner/ 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. [Message band](https://blocko.ai/library/tide/sections/message-band/) (Tide, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: promotion
   - Live demo: https://demo.blocko.ai/html/tide/sections/promotion--message-band.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Message band" (id `message-band`, theme `tide`; live demo: https://demo.blocko.ai/html/tide/sections/promotion--message-band.html; Shopify bundle: sections/tide/message-band/ 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. [Message band](https://blocko.ai/library/tint/sections/message-band/) (Tint, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: promotion
   - Live demo: https://demo.blocko.ai/html/tint/sections/promotion--message-band.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Message band" (id `message-band`, theme `tint`; live demo: https://demo.blocko.ai/html/tint/sections/promotion--message-band.html; Shopify bundle: sections/tint/message-band/ 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. [Message band](https://blocko.ai/library/twist/sections/message-band/) (Twist, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: promotion
   - Live demo: https://demo.blocko.ai/html/twist/sections/promotion--message-band.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Message band" (id `message-band`, theme `twist`; live demo: https://demo.blocko.ai/html/twist/sections/promotion--message-band.html; Shopify bundle: sections/twist/message-band/ 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. [Message band](https://blocko.ai/library/veil/sections/message-band/) (Veil, beauty)
   - Shopify Liquid: ready; JavaScript: 0 KB; category: promotion
   - Live demo: https://demo.blocko.ai/html/veil/sections/promotion--message-band.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Message band" (id `message-band`, theme `veil`; live demo: https://demo.blocko.ai/html/veil/sections/promotion--message-band.html; Shopify bundle: sections/veil/message-band/ 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. [Scent quiz banner](https://blocko.ai/library/lather/sections/lather-quiz-banner/) (Lather, beauty)
   - Shopify Liquid: ready; JavaScript: 0.7 KB; category: promo
   - Live demo: https://demo.blocko.ai/html/lather/sections/promo--lather-quiz-banner.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Scent quiz banner" (id `lather-quiz-banner`, theme `lather`; live demo: https://demo.blocko.ai/html/lather/sections/promo--lather-quiz-banner.html; Shopify bundle: sections/lather/lather-quiz-banner/ 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. [Build-a-box band](https://blocko.ai/library/twist/sections/twist-box-builder/) (Twist, beauty)
   - Shopify Liquid: ready; JavaScript: 1.7 KB; category: promotion
   - Live demo: https://demo.blocko.ai/html/twist/sections/promotion--twist-box-builder.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Build-a-box band" (id `twist-box-builder`, theme `twist`; live demo: https://demo.blocko.ai/html/twist/sections/promotion--twist-box-builder.html; Shopify bundle: sections/twist/twist-box-builder/ 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. [Hair quiz strip](https://blocko.ai/library/twist/sections/twist-quiz-cta/) (Twist, beauty)
   - Shopify Liquid: ready; JavaScript: 1.7 KB; category: promotion
   - Live demo: https://demo.blocko.ai/html/twist/sections/promotion--twist-quiz-cta.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Hair quiz strip" (id `twist-quiz-cta`, theme `twist`; live demo: https://demo.blocko.ai/html/twist/sections/promotion--twist-quiz-cta.html; Shopify bundle: sections/twist/twist-quiz-cta/ 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).

## FAQ

### What are the best promotions sections for Shopify?

Blocko lists 20 free, MIT-licensed promotions sections from 14 themes. 20 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 Message band from Balm comes first.

### Are these promotions sections free to use?

Yes. Every item is MIT licensed, free to copy and edit, and needs no app or subscription. Blocko is not affiliated with Shopify.

### How do I add one of these promotions sections to my Shopify store?

Open an item, copy its one-line prompt into your coding agent, or connect the Blocko MCP server at https://blocko.ai/mcp. The agent asks where the section should go before it changes any code.

### Which industries do these promotions sections cover?

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

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

17 of 20 ship 0 KB of JavaScript. The heaviest is Build-a-box band in Twist at 1.7 KB, registered as an idempotent Custom Element.