This page is intended for merchants whose design requirements cannot be fully met by the app’s default UI and who wish to implement a custom UI independently.
A custom storefront allows you to utilize Discount Deck’s data without using the app widget, enabling implementations that are not possible with the standard widget and that better match your site’s design tone and manner.
Available on all plans, regardless of subscription tier.
Display coupons on a dedicated “Coupon List” page instead of a popup
Significantly redesign the popup layout and behavior
Integrate Shopify with an external service and display the coupon list on the external platform
Questions related to code implementation may be difficult to answer, as details vary by theme
Implementation support is provided on a paid basis
Please contact your partner development agency
We can also introduce a development agency if needed—please contact us for details
The following section is intended for Shopify development agencies and engineers.
Discount Deck stores customer coupon information in Shopify customer metafields in a compressed format.
Compression format: gzip compression + Base64 encoding
Field name optimized (shortened keys)
Namespace:
discount-deckKey:
discount-code-list(shared across all extensions)Type:
json
{
"c": "H4sIAAAAAAAAA6WSzW6DMBCEXyXyGaq1FwL4lqTKoZemooeqVQ8WsailxKAAVaMo..."
}
pako.js – gzip compression/decompression library
npm installed (React / TypeScript environment)
npm install pako
npm install --save-dev @types/pako
import * as pako from 'pako';
Please run the above commands to install the required dependencies.
Retrieve the compressed data from the customer metafield
Perform Base64 decoding and gzip decompression
Obtain the shortened-key JSON data
Data retrieved directly from the metafield.Format: gzip-compressed + Base64-encoded.
{
"c": "H4sIAAAAAAAAA6WSzW6DMBCEXyXyGaq1FwL4lqTKoZemooeqVQ8WsailxKAAVaMo..."
}
After Base64 decoding and gzip decompression, the data is returned as JSON with shortened field names.
Important:Please refer to the Shortened Key Mapping Table below for the meaning of each key.
Short Key | Original Field Name | Description |
|---|---|---|
p | imagePrefix | Image URL prefix |
d | discounts | Discount data array |
i | id | Discount ID |
t | title | Coupon title |
ty | typeName | Discount type (short code) |
ao | appliesOncePerCustomer | Applies once per customer (0/1) |
ac | allCustomers | Applies to all customers (0/1) |
sa | startsAt | Start date/time (ISO 8601) |
ea | endsAt | End date/time (ISO 8601, nullable) |
ip | imageUrlPc | Desktop image URL (filename only) |
is | imageUrlSp | Mobile image URL (filename only) |
desc | description | Description text |
n | note | Notes / remarks |
vt | valueType | Discount value type (short code) |
p | percentage | Discount percentage (decimal) |
a | amount | Discount amount |
cc | currencyCode | Currency code (short code) |
Short Code | Original Type | Description |
|---|---|---|
DCB | DiscountCodeBasic | Basic coupon code |
DCBX | DiscountCodeBxgy | Buy X Get Y coupon |
DCFS | DiscountCodeFreeShipping | Free shipping coupon |
DCA | DiscountCodeApp | App-integrated coupon |
Short Code | Original Type | Description |
|---|---|---|
DP | DiscountPercentage | Percentage discount |
DA | DiscountAmount | Fixed amount discount |
Short Code | Original Code | Currency |
|---|---|---|
J | JPY | Japanese Yen |
U | USD | US Dollar |
E | EUR | Euro |
G | GBP | British Pound |
C | CAD | Canadian Dollar |
A | AUD | Australian Dollar |
This approach allows complete freedom in designing how coupon information is displayed while leveraging Discount Deck’s data structure.