If your theme doesn’t support Shopify’s Online Store 2.0 app blocks, you can still add Line Loyalty to any page by pasting our HTML shortcodes directly into your code or page content.
These shortcodes render the same widgets you get from app blocks—no extra JavaScript required beyond the Line Loyalty app script that’s automatically injected after install.
✅ What you’ll need
Line Loyalty installed and enabled
A legacy (pre–OS 2.0) or custom theme, or a page where you prefer manual placement
Access to Online Store → Pages and/or Online Store → Themes → Edit code
(Optional) Classic customer accounts enabled if you use the classic account block
📦 Available shortcodes
Loyalty page blocks
<div line-loyalty-hero-banner></div>
<div line-loyalty-how-it-works></div>
<div line-loyalty-ways-to-earn></div>
<div line-loyalty-ways-to-redeem></div>
<div line-loyalty-vip-tiers></div>
<div line-loyalty-my-rewards></div>
<div line-loyalty-referral-friends></div>
Account & product extras
<!-- For classic customer accounts -->
<div line-loyalty-classic-account-points-balance></div>
<!-- Product page only -->
<div line-loyalty-earn-point-pdp></div>
Method A — Add to a regular Page (recommended for a “Loyalty” page)
In Shopify admin, go to Online Store → Pages → Add page.
Title it Loyalty Rewards (or your preferred name).
Switch the editor to HTML (Show HTML /
<>icon).Paste any combination of shortcodes. Example:
<div line-loyalty-hero-banner></div>
<div line-loyalty-how-it-works></div>
<div line-loyalty-ways-to-earn></div>
<div line-loyalty-ways-to-redeem></div>
<div line-loyalty-vip-tiers></div>
<div line-loyalty-my-rewards></div>
<div line-loyalty-referral-friends></div>Save. Add the page to your main menu: Online Store → Navigation.
💡Tip: You can wrap blocks in your theme’s container classes for alignment, e.g.
<div class="page-width">…blocks…</div>
Method B — Add directly to theme templates (legacy/custom themes)
Use this if you need precise placement (e.g., on the account page or product page).
1) Loyalty page template
Go to Online Store → Themes → … → Edit code.
Open your
page.liquidor a custom page template and place the blocks where you want them to appear.<div line-loyalty-hero-banner></div>
<div line-loyalty-how-it-works></div>
<div line-loyalty-ways-to-earn></div>
<div line-loyalty-ways-to-redeem></div>
<div line-loyalty-vip-tiers></div>
<div line-loyalty-my-rewards></div>
<div line-loyalty-referral-friends></div>
2) Classic customer account page
Open
customers/account.liquidand insert:<div line-loyalty-classic-account-points-balance></div>
Requires classic customer accounts. If you’re using new customer accounts, show points via your Loyalty page or an OS 2.0 app block instead.
3) Product page (earn-point callout)
Open your product template (e.g.,
product.liquidorsections/product-template.liquid) and place above or below buy buttons code:<div line-loyalty-earn-point-pdp></div>
Shows how many points a shopper can earn for this product. Only use on product templates.
Where each block is best used
Block | Best page(s) | Usage |
| Loyalty page, Homepage | Headline & CTA for your program |
| Loyalty page | Simple steps overview |
| Loyalty page | Lists your earn rules |
| Loyalty page | Lists your redeem rewards |
| Loyalty page | Shows VIP ladder and perks |
| Loyalty page, Account | Logged-in customers see their rewards |
| Loyalty page, Post-purchase page | Share link + social buttons |
|
| Classic accounts only |
| Product template | Per-product earn preview |
Styling & layout tips
Wrap blocks in theme containers (
page-width,container, etc.) for alignment.Use theme headings above groups of blocks for scannability.
Keep the Loyalty page order intuitive: Hero → How it works → Earn → Redeem → VIP → My rewards → Referral.
Test on mobile: ensure spacing and stacking look clean.
Troubleshooting
Block doesn’t show up
Confirm the shortcode is on a public page/template and saved.
Make sure Line Loyalty is installed & enabled.
If using the account block, log in to a classic account.
Check that you didn’t paste the shortcode inside a Liquid comment or a conditional that hides it.
Duplicate or misaligned content
Remove extra copies of the same shortcode.
Wrap blocks in a single container to inherit theme padding.
Product page block not rendering
Verify you added shortcode only to product templates and the product is available.