お知らせバー、ヘッダーの設定｜SHOP Builder

SHOP Builder の「お知らせバー」と「ヘッダー」機能を活用することで、オンラインストアのデザイン性を高めると同時に、より多くの店舗情報を効果的に伝えることができます。

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

• SHOP Builder のお知らせバーの設定
• SHOP Builder のヘッダーの設定

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

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

１、SHOP Builder のお知らせバーの設定

STEP 1.

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

STEP 2.

「お知らせバー」をクリックします。

STEP 3.

「テキスト」または「カウントダウン」を追加できます。

 

1. 「カウントダウン」を追加する

「＋カウントダウン」ボタンをクリックして追加します。詳細については、カウントダウン｜SHOP Builder をご参照ください。



 

2. 「テキスト」を追加する

「＋テキスト」ボタンをクリックします。

「テキスト」の内容を編集します。

• タイトル：お知らせバーのタイトルを入力できます。
• リンク：リンクを入力し、リンクの開き方を選択することもできます。
  • 現在のタブで開く：現在のタブでリンクを開きます
  • 新しいタブで開く：新しいタブでリンクを開きます

「言語」プルダウンメニューをクリックすると、ストアで対応しているすべての対応言語が表示されます。言語ごとに、お知らせバーに表示する内容を個別に設定できます。

STEP 4.

作成済みのお知らせバーは、右側の「ゴミ箱」アイコンをクリックすると削除できます。新しいお知らせバーを追加する場合は、再度「＋テキスト」をクリックしてください。

STEP 5.

複数のお知らせバーを追加した場合、表示方法を選択できます。 
＊ご注意：お知らせバーは最大３つまで追加可能です。

 

A. 自動切り替え

 

B. すべて表示

STEP 6.

「自動切り替え」を選択した場合、切り替え間隔を設定できます。

STEP 7.

下部の「保存」をクリックすると、右側のプレビュー画面で追加したお知らせバーを確認できます。また、右上の「プレビュー」ボタンをクリックすると、ストアフロント全体をプレビューできます。

STEP 8.

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

２、SHOP Builder のヘッダーの設定

カスタムページの SHOP Builder 編集画面で、「ヘッダー」ボタンをクリックします。

A. ロゴ

「ロゴ」をクリックすると、PC とモバイルそれぞれのストアロゴのサイズや表示位置を設定できます。

B.  ナビゲーション

「ナビゲーション」をクリックすると、PC 表示でのナビゲーションの配置を設定できます。

＊備考：ストアロゴやナビゲーションの表示順を設定する場合は、SHOPLINE 管理画面で、「ストアデザイン ＞ ストアページ ＞ ナビゲーション」で設定してください。

C. ヘッダーの固定・余白

下スクロール時にもヘッダーを画面上部に固定表示するように設定できます。また、ヘッダーの余白も調整できます。

D. 検索バー

検索ボタンの表示スタイルを設定できます。

• なし：検索ボタンは表示されません
• アイコン
  
• アイコン＋テキスト
  
   
• 検索バー
  
   

E. 言語セレクター・特定の言語を非表示

a. 言語セレクター

言語セレクターの表示スタイルを設定できます。

• なし：言語セレクターは表示されません
• アイコン
  
• アイコン＋テキスト
  
   

b. 特定の言語を非表示

「特定の言語を非表示」プルダウンメニューには、ストアで対応しているすべての言語が表示されます。非表示にする言語にチェックを入れ、「特定の言語を非表示」をクリックしてください。非表示にした言語は、ストアフロントの言語セレクターから選択できなくなります。

F. 通貨セレクター

通貨セレクターの表示スタイルを設定できます。

• なし：通貨セレクターは表示されません
• アイコン
  
   
• アイコン＋テキスト
  
   

G. お問い合わせ

お問い合わせボタンの表示スタイルを設定できます。

• なし：お問い合わせボタンは表示されません
• アイコン
  
   
• アイコン＋テキスト
  
   

H. マイページ

マイページボタンの表示スタイルを設定できます。

• アイコン
  
   
• アイコン＋テキスト（テキストは、顧客のログイン状態に応じて切り替わります）
  
  
  
   

I. カート

カートボタンの表示スタイルを設定できます。

• アイコン
  
   
• アイコン＋テキスト
  
   

下部の「保存」をクリックすると、右側のプレビュー画面で設定した内容を確認できます。また、右上の「プレビュー」ボタンをクリックすると、ストアフロント全体をプレビューできます。

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

関連記事

• テキストブロック | SHOP Builder
• 画像ギャラリーブロック | SHOP Builder
• 画像・テキストブロック | SHOP Builder
• カルーセルブロック | SHOP Builder
• 商品リストブロック | SHOP Builder
• 商品カルーセルブロック | SHOP Builder
• SEO 設定 | SHOP Builder
• フッターの設定 | SHOP Builder