Discount Badge Guide

1. Overview

The Discount Badge feature lets you display live discount information directly on your storefront — on product pages, collection pages, or both. There is no coding required. CodeRally writes discount data to Shopify metafields automatically when you run a campaign, and the badge blocks read and render that data in real time.

Both blocks are installed as Shopify theme app extensions. They live inside your theme's editor, so you can position them anywhere on the page without touching code. The two blocks are:

• Product Discount Badge — shows on product pages only
• Collection Discount Badge — shows on collection pages only

2. Before you begin — Enabling the Discount Badge

The Discount Badge requires two additional Shopify permissions before it can run on your storefront:

• Write access to products — CodeRally uses this to write discount data to product metafields, which the badge block reads at render time.
• Read access to themes — CodeRally uses this to verify which pages the badge block has been placed on, so the Settings page can reflect its status accurately.

These are one-time permissions you grant through Shopify's standard access prompt.

How to enable it

1. Open the CodeRally app and go to Settings.
2. In the Discount Badge card, click the Enable Discount Badge button (shown when access has not yet been granted).
3. Shopify will open a permission prompt listing the access being requested. Review it and click Install to confirm.
4. You will be redirected back to the Settings page automatically. The Configure — Product Page and Configure — Collection Page buttons will now be visible.

Once access is granted you do not need to repeat this step — the permissions persist across sessions and app updates.

3. Setting up the Discount Badge

Before the badges appear on your storefront you need to place each block in your theme using the Shopify theme editor. CodeRally makes this a single click.

3.1 Product Page — Step by step

1. Open the CodeRally app and go to Settings.
2. In the Discount Badge card, click the Configure — Product Page button. CodeRally opens the Shopify theme editor directly on your product page template with the badge block already added.
   

   The Configure — Product Page button in CodeRally Settings.

3. In the theme editor, drag the block to your preferred position — typically below the product title or above the Add to Cart button.
   

   The Product Discount Badge block already placed in the theme editor — drag it to your preferred position.

4. Click Save in the theme editor.
5. Return to the CodeRally Settings page — the button will now show Product Page — Configured ✓ confirming the block is live.

3.2 Collection Page — Step by step

1. Open the CodeRally app and go to Settings.
2. In the Discount Badge card, click the Configure — Collection Page button. CodeRally opens the Shopify theme editor on your collection page template with the badge block already added.
   

   The Configure — Collection Page button in CodeRally Settings.

3. In the theme editor, drag the block to your preferred position — typically above the product grid.
   

   The Collection Discount Badge block already placed in the theme editor — drag it to your preferred position.

4. Click Save.
5. Return to the CodeRally Settings page — the button now shows Collection Page — Configured ✓.

4. Product Discount Badge — Settings & features

The Product Discount Badge block (discount-badge.liquid) reads the app.coderally_discount_info product metafield that CodeRally writes when a discount is applied to a product. It renders a styled offer strip directly on the product page.

4.1 How it renders

Automatic discount (no code required)

┌────────────────────────────────────────┐
│ ★ 23% OFF   Exclusive offer            │
│ Discount applies in cart / at checkout.│
└────────────────────────────────────────┘

The hint line is shown automatically for automatic discounts so shoppers know where the saving appears.

Code discount (with copy button)

┌─────────────────────────────────────────────┐
│ ★ 23% OFF   Exclusive offer                 │
│ ┌──────────────────┬──────────────────────┐ │
│ │  SAVE23          │  Copy code           │ │
│ └──────────────────┴──────────────────────┘ │
└─────────────────────────────────────────────┘

Clicking Copy code writes the code to the clipboard and briefly changes the label to ✓ Copied!

4.2 Block settings

4.3 Custom HTML tokens

Tokens are placeholders in your custom HTML that are replaced with live discount data when the page loads. They only work in custom HTML mode.

4.4 Conditional blocks

Conditional blocks let you show different markup depending on whether the discount is a code or automatic. They are resolved after token substitution, so you can freely nest tokens inside them.

[if_code]
<p>Use code <strong>[discount_code]</strong> at checkout.</p>
[/if_code]
[if_auto]
<p>Discount applies automatically in cart / at checkout.</p>
[/if_auto]

4.5 Copy button

To enable clipboard copy in custom HTML, add class="cr-copy-custom" to any <button> element inside your markup. The built-in script automatically reads [discount_code] as the text to copy and temporarily changes the button label to ✓ Copied! for 2 seconds. No extra JavaScript is needed.

<button class="cr-copy-custom" style="...">Copy code</button>

4.6 Delayed reveal

When Delay code reveal is turned on, the entire badge is hidden until the countdown timer expires. It then appears with a smooth fade-in animation. This is useful for creating urgency — for example, showing a discount code only after a shopper has spent some time on the page.

• Timer runs on the live storefront only — in the theme editor the badge is always visible
• Delay range: 10 – 300 seconds (default 60 s)
• Works in both the default and custom HTML modes

4.7 Multiple discounts

If a product has more than one active discount, the Show all discounts setting controls whether all of them are displayed or only the primary (first) one.

5. Collection Discount Badge — Settings & features

The Collection Discount Badge block (collection-badge.liquid) reads the app.coderally_discount_info collection metafield. It renders a deal element on the collection page so shoppers see the offer before they browse individual products.

5.1 Display styles

Unlike the product block, the collection block offers two built-in display styles selectable from the theme editor:

Strip (compact)

A horizontal bar with the discount badge on the left and the code chip on the right. Good for placement in sidebars or above tight product grids.

┌──────────────────────────────────────────────────────┐
│ ★ 25% OFF   Exclusive offer on Summer Collection     │
│                   ┌──────────────┬──────────────────┐│
│                   │  SUMMER25    │  Copy code       ││
│                   └──────────────┴──────────────────┘│
└──────────────────────────────────────────────────────┘

Banner (full-width) — recommended

A full-width dark gradient card with a large percentage number. This is the recommended style for collection pages — the visual weight communicates a category-level deal clearly and immediately.

┌──────────────────────────────────────────────────────────────┐
│  EXCLUSIVE COLLECTION DEAL                                   │
│                                                              │
│   25   %    On everything in Summer Collection               │
│      OFF                [ SUMMER25 ] [ Copy code ]           │
└──────────────────────────────────────────────────────────────┘

The percentage is rendered in brand cyan (#25E0FF) against a dark blue gradient. On smaller screens the layout wraps vertically.

5.2 Block settings

5.3 Custom HTML tokens

The collection block supports all the same tokens as the product block, plus a few collection-specific ones:

5.4 Conditional blocks

Identical to the product block — use [if_code]...[/if_code] and [if_auto]...[/if_auto]. See Section 4.4 for details.

5.5 Copy button

Works identically to the product block. Add class="cr-copy-custom" to any <button> in your custom markup. No extra JavaScript needed. See Section 4.5.

5.6 Delayed reveal

The collection block's delayed reveal behaves slightly differently from the product block:

• The badge is rendered immediately — only the discount code is masked as •••••••• with a live countdown button
• When the timer hits zero the code swaps in with a smooth animation
• Works in Strip and Banner display styles only — in custom HTML mode, delayed reveal is not applied
• Countdown only runs on the live storefront — theme editor always shows the code

5.7 Multiple discounts

When Show all discounts is on, every active discount is stacked using the chosen Strip or Banner style. In custom HTML mode, only the first (primary) discount is rendered regardless of this setting.

6. Custom HTML examples

These ready-to-paste examples work in both the product and collection blocks (using their respective tokens). Paste them into the Custom HTML / CSS textarea after enabling Use custom HTML.

Example 1 — Branded strip (handles both discount types)

Mirrors the built-in badge style but in fully custom markup. Safe to use when a product may have both automatic and code discounts.

<div style="border-left:3px solid #002A66;background:rgba(0,42,102,0.03);border-radius:0 8px 8px 0;padding:12px 14px;display:flex;flex-direction:column;gap:10px;">
  <div style="display:flex;align-items:center;gap:10px;">
    <span style="background:linear-gradient(135deg,#002A66,#25E0FF);color:#fff;font-weight:700;font-size:0.82em;padding:4px 12px;border-radius:20px;">
      ★ [discount_percentage]% OFF
    </span>
    <span style="font-size:0.88em;font-weight:600;color:#374151;">Exclusive offer</span>
  </div>
  [if_code]
  <div style="display:flex;border:1.5px dashed rgba(0,42,102,0.3);border-radius:6px;overflow:hidden;background:#fff;">
    <span style="flex:1;padding:9px 14px;font-family:monospace;font-weight:700;color:#002A66;letter-spacing:0.06em;">[discount_code]</span>
    <button class="cr-copy-custom" style="padding:9px 16px;background:linear-gradient(135deg,#002A66,#0a3d8f);color:#25E0FF;border:none;cursor:pointer;font-weight:700;font-size:0.8em;">Copy</button>
  </div>
  [/if_code]
  [if_auto]
  <p style="margin:0;font-size:0.78em;color:#6b7280;">Discount applies automatically in cart / at checkout.</p>
  [/if_auto]
</div>

Example 2 — Compact ribbon (single line, both types)

Minimal one-line banner for themes with tight product layouts.

<div style="background:#002A66;color:#fff;text-align:center;padding:10px 16px;font-size:0.88em;font-weight:600;border-radius:6px;">
  🎉 [discount_percentage]% OFF
  [if_code] — use code <strong>[discount_code]</strong>[/if_code]
  [if_auto] — applied automatically at checkout[/if_auto]
</div>

Example 3 — Green / blue per discount type

Distinct visual treatment per type — ideal when both automatic and code discounts are used in the same store.

[if_auto]
<div style="background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:12px 16px;">
  <p style="margin:0 0 4px;font-weight:700;color:#166534;font-size:0.9em;">★ [discount_percentage]% OFF — applied automatically</p>
  <p style="margin:0;font-size:0.78em;color:#4b7a5e;">No code needed. Discount applies in cart / at checkout.</p>
</div>
[/if_auto]
[if_code]
<div style="background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:12px 16px;display:flex;flex-direction:column;gap:8px;">
  <p style="margin:0;font-weight:700;color:#1e40af;font-size:0.9em;">★ [discount_percentage]% OFF — use your code at checkout</p>
  <div style="display:flex;border:1.5px dashed #93c5fd;border-radius:6px;overflow:hidden;background:#fff;">
    <span style="flex:1;padding:9px 14px;font-family:monospace;font-weight:700;color:#1e40af;letter-spacing:0.06em;">[discount_code]</span>
    <button class="cr-copy-custom" style="padding:9px 16px;background:#1e40af;color:#fff;border:none;cursor:pointer;font-weight:700;font-size:0.8em;">Copy</button>
  </div>
</div>
[/if_code]

Example 4 — Dark banner with product count (collection block only)

Takes advantage of the [product_count] and [collection_title] tokens that are unique to the collection block.

<div style="background:linear-gradient(135deg,#002A66,#0a3d8f);border-radius:12px;padding:20px 24px;color:#fff;display:flex;align-items:center;gap:20px;flex-wrap:wrap;">
  <div style="display:flex;align-items:baseline;gap:3px;flex-shrink:0;">
    <span style="font-size:3em;font-weight:900;color:#25E0FF;line-height:1;">[discount_percentage]</span>
    <span style="font-size:1em;font-weight:700;color:rgba(255,255,255,0.75);">%<br>OFF</span>
  </div>
  <div style="flex:1;min-width:160px;">
    <p style="margin:0 0 3px;font-size:0.68em;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#25E0FF;">Exclusive Collection Deal</p>
    <p style="margin:0;font-size:0.96em;color:rgba(255,255,255,0.9);">On all [product_count] products in <strong>[collection_title]</strong></p>
  </div>
  [if_code]
  <div style="display:flex;border:1.5px dashed rgba(255,255,255,0.35);border-radius:6px;overflow:hidden;background:rgba(255,255,255,0.08);flex-shrink:0;">
    <span style="padding:9px 14px;font-family:monospace;font-size:0.9em;font-weight:700;color:#fff;letter-spacing:0.06em;">[discount_code]</span>
    <button class="cr-copy-custom" style="padding:9px 16px;background:#25E0FF;color:#002A66;border:none;cursor:pointer;font-weight:700;font-size:0.8em;">Copy</button>
  </div>
  [/if_code]
  [if_auto]
  <p style="margin:0;font-size:0.82em;color:rgba(255,255,255,0.7);flex-shrink:0;">Applied automatically at checkout.</p>
  [/if_auto]
</div>

7. Differences between the two blocks

8. Notes & limitations

• Badges show nothing on the live storefront until a discount is active — there are no empty placeholders visible to shoppers
• In the Shopify theme editor, a placeholder is always shown so you can position the block at any time
• In custom HTML mode, the theme editor shows no preview — position using the default mode first, then switch to custom HTML
• Custom HTML tokens and conditionals are resolved client-side — they are not available for Liquid or server-side rendering
• The product block is scoped to product pages only; the collection block is scoped to collection pages only — they cannot be added to other page types
• All CSS class names are prefixed with cr- to avoid collisions with your theme's existing styles
• The metafield used is: namespace app, key coderally_discount_info, type json, with PUBLIC_READ storefront access — this is set automatically by CodeRally