商品ページのカスタマイズ

カスタマイズメタフィールドに商品リストを紐付けることで関連商品を表示することができます。指定したタイトルがアプリの商品画像の右下にボタンとして表示され、タップすることで関連商品の一覧ページが表示されます。同梱不可の商品など必ず気づいて欲しい情報はバナーで表示できます。

商品詳細情報のカスタムはこちら

在庫切れの非表示と再入荷受け取り通知ボタンはこちら

[商品ボタン] メタフィールドの作成方法

[商品ボタン] を各商品ごとに設定する

[商品リスト] メタフィールドの作成方法

[商品リスト] を各商品ごとに設定する

[商品バッジ] メタフィールドの作成方法

[商品バッジ] を各商品ごとに設定する

[商品バナー] メタフィールドの作成方法

[商品バナー] を各商品ごとに設定する

[商品ボタン] メタフィールドの作成方法

[設定]>[カスタムデータ]>[商品]>[カスタムデータ]>[定義を作成する]の順に操作する

各項目に下記の内容を入力する

項目名	内容
名前	商品ボタン
ネームスペースとキー	appify-mobile.associated_products_title
説明	関連商品を表示するボタンのタイトルです
データ型	単一行のテキスト

[商品ボタン] を各商品ごとに設定する

[商品管理]>[ボタンをつけたい商品]>[商品ボタンのメタフィールド]の順に操作して、ボタンタイトルにしたい文字列を入力しましょう。

[商品リスト] メタフィールドの作成方法

商品ボタンと同じ要領(動画参照)で作成していきます。定義の内容は下記を入力しましょう。

項目名	内容
名前	関連商品リスト
ネームスペースとキー	appify-mobile.associated_products_list
説明	表示される関連商品の一覧です
データ型	商品のリスト

[商品リスト] を各商品ごとに設定する

[商品管理]>[関連商品を表示したい商品]>[関連商品リストのメタフィールド]の順に操作して、一覧表示したい商品を選択しましょう。

[商品バッジ] メタフィールドの作成方法

商品ボタンと同じ要領で作成していきます。定義の内容は下記を入力しましょう。

項目名	内容
名前	商品バッジ
ネームスペースとキー	appify-mobile.product_badges
説明	設定されているバッジは商品ページとカートページに表示されます
データ型	単一行のテキスト[値のリスト]

[商品バッジ] を各商品ごとに設定する

[商品管理]>[商品バッジを表示したい商品]>[商品バッジのメタフィールド]の順に操作して、バッジ内容を入力しましょう。

商品一覧の表示

設定した商品バッジは商品一覧で閲覧した場合も表示されますが、設定した最初のバッジのみが一覧で表示されます。

[商品バナー] メタフィールドの作成方法

商品ボタンと同じ要領で作成していきます。定義の内容は下記を入力しましょう。入力値にはマークダウンが利用できます。

項目名	内容
名前	商品バナー
ネームスペースとキー	appify-mobile.product_callout
説明	商品ページでグレーアウトされた背景の上に表示される文章です
データ型	単一行のテキスト or 複数行のテキスト

[商品バナー] を各商品ごとに設定する

[商品管理]>[商品バナーを表示したい商品]>[商品バナーのメタフィールド]の順に操作して、バナー内容を入力しましょう。