商品ページのデザインを編集する

商品ページのデザインや表示する項目を編集する方法について説明します。

メタフィールド

Shopifyの「メタフィールド」という機能を使ってアプリのUIを変更したり、追加情報を表示することができます。メタフィールドについてもっと知りたい方はこちらのShopify公式ヘルプページをご覧ください。また、メタフィールド定義の追加方法はこちらのページからご確認ください。

関連商品を表示する

メタフィールドに商品リストを紐付けることで関連商品を表示することができます。指定したタイトルがアプリの商品画像の右下にボタンとして表示され、タップすることで関連商品の一覧ページが表示されます。

関連商品を表示するためには以下の二つのメタフィールドに値を設定してください。

タイトル

• 説明：関連商品を表示するボタンのタイトルです。
• ネームスペース：appify-mobile
• キー：associated_products_title
• 型：単一行のテキスト

商品一覧

• 説明：表示される関連商品の一覧です。
• ネームスペース：appify-mobile
• キー：associated_products_list
• 型：商品のリスト

画像サイズを変更する

商品ページの画像サイズは、表示する枠の比率を変更することができます(※1)。デフォルトでは縦1：横1で表示されるように設定されています。画像のサイズが指定されている比率とは異なる場合、枠内に画像全体が収まるように自動でサイズ変更されます。

(※1) 商品一覧ページの画像は、それぞれの画像サイズに合わせて自動で調整されます。

販売元を表示する

「デザイン」→「商品」→「ブランド名を表示する」にチェックを入れることでアプリの商品ページに販売元を表示することができます。

割引前価格を表示する

「デザイン」→「商品」→「割引前価格を表示する」にチェックを入れることで、セール中の商品に割引前の定価を表示させることができます。

在庫切れ表記を無効にする

Appify:DisableSoldOutUI を商品タグに設定することで、その商品が在庫切れだった場合でも在庫切れ表記がされなくなります。在庫が0の状態で販売スケジュールや抽選販売を行う際にご利用ください。在庫切れの場合は以下のUIが表示されません。

• サイズ・カラー選択フォーム
• 商品価格
• カートへ追加するボタン

スマホ画像の左側が在庫切れ表記を有効化した状態、右が無効化した状態です。

バッジを表示する

商品のメタフィールドを使ってアプリの商品ページとカートページにバッジを表示することができます。

バッジを表示するためには以下のメタフィールドに値を設定します。

• ネームスペース：appify-mobile
• キー：product_badges
• 型：単一行のテキスト(値のリスト)

バナーを表示する

商品のメタフィールドを使ってアプリの商品ページにバナーを表示することができます。

バナーを表示するためには以下のメタフィールドに値を設定します。入力値にはマークダウンが利用できます。

• ネームスペース：appify-mobile
• キー：product_callout
• 型：単一行のテキスト or 複数行のテキスト

サイズガイド(HTML)を表示する

商品のメタフィールドにHTML形式でサイズ表と登録することで、アプリの商品ページに表示することができます。

バナーを表示するためには以下のメタフィールドに値を設定します。サイズチャートのサンプルはこちらのページから確認してください。

• ネームスペース：appify-mobile
• キー：sizechart_html
• 型：複数行のテキスト

商品の追加情報を表示する

商品のメタフィールドに追加情報を登録することで、商品ページにアコーディオンUIで入力した情報を表示することができます。

追加情報を表示するためには以下のメタフィールドに値を設定します。

• ネームスペース：appify-mobile
• キー：product_link1(~5まで利用可能)
• 型：JSON

設定する値は、以下のJSONフォーマットで登録してください。

{
  "title": "ブランド名",
  "description": "ナイキ (NIKE) はオレゴン州ポートランドを拠点に...",
  "url": "https://nike.com/",
  "external": false,
  "action": "NIKE"
}

次に各フィールドについて説明します。任意と書かれているフィールドを入力しない場合、JSONフォーマットから削除してください。

title

アコーディオンUIのタイトルです。このフィールドにはテキストを設定してください。

description(任意)

アコーディオンUIを開いた時に表示されるテキストです。このフィールドにはテキストを設定してください。未入力の場合は表示されません。

url(任意)

外部リンクが設定されている場合はアコーディオンUIを開いた時にボタンが表示され、タップすると指定したURL先に遷移します。このフィールドにはURLを設定してください。

external(任意)

このフィールドにはtrueかfalseを設定してください。trueが設定されていたらURLは外部ブラウザで表示され、falseが設定されていたらアプリ内ブラウザで表示されます。

action(任意)

URLが設定されている場合に表示されるボタンのタイトルです。urlは設定されているがactionが設定されていない場合は「コンテンツを開く」がボタンのタイトルになります。

チャネルトークのお問合せボタンを表示する

商品の詳細ページにチャネルトーク(※1)を使ったお問い合わせボタンを設置することができます。

※1 チャネルトークの連携方法はこちらのページをご確認ください。

再入荷通知を受け取るボタンを表示する

商品が在庫切れもしくは選択したバリエーションが在庫切れの場合に、顧客が再入荷通知の受け取り登録をできるようにします。詳細な設定方法はこちらのページをご確認ください。