本ガイドでは、Appifyの商品ページのデザイン構成および設定内容についてご案内します。
商品ページの設定を行う際は、まず本ガイドで商品ページで実現できる内容をご確認のうえ、各種ガイドを参考に設定を行ってください。
商品ページは、以下5つのカテゴリーでデザイン調整が可能です。
基本設定
商品カスタマイズ設定
ボタン・販売状態のカスタマイズ
商品バリエーションのカスタマイズ
商品詳細のカスタマイズ
基本設定では、商品ページ全体の表示内容や見た目に関する設定ができます。
設定可能な項目は以下の通りです。（→商品ページの基本設定のガイドはこちら）
画像比率
ブランド名の表示/非表示
カラーバリエーションの表示/非表示（→カラーチップのガイドはこちら）
セール表示のカスタマイズ
消費税表示
「残りわずか」ラベルの表示/非表示
チャット導線の表示/非表示
チャネルトークと連携可能
すべての表示設定を有効にした状態のサンプルです
おすすめ商品欄と閲覧履歴のタイトル編集（→商品リストのガイドはこちら）
カスタマイズ設定では、商品ページ内の訴求エリアや表示コンテンツの調整ができます。
設定可能な項目は以下の通りです。
コールアウトの設定（→コールアウトのガイドはこちら）
商品バナーの設定（→商品バナーのガイドはこちら）
商品リストの設定（→商品リストのガイドはこちら）
商品状態や購入導線に応じて、各種ボタン表示のカスタマイズも可能です。
設定可能な項目は以下の通りです。
SOLD OUTボタンの表示設定（→SOLD OUTボタンのガイドはこちら）
完売ボタンのカスタマイズ
「再入荷通知を受け取る」ボタンの表示設定（→再入荷ボタンのガイドはこちら）
再入荷通知ボタン
特定商品の「カートに追加」ボタンの非表示設定（→カートに追加ボタンのガイドはこちら）
商品の割引前価格の非表示設定（→割引前の価格を非表示にするガイドはこちら）
商品ページの基本設定でも同じく設定できます
割引前の価格を非表示にした場合は「N%バッジ」が「SALE」と表示されます
割引価格の表示
商品バリエーションごとに以下の設定が可能です。
商品バッジをバリエーションごとに設定する（→バリエーションごとに設定するガイドはこちら）
商品バリエーション単体の購入制限を設定する（→購入制限のガイドはこちら）
商品詳細に、サイズガイドや商品の特徴、返品ルールや配送に関する情報など、購入を兼用するために必要な情報を記載できます。（→商品ページの設定ガイドはこちら）
商品詳細のカスタマイズ（アコーディオン型）
サイズガイド
修正版
本ガイドでは、Appifyの商品ページのデザイン構成と、設定できる内容をご案内いたします。商品ページを設定するときは、まず本ガイドで実現できることを確認し、各ガイドを参考に設定してください。
商品ページは、主に Appify管理画面＞テーマ＞商品 で設定します。商品ごとの表示内容は、Shopify管理画面の商品のメタフィールドで設定します。
設定できる内容は、次の5つのカテゴリに分かれています。
基本設定
商品のカスタマイズ設定
ボタン・販売状態のカスタマイズ
商品バリエーションのカスタマイズ
商品詳細のカスタマイズ
商品ページ全体の表示内容や見た目を設定します。（→商品ページの基本設定のガイド）
画像比率
ブランド名の表示・非表示
カラーバリエーション（カラーチップ）の表示・非表示（→カラーチップのガイド）
「N％ OFF」バッジの表示・非表示
割引前価格の表示・非表示
セール中の商品価格の表示方法
最大値・最小値で表示する
範囲で表示する
商品価格に消費税を含める・含めない
「残りわずか」ラベルの表示・非表示
チャネルトークのボタンの表示・非表示
おすすめ商品欄・閲覧履歴のタイトル（→関連商品リストのガイド）
割引前価格を非表示にすると、「N％ OFF」バッジも表示されません。
【画像：既存の画像】（キャプション：割引価格と消費税の表示例）
【画像：既存の画像】（キャプション：「残りわずか」ラベルの表示例）
【画像：既存の画像】（キャプション：すべての表示設定を有効にした状態のサンプル）
【画像：既存の画像】（キャプション：おすすめ商品欄と閲覧履歴）
商品ページ内の訴求エリアや表示コンテンツを調整できます。
コールアウト（商品バッジ）（→コールアウトのガイド）
商品バナー（→商品バナーのガイド）
商品リスト（→関連商品リストのガイド）
【画像：既存の画像】（キャプション：コールアウトと商品バナーの表示例）
【画像：既存の画像】（キャプション：商品リストの表示例）
商品の状態や購入の流れに合わせて、ボタンの表示を調整できます。
売り切れ（SOLD OUT）ボタンの表示（→売り切れボタンのカスタマイズのガイド）
再入荷通知ボタン（アプリの表示：「通知で入荷をお知らせ」）の表示（→再入荷通知ボタンのガイド）
特定の商品の「カートに追加」ボタンの非表示（→カート追加ボタンの非表示のガイド）
特定の商品の割引前価格の非表示（→商品の割引前価格を非表示にするガイド）
メタフィールドで割引後の価格のみを表示する設定にした商品では、「N％ OFF」バッジの代わりに「SALE」バッジが表示されます。基本設定で割引前価格を非表示にした場合は、「SALE」バッジは表示されません。
【画像：既存の画像】（キャプション：売り切れボタンのカスタマイズ）
【画像：既存の画像】（キャプション：再入荷通知ボタン）
【画像：既存の画像】（キャプション：割引後の価格のみの表示）
商品バリエーションごとに、次の設定ができます。
バリエーションごとにバッジを表示する（→商品バリエーションバッジのガイド）
バリエーション単体の購入制限を設定する（→商品バリエーション単体の購入制限のガイド）
【画像：既存の画像】（キャプション：商品バリエーションバッジの表示例）
商品詳細に、商品の特徴や返品・配送に関する情報など、購入を検討するために必要な情報を追加できます。
商品詳細アコーディオン（→商品詳細アコーディオンのガイド）
サイズガイドアコーディオン（→サイズガイドアコーディオンのガイド）
商品スペックアコーディオン（→商品スペックアコーディオンのガイド）
商品サマリーセクション（→商品サマリーのガイド）
【画像：既存の画像】（キャプション：商品詳細アコーディオンの表示例）
【画像：既存の画像】（キャプション：サイズガイドの表示例）