アコーディオン｜SHOP Builder

Avatar
SHOPLINE TW Copywriters

4. EC + SC (EN).png

SHOP Builder でカスタムページを追加・編集する際に、「アコーディオン」ブロックを追加できます。「アコーディオン」を使用すると、情報をコンパクトに整理して画面をすっきりと見せられるため、Q&A、配送・返品の手順、キャンペーンや割引、利用シーンなどの説明に最適です。また、画像をアップロードしてテキストと組み合わせることで、見やすくわかりやすい Q&A を作成できます。

 

利用前にご注意ください：

  • SHOP Builder は現在、Ultra Chic、Kingsman、Varm、Philia テンプレートでのみ利用できます。
  • SHOP Builder でページを作成した後に、別のストアテンプレートへ切り替えた場合、ページは引き続き表示されますが、編集できなくなり、レイアウトが崩れる可能性があります。ページを公開する前に、表示内容を十分ご確認ください。

 

１、アコーディオンブロックを追加する

STEP 1.

SHOPLINE 管理画面で、「ストアデザイン ＞ ストアページ」に移動し、「新規ページを追加 ＞ カスタムページ」をクリックするか、既存ページの横にある「編集」をクリックして、編集画面を開きます。
EN1.png
 

 

STEP 2.

「＋ブロック」ボタンをクリックします。
 

EN2.png

 

STEP 3.

「アコーディオン」ブロックをクリックします。
EN3.png
 

 

左側メニューでは、アコーディオンの内容や設定を編集できます。「＋アコーディオン」をクリックすると、アコーディオンを追加できます。右側のプレビュー画面では、ブロックの表示を確認できます。見出し横の「＋」ボタンをクリックすると、アコーディオンを展開／折りたたむことができます。

EN4.png
＊ご注意：

  • １つの「アコーディオン」ブロックにつき、最大 16 個までアコーディオンを追加できます。EN4.png
     
  • テンプレートによってボタンのデザインが異なります。現在、Varm テンプレートのみ、「ストア共通設定 ＞ カラー ＞ 主要ボタン」で設定した色がボタンに反映されます。「背景」は「＋」ボタンの背景色、「テキスト」は「＋」記号の色を指します。EN5.png

     

STEP 4.

左側の「アコーディオン」ボタンをクリックすると、各アコーディオンのタイトルと展開時に表示される内容を編集できます。

＊ご注意：入力できる文字数は最大 5,000 文字です。EN6.png

 

太字、斜体、下線などの基本的な文字書式を設定できるほか、本文へのリンクや画像、箇条書き、番号付きリストの挿入、全画面での編集もできます。
EN7.png

 

A. リンク

本文にリンクを挿入し、リンク先ページの開き方を設定できます。EN8.png

 

B. 画像

本文に画像を挿入できます。画像の URL を入力するか、デバイスから画像をアップロードできます（アップロードした画像の URL は自動的に生成されます）。また、画像の ALT テキストを編集したり、画像の幅や高さを指定したりできます。

EN9.png

 

C. 箇条書き

本文に箇条書きを追加できます。
EN10.png

 

D. 番号付きリスト

本文に番号付きリストを追加できます。
EN11.png

 

E. 全画面編集

「全画面編集」ボタンをクリックすると、編集エリアを拡大して本文を編集できます。編集が完了したら、再度「全画面編集」ボタンをクリックすると、SHOP Builder の画面に戻ります。EN12.png

 

STEP 5.

左側メニューを下にスクロールすると、「タイトル」の入力欄で「アコーディオン」のメインタイトルを編集できます。

EN13.png                                  
 

STEP 6.

ブロックタイトル、アコーディオンタイトル、本文について、以下の設定を行うことができます。

  • タイトルの文字揃え：ブロックタイトルの文字揃え（左揃え／中央揃え／右揃え）を選択できます。
  • 文字揃え：アコーディオンタイトルと本文の文字揃え（左揃え／中央揃え／右揃え）を選択できます。 
  • ブロック間の余白：「アコーディオン」ブロックと他のブロックとの余白（0〜80 px）を調整できます。 
  • ブロックカラーのカスタマイズ：トグルをオン／オフにして、ブロックのカラーをカスタマイズするかどうかを設定できます。オンにすると、以下の項目のカラーを個別に設定できます：背景、テキスト、テキストリンク、ボタン、ボタンテキスト。

EN14.png

 

STEP 7.

下部の「保存」をクリックすると、右側のプレビュー画面で追加したアコーディオンを確認できます。

 

＊備考：PC 版とモバイル版のプレビューを切り替えて確認できます。

EN15.png


EN16.png

 

また、右上の「プレビュー」ボタンをクリックすると、ストアフロント全体をプレビューできます。EN17.png

 

STEP 8.

FAQ 構造化データを有効にするかどうかを設定できます。オンにすると、該当ブロックに FAQ 構造化データのマークアップが自動的に追加され、検索エンジンの検索結果に Q&A 形式で表示される場合があります。詳細については、「商品の構造化データ」をご参照ください。

＊ご注意：

  • 同じページに複数のアコーディオンブロックがある場合は、FAQ 構造化データを有効にするブロックは１つのみにすることを推奨します。複数のブロックで有効にした場合、最初に有効にしたブロックにのみ適用されます。
  • FAQ 構造化データを有効にしても、検索結果に Q&A 形式で表示されることを保証するものではありません。実際の表示形式は、Google のアルゴリズムによって決定されます。

Screenshot 2025-08-07 at 11.23.00 AM.png

 

STEP 9.

上記の設定が完了したら、右上の「公開」ボタンをクリックしてください。公開すると、このページの設定内容はストアフロントに反映され、顧客が閲覧できるようになります。EN18.png

 

 

関連記事



 

 

 

この記事は役に立ちましたか？
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

コメント