Building a Secure Post-Purchase Experience in Shopify — No Server Required
When a client asked us to help with a limited-edition promotion on Shopify, the brief sounded simple enough:
“After a customer buys the featured product, show them a special page with exclusive content.”
The challenge?
Shopify’s new checkout system had just removed support for injected scripts — meaning no JavaScript on the thank-you page, no custom logic, and definitely no backend integration.
That’s the kind of constraint we love.
The Challenge
The campaign was built around The Outer Worlds 2 × 5-Hour Energy collaboration — a short-term promotion where only verified purchasers could access a hidden experience after checkout.
Under normal conditions we'd handle that verification on a server using the Shopify API or webhooks.
But the client had two non-negotiables:
1. No server infrastructure — zero additional hosting or maintenance cost.
2. Rapid turnaround — the campaign had to go live in days, not weeks.
That meant we had to verify a purchase entirely on the client side, inside Shopify’s new checkout environment — one of the most restricted parts of the platform.
Rethinking the Problem
We approached it like a security design puzzle: If we can’t run code on the checkout page, we can still control what happens after it.
The only guaranteed way to reach buyers was through a Checkout Block — a static image that links to a separate landing page. When clicked, that link could include encoded parameters identifying that the customer had just completed a qualifying purchase.
From there, everything had to happen dynamically and securely — without relying on a server.
The Solution
We built a lightweight three-page verification flow entirely in Shopify Liquid and vanilla JavaScript:
1. Checkout Thank-You
• Displays a branded image linking to the verification page.
• Link includes short-lived, obfuscated parameters.
2. Verification Page
• Reads the parameters, validates them, and creates temporary cookies and localStorage tokens.
• Generates a one-time key used to unlock the next page.
• Immediately removes URL parameters for privacy.
• Redirects the user to the protected page.
3. Protected Page
• Confirms that the tokens and key match.
• Automatically deletes the key after validation.
• Loads the embedded promotional content inside an iframe.
• Shows an alternate message if validation fails.
No servers. No databases. Just smart logic, timing, and a clear separation of trust between pages.
Security Without a Server
To keep it secure, we used layered verification rather than relying on a single flag:
- Unique codes in every link, rotated periodically
- Dual validation: cookie + localStorage — both must match
- Single-use key deleted the moment it’s read
- Self-destructing functions that wipe sensitive variables
- Referrer checks to prevent direct page access
It’s not “bank-grade” security — it’s pragmatic security: strong enough for a time-limited campaign, cost-free to run, and impossible to trigger accidentally.
The Outcome
- Exclusive content accessible only to verified purchasers
- Zero infrastructure cost or hosting complexity
- Campaign deployed and tested in under a week
- Seamless user experience — customers never see the underlying logic
For a short-term campaign, this approach achieved the perfect balance between speed, simplicity, and control — and created a reusable pattern for future Shopify promotions.
Why It Matters
Modern e-commerce is full of “can’t-be-done” moments — especially as platforms lock down customization for security reasons. But creativity lives inside those constraints.
By designing this entirely client-side flow, we proved that “secure enough” can still be beautifully engineered.
It’s not about coding around limits — it’s about understanding the problem deeply enough to solve it with elegance, not force.
Read the Full Technical Case Study
For developers and technical readers, we’ve documented the deeper logic behind this project — including the verification sequence, token lifecycle, and layered obfuscation strategy.
👉 Read the full technical breakdown → Case Study: Secure Client-Side Verification Flow in Shopify
About Villiers Vision Works
Villiers | Vision | Works helps brands, agencies, and founders build custom digital platforms that combine creativity, performance, and technical precision.
From Shopify integrations to custom SaaS platforms, we deliver solutions that work — not just look good.