Boundlessのセクション
セクションは、オンラインストアの各ページのレイアウトを決定するカスタマイズ可能なコンテンツブロックです。
ホームセクションでは、スライドショーやニュースレターの登録といった機能が含まれており、追加、再配置、削除することができます。ホームページには最大25個のセクションを追加できます。
各ページタイプには、独自のセクションが含まれています。たとえば、商品ページセクションで、オンラインストアの各商品ページのレイアウトを決定します。
ページセクションは常に、オンラインストアの特定の場所にあります。カスタマイズ可能ですが、再配置および削除することはできません。
各テーマには、ヘッダーやフッターなどの固定セクションが含まれており、オンラインストアの各ページに表示されます。
Boundless独自のセクションの選択、およびビジネスに適したカスタマイズ方法を詳しく知ることができます。
Boundlessには、以下の静的セクションが含まれます。
- ヘッダー
- Sidebar menu
- 告知バー
- スライドショー
- アクションバー
- フッター
- 商品
- コレクション
- コレクションリストのページ
- 記事
動的セクション
動的セクションを追加、並べ替え、あるいは削除して、ホームページのレイアウトをカスタマイズすることができます。各テーマには、選択可能な固有の動的セクションがあります。
Boundlessには、以下の動的セクションが含まれます。
- ブログ記事
- コレクションリスト
- 特集コレクション
- テキスト付き画像
- 特集商品
- ニュースレター
- マップ
- リッチテキスト
- ビデオ
- HTMLをカスタムする
ヘッダー
テーマのヘッダーは、ストアの各ページの上部に表示されるセクションです。
ヘッダーセクションには、以下の設定が含まれます。
- ロゴ - ヘッダーにロゴ画像を追加します。
- ホームページロゴ - ホームページにのみ表示されるロゴを追加します。ホームページのロゴがスライドショーに表示されるので、画像の上部で見やすいロゴのバージョンを選択してください。
- カスタムロゴの幅 (ピクセルで) - ロゴのサイズを設定します。
ヘッダーをカスタマイズする
- 管理画面から [オンラインストア] > [テーマ] の順に移動します。
- Shopifyアプリで [ストア] をタップします。
- [販売チャネル] セクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
- Shopifyアプリで [ストア] をタップします。
- [販売チャネル] セクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
Boundlessのセクションの隣にある [カスタマイズする] をクリックします。
[ヘッダー] をクリックします。
設定でヘッダーをカスタマイズします。
[保存] をクリックします。
Sidebar menu
サイドバーメニューは、ストアの目次として機能します。顧客がどのページを参照していても、メニューボタンにはストアのメインメニューおよびフッターメニューが表示されます。
サイドバーメニューには2つのメニューが表示されます。上部にはプライマリメニューが大型タイプで、プライマリメニューの下には追加メニューが小型タイプで表示されます。
サイドバーメニューをカスタマイズするには
[セクション] をクリックします。
[サイドバーメニュー] をクリックします。
プライマリメニューリストから、プライマリメニューとして表示するメニューを選択します。通常ではストアのメインメニューを選択するのが一般的です。
追加メニューリストから、プライマリメニューの下に表示するメニューを選択します。通常ではストアのフッターメニューを選択するのが一般的です。
[保存] をクリックします。
スライドショー
最大5枚の画像を切り替えられるホームページスライドショーを作成できます。
高解像度の画像をスライドに使用することをおすすめします。Shopifyのアップロード制限を超えない限り、3,840 x 2,160ピクセル以上の画像を使用できます。
スライドショーのサイズと形状は、お客様が所有するデバイスのサイズや形状に依存するため、一部の画面ではスライドショー画像がトリミングされます。中心に焦点を合わせた画像を使用して、各画像の重要な部分が常に表示されるようにします。
スライドショー画像のベストプラクティスについては、「画像をアップロードする」を参照してください。
スライドショーセクションには、以下の設定が含まれます。
- スライドの高さ - スライドショーの高さを設定します。最初の画像のスライドの高さに適応するを選択して、スライドショーの高さを最初の画像の高さに合わせることができます。
- スライドの自動切り替え - 自動的に再生するようにスライドショーを設定します。
- スライドを変更する間隔 - スライドを変更する頻度を選択します。
- テキストとアイコン - スライドショーで表示するテキストとアイコンの色を選択します。
- 画像のオーバーレイ - 画像スライドに色のレイヤーを追加します。オーバーレイを使用すると、スライドショーのテキストを読みやすくできます。
- 不透過率 - オーバーレイの不透過率を設定します。
- 画像 - 画像スライドをスライドショーに追加します。
- 画像位置 - スライドショーで最優先してフォーカスする画像の領域を選択します。
- 見出し - 見出しをスライドに追加します。
- ボタンテキスト - スライドにテキストラベル付きのボタンを追加します。
- ボタンのリンク - ボタンをオンラインストアの別の部分にリンクさせます。
ホームページにスライドショーを追加する
- 管理画面から [オンラインストア] > [テーマ] の順に移動します。
- Shopifyアプリで [ストア] をタップします。
- [販売チャネル] セクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
- Shopifyアプリで [ストア] をタップします。
- [販売チャネル] セクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
Boundlessのセクションの隣にある [カスタマイズする] をクリックします。
[スライドショー] をクリックします。
設定でスライドショーをカスタマイズします。
[保存] をクリックします。
アクションバー
デフォルトでは、アクションバーにはストアのメインメニューが表示されます。顧客が参照するページに応じて、アクションバーが表示するアイテムをカスタマイズすることができます。ホームページでは、アクションバーを商品コレクションの表示に使用するのが一般的です。コレクション内では、サブカテゴリーまたはその他関連コレクションの表示にアクションバーを使用することができます。
たとえばアパレル販売ストアのホームページでは、メンズ、レディース、アクセサリーなどの表示にアクションバーを使用することが可能です。顧客が [レディース] をクリックすると、コレクションページのアクションバーにトップス、パンツ、シューズが表示されます。
上記のようにアクションバーを動作させるには、メインメニューを使用してコレクションへのリンクを作成します。ストア内のその他ページ (お問い合わせまたは詳細情報ページ) には、フッターメニューにリンクを記載します。
ヒント:
ホームページにリンクするアクションバーにメニューを作成すると、ホームページにもそのメニューが表示されます。まだ存在していないコレクションのメニューを設定している最中でも表示されてしまうため、これを回避するためにホームページへのプレースホルダーリンクを作成する必要があります。
アクションバーのコレクションリンクを作成する前に、コレクションを作成します。代わりに、リンクするコレクションを作成するまでは「すべての商品」ページにリンクさせることができます。
アクションバーをカスタマイズするには
[セクション] タブをクリックします。
[アクションバー] をクリックします。
メニューリストからアクションバーに表示するメニューを選択します。
[保存] をクリックします。
フッター
Boundlessを使用すると、フッターのコンテンツにメニューを表示できます。
ストアのフッターをカスタマイズするには
[セクション] タブをクリックします。
[フッター] をクリックします。
メニューリストからフッターに表示するメニューを選択します。
[保存] をクリックします。
商品
商品セクションでは、以下の要素を追加したり削除したりできます。
- 商品のブランド名または販売元
- 数量セレクター
- 各種ソーシャル共有アイコン
- 動的チェックアウトボタン
- 商品の推奨
最初の商品画像をスキップして画像のスタイルを設定し、商品フォームの幅を選択することもできます。
商品ページの設定を編集するには、以下の手順を実行します。
トップバーのドロップダウンメニューから [商品ページ] を選択します。
[セクション] をクリックします。
[商品] をクリックします。
-
最初の商品画像をスキップするには、[最初の商品画像をスキップする] にチェックを入れます。
これで、最初の商品画像がコレクションページにのみ表示され、商品ページには表示されなくなります。このオプションを使用すると、最初の商品画像をコレクションページに最適な表示になるようにデザインして、他の商品ページの画像は、商品ページで使用できる広いスペースに適した画像にカスタマイズすることができます。
画像スタイルを設定するには、画像スタイルドロップダウンメニューから [縦長/正方形] または [横長] を選択します。
商品のブランド名または販売元を表示するには、[販売元を表示する] にチェックを入れます。ブランド名や販売元を表示するには、商品に販売元を追加する必要があります。
数量セレクターを表示するには、[数量セレクターを表示する] にチェックを入れます。
ソーシャルメディアでの共有アイコンを表示するには、[商品の共有を有効にする] にチェックを入れます。
動的チェックアウトボタンを表示するには、[動的チェックアウトボタンを表示する] をオンにします。
商品のフォームの幅を設定するには、商品のフォームの幅ドロップダウンメニューから [小] または [大] を選択します。
[保存] をクリックします。
商品の推奨を追加または削除する
お客様が興味のある可能性がある他の商品を見つけやすくするために、商品ページにおすすめ商品を表示できます。
トップバーのドロップダウンメニューから [商品ページ] を選択します。
[商品の推奨] をクリックします。
商品ページで商品のおすすめを表示または非表示にするには、[動的推奨を表示する] チェックボックスを使用します。
オプション: おすすめ商品の上に表示されるタイトルを変更するには、[見出し] フィールドに新しいタイトルを入力します。
オプション: 商品説明で販売元を表示または非表示にするには、[販売元を表示する] チェックボックスを使用します。
[保存] をクリックします。
コレクション
Boundlessには、コレクションページの並べ替えおよび絞り込み、体裁、ページネーションオプションが含まれます。
テーマのプレビューでコレクションページを開きます。
[セクション] タブをクリックします。
[コレクション] をクリックします。
体裁エリアで次のオプションを設定します。
- 画像スタイルリストから商品画像の位置と、縦長・正方形または横長表示のいずれかを選択します。
画像サイズリストから、商品画像サイズを選択します。
画像同士の間隔を広げたい場合は、[画像間隔を追加する] にチェックを入れます。
商品画像の下にベンダーまたはブランド名を表示する場合は、[商品の販売元を表示する] にチェックを入れます。
- 並べ替えと絞り込みエリアで、次のオプションを設定します。
並べ替えオプションのリストを表示する場合は、[並べ替えオプションを表示する] にチェックを入れます。
顧客がタグで絞り込むためのリストを表示するには、[タグによる絞り込みを表示する] にチェックを入れます。
ページネーションエリアのページネーションタイプリストから、番号付きページの表示または [詳細を表示する] ボタンの表示のいずれかを選択します。
[保存] をクリックします。
特集コレクション
テーマエディタの特集コレクションセクションでは、画像スタイルオプションを使用して、コレクションと商品ページでの画像表示方法を変更できます。
- 商品画像が正方形または縦向きの場合は、縦長/正方形が最適です。
- 画像が長方形または横向きの場合は、横長が最適です。
画像サイズオプションで、コレクションページでの商品画像の大きさを決定します。小さな商品画像を表示すると、1つの行により多くの画像を収めることができます。
1行に表示される画像数は、顧客のデバイス (デスクトップまたはモバイル) およびウィンドウサイズによって異なります。
[セクション] タブをクリックします。
[特集コレクション] セクションをクリックします。
コレクションリストからコレクションを選択します。選択したコレクションから最大で50商品が表示されます。
画像スタイルリストから縦長・正方形、または横長表示のいずれかを選択します。
画像サイズリストから、画像サイズを選択します。
商品画像の周囲の余白を広げるには、[画像余白を追加する] にチェックを入れます。
商品販売元またはブランド名を表示するには、[商品の販売元を表示する] にチェックを入れます。
[保存] をクリックします。
ニュースレター
ホームページにニュースレターの登録を追加することができます。これにより、メールマーケティングキャンペーンのお客様のメールアドレスを収集できます。メールマーケティングについて詳しくは、Shopifyブログをご覧ください。
ホームページにニュースレターの登録を追加するには、次のとおりにします。
- 管理画面から [オンラインストア] > [テーマ] の順に移動します。
- Shopifyアプリで [ストア] をタップします。
- [販売チャネル] セクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
- Shopifyアプリで [ストア] をタップします。
- [販売チャネル] セクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
Boundlessのセクションの隣にある [カスタマイズする] をクリックします。
[セクション] をクリックします。
[セクションを追加] > [ニュースレター] をクリックします。
見出しフィールドに、ニュースレターの登録の見出しを入力します。デフォルトの見出しは「ストアからのお知らせを受け取る」です。
見出しフィールドにニュースレターの登録の小見出しを入力します。
[保存] をクリックします。
リッチテキスト
リッチテキストセクションを使用すると、ホームページに文字コンテンツを表示する、または管理画面で作成したページを埋め込むことができます。たとえばブログページを埋め込むことによって、開催予定のイベントを特集する、または次のいずれかのページを表示することができます。
- オンラインストアの埋め込みビデオ
- ストアの所在地を示すGoogleマップ
- ストアの連絡先情報
[セクション] タブをクリックします。
[リッチテキスト] をクリックします。
テキストを入力して書式を設定します。
ストアのページを特集する場合は、[コンテンツを追加する] をクリックし、次に [ページ] をクリックします。ホームページ上で特集するページをドロップダウンメニューから選択します。
[保存] をクリックします。
ビデオ
YouTubeまたはVimeoでホストされているビデオをホームページに追加できます。ビデオはお客様を引き込み、ビジネスへの関心を高めることができます。
ホームページにビデオを追加するには、次のとおりにします。
- 管理画面から [オンラインストア] > [テーマ] の順に移動します。
- Shopifyアプリで [ストア] をタップします。
- [販売チャネル] セクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
- Shopifyアプリで [ストア] をタップします。
- [販売チャネル] セクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
Boundlessのセクションの隣にある [カスタマイズする] をクリックします。
[セクション] をクリックします。
[セクションを追加] > [ビデオ] をクリックします。
見出しフィールドに、ビデオの見出しを入力します。
-
ビデオリンクフィールドに、ビデオの共有リンクを入力します。
YouTubeの共有リンクは次のようになります。
https://youtu.be/OTJXAUZY9t0このYouTubeヘルプの記事では、YouTubeビデオの共有リンクをコピーする方法を学ぶことができます。Vimeoの共有リンクは次のようになります。
https://vimeo.com/281332510このVimeoヘルプセンターの記事では、Vimeoビデオの共有リンクをコピーする方法を学ぶことができます。 [保存] をクリックします。
HTMLをカスタムする
カスタムHTMLセクションでは、HTMLコードを使用してホームページのカスタムコンテンツを作成できます。たとえば、HTMLを使用してテキストブロックの書式を設定し、表を作成し、外部のウェブサイトからコンテンツを埋め込んだりすることができます。
カスタムHTMLをホームページに追加するには
- 管理画面から [オンラインストア] > [テーマ] の順に移動します。
- Shopifyアプリで [ストア] をタップします。
- [販売チャネル] セクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
- Shopifyアプリで [ストア] をタップします。
- [販売チャネル] セクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
Boundlessのセクションの隣にある [カスタマイズする] をクリックします。
[セクション] をクリックします。
[セクションを追加] をクリックします。
高度なレイアウトエリアで、[カスタムHTML] > [追加] をクリックします。
[カスタムHTML] をクリックし、ホームページに追加するHTMLコードを入力します。
保存をクリック