An open library of custom blocks for subscription customer portals
All blocks
No. 17Retention

Punch Card Milestone Banner

The next reward, and every milestone after it.

Alessandro PacittiLinkedIn
How to installCustomize with AI
ScreenshotNeeds a live customer portal to run
Customer portal · Punch Card Milestone Banner
Punch Card Milestone Banner preview

This block reads live subscription data, so it only runs inside a real customer portal. The screenshot shows what subscribers see.

What it does

Shows subscribers the reward on their next order, with the date it processes, and a punch-card journey of every milestone still ahead.

Why it exists

For merchants who give rewards on set orders, like a free gift on order 2 or a discount on order 4. Showing the next perk and the road after it makes the program exciting, and gives subscribers a reason to stay for one more order.

The code

Paste it as-is, or download punch-card-milestone-banner.html

How to install

  1. Copy the code above, or download the .html file.
Your portal
  1. Go to Storefront → Customer Portal → Branding → Layout and click Add custom extension.
  2. Pick HTML with embedded CSS and JavaScript and paste the whole file into the code editor.
  3. Swap anything the file asks you to, like [BRAND], product names or Quick Action IDs. The AI prompt below can walk you through it.
  4. Save, click + to add it to the layout, then Publish. Check it on a test subscription’s magic link with ?forcePreview=true, since some scripts don’t run in Preview.
Before you paste

Edit only the CONFIG section: add one entry per active Surprise & Delight rule (order number, allowed subscription statuses, title, and a product image or discount label), then set your colors and copy. Replace both product images, which point at the original brand's Shopify files. It reads subscriptions through Skio's portal API, so it needs a Skio customer portal.

Customize it with AI

Paste this prompt into Claude Code or Codex. It asks for the code and your brand and product details, then writes a version for your store.

Blocks are shared as-is by the people who built them. Read the code before you add it to your portal, and test it with a test subscriber first.

Built a custom extension your subscribers love?

Share it with us, we'll review it, we'll get it live, then we'll add it to the site so anyone can copy + customize.

Submit a block How to build one
your-block.html
<!-- your-block.html -->
<div class="my-block">
  <p class="my-block__title">Your next order ships Friday</p>
  <button class="my-block__cta">Add a bonus item</button>
</div>

<style>
  .my-block { padding: 20px; border-radius: 16px; }
  .my-block__cta { background: var(--brand); }
</style>

<script>
  // read the subscription, then do the useful thing
  const sub = window.__subscription;
</script>