# Top 29 Rewards Blocks for Shopify (Updated Oct 2026)

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

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

## Items

1. [Reward tier](https://blocko.ai/library/tress/blocks/haircare-extras-reward-tier/) (Tress, beauty)
   - Shopify Liquid: not yet (not migrated to neutral template); JavaScript: 4.4 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/tress/blocks/rewards--haircare-extras-reward-tier.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 "Reward tier" (id `haircare-extras-reward-tier`, theme `tress`; live demo: https://demo.blocko.ai/html/tress/blocks/rewards--haircare-extras-reward-tier.html; no Shopify bundle yet (not migrated to neutral template) — port it from the HTML demo demo/tress/blocks/rewards--haircare-extras-reward-tier.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).
2. [Earn card](https://blocko.ai/library/balm/blocks/beauty-extras-earn-card/) (Balm, beauty)
   - Shopify Liquid: not yet (needs app (earning rules and point balances need a loyalty app; Shopify has no native rewards data); UI shell emitted); JavaScript: 9.0 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/balm/blocks/rewards--beauty-extras-earn-card.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the block "Earn card" (id `beauty-extras-earn-card`, theme `balm`; live demo: https://demo.blocko.ai/html/balm/blocks/rewards--beauty-extras-earn-card.html; no Shopify bundle yet (needs app (earning rules and point balances need a loyalty app; Shopify has no native rewards data); UI shell emitted) — port it from the HTML demo demo/balm/blocks/rewards--beauty-extras-earn-card.html into a Liquid section with a {% schema %}, mirroring the structure of an existing bundle in sections/veil/) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify).
3. [Rewards tier](https://blocko.ai/library/balm/blocks/beauty-extras-rewards-tier/) (Balm, beauty)
   - Shopify Liquid: not yet (needs app (tier thresholds and member status need a loyalty app; Shopify has no native rewards data); UI shell emitted); JavaScript: 9.0 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/balm/blocks/rewards--beauty-extras-rewards-tier.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 "Rewards tier" (id `beauty-extras-rewards-tier`, theme `balm`; live demo: https://demo.blocko.ai/html/balm/blocks/rewards--beauty-extras-rewards-tier.html; no Shopify bundle yet (needs app (tier thresholds and member status need a loyalty app; Shopify has no native rewards data); UI shell emitted) — port it from the HTML demo demo/balm/blocks/rewards--beauty-extras-rewards-tier.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).
4. [Earn card](https://blocko.ai/library/bare/blocks/beauty-extras-earn-card/) (Bare, beauty)
   - Shopify Liquid: not yet (needs app (earning rules and point balances need a loyalty app; Shopify has no native rewards data); UI shell emitted); JavaScript: 9.0 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/bare/blocks/rewards--beauty-extras-earn-card.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the block "Earn card" (id `beauty-extras-earn-card`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/blocks/rewards--beauty-extras-earn-card.html; no Shopify bundle yet (needs app (earning rules and point balances need a loyalty app; Shopify has no native rewards data); UI shell emitted) — port it from the HTML demo demo/bare/blocks/rewards--beauty-extras-earn-card.html into a Liquid section with a {% schema %}, mirroring the structure of an existing bundle in sections/veil/) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify).
5. [Rewards tier](https://blocko.ai/library/bare/blocks/beauty-extras-rewards-tier/) (Bare, beauty)
   - Shopify Liquid: not yet (needs app (tier thresholds and member status need a loyalty app; Shopify has no native rewards data); UI shell emitted); JavaScript: 9.0 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/bare/blocks/rewards--beauty-extras-rewards-tier.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 "Rewards tier" (id `beauty-extras-rewards-tier`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/blocks/rewards--beauty-extras-rewards-tier.html; no Shopify bundle yet (needs app (tier thresholds and member status need a loyalty app; Shopify has no native rewards data); UI shell emitted) — port it from the HTML demo demo/bare/blocks/rewards--beauty-extras-rewards-tier.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).
6. [Earn card](https://blocko.ai/library/blush/blocks/beauty-extras-earn-card/) (Blush, beauty)
   - Shopify Liquid: not yet (needs app (earning rules and point balances need a loyalty app; Shopify has no native rewards data); UI shell emitted); JavaScript: 9.0 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/blush/blocks/rewards--beauty-extras-earn-card.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the block "Earn card" (id `beauty-extras-earn-card`, theme `blush`; live demo: https://demo.blocko.ai/html/blush/blocks/rewards--beauty-extras-earn-card.html; no Shopify bundle yet (needs app (earning rules and point balances need a loyalty app; Shopify has no native rewards data); UI shell emitted) — port it from the HTML demo demo/blush/blocks/rewards--beauty-extras-earn-card.html into a Liquid section with a {% schema %}, mirroring the structure of an existing bundle in sections/veil/) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify).
7. [Rewards tier](https://blocko.ai/library/blush/blocks/beauty-extras-rewards-tier/) (Blush, beauty)
   - Shopify Liquid: not yet (needs app (tier thresholds and member status need a loyalty app; Shopify has no native rewards data); UI shell emitted); JavaScript: 9.0 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/blush/blocks/rewards--beauty-extras-rewards-tier.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 "Rewards tier" (id `beauty-extras-rewards-tier`, theme `blush`; live demo: https://demo.blocko.ai/html/blush/blocks/rewards--beauty-extras-rewards-tier.html; no Shopify bundle yet (needs app (tier thresholds and member status need a loyalty app; Shopify has no native rewards data); UI shell emitted) — port it from the HTML demo demo/blush/blocks/rewards--beauty-extras-rewards-tier.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).
8. [Earn card](https://blocko.ai/library/clip/blocks/beauty-extras-earn-card/) (Clip, beauty)
   - Shopify Liquid: not yet (needs app (earning rules and point balances need a loyalty app; Shopify has no native rewards data); UI shell emitted); JavaScript: 9.0 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/clip/blocks/rewards--beauty-extras-earn-card.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the block "Earn card" (id `beauty-extras-earn-card`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/blocks/rewards--beauty-extras-earn-card.html; no Shopify bundle yet (needs app (earning rules and point balances need a loyalty app; Shopify has no native rewards data); UI shell emitted) — port it from the HTML demo demo/clip/blocks/rewards--beauty-extras-earn-card.html into a Liquid section with a {% schema %}, mirroring the structure of an existing bundle in sections/veil/) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify).
9. [Rewards tier](https://blocko.ai/library/clip/blocks/beauty-extras-rewards-tier/) (Clip, beauty)
   - Shopify Liquid: not yet (needs app (tier thresholds and member status need a loyalty app; Shopify has no native rewards data); UI shell emitted); JavaScript: 9.0 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/clip/blocks/rewards--beauty-extras-rewards-tier.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 "Rewards tier" (id `beauty-extras-rewards-tier`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/blocks/rewards--beauty-extras-rewards-tier.html; no Shopify bundle yet (needs app (tier thresholds and member status need a loyalty app; Shopify has no native rewards data); UI shell emitted) — port it from the HTML demo demo/clip/blocks/rewards--beauty-extras-rewards-tier.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).
10. [Earn card](https://blocko.ai/library/dew/blocks/beauty-extras-earn-card/) (Dew, beauty)
   - Shopify Liquid: not yet (needs app (earning rules and point balances need a loyalty app; Shopify has no native rewards data); UI shell emitted); JavaScript: 9.0 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/dew/blocks/rewards--beauty-extras-earn-card.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the block "Earn card" (id `beauty-extras-earn-card`, theme `dew`; live demo: https://demo.blocko.ai/html/dew/blocks/rewards--beauty-extras-earn-card.html; no Shopify bundle yet (needs app (earning rules and point balances need a loyalty app; Shopify has no native rewards data); UI shell emitted) — port it from the HTML demo demo/dew/blocks/rewards--beauty-extras-earn-card.html into a Liquid section with a {% schema %}, mirroring the structure of an existing bundle in sections/veil/) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify).
11. [Rewards tier](https://blocko.ai/library/dew/blocks/beauty-extras-rewards-tier/) (Dew, beauty)
   - Shopify Liquid: not yet (needs app (tier thresholds and member status need a loyalty app; Shopify has no native rewards data); UI shell emitted); JavaScript: 9.0 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/dew/blocks/rewards--beauty-extras-rewards-tier.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 "Rewards tier" (id `beauty-extras-rewards-tier`, theme `dew`; live demo: https://demo.blocko.ai/html/dew/blocks/rewards--beauty-extras-rewards-tier.html; no Shopify bundle yet (needs app (tier thresholds and member status need a loyalty app; Shopify has no native rewards data); UI shell emitted) — port it from the HTML demo demo/dew/blocks/rewards--beauty-extras-rewards-tier.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).
12. [Earn card](https://blocko.ai/library/isle/blocks/beauty-extras-earn-card/) (Isle, beauty)
   - Shopify Liquid: not yet (needs app (earning rules and point balances need a loyalty app; Shopify has no native rewards data); UI shell emitted); JavaScript: 9.0 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/isle/blocks/rewards--beauty-extras-earn-card.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the block "Earn card" (id `beauty-extras-earn-card`, theme `isle`; live demo: https://demo.blocko.ai/html/isle/blocks/rewards--beauty-extras-earn-card.html; no Shopify bundle yet (needs app (earning rules and point balances need a loyalty app; Shopify has no native rewards data); UI shell emitted) — port it from the HTML demo demo/isle/blocks/rewards--beauty-extras-earn-card.html into a Liquid section with a {% schema %}, mirroring the structure of an existing bundle in sections/veil/) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify).
13. [Rewards tier](https://blocko.ai/library/isle/blocks/beauty-extras-rewards-tier/) (Isle, beauty)
   - Shopify Liquid: not yet (needs app (tier thresholds and member status need a loyalty app; Shopify has no native rewards data); UI shell emitted); JavaScript: 9.0 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/isle/blocks/rewards--beauty-extras-rewards-tier.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 "Rewards tier" (id `beauty-extras-rewards-tier`, theme `isle`; live demo: https://demo.blocko.ai/html/isle/blocks/rewards--beauty-extras-rewards-tier.html; no Shopify bundle yet (needs app (tier thresholds and member status need a loyalty app; Shopify has no native rewards data); UI shell emitted) — port it from the HTML demo demo/isle/blocks/rewards--beauty-extras-rewards-tier.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).
14. [Earn card](https://blocko.ai/library/lather/blocks/beauty-extras-earn-card/) (Lather, beauty)
   - Shopify Liquid: not yet (needs app (earning rules and point balances need a loyalty app; Shopify has no native rewards data); UI shell emitted); JavaScript: 9.0 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/lather/blocks/rewards--beauty-extras-earn-card.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the block "Earn card" (id `beauty-extras-earn-card`, theme `lather`; live demo: https://demo.blocko.ai/html/lather/blocks/rewards--beauty-extras-earn-card.html; no Shopify bundle yet (needs app (earning rules and point balances need a loyalty app; Shopify has no native rewards data); UI shell emitted) — port it from the HTML demo demo/lather/blocks/rewards--beauty-extras-earn-card.html into a Liquid section with a {% schema %}, mirroring the structure of an existing bundle in sections/veil/) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify).
15. [Rewards tier](https://blocko.ai/library/lather/blocks/beauty-extras-rewards-tier/) (Lather, beauty)
   - Shopify Liquid: not yet (needs app (tier thresholds and member status need a loyalty app; Shopify has no native rewards data); UI shell emitted); JavaScript: 9.0 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/lather/blocks/rewards--beauty-extras-rewards-tier.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 "Rewards tier" (id `beauty-extras-rewards-tier`, theme `lather`; live demo: https://demo.blocko.ai/html/lather/blocks/rewards--beauty-extras-rewards-tier.html; no Shopify bundle yet (needs app (tier thresholds and member status need a loyalty app; Shopify has no native rewards data); UI shell emitted) — port it from the HTML demo demo/lather/blocks/rewards--beauty-extras-rewards-tier.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).
16. [Earn card](https://blocko.ai/library/prism/blocks/beauty-extras-earn-card/) (Prism, beauty)
   - Shopify Liquid: not yet (needs app (earning rules and point balances need a loyalty app; Shopify has no native rewards data); UI shell emitted); JavaScript: 9.0 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/prism/blocks/rewards--beauty-extras-earn-card.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the block "Earn card" (id `beauty-extras-earn-card`, theme `prism`; live demo: https://demo.blocko.ai/html/prism/blocks/rewards--beauty-extras-earn-card.html; no Shopify bundle yet (needs app (earning rules and point balances need a loyalty app; Shopify has no native rewards data); UI shell emitted) — port it from the HTML demo demo/prism/blocks/rewards--beauty-extras-earn-card.html into a Liquid section with a {% schema %}, mirroring the structure of an existing bundle in sections/veil/) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify).
17. [Rewards tier](https://blocko.ai/library/prism/blocks/beauty-extras-rewards-tier/) (Prism, beauty)
   - Shopify Liquid: not yet (needs app (tier thresholds and member status need a loyalty app; Shopify has no native rewards data); UI shell emitted); JavaScript: 9.0 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/prism/blocks/rewards--beauty-extras-rewards-tier.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 "Rewards tier" (id `beauty-extras-rewards-tier`, theme `prism`; live demo: https://demo.blocko.ai/html/prism/blocks/rewards--beauty-extras-rewards-tier.html; no Shopify bundle yet (needs app (tier thresholds and member status need a loyalty app; Shopify has no native rewards data); UI shell emitted) — port it from the HTML demo demo/prism/blocks/rewards--beauty-extras-rewards-tier.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).
18. [Earn card](https://blocko.ai/library/shelf/blocks/beauty-extras-earn-card/) (Shelf, beauty)
   - Shopify Liquid: not yet (needs app (earning rules and point balances need a loyalty app; Shopify has no native rewards data); UI shell emitted); JavaScript: 9.0 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/shelf/blocks/rewards--beauty-extras-earn-card.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the block "Earn card" (id `beauty-extras-earn-card`, theme `shelf`; live demo: https://demo.blocko.ai/html/shelf/blocks/rewards--beauty-extras-earn-card.html; no Shopify bundle yet (needs app (earning rules and point balances need a loyalty app; Shopify has no native rewards data); UI shell emitted) — port it from the HTML demo demo/shelf/blocks/rewards--beauty-extras-earn-card.html into a Liquid section with a {% schema %}, mirroring the structure of an existing bundle in sections/veil/) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify).
19. [Rewards tier](https://blocko.ai/library/shelf/blocks/beauty-extras-rewards-tier/) (Shelf, beauty)
   - Shopify Liquid: not yet (needs app (tier thresholds and member status need a loyalty app; Shopify has no native rewards data); UI shell emitted); JavaScript: 9.0 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/shelf/blocks/rewards--beauty-extras-rewards-tier.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 "Rewards tier" (id `beauty-extras-rewards-tier`, theme `shelf`; live demo: https://demo.blocko.ai/html/shelf/blocks/rewards--beauty-extras-rewards-tier.html; no Shopify bundle yet (needs app (tier thresholds and member status need a loyalty app; Shopify has no native rewards data); UI shell emitted) — port it from the HTML demo demo/shelf/blocks/rewards--beauty-extras-rewards-tier.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).
20. [Earn card](https://blocko.ai/library/stubble/blocks/beauty-extras-earn-card/) (Stubble, beauty)
   - Shopify Liquid: not yet (needs app (earning rules and point balances need a loyalty app; Shopify has no native rewards data); UI shell emitted); JavaScript: 9.0 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/stubble/blocks/rewards--beauty-extras-earn-card.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the block "Earn card" (id `beauty-extras-earn-card`, theme `stubble`; live demo: https://demo.blocko.ai/html/stubble/blocks/rewards--beauty-extras-earn-card.html; no Shopify bundle yet (needs app (earning rules and point balances need a loyalty app; Shopify has no native rewards data); UI shell emitted) — port it from the HTML demo demo/stubble/blocks/rewards--beauty-extras-earn-card.html into a Liquid section with a {% schema %}, mirroring the structure of an existing bundle in sections/veil/) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify).
21. [Rewards tier](https://blocko.ai/library/stubble/blocks/beauty-extras-rewards-tier/) (Stubble, beauty)
   - Shopify Liquid: not yet (needs app (tier thresholds and member status need a loyalty app; Shopify has no native rewards data); UI shell emitted); JavaScript: 9.0 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/stubble/blocks/rewards--beauty-extras-rewards-tier.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 "Rewards tier" (id `beauty-extras-rewards-tier`, theme `stubble`; live demo: https://demo.blocko.ai/html/stubble/blocks/rewards--beauty-extras-rewards-tier.html; no Shopify bundle yet (needs app (tier thresholds and member status need a loyalty app; Shopify has no native rewards data); UI shell emitted) — port it from the HTML demo demo/stubble/blocks/rewards--beauty-extras-rewards-tier.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).
22. [Earn card](https://blocko.ai/library/tide/blocks/beauty-extras-earn-card/) (Tide, beauty)
   - Shopify Liquid: not yet (needs app (earning rules and point balances need a loyalty app; Shopify has no native rewards data); UI shell emitted); JavaScript: 9.0 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/tide/blocks/rewards--beauty-extras-earn-card.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the block "Earn card" (id `beauty-extras-earn-card`, theme `tide`; live demo: https://demo.blocko.ai/html/tide/blocks/rewards--beauty-extras-earn-card.html; no Shopify bundle yet (needs app (earning rules and point balances need a loyalty app; Shopify has no native rewards data); UI shell emitted) — port it from the HTML demo demo/tide/blocks/rewards--beauty-extras-earn-card.html into a Liquid section with a {% schema %}, mirroring the structure of an existing bundle in sections/veil/) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify).
23. [Rewards tier](https://blocko.ai/library/tide/blocks/beauty-extras-rewards-tier/) (Tide, beauty)
   - Shopify Liquid: not yet (needs app (tier thresholds and member status need a loyalty app; Shopify has no native rewards data); UI shell emitted); JavaScript: 9.0 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/tide/blocks/rewards--beauty-extras-rewards-tier.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 "Rewards tier" (id `beauty-extras-rewards-tier`, theme `tide`; live demo: https://demo.blocko.ai/html/tide/blocks/rewards--beauty-extras-rewards-tier.html; no Shopify bundle yet (needs app (tier thresholds and member status need a loyalty app; Shopify has no native rewards data); UI shell emitted) — port it from the HTML demo demo/tide/blocks/rewards--beauty-extras-rewards-tier.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).
24. [Earn card](https://blocko.ai/library/tint/blocks/beauty-extras-earn-card/) (Tint, beauty)
   - Shopify Liquid: not yet (needs app (earning rules and point balances need a loyalty app; Shopify has no native rewards data); UI shell emitted); JavaScript: 9.0 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/tint/blocks/rewards--beauty-extras-earn-card.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the block "Earn card" (id `beauty-extras-earn-card`, theme `tint`; live demo: https://demo.blocko.ai/html/tint/blocks/rewards--beauty-extras-earn-card.html; no Shopify bundle yet (needs app (earning rules and point balances need a loyalty app; Shopify has no native rewards data); UI shell emitted) — port it from the HTML demo demo/tint/blocks/rewards--beauty-extras-earn-card.html into a Liquid section with a {% schema %}, mirroring the structure of an existing bundle in sections/veil/) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify).
25. [Rewards tier](https://blocko.ai/library/tint/blocks/beauty-extras-rewards-tier/) (Tint, beauty)
   - Shopify Liquid: not yet (needs app (tier thresholds and member status need a loyalty app; Shopify has no native rewards data); UI shell emitted); JavaScript: 9.0 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/tint/blocks/rewards--beauty-extras-rewards-tier.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 "Rewards tier" (id `beauty-extras-rewards-tier`, theme `tint`; live demo: https://demo.blocko.ai/html/tint/blocks/rewards--beauty-extras-rewards-tier.html; no Shopify bundle yet (needs app (tier thresholds and member status need a loyalty app; Shopify has no native rewards data); UI shell emitted) — port it from the HTML demo demo/tint/blocks/rewards--beauty-extras-rewards-tier.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).
26. [Earn card](https://blocko.ai/library/twist/blocks/beauty-extras-earn-card/) (Twist, beauty)
   - Shopify Liquid: not yet (needs app (earning rules and point balances need a loyalty app; Shopify has no native rewards data); UI shell emitted); JavaScript: 9.0 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/twist/blocks/rewards--beauty-extras-earn-card.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the block "Earn card" (id `beauty-extras-earn-card`, theme `twist`; live demo: https://demo.blocko.ai/html/twist/blocks/rewards--beauty-extras-earn-card.html; no Shopify bundle yet (needs app (earning rules and point balances need a loyalty app; Shopify has no native rewards data); UI shell emitted) — port it from the HTML demo demo/twist/blocks/rewards--beauty-extras-earn-card.html into a Liquid section with a {% schema %}, mirroring the structure of an existing bundle in sections/veil/) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify).
27. [Rewards tier](https://blocko.ai/library/twist/blocks/beauty-extras-rewards-tier/) (Twist, beauty)
   - Shopify Liquid: not yet (needs app (tier thresholds and member status need a loyalty app; Shopify has no native rewards data); UI shell emitted); JavaScript: 9.0 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/twist/blocks/rewards--beauty-extras-rewards-tier.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 "Rewards tier" (id `beauty-extras-rewards-tier`, theme `twist`; live demo: https://demo.blocko.ai/html/twist/blocks/rewards--beauty-extras-rewards-tier.html; no Shopify bundle yet (needs app (tier thresholds and member status need a loyalty app; Shopify has no native rewards data); UI shell emitted) — port it from the HTML demo demo/twist/blocks/rewards--beauty-extras-rewards-tier.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).
28. [Earn card](https://blocko.ai/library/veil/blocks/beauty-extras-earn-card/) (Veil, beauty)
   - Shopify Liquid: not yet (needs app (earning rules and point balances need a loyalty app; Shopify has no native rewards data); UI shell emitted); JavaScript: 9.0 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/veil/blocks/rewards--beauty-extras-earn-card.html
   - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the block "Earn card" (id `beauty-extras-earn-card`, theme `veil`; live demo: https://demo.blocko.ai/html/veil/blocks/rewards--beauty-extras-earn-card.html; no Shopify bundle yet (needs app (earning rules and point balances need a loyalty app; Shopify has no native rewards data); UI shell emitted) — port it from the HTML demo demo/veil/blocks/rewards--beauty-extras-earn-card.html into a Liquid section with a {% schema %}, mirroring the structure of an existing bundle in sections/veil/) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify).
29. [Rewards tier](https://blocko.ai/library/veil/blocks/beauty-extras-rewards-tier/) (Veil, beauty)
   - Shopify Liquid: not yet (needs app (tier thresholds and member status need a loyalty app; Shopify has no native rewards data); UI shell emitted); JavaScript: 9.0 KB; category: rewards
   - Live demo: https://demo.blocko.ai/html/veil/blocks/rewards--beauty-extras-rewards-tier.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 "Rewards tier" (id `beauty-extras-rewards-tier`, theme `veil`; live demo: https://demo.blocko.ai/html/veil/blocks/rewards--beauty-extras-rewards-tier.html; no Shopify bundle yet (needs app (tier thresholds and member status need a loyalty app; Shopify has no native rewards data); UI shell emitted) — port it from the HTML demo demo/veil/blocks/rewards--beauty-extras-rewards-tier.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 rewards blocks for Shopify?

Blocko lists 29 free, MIT-licensed rewards blocks from 15 themes. 0 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 Reward tier from Tress comes first.

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

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

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

0 of 29 ship 0 KB of JavaScript. The heaviest is Earn card in Balm at 9.0 KB, registered as an idempotent Custom Element.