What a custom storefront means
Instead of using the app’s widget, you read the app’s data and build the UI yourself, so the result matches your site’s design in ways the widget cannot.When this is useful
- You want a dedicated coupon list page rather than a popup
- You want to change the popup design substantially
- You connect Shopify to an external service and want the coupon list rendered there
Before you start
- We cannot answer detailed code questions, because the specifics depend on your theme
- This work is chargeable
Please ask the agency you work with.We can also introduce an agency if you would like. Get in touch and let us know.
The rest of this page is written for Shopify agencies and engineers.
Implementation guide
Overview
Discount Deck stores each customer’s coupon data compressed in a Shopify customer metafield. Compression: gzip, then Base64 encoding, with shortened field names.Metafield
- namespace:
discount-deck - key:
discount-code-list(the same for every extension) - type:
json
Example of the stored value
Requirements
Required library
pako.js, a gzip compression and decompression library.Setup with npm (React / TypeScript)
Data flow
Steps on the frontend
- Read the compressed value from the metafield
- Base64-decode it, then gunzip it
- You now have JSON with shortened field names
Data at each stage
1. Compressed data (as stored in the metafield)
This is what you read from the metafield. It is gzipped and Base64-encoded.2. Shortened data (after gunzip)
Base64-decoding and gunzipping returns JSON whose field names are shortened. Important: see the key mapping table under Reference for what each shortened key means.Reference
Key mapping
The shortened keys used in the metafield data.Type mapping
Discount type (ty)
Discount value type (vt)
Currency code (cc)