折りたたみ段落｜SHOP Builder

Avatar
SHOPLINE TW Copywriters

4. EC + SC (EN).png

SHOP Builderを使用して高度なページを追加または編集する際に、情報を保存し、より整然としたページレイアウトを提示するために、折りたたみ段落パーツを追加できます。これは、商品やサービスのQ&A、配送および返品プロセス、イベント割引などに最適なパーツです。また、画像をアップロードして、簡潔な質問と回答のセクションを作成することもできます。

 

⚠️ 始める前に：

  • SHOP Builderは現在、Ultra Chic、Kingsman、Varm、およびPhiliaテーマテンプレートのみをサポートしています。
  • SHOP Builderを使用してページを作成した後、他のテーマテンプレートに切り替えてもページは表示されますが、編集できず、レイアウトが崩れる可能性があります。ページを公開する前にこれに注意してください。

 

1. 折りたたみ段落パーツを追加する

ステップ 1

SHOPLINE管理画面に進み、> [オンラインストアデザイン] > [ページ]をクリックし、高度なページ/編集をクリックして高度なページ設定ページを開きます。
EN1.png
 

 

ステップ 2

パーツボタンをクリックします。
 

EN2.png

 

ステップ 3

「コンテンツ」パーツの下にある折りたたみ段落をクリックします。
EN3.png
 

 

折りたたみ段落の内容と設定は左側の列で編集できます。+ 折りたたみ段落をクリックして段落を追加します。右側でページをプレビューして、パーツの効果を確認します。段落タイトルの隣にある+ボタンをクリックして段落を展開/折りたたみます。

EN4.png
*Note:

  • 折りたたみ段落パーツは最大16の折りたたみ段落をサポートします。 EN4.png
     
  • 異なるテーマには異なるボタンデザインがあります。現在、Varmテーマテンプレートのボタンの色のみが、[ストア設定] > [色] > [プライマリボタン]で設定された色に応じて変わります。背景色は段落ボタンの色で、テキスト色は「+」記号の色です。EN5.png

     

ステップ 4

左側の折りたたみ 段落ボタンをクリックして、各折りたたみ段落のタイトルと展開された内容を編集します。
*Note: 内容には5000文字の制限があります。 EN6.png

 

太字、斜体、下線などの基本的なテキストフォーマットを設定するだけでなく、テキストにハイパーリンク、画像、箇条書きリスト、番号付きリスト、全画面編集を挿入することもできます。
EN7.png

 

A. リンクを挿入

テキストにハイパーリンクを挿入し、リンクを開く方法を選択できます。EN8.png

 

B. 画像を挿入

テキストに画像を挿入できます。画像のURLパスを挿入するか、コンピュータから画像をアップロードできます（システムが自動的に画像のURLを生成します）。画像のALTを編集したり、画像の幅と高さをカスタマイズしたりすることもできます。

EN9.png

 

C. 箇条書きリスト

テキストにアイテムのリストを追加できます。
EN10.png

 

D. 番号付きリスト

段落に番号付きアイテムのリストを追加できます。
EN11.png

 

E. 全画面編集

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

 

ステップ 5

左側の編集列をスクロールダウンすると、パーツタイトル（すなわち、折りたたみ段落のメインタイトル）を編集できます。

EN13.png                                  
 

ステップ 6

パーツタイトル、段落タイトル、段落テキストのフォーマットを編集できます。

  • タイトルの配置：ウィジェットタイトルの配置を選択します（左/中央/右）。
     
  • テキストの配置：段落の見出しと段落テキストの配置を選択します（左/中央/右）。
     
  • ウィジェットのパディング：Collapse Paragraphウィジェットと他のウィジェットの間のパディングを調整します（0〜80 px）。
     
  • カスタムウィジェットカラー：オン/オフのトグルスイッチでウィジェットの色をカスタマイズするかどうかを設定できます。スイッチがオンの場合、次の部分の色をカスタマイズできます：背景、テキスト、ハイパーリンク、ボタンの背景、およびボタンのテキスト。

EN14.png

 

ステップ7

セットアッププロセス中に、下の保存ボタンをクリックして、右側のプレビューエリアに新しく追加されたCollapse Paragraphウィジェットを表示できます。

*Note: PC版またはモバイル版でページをプレビューできます。

EN15.png


EN16.png

 

または、プレビューページをクリックしてストアフロントをプレビューします。EN17.png

 

ステップ8

FAQ構造化データを有効にするかどうかを選択します。有効にすると、システムはウィジェットにFAQ構造化データマークアップを自動的に追加し、コンテンツが検索エンジンの結果にQ&Aセクションとして表示される可能性があります。詳細については、商品の構造化データを参照してください。

*Note:

  • 同じページに複数の折りたたみ可能な段落ウィジェットがある場合は、そのうちの1つだけにFAQ構造化データを有効にすることをお勧めします。複数のウィジェットで有効にすると、システムは最初に有効にしたウィジェットにのみ適用します。
  • FAQ構造化データを有効にしても、コンテンツが検索結果にQ&A形式で表示されることは保証されません。実際の表示はGoogleのアルゴリズムに依存します。

Screenshot 2025-08-07 at 11.23.00 AM.png

 

ステップ9

上記のセットアップを確認した後、右上の公開ボタンをクリックして、顧客がストアフロントで新しいページコンテンツをすべて表示できるようにします。EN18.png

 

 

さらに読む



 

 

 

 

この記事はAIを使用して翻訳されており、不正確な部分が含まれている可能性があります。最も正確な情報については、元の英語版を参照してください。

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

コメント