SHOP Builder を活用してフッターを編集・デザインすることで、オンラインストアのデザイン性を高めると同時に、より多くのストア情報を効果的に伝えることができます。
本記事では、以下の内容についてご説明します。
利用前にご注意ください：
- SHOP Builder は現在、Ultra Chic、Kingsman、Varm、Philia テンプレートでのみ利用できます。
- SHOP Builder でページを作成した後に、別のストアテンプレートへ切り替えた場合、ページは引き続き表示されますが、編集できなくなり、レイアウトが崩れる可能性があります。ページを公開する前に、表示内容を十分ご確認ください。
１、新フッターエディターを有効にする
SHOP Builder でフッターをデザインする前に、新フッターエディターを有効にする必要があります。
STEP 1.
SHOPLINE 管理画面で、「ストアデザイン ＞ ストアページ」に移動し、「新規ページを追加 ＞ カスタムページ」をクリックするか、既存ページの横にある「編集」をクリックして、編集画面を開きます。
STEP 2.
「フッター」ボタンをクリックします。
新フッターエディターの有効化を案内するメッセージが表示されます。「新しいフッターエディターを有効にする」をクリックします。
「有効にする」をクリックして、新フッターエディターの有効化を確定します。
＊ご注意：
- 「有効にする」をクリックすると、右側のプレビュー画面に新しいフッターが表示されます。この時点では、既存のフッターには影響ありません。
- SHOP Builder で新しいフッターを公開すると、既存のフッターが新しいフッターに置き換わります。公開する前に、既存のフッターを置き換えても問題ないか、必ずご確認ください。
２、フッターにコンテンツを追加する
フッター編集画面を開くと、デフォルトで あらかじめ２つの「テキスト」が２つ（会社概要、カスタマーサポート）と、 「SNS アイコン」が１つ（お問い合わせ）設定されています。既存のコンテンツをクリックすると、内容を編集できます。各コンテンツの詳細については、以下をご確認ください。
コンテンツを追加するには「＋コンテンツ」をクリックします。
＊ご注意：コンテンツは最大４つまで設定できます。
利用可能なコンテンツは以下の５種類です：
- テキスト
- 画像
- SNS アイコン
- ニュースレター
- カスタムスクリプト
1. テキスト
「テキスト」を追加した後、タイトルと内容を入力できます。また、テキストを太字、斜体、下線にしたり、リンクを挿入したりできます。
2. 画像
「画像」を追加した後、PC 版とモバイル版の画像をそれぞれアップロードできます。また、トリミング位置、オーバーレイの濃度、代替テキスト（ALT）、リンク先 URL などを設定できます。
＊ご注意：画像の推奨幅は、PC 版が 2000px 以上、モバイル版が 1080px 以上です。
3. SNS アイコン
「SNS アイコン」を追加した後、タイトルと内容を入力し、各 SNS の リンク先 URL を設定できます。
コンテンツの左側にあるボタンをドラッグすると、並び順を変更できます。右側にある「ゴミ箱」アイコンをクリックすると、そのコンテンツを削除できます。
フッター編集画面を一番下までスクロールすると、各コンテンツの余白や文字揃えを調整できます。
下部の「保存」をクリックすると、右側のプレビュー画面で設定した内容を確認できます。また、右上の「プレビュー」ボタンをクリックすると、ストアフロント全体をプレビューできます。
4. ニュースレター
フッターの「ニュースレター」は、ページ内の「ニュースレター」と同様に、タイトル、内容、入力欄のプレースホルダー、ボタンテキストを設定できます。
詳細については、ニュースレターブロック | SHOP Builder をご参照ください。
5. カスタムスクリプト
「カスタムスクリプト」を追加した後、任意のテキストを入力したり、 HTML コードを挿入したりできます。
詳細については、カスタムスクリプト | SHOP Builder をご参照ください。
３、その他のフッター機能
新しいフッターエディターでは、以下の５種類のコンテンツ項目が用意されています。必要に応じて有効化し、設定してください。
- 決済アイコン
- 詐欺への注意喚起
- コピーライト
- 言語セレクター
- 通貨セレクター
1. 決済アイコン
フッターに決済アイコンを追加することで、ストアで利用可能な支払い方法を顧客に案内できます。
「決済アイコン」をオンにした後、プルダウンメニューからストアで利用できる支払い方法を選択します。
決済アイコンの配置も設定できます。
下部の「保存」をクリックすると、右側のプレビュー画面で設定した内容を確認できます。
2. 詐欺への注意喚起
「詐欺への注意喚起」をオンにすると、内容を編集できます。編集完了後、下部の「保存」ボタンをクリックすると、右側のプレビュー画面で設定した注意喚起メッセージを確認できます。
3. コピーライト
「コピーライト」をオンにすると、内容を編集できます。編集完了後、下部の「保存」ボタンをクリックすると、右側のプレビュー画面で設定した著作権表示を確認できます。
4. 言語セレクター
「言語セレクター」をオンにすると、内容を編集できます。編集完了後、下部の「保存」ボタンをクリックすると、右側のプレビュー画面で追加した言語セレクターを確認できます。
＊ご注意：
- 言語セレクターには、ストアで対応している言語が表示されます。
- 非表示にする言語は、ヘッダーの設定と共通です。ヘッダー設定の詳細については、お知らせバー、ヘッダーの設定をご参照ください。
5. 通貨セレクター
「通貨セレクター」をオンにすると、内容を編集できます。編集完了後、下部の「保存」ボタンをクリックすると、右側のプレビュー画面で追加した通貨セレクターを確認できます。
４、フッターを公開する
上記の設定が完了したら、画面右上の「公開」ボタンをクリックします。公開すると、新しく設定したフッターがストアフロントに反映され、顧客が閲覧できるようになります。
＊ご注意：新しいフッターを初めて公開する際は、確認ポップアップが表示されます。。同意のチェックボックスにチェックを入れ、「新しいフッターと一緒に公開」をクリックすると、既存のフッターが新しいフッターに置き換わり、旧フッターエディタは利用できなくなります。既存のフッターをそのまま使用する場合は、「ページのみ公開」を選択します。
関連記事
- お知らせバー、ヘッダーの設定 | SHOP Builder
- テキストブロック | SHOP Builder
- 画像ギャラリーブロック | SHOP Builder
- 画像・テキストブロック | SHOP Builder
- カルーセルブロック | SHOP Builder
- 商品リストブロック | SHOP Builder
- 商品カルーセルブロック | SHOP Builder
- SEO 設定 | SHOP Builder
コメント