Brooklynの静的セクション

Brooklynには、オンラインストアの各ページに表示されるセクションが含まれています。ビジネスに適したセクションにカスタマイズする方法を説明します。

ヘッダー

テーマのヘッダーは、ストアの各ページの上部に表示されるセクションです。

Brooklynを使うと、以下のアイテムをヘッダーに追加できます。

  • ロゴ
  • メニュー
  • 告知バー

ヘッダーリンクとアイコンの色を変更することもできます。

ホームページの透過ヘッダーを有効にすると、ホームページヘッダー用の別個のロゴと色を選択できます。

カスタムロゴを追加する

  1. Brooklynの静的セクションの隣にある [カスタマイズする] をクリックします。

  2. [ヘッダー] をクリックします。

  3. ロゴ画像エリアで [画像を選択する] をクリックのうえ、次のいずれかの操作を行います。

- 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。 - Burstから無料のストック画像を使用するには、[無料の画像] をクリックします。 - ローカルコンピューターから画像を選択する場合は、[ライブラリー] > [アップロードする] をクリックします。

  1. ロゴの幅をカスタマイズするには、ロゴの幅をカスタマイズするスライダーを使用します。

  2. [保存] をクリックします。

メニュー設定をカスタマイズする

以下のメニュー設定をカスタマイズできます。

  • 検索タイプ - ヘッダー検索機能のスタイルを設定します。
  • メニュー - ヘッダーに表示されるメニューを設定します。
  • 追加メニュー - サイドバーメニューに追加メニューを追加します。多くのスペースがメインメニューによって使用される場合、ヘッダーメニューの代わりにサイドバーメニューが表示されます。「Brooklynのヒント」で詳細をご確認ください。
  • 検索を有効にする - サイドバーメニューに検索バーを表示します。
  1. Brooklynの静的セクションの隣にある [カスタマイズする] をクリックします。

  2. [ヘッダー] をクリックします。

  3. メニューエリアで、メニュー設定を調整します。

  4. [保存] をクリックします。

告知バーを追加する

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">デスクトップ</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>管理画面から <strong>[オンラインストア]</strong> &gt; <strong>[テーマ]</strong> の順に移動します。
</li></ol></div><div class="iphone changeable-content"><ol>
<li><a href="https://www.shopify.com/install/detect">Shopifyアプリ</a>で <strong>[ストア]</strong> をタップします。
</li><li><strong>[販売チャネル]</strong> セクションで、<strong>[オンラインストア]</strong> をタップします。
</li><li><strong>[テーマを管理する]</strong> をタップします。
</li></ol></div><div class="android changeable-content"><ol>
<li><a href="https://www.shopify.com/install/detect">Shopifyアプリ</a>で <strong>[ストア]</strong> をタップします。
</li><li><strong>[販売チャネル]</strong> セクションで、<strong>[オンラインストア]</strong> をタップします。
</li><li><strong>[テーマを管理する]</strong> をタップします。
</li></ol></div>
</div>



1. **Brooklynの静的セクション**の隣にある **[カスタマイズする]** をクリックします。
  1. [セクション] をクリックします。

  2. [ヘッダー] をクリックします。

  3. 告知バーエリアで、[告知を表示する] にチェックを入れます。ホームページにのみ告知メッセージを表示するには、[ホームページのみ] を選択します。

  4. 告知のテキストをテキストフィールドに入力します。

  5. オプション: リンクフィールドにURLを入力して、告知へのリンクを追加します。

  6. 告知バーの背景色を変更するには、バーの色見本をクリックして色を選択します。

  7. 告知のテキストの配色を変更するには、テキストの色見本をクリックして配色を選択します。

  8. [保存] をクリックします。

ヘッダーリンクとアイコンの色を変更する

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">デスクトップ</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>管理画面から <strong>[オンラインストア]</strong> &gt; <strong>[テーマ]</strong> の順に移動します。
</li></ol></div><div class="iphone changeable-content"><ol>
<li><a href="https://www.shopify.com/install/detect">Shopifyアプリ</a>で <strong>[ストア]</strong> をタップします。
</li><li><strong>[販売チャネル]</strong> セクションで、<strong>[オンラインストア]</strong> をタップします。
</li><li><strong>[テーマを管理する]</strong> をタップします。
</li></ol></div><div class="android changeable-content"><ol>
<li><a href="https://www.shopify.com/install/detect">Shopifyアプリ</a>で <strong>[ストア]</strong> をタップします。
</li><li><strong>[販売チャネル]</strong> セクションで、<strong>[オンラインストア]</strong> をタップします。
</li><li><strong>[テーマを管理する]</strong> をタップします。
</li></ol></div>
</div>



1. **Brooklynの静的セクション**の隣にある **[カスタマイズする]** をクリックします。
  1. [セクション] をクリックします。

  2. [ヘッダー] をクリックします。

  3. [リンクとアイコン] の色見本をクリックして、色を選択します。

  4. [保存] をクリックします。

透過ヘッダーを有効にする

ホームページのスライドショーにヘッダーロゴとテキストを表示したい場合は、透過ヘッダーを有効にすることができます。ストアのトップセクションがスライドショーの場合にのみ、このオプションを選択する必要があります。

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">デスクトップ</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>管理画面から <strong>[オンラインストア]</strong> &gt; <strong>[テーマ]</strong> の順に移動します。
</li></ol></div><div class="iphone changeable-content"><ol>
<li><a href="https://www.shopify.com/install/detect">Shopifyアプリ</a>で <strong>[ストア]</strong> をタップします。
</li><li><strong>[販売チャネル]</strong> セクションで、<strong>[オンラインストア]</strong> をタップします。
</li><li><strong>[テーマを管理する]</strong> をタップします。
</li></ol></div><div class="android changeable-content"><ol>
<li><a href="https://www.shopify.com/install/detect">Shopifyアプリ</a>で <strong>[ストア]</strong> をタップします。
</li><li><strong>[販売チャネル]</strong> セクションで、<strong>[オンラインストア]</strong> をタップします。
</li><li><strong>[テーマを管理する]</strong> をタップします。
</li></ol></div>
</div>



1. **Brooklynの静的セクション**の隣にある **[カスタマイズする]** をクリックします。
  1. [セクション] をクリックします。

  2. [ヘッダー] をクリックします。

  3. 透過ヘッダーエリアで、[ホームページの透過ヘッダーを有効にする] をオンにします。

  4. オプション: 透明なロゴエリアで、[画像を選択する] をクリックし、以下のいずれかの操作を行います。

- 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。 - Burstから無料のストック画像を使用するには、[無料の画像] をクリックします。 - ローカルコンピューターから画像を選択する場合は、[ライブラリー] > [アップロードする] をクリックします。

  1. リンクとアイコンの色を変更するには、[透過ヘッダーのリンクとアイコン] の色見本をクリックし、色を選択します。

  2. [保存] をクリックします。

フッター

テーマのフッターは、ストアの各ページの下部に表示されるセクションです。 以下の機能をフッターに追加できます。

  • 決済アイコン
  • 言語セレクター
  • 通貨セレクター
  • メニュー

決済アイコンを追加する

フッターには、対応している決済方法のアイコンを表示することができます。このエリアには、管理画面の決済設定セクションで有効にした決済サービスに関連付けられているアイコンが表示されます。

  1. Brooklynの静的セクションの隣にある [カスタマイズする] をクリックします。

  2. [セクション] をクリックします。

  3. [フッター] をクリックします。

  4. [決済アイコンを表示する] にチェックを入れます。

  5. [保存] をクリックします。

メニューを追加する

フッターにメニューを追加できます。フッターにすべてのメニューのリンクが表示されるので、これを使用してお客様がアクセスする一般的なページを強調することができます。たとえば、お問い合わせページ、配送情報ページ、プライバシーポリシーへのリンクを含むメニューを追加できます。

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">デスクトップ</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>管理画面から <strong>[オンラインストア]</strong> &gt; <strong>[テーマ]</strong> の順に移動します。
</li></ol></div><div class="iphone changeable-content"><ol>
<li><a href="https://www.shopify.com/install/detect">Shopifyアプリ</a>で <strong>[ストア]</strong> をタップします。
</li><li><strong>[販売チャネル]</strong> セクションで、<strong>[オンラインストア]</strong> をタップします。
</li><li><strong>[テーマを管理する]</strong> をタップします。
</li></ol></div><div class="android changeable-content"><ol>
<li><a href="https://www.shopify.com/install/detect">Shopifyアプリ</a>で <strong>[ストア]</strong> をタップします。
</li><li><strong>[販売チャネル]</strong> セクションで、<strong>[オンラインストア]</strong> をタップします。
</li><li><strong>[テーマを管理する]</strong> をタップします。
</li></ol></div>
</div>



1. **Brooklynの静的セクション**の隣にある **[カスタマイズする]** をクリックします。
  1. [セクション] をクリックします。

  2. [フッター] をクリックします。

  3. メニューを選択するには、[変更する] をクリックします。リストからメニューを選択するか、[メニューを作成する] をクリックして新しいメニューを作成します。

  4. メニューを編集するには、[メニューを編集する] をクリックします。

  5. [保存] をクリックします。

言語セレクターを追加する

複数のストアの言語を有効にしている場合にのみ、言語セレクターを追加する必要があります。

  1. Brooklynの静的セクションの隣にある [カスタマイズする] をクリックします。

  2. [セクション] をクリックします。

  3. [フッター] をクリックします。

  4. [言語セレクター] で、[言語セレクターを表示する] を選択します。

  5. [保存] をクリックします。

通貨セレクターを追加する

複数の通貨を有効にしている場合にのみ、通貨セレクターを追加する必要があります。

  1. Brooklynの静的セクションの隣にある [カスタマイズする] をクリックします。

  2. [セクション] をクリックします。

  3. [フッター] をクリックします。

  4. [通貨セレクター] で、[通貨セレクターを表示する] を選択します。

Shopifyで販売を開始する準備はできていますか?

無料体験を試す