カスタムストアフロント作成

アプリのウィジェットを使用せず、アプリのデータを活用することで、アプリウィジェットでは実現できない、サイトデザイントンマナに合わせた実装を行うことが可能です。

• クーポンをポップアップで表示させるのではなく、「クーポン一覧画面」として別ページで用意したい場合

• ポップアップ表示デザインを大幅に変更したい場合

• Shopifyと外部サービスをつなぎこみを行っており、外部サービス側でクーポン一覧画面を表示したい場合

• コードに関する質問に関しては、テーマによって、詳細が異なるため回答が難しいです

• 有償での対応となります

Discount Deckでは、顧客のクーポン情報をShopifyの顧客メタフィールドに圧縮保存しています。

圧縮形式: gzip圧縮 + Base64エンコード（フィールド名短縮化済み）

• namespace: discount-deck

• key: discount-code-list (全Extension共通)

• type: json

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

pako.js - gzip圧縮/展開ライブラリ

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

import * as pako from 'pako';

こちらの2つのコマンドを叩き、npmの導入を行ってください

1. メタフィールドから圧縮データを取得

2. Base64デコード + gzip展開

3. 短縮形データ（JSON）を取得

という形での実装となります。

メタフィールドから取得するデータです。gzip圧縮 + Base64エンコードされています。

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

Base64デコード + gzip展開すると、フィールド名が短縮されたJSON形式のデータが返ってきます。

重要: 短縮キーの意味は「参考情報」セクションの短縮キーマッピング表を参照してください。

メタフィールドデータで使用される短縮キーの一覧です

ディスカウントタイプ（ty）

割引値タイプ（vt）

通貨コード（cc）