> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bouquet-inc.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Building a custom storefront

> For stores whose design requirements the app's own UI cannot meet, and who want to build their own.

## 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

<Note>
  Please ask the agency you work with.

  We can also introduce an agency if you would like. Get in touch and let us know.
</Note>

<Info>
  The rest of this page is written for Shopify agencies and engineers.
</Info>

## 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

```
{
  "c": "H4sIAAAAAAAAA6WSzW6DMBCEXyXyGaq1FwL4lqTKoZemooeqVQ8WsailxKAAVaMo..."
}
```

## Requirements

## Required library

**pako.js**, a gzip compression and decompression library.

## Setup with npm (React / TypeScript)

```
npm install pako
npm install --save-dev @types/pako
```

```
import * as pako from 'pako';
```

Run those two commands to install it.

## Data flow

## Steps on the frontend

1. Read the compressed value from the metafield
2. Base64-decode it, then gunzip it
3. 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.

```
{
  "c": "H4sIAAAAAAAAA6WSzW6DMBCEXyXyGaq1FwL4lqTKoZemooeqVQ8WsailxKAAVaMo..."
}
```

## 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.

| Short key | Original field         | Description                            |
| --------- | ---------------------- | -------------------------------------- |
| p         | imagePrefix            | Image URL prefix                       |
| d         | discounts              | Array of discount data                 |
| i         | id                     | Discount ID                            |
| t         | title                  | Coupon title                           |
| ty        | typeName               | Discount type (shortened)              |
| ao        | appliesOncePerCustomer | Applies once per customer (0/1)        |
| ac        | allCustomers           | Applies to all customers (0/1)         |
| sa        | startsAt               | Start date and time (ISO 8601)         |
| ea        | endsAt                 | End date and time (ISO 8601, nullable) |
| ip        | imageUrlPc             | Desktop image URL (file name only)     |
| is        | imageUrlSp             | Mobile image URL (file name only)      |
| desc      | description            | Description                            |
| n         | note                   | Notes                                  |
| vt        | valueType              | Discount value type (shortened)        |
| p         | percentage             | Discount rate (decimal)                |
| a         | amount                 | Discount amount                        |
| cc        | currencyCode           | Currency code (shortened)              |

## Type mapping

**Discount type (ty)**

| Short form | Original type            | Description          |
| ---------- | ------------------------ | -------------------- |
| DCB        | DiscountCodeBasic        | Basic discount code  |
| DCBX       | DiscountCodeBxgy         | Buy X Get Y coupon   |
| DCFS       | DiscountCodeFreeShipping | Free shipping coupon |
| DCA        | DiscountCodeApp          | App-linked coupon    |

**Discount value type (vt)**

| Short form | Original type      | Description           |
| ---------- | ------------------ | --------------------- |
| DP         | DiscountPercentage | Percentage discount   |
| DA         | DiscountAmount     | Fixed amount discount |

**Currency code (cc)**

| Short form | 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 |


## Related topics

- [FAQ](/en/company/consulting/faq.md)
- [Can I change the app's design?](/en/apps/discount-deck/faq/customize-design.md)
- [API reference](/en/apps/multilikes/developers/api-reference.md)