はじめに｜SHOP Builder

4. EC + SC (EN).png

SHOPLINE の新しいページエディター「SHOP Builder」では、カスタムページのデザイン機能が大幅に強化されました。直感的な操作でレイアウトを簡単に編集でき、ストアのお知らせバー、ヘッダー、フッターをより自由にデザインできます。また、画像、テキスト、画像・動画・商品カルーセル、商品リストなど、最大 7 種類のブロックを組み合わせて、独自のストアレイアウトを作成できます。

本記事では、以下の内容についてご説明します。

SHOP Builder の概要
SHOP Builder のページレイアウト
SHOP Builder の SEO 設定
SHOP Builder のストア共通設定
SHOP Builder の注意事項

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

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

１、SHOP Builder の概要

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

1. PC・モバイル表示

SHOP Builder で編集する際、PC 表示とモバイル表示を簡単に切り替えてプレビューでき、デザインした内容がストアフロントで意図どおりに表示されているか確認できます。

＊ご注意：編集後は必ず「保存」または「公開」をクリックしてください。

A. PC 版

B. モバイル版

2. 編集アシストモード

編集アシストモードでは、カーソルを合わせたブロックや編集中のブロックについて、ブロック名と表示位置を確認できます。また、任意のブロックをクリックすると、そのブロックの編集画面に切り替わります。

3. 言語設定

言語のプルダウンメニューから、ストアの対応言語を選択してページを編集できます。

4. ページタイトル

新しく追加したページのタイトルは、デフォルトで「新しいページ」に設定されます。右側の鉛筆アイコンをクリックすると、タイトルを変更できます。

5. ページのプレビュー

ページ右上の「プレビュー」をクリックすると、新しいタブでページをプレビューできます。

6. 保存と公開

カスタムページを追加後、編集した場合は、必ず「保存」をクリックしてください。保存すると、ページ一覧に表示され、「SHOP Builder 対応」のラベルが付きます。

＊ご注意：カスタムページが「ナビゲーション」に追加されている場合、公開すると顧客はそのページにアクセスできるようになります。公開ボタンをクリックする前に、編集が完了していることを必ずご確認ください。

２、SHOP Builder のページレイアウト

1. お知らせバー

お知らせバーには、テキストやカウントダウンの追加、表示方法や切り替え間隔の設定ができます。詳細については、お知らせバー、ヘッダーの設定｜SHOP Builderをご参照ください。

2. ヘッダー

ヘッダーでは、ロゴやナビゲーションのサイズと位置を調整できます。詳細については、お知らせバー、ヘッダーの設定｜SHOP Builder をご参照ください。

3. ブロック

ブロックは、「コンテンツ」「商品カテゴリ」「応用機能」「拡張機能」の４種類に分かれます。詳細については、以下の記事をご参照ください。

A. コンテンツ

B. 商品

C. 応用機能

C. 拡張機能

product_add-on tools.png

4. フッター

フッターでは、テキスト、画像、SNS アイコンを追加し、スタイルや配置を調整できます。詳細についてはフッターの設定｜SHOP Builder をご参照ください。

３、SHOP Builder のSEO 設定

SHOP Builder の左側メニューから SEO 設定をクリックすると、カスタムページのキーワードや URL を設定できます。詳細については、SEO 設定｜SHOP Builder をご参照ください。

４、SHOP Builder のストア共通設定

SHOP Builder の左側メニューからストア共通設定をクリックすると、オンラインストアの各セクションの配色やフォントサイズ、商品リストに関する設定などを自由に調整できます。デザイン性とユーザー体験を両立したストアページを作成できます。

各設定の詳細についてはストア共通設定｜SHOP Builder をご参照ください。

＊ご注意：

編集後は必ず「保存」または「公開」をクリックし、変更内容が失われないようにしてください。
SHOP Builderをご利用中の場合は、設定内容を保持するため、SHOP Builder に対応しているテンプレートを引き続きご利用いただくことを推奨します。

５、注意事項

Ultra Chic、Kingsman、Varm のテンプレートをご利用の場合、新しいカスタムページを作成すると、自動的に SHOP Builder が起動します。これまでに作成したページには影響せず、引き続き旧エディターで編集できます。
SHOP Builder で新しいフッターを公開すると、既存のフッターは上書きされます。公開する前に、既存のフッターを更新しても問題ないか、必ずご確認ください。
ページに追加できるブロックの数に上限はありません。ただし、ブロックを追加しすぎるとページのパフォーマンスが低下し、表示速度や操作性に影響する可能性があります。１ページあたりのブロック数は 25 個以内を推奨します。また、表示する商品数についても、商品の仕様に応じて適切に調整してください。