カスタムストアフロントとは？
アプリのウィジェットを使用せず、アプリのデータを活用することで、アプリウィジェットでは実現できない、サイトデザイントンマナに合わせた実装を行うことが可能です。活用例
- クーポンをポップアップで表示させるのではなく、「クーポン一覧画面」として別ページで用意したい場合
- ポップアップ表示デザインを大幅に変更したい場合
- Shopifyと外部サービスをつなぎこみを行っており、外部サービス側でクーポン一覧画面を表示したい場合
注意点
- コードに関する質問に関しては、テーマによって、詳細が異なるため回答が難しいです
- 有償での対応となります
お付き合いのある制作会社にお問い合わせ下さい。※弊社より制作会社をご紹介する事も可能のため、お問い合わせくださいませ。
以下の内容はShopify制作会社・エンジニア向けの情報となります
エンジニア向け実装ガイド
概要
Discount Deckでは、顧客のクーポン情報をShopifyの顧客メタフィールドに圧縮保存しています。 圧縮形式: gzip圧縮 + Base64エンコード（フィールド名短縮化済み）メタフィールド情報
- namespace:
discount-deck - key:
discount-code-list(全Extension共通) - type:
json
圧縮データ例(メタフィールドに入っている実際の値)
技術要件
必須ライブラリ
pako.js - gzip圧縮/展開ライブラリ事前準備: npm導入（React/TypeScript環境）
データ変換フロー
フロントエンド実装の流れ
- メタフィールドから圧縮データを取得
- Base64デコード + gzip展開
- 短縮形データ（JSON）を取得
各段階のデータ形式
1. 圧縮データ（メタフィールドに保存されている形式）
メタフィールドから取得するデータです。gzip圧縮 + Base64エンコードされています。2. 短縮形データ（gzip展開後）
Base64デコード + gzip展開すると、フィールド名が短縮されたJSON形式のデータが返ってきます。 重要: 短縮キーの意味は「参考情報」セクションの短縮キーマッピング表を参照してください。参考情報
短縮キーマッピング
メタフィールドデータで使用される短縮キーの一覧ですタイプマッピング
ディスカウントタイプ（ty）
割引値タイプ（vt）
通貨コード（cc）