Cardora — Gift Card Shop

Digital gift card shop template — catalogue, region picker, cart, checkout, code reveal and wallet.

Quick start

Unzip the package.
Open template/index.html in your browser — it works straight from the disk, no build step and no server needed.
To publish, upload the contents of template/ to any static host (shared hosting, Netlify, Vercel, S3, GitHub Pages…).

Everything runs in the browser. Cart, orders and wallet are stored in localStorage, so the full shopping flow works as a demo out of the box. To sell for real, connect your own backend and payment provider (see Going live).

Features

9 pages: home, catalogue, product, cart, checkout, order confirmation, account/wallet, FAQ and 404.
Home: hero with search and animated card stack, trust bar, auto-playing featured carousel (arrows, dots, swipe, pauses on hover), category grid, how-it-works steps, promo blocks, best sellers, reviews, FAQ teaser, call to action.
Catalogue: live search, category checkboxes, region filter, price slider, instant-delivery filter, five sort orders, removable filter chips, empty state, URL parameters (?cat=gaming, ?q=coffee, ?region=EU). Filters slide in as a drawer on phones.
Product page: region & currency picker, denomination picker per region, quantity, live price with service fee, add to cart / buy now, tabs (about, how to redeem, terms), related cards.
Display currency switcher (USD / EUR / GBP by default) — every price on every page converts instantly.
Cart & checkout: quantities, remove, coupon (WELCOME10 demo), contact details, send-as-gift with recipient, date and message, card / wallet / crypto payment options with validation and input masks — clearly labelled demo mode, no real payment.
Order confirmation: unique order number, each code hidden until the buyer presses Reveal, then Copy; reveal state is remembered.
Account & wallet: balance, top-up dialog, stats, recent orders, transactions, order history with links to codes, profile and settings.
Gift card art in pure CSS: every card is drawn from two colours and an icon — no image files to make for new products.
Light and dark theme (follows the system, remembers the choice), responsive from 390px phones to wide desktops, keyboard and screen-reader friendly, reduced-motion support.
Zero dependencies and no external requests: fonts are self-hosted, no CDNs, no trackers.

File structure

giftcard-template/
├── template/                 ← the website (open template/index.html)
│   ├── index.html            home: hero, featured carousel, categories, how it works
│   ├── catalog.html          catalogue with search, filters and sorting
│   ├── product.html          product page (?id=…): region, currency, amount, quantity
│   ├── cart.html             cart with quantities and coupon
│   ├── checkout.html         contact, gift option, payment method (demo mode)
│   ├── order.html            order confirmation with code reveal and copy
│   ├── account.html          wallet, top-up, orders, profile, settings
│   ├── faq.html              help centre / FAQ
│   ├── 404.html              not-found page
│   └── assets/
│       ├── css/style.css     all styles (design tokens at the top)
│       ├── js/data.js        store data: products, categories, regions, rates, FAQ
│       ├── js/app.js         all behaviour (no dependencies)
│       ├── fonts/            self-hosted fonts + licences
│       └── img/              favicon, social image
├── documentation/index.html  this documentation
├── README.md · CHANGELOG.md · LICENSE.txt · THIRD-PARTY.txt

Products & catalogue

All store content lives in template/assets/js/data.js. Each product looks like this:

{ id: 'brew-lab',            // used in the URL: product.html?id=brew-lab
  name: 'Brew Lab Coffee',
  cat: 'food',               // one of the category ids
  icon: 'cup',               // icon drawn on the card (see list below)
  c1: '#c08457', c2: '#2b1608', // the two card colours
  rating: 4.9, reviews: 1650,
  badge: 'Gift idea',        // optional: shown on cards; badged items appear in the carousel
  fee: 0.03,                 // service fee added to the face value (3%)
  instant: false,            // optional: mark cards that are not delivered instantly
  tagline: 'Coffee, pastries and beans…',
  regions: { US: [10, 15, 25, 50], UK: [10, 15, 25] } }  // region → available face values

Icons available: gamepad play music bag cup plane cloud phone sword planet bolt film headphones leaf home fork pin pen gift star globe. Add your own by putting an SVG path into the P object at the top of app.js.

Regions & currencies

regions maps a code to a name and currency. rates gives each currency's value in USD and is used for the display-currency conversion. displayCurrencies controls the header switcher.

Using real product images

If you prefer artwork you own, replace the output of cardArt() in app.js with an <img> — keep the .gc-wrap wrapper so layouts stay intact.

Customise & rebrand

Name and email: change name and email in data.js, then replace “Cardora” in the HTML files (logo text, titles, footer). A search-and-replace across template/ does it in one go.
Colours: edit the variables at the top of style.css — --brand, --teal, --hero and the [data-theme="dark"] block.
Fonts: replace the files in assets/fonts/ and the @font-face rules, or change --font / --display.
Logo: the mark is an inline SVG inside .logo-mark in each page header and footer; the favicon is assets/img/favicon.svg.
Texts: all page copy is plain HTML. FAQ and testimonials come from data.js (the FAQ is also written into faq.html and the home page for search engines — update both if you change it).
Demo labels: remove the “Demo mode” note in checkout.html and the coupon hint in cart.html when you go live.

Configuration

Setting	Where	What it does
Newsletter endpoint	`data-endpoint=""` on the footer form	Empty = demo (shows a thank-you). Set a URL (Formspree, your API…) and the form is POSTed there as `FormData`.
Demo coupon	`cartTotals()` in `app.js`	`WELCOME10` gives 10% off. Replace with a call to your backend.
Starting wallet / sample orders	`wallet()` and `orders()` in `app.js`	Seed data shown on first visit so the account page looks alive. Remove the seed when connecting real accounts.
Storage key prefix	`KEY` in `app.js`	All data is saved under `cardora.*` in localStorage.
Carousel autoplay	`initRail()`	5.5 s interval; pauses on hover, focus, touch and with reduced motion.

Going live

The template is the complete storefront. A live shop also needs a backend to hold stock codes and take payments. The JavaScript is organised so each step is one function to replace:

Catalogue: load window.STORE from your API (e.g. fetch('/api/store')) before app.js runs, or render it server-side into data.js.
Checkout: in pages.checkout, replace the setTimeout block with a request to your server that creates a payment session (Stripe, Adyen, a crypto gateway…) and redirects to order.html?id=… after payment.
Codes: in pages.order, replace mockCode() with a request that returns the real code only when the buyer presses Reveal — never send codes to the browser before that.
Accounts & wallet: replace the localStorage helpers (load/save) for orders and wallet with authenticated API calls.

Never store card numbers yourself; let your payment provider's hosted fields handle them.

Browser support

Current Chrome, Edge, Firefox and Safari (desktop and mobile). Uses modern CSS (container query units, color-mix(), :has()) with graceful fallbacks.

FAQ

Does it take real payments?

No. The checkout runs in a clearly labelled demo mode. Connect your payment provider as described in Going live.

Can I use it for a client?

Yes. The Licence covers one end product (yours or one client's). Full source covers one production domain for you and your clients, including white-label and SaaS. Neither lets you resell the template itself.

Are the brands real?

No. Every store and card brand in the demo (Questforge, Lumen TV, Bazaar North…) is fictional. Replace them with the brands you are authorised to sell.

Do I need npm or a build step?

No. It is plain HTML, CSS and JavaScript.

Can I add more pages?

Copy any page, keep the header/footer and the two script tags, and set data-page on <body>.

Support

Questions or found a bug? Email hello@vortaxis.com with your order number. Bug fixes and updates are free; questions are answered for 6 months after purchase (12 months with Full source).