Brooklynの動的セクション

Brooklynには、ホームページのレイアウトをカスタマイズするために使用できるいくつかの動的セクションが含まれています。動的セクションを追加、再配置、また削除して、ページレイアウトを作成することができます。ホームページ上に最大25個の動的セクションを追加することができます。

スライドショー

フルサイズで、または1番目の画像の高さに合わせて、ホームページのスライドショーを作成できます。

高解像度の画像をスライドに使用することをおすすめします。Shopifyのアップロード制限を超えない限り、3,840 x 2,160ピクセル以上の画像を使用できます。

スライドショーのサイズと形状は、お客様が所有するデバイスのサイズや形状に依存するため、一部の画面ではスライドショー画像がトリミングされます。中心に焦点を合わせた画像を使用して、各画像の重要な部分が常に表示されるようにします。

スライドショー画像のベストプラクティスについては、「画像をアップロードする」を参照してください。

スライドショーセクションには、以下の設定が含まれます。

• スライドの自動切り替え - 自動的に再生するようにスライドショーを設定します。
• スライドを変更する間隔 - スライドを変更する頻度を選択します。
• 画像 - 画像スライドをスライドショーに追加します。
• オーバーレイ - 画像スライドに色のレイヤーを追加します。オーバーレイを使用すると、スライドショーのテキストを読みやすくできます。
• 不透過率 - オーバーレイの不透過率を設定します。
• 小見出しテキスト - 小見出しをスライドに追加します。小見出しは見出しの前に表示されます。
• 見出しテキスト - 見出しをスライドに追加します。
• ボタンテキスト - スライドにテキストラベル付きのボタンを追加します。
• スライドリンク - スライドをオンラインストアの別の部分にリンクさせます。
• 最初の画像に対応 - スライドショーで設定する高さを最初の画像の高さに合わせます。
• 画像位置 - スライドショーで最優先してフォーカスする画像の領域を選択します。
• テキストアラインメント- スライドに合わせてテキストを配置します。
• スライドショーのボタンとテキスト用のカラーピッカーです。

スライドショーをカスタマイズする

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
2. Brooklynの動的セクションの隣にある [カスタマイズする] をクリックします。

iPhone

1. Shopifyアプリから [Store] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. Brooklynの動的セクションの横にある [カスタマイズ] をタップします。
5. [編集] をタップします。

Android

1. Shopifyアプリから [Store] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. Brooklynの動的セクションの横にある [カスタマイズ] をタップします。
5. [編集] をタップします。

1. [セクションを追加する] をクリックします。
2. [スライドショー] をクリックし、[選択] をクリックします。
3. 設定でスライドショーをカスタマイズします。
4. [保存] をクリックします。

ブログ記事

ホームページにブログ記事を最大3つまで特集できます。

ヒント: ブログ作成に関する詳細は、「オンラインストアにブログを追加する」を参照してください。

ブログ記事セクションには、以下の設定が含まれます。

• 見出し - ブログ記事セクションに見出しを追加します。
• ブログ - ブログ設定により投稿を掲載できます。
• 投稿 - 掲載するブログ記事の数を設定します。
• 日付を表示する - ブログ記事の公開日付を表示します。
• 執筆者を表示する - ブログ記事の執筆者を表示します。
• 表紙画像を表示する - ブログ記事の表紙画像を表示します。
• 抜粋を表示する - ブログ記事の短いサマリーを表示します。
• [すべて表示] ボタンを表示する - オンラインストアのブログページにリンクするボタンを追加します。

ブログ記事をホームページに追加する

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
2. Brooklynの動的セクションの隣にある [カスタマイズする] をクリックします。

iPhone

1. Shopifyアプリから [Store] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. Brooklynの動的セクションの横にある [カスタマイズ] をタップします。
5. [編集] をタップします。

Android

1. Shopifyアプリから [Store] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. Brooklynの動的セクションの横にある [カスタマイズ] をタップします。
5. [編集] をタップします。

1. [セクションを追加する] をクリックします。
2. [ブログ記事]をクリックし、[選択] をクリックします。
3. 設定でホームページのブログセクションをカスタマイズします。
4. [保存] をクリックします。

コレクションリスト

ホームページでコレクションを最大9つ特集できます。

コレクションリストセクションには、以下の設定が含まれます。

• 見出し - コレクションリストに見出しを追加します。
• コレクション - 掲載したいコレクションを設定します。

ホームページにコレクションリストを追加する

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
2. Brooklynの動的セクションの隣にある [カスタマイズする] をクリックします。

iPhone

1. Shopifyアプリから [Store] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. Brooklynの動的セクションの横にある [カスタマイズ] をタップします。
5. [編集] をタップします。

Android

1. Shopifyアプリから [Store] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. Brooklynの動的セクションの横にある [カスタマイズ] をタップします。
5. [編集] をタップします。

1. [セクションを追加する] をクリックします。
2. [コレクションリスト] をクリックし、[選択] をクリックします。
3. 設定でコレクションリストセクションをカスタマイズします。
4. [保存] をクリックします。

特集コレクション

コレクションの商品のうちいずれかをホームページで掲載できます。

特集コレクションセクションには、以下の設定が含まれます。

• 見出し - 特集コレクションの見出しを追加します。
• コレクション - 商品の掲載をコレクションで設定します。
• グリッドスタイル - おすすめ商品のレイアウトを設定します。

特集コレクションをホームページに追加する

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
2. Brooklynの動的セクションの隣にある [カスタマイズする] をクリックします。

iPhone

1. Shopifyアプリから [Store] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. Brooklynの動的セクションの横にある [カスタマイズ] をタップします。
5. [編集] をタップします。

Android

1. Shopifyアプリから [Store] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. Brooklynの動的セクションの横にある [カスタマイズ] をタップします。
5. [編集] をタップします。

1. [セクションを追加する] をクリックします。
2. [特集コレクション] をクリックして、[選択] をクリックします。
3. 設定で特集コレクションセクションをカスタマイズします。
4. [保存] をクリックします。

テキスト付き画像

ホームページで画像やカスタムテキストを特集できます。

テキスト付き画像セクションには、以下の設定が含まれます。

• 画像 - セクションに追加する画像を選択します。
• 画像アラインメント - 画像を表示するページの横側を設定します。
• 見出し - セクションに見出しを追加します。
• テキスト - セクションにテキストを追加します。
• ボタンのラベル - ボタンに表示するテキストを追加します。
• ボタンのリンク - ボタンを別のページまたはウェブサイトにリンクさせます。

テキスト付き画像をホームページに追加する

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
2. Brooklynの動的セクションの隣にある [カスタマイズする] をクリックします。

iPhone

1. Shopifyアプリから [Store] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. Brooklynの動的セクションの横にある [カスタマイズ] をタップします。
5. [編集] をタップします。

Android

1. Shopifyアプリから [Store] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. Brooklynの動的セクションの横にある [カスタマイズ] をタップします。
5. [編集] をタップします。

1. [セクションを追加する] をクリックします。
2. [テキスト付き画像] をクリックし、[選択] をクリックします。
3. 設定でテキスト付き画像セクションをカスタマイズします。
4. [保存] をクリックします。

特集商品

ホームページで商品を特集できます。商品の特集は、新商品およびセール中の商品の宣伝に役立ちます。

特集商品セクションには、以下の設定が含まれます。

• 商品 - ホームページに掲載する商品を選択します。
• バリエーションラベルを表示する - 「サイズ」や「カラー」などの商品バリエーションラベルを表示します。
• 販売元を表示 - 商品ブランドまたは販売元を表示します。
• テキスト - おすすめ商品にテキストを追加します。
• ボタンラベル - テキスト付きボタンのラベルをおすすめ商品に追加します。
  
• ボタンのリンク - ボタンを別のページまたはウェブサイトにリンクさせます。

おすすめ商品をホームページに追加する

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
2. Brooklynの動的セクションの隣にある [カスタマイズする] をクリックします。

iPhone

1. Shopifyアプリから [Store] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. Brooklynの動的セクションの横にある [カスタマイズ] をタップします。
5. [編集] をタップします。

Android

1. Shopifyアプリから [Store] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. Brooklynの動的セクションの横にある [カスタマイズ] をタップします。
5. [編集] をタップします。

1. [セクションを追加する] をクリックします。
2. [特集商品] をクリックし、[選択] をクリックします。
3. 設定で特集商品セクションをカスタマイズします。
4. [保存] をクリックします。

ニュースレター

ホームページにニュースレターの登録を追加できます。ニュースレターの登録により、メールマーケティングキャンペーン用のお客様のメールアドレスを収集できます。メールマーケティングについて詳しくは、Shopifyブログをご覧ください。

ホームページにニュースレターの登録を追加する

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
2. Brooklynの動的セクションの隣にある [カスタマイズする] をクリックします。

iPhone

1. Shopifyアプリから [Store] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. Brooklynの動的セクションの横にある [カスタマイズ] をタップします。
5. [編集] をタップします。

Android

1. Shopifyアプリから [Store] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. Brooklynの動的セクションの横にある [カスタマイズ] をタップします。
5. [編集] をタップします。

1. [セクションを追加する] をクリックします。

2. [ニュースレター] をクリックし、[選択] をクリックします。

3. ニュースレターの登録の見出しを入力します。

4. ニュースレターの登録の小見出しを入力します。

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

マップ

ホームページにGoogleマップを追加して、お客様にビジネスの拠点を表示できます。

ヒント: マップを表示するには、GoogleマップのAPIキーを登録する必要があります。

マップセクションには、以下の設定が含まれます。

• 見出し - マップセクションに見出しを追加します。
• 住所と営業時間 - ストアの住所と営業時間をマップセクションに追加します。
• マップアドレス - ストアのロケーションを示すマップを設定します。
• マップリンクラベル - Googleマップ上のロケーションにリンクするボタンを追加します。
• ピンを表示する - ストアの特定ロケーションを地図上に示すピンを追加します。
• GoogleマップのAPIキー - マップのAPIキーをマップセクションに追加します。
• 画像 - マップが読み込まれない場合に表示される画像を追加します。
• 画像の位置 - 画像の配置を設定します。

ホームページにマップを追加する

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
2. Brooklynの動的セクションの隣にある [カスタマイズする] をクリックします。

iPhone

1. Shopifyアプリから [Store] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. Brooklynの動的セクションの横にある [カスタマイズ] をタップします。
5. [編集] をタップします。

Android

1. Shopifyアプリから [Store] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. Brooklynの動的セクションの横にある [カスタマイズ] をタップします。
5. [編集] をタップします。

1. [セクションを追加する] をクリックします。
2. [マップ] をクリックし、[選択] をクリックします。
3. 設定でマップセクションをカスタマイズします。
4. [保存] をクリックします。

リッチテキスト

リッチテキストセクションを使用すると、ホームページの文字コンテンツの表示や、管理画面で作成したページの埋め込みができます。たとえばブログページを埋め込んで開催予定のイベントを特集したり、次のいずれかのページを表示したりできます。

• オンラインストアの埋め込みビデオ
• ストアの所在地を示すGoogleマップ
• ストアの連絡先情報

リッチテキストセクションには、以下の設定が含まれています。

• オプション: [ワイドディスプレイ] にチェックを入れて、テキストのいずれかの端のマージンを減らせます。
• 見出し - リッチテキストセクションに見出しを追加します。
• テキスト - カスタムテキストを追加して書式設定します。 ストアのページを特集する場合は、[コンテンツを追加する] をクリックし、 [ページ] をクリックします。ホームページ上で特集するページをドロップダウンメニューから選択します。
• サイズ - テキストのサイズを設定します。

ホームページにリッチテキストを追加する

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
2. Brooklynの動的セクションの隣にある [カスタマイズする] をクリックします。

iPhone

1. Shopifyアプリから [Store] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. Brooklynの動的セクションの横にある [カスタマイズ] をタップします。
5. [編集] をタップします。

Android

1. Shopifyアプリから [Store] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. Brooklynの動的セクションの横にある [カスタマイズ] をタップします。
5. [編集] をタップします。

1. [セクションを追加する] をクリックします。

2. [リッチテキスト] をクリックし、[選択] をクリックします。

3. 設定でリッチテキストセクションをカスタマイズします。

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

ビデオ

YouTubeまたはVimeoのビデオをホームページに追加できます。ビデオによってお客様を引き込み、ビジネスへの関心を高めることができます。

ビデオを追加するには、そのビデオの共有リンクを見つける必要があります。

• YouTube - YouTube共有リンクは次のようになります。https://youtu.be/Oc5v_ToKP7cこのYouTubeヘルプの記事では、YouTube動画の共有リンクをコピーする方法を確認することができます。
• Vimeo - Vimeoの共有リンクは次のようになります。https://vimeo.com/123456789このVimeoヘルプセンターの記事では、Vimeoビデオの共有リンクをコピーする方法を説明しています。

ビデオセクションには、以下の設定が含まれます。

• 見出し - ビデオセクションに見出しを追加します。
• ビデオリンク - ビデオの共有リンクを追加します。

ホームページにビデオを追加する

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
2. Brooklynの動的セクションの隣にある [カスタマイズする] をクリックします。

iPhone

1. Shopifyアプリから [Store] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. Brooklynの動的セクションの横にある [カスタマイズ] をタップします。
5. [編集] をタップします。

Android

1. Shopifyアプリから [Store] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. Brooklynの動的セクションの横にある [カスタマイズ] をタップします。
5. [編集] をタップします。

1. [セクションを追加する] をクリックします。
2. [ビデオ] をクリックし、[選択] をクリックします。
3. 設定でビデオセクションをカスタマイズします。
4. [保存] をクリックします。

HTMLをカスタムする

ホームページにカスタムコンテンツを作成できます。たとえば、HTMLを使用してテキストブロックの書式を設定して表を作成する、または別のウェブサイトからのコンテンツを埋め込むことができます。

カスタムHTMLセクションには、以下の設定が含まれます。

• HTML - ホームページで表示するHTMLコードを追加します。
• コンテナーの幅 - カスタムHTMLセクションの幅を設定します。
• 垂直アラインメント - セクション内コンテンツの垂直位置方向を設定します。

ホームページにカスタムHTMLを追加する

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
2. Brooklynの動的セクションの隣にある [カスタマイズする] をクリックします。

iPhone

1. Shopifyアプリから [Store] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. Brooklynの動的セクションの横にある [カスタマイズ] をタップします。
5. [編集] をタップします。

Android

1. Shopifyアプリから [Store] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. Brooklynの動的セクションの横にある [カスタマイズ] をタップします。
5. [編集] をタップします。

1. [セクションを追加する] をクリックします。
2. [カスタムHTML] をクリックし、[選択] をクリックします。
3. 設定でカスタムHTMLセクションをカスタマイズします。
4. [保存] をクリックします。