商品ページの下部に、サイズガイドや商品の特徴、返品ルールや配送に関する情報など、購入を兼用するために必要な情報を記載できます。
デフォルトの商品詳細に入れるよりも目立たせたい情報がある場合などに活用しましょう。本ガイドでは、商品詳細アコーディオンの設定方法についてご案内します。
サイズガイドなどのHTMLで情報を追加したい場合はこちらのガイドをご確認ください。(→サイズチャートアコーディオンの設定ガイド)
Shopify管理画面>設定>メタフィールドとメタオブジェクト>商品>定義を追加するから設定を行います。
次に、各項目に下記の内容を入力してください。
最大15個までアコーディオンを作成できます。
項目名 | 内容 |
名前 | 任意 例)商品詳細-素材 |
ネームスペースとキー (⚠️入力ミスにご注意ください) |
複数作成する場合は、1つづつメタフィールドを作成してください。 |
説明 | 任意 例)商品詳細を入力します。 |
データ型 | JSON |
Shopify管理画面>商品管理>アコーディオンを表示したい該当商品>メタフィールド>商品メタフィールド>上記で設定した項目に、表示したい情報を入力します。
メタフィールドは、JSON形式で入力する必要があります。
商品ページ下部に、トグル形式(アコーディオン)で表示されます。
商品詳細のカスタマイズ(アコーディオン型)
JSONフォーマット
タイトル | 設定内容 |
title(必須) | アコーディオンUIのタイトルです。 テキストを設定してください。 |
description | アコーディオンUIを開いた時に表示されるテキストです。このフィールドにはテキストを設定してください。 未入力の場合は表示されません。 |
url | URLを設定してください。 URLを設定した場合、アコーディオンUIを開いた時にボタンが表示され、タップすると指定したURL先に遷移します。 未入力の場合は表示されません。 |
action | URLが設定されている場合に表示されるボタンのテキストです。 URLを設定して、actionが設定されていない場合、デフォルトで「コンテンツを開く」と表示されます。 未入力の場合は表示されません。 |
external | URLの展開方法を指定します。 true:外部ブラウザで表示 false:アプリ内ブラウザで表示 |
入力内容の例
例1:タイトル+テキストのみ
例2:タイトル+テキスト+ボタン(アプリ内ブラウザでURLを開く)
例3:タイトル+ボタンのみ(外部ブラウザでURLを開く)