Boundlessのセクション

テーマコンテンツはセクションを使用して作成されます。セクションは、オンラインストアのさまざまなページのレイアウトと外観を決定するカスタマイズ可能なコンテンツブロックです。

静的セクションは、オンラインストアの所定のロケーションに表示されるセクションです。これらのセクションを削除または再配置することはできません。静的セクションには、商品ページやコレクションページなどのページ上で、ヘッダー、フッター、ナビゲーションセクション、またはコンテンツセクションが含まれる場合があります。たとえば、商品セクションでは、オンラインストアの各商品ページの外観を決定します。

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

Boundless独自のセクションの選択、およびビジネスに適したカスタマイズ方法を詳しく知ることができます。

静的セクション

Boundlessには、以下の静的セクションが含まれます。

  • Sidebar menu
  • 告知バー
  • ヘッダー
  • スライドショー
  • アクションバー
  • フッター
  • 商品
  • 商品の推奨
  • コレクション
  • コレクションリストのページ
  • 記事

動的セクション

Boundlessには、以下の動的セクションが含まれます。

  • ブログ記事
  • コレクションリスト
  • 特集コレクション
  • テキスト付き画像
  • 特集商品
  • ニュースレター
  • マップ
  • リッチテキスト
  • ビデオ
  • HTMLをカスタムする

サイドバーメニューは、ストアの目次として機能します。このメニューはストアのすべてのページに表示されます。

サイドバーメニューには2つのメニューが表示されます。上部にはプライマリメニューが大型タイプで、プライマリメニューの下には追加メニューが小型タイプで表示されます。

サイドバーにSNSアカウントへのリンクを表示することもできます。これらのリンクは、テーマ設定で管理されます。

サイドバーメニューをカスタマイズする

  1. [サイドバーメニュー] をクリックします。

  2. プライマリメニューリストから、プライマリメニューとして表示するメニューを選択します。通常ではストアのメインメニューを選択するのが一般的です。

  3. 追加メニューリストから、プライマリメニューの下に表示するメニューを選択します。通常ではストアのフッターメニューを選択するのが一般的です。

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

告知バー

告知バーを有効にして、お客様にメッセージを表示することができます。メッセージは完全にカスタマイズ可能で、連絡先情報、リンク、ストアのイベントや販売に関する情報、ストアのスローガンやブランディングメッセージを含めることができます。告知バーはストアのすべてのページに表示されますが、ホームページにのみ表示することもできます。

告知バーを有効にする

  1. [告知バー] をクリックします。
  2. [告知を表示する] にチェックを入れます。

    ホームページのみに告知メッセージを表示するには、[ホームページのみ] を選択します。

  3. 告知のテキストを入力します。

  4. オプション: URLを入力して告知へのリンクを追加します。

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

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

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

ヘッダー

テーマのヘッダーは、ストアの各ページの上部に表示されるセクションです。ヘッダーに表示されるロゴはカスタマイズすることができます。

ホームページにのみ表示される追加ロゴを追加することができます。ホームページロゴはスライドショーに表示されるため、画像の上部で見やすいロゴのバージョンを選択する必要があります。

カスタムロゴを追加する

  1. [ヘッダー] をクリックします。
  2. ロゴエリアで [画像を選択する] をクリックし、次のいずれかの操作を行います。- 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。
  3. Burstからストック画像を選択するには、[無料の画像] タブをクリックします。ここで検索ワードを入力するか、画像カテゴリーを閲覧することができます。
  4. ローカルコンピューターから画像を選択する場合は、[ライブラリー] タブをクリックし、次に [アップロード] をクリックします。

  5. オプション: ホームページロゴエリアで、[画像を選択する] をクリックし、次のいずれかの操作を行います。- 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。

  6. Burstからストック画像を選択するには、[無料の画像] タブをクリックします。ここで検索ワードを入力するか、画像カテゴリーを閲覧することができます。

  7. ローカルコンピューターから画像を選択する場合は、[ライブラリー] タブをクリックし、次に [アップロード] をクリックします。

  8. カスタムロゴの幅 (ピクセル) フィールドにロゴの幅を入力します。

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

スライドショー

ホームページにスライドショーを追加して、最大5枚の画像を切り替えることができます。

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

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

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

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

  • スライドの高さ - スライドショーの高さを設定します。最初の画像のスライドの高さに適応するを選択して、スライドショーの高さを最初の画像の高さに合わせることができます。
  • スライドの自動切り替え - 自動的に再生するようにスライドショーを設定します。
  • スライドを変更する間隔 - スライドを変更する頻度を選択します。
  • テキストとアイコン - スライドショーに表示するテキストとアイコンの色を選択します。
  • 画像のオーバーレイ - 画像スライドに色のレイヤーを追加します。オーバーレイを使用すると、スライドショーのテキストを読みやすくできます。
  • 不透過率 - オーバーレイの不透過率を設定します。
  • 画像 - 画像スライドをスライドショーに追加します。
  • 画像位置 - スライドショーで最優先してフォーカスする画像の領域を選択します。
  • 見出し - 見出しをスライドに追加します。
  • ボタンテキスト - スライドにテキストラベル付きのボタンを追加します。
  • ボタンのリンク - ボタンのリンク先となるURLまたはページを設定します。URLに貼り付けるか、メニューからページを選択します。セクションにボタンを含めない場合は、このフィールドを空白のままにします。

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

  1. [スライドショー] をクリックします。

  2. 設定でスライドショーをカスタマイズします。

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

アクションバー

デフォルトでは、アクションバーにはストアのメインメニューが表示されます。メニューをカスタマイズすることにより、お客様が閲覧しているページに基づいてアクションバーが表示するアイテムに変化を持たせることができます。ホームページでは、アクションバーは商品コレクションの表示に使用するのが一般的です。コレクション内では、サブカテゴリーまたはその他関連コレクションの表示にアクションバーを使用することができます。

たとえばアパレル販売ストアのホームページでは、メンズレディースアクセサリーなどの表示にアクションバーを使用することが可能です。顧客が [レディース] をクリックすると、コレクションページのアクションバーにトップスパンツシューズが表示されます。

上記のようにアクションバーを動作させるには、メインメニューを使用してコレクションへのリンクを作成します。ストア内のその他ページ (お問い合わせまたは詳細情報ページ) には、フッターメニューにリンクを記載します。

ヒント:

ホームページにリンクするアクションバーにメニューを作成すると、ホームページにもそのメニューが表示されます。まだ存在していないコレクションのメニューを設定している最中でも表示されてしまうため、これを回避するためにホームページへのプレースホルダーリンクを作成する必要があります。

アクションバーのコレクションリンクを作成する前に、コレクションを作成します。代わりに、リンクするコレクションを作成するまでは「すべての商品」ページにリンクさせることができます。

アクションバーをカスタマイズする

  1. [アクションバー] をクリックします。

  2. メニューリストからアクションバーに表示するメニューを選択します。

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

フッター

テーマのフッターは、ストアの各ページの下部に表示されるセクションです。Boundlessを使用すると、フッターにあなたが受け付ける決済方法のメニューおよびアイコンを表示できます。

また、フッターにSNSアカウントへのリンクを表示することもできます。これらのリンクはテーマ設定で管理されます。

フッターにメニューを追加する

フッターにはメニューを追加することができます。フッターにすべてのメニューのリンクが表示されるので、お客様がよくアクセスするページを強調することができます。たとえば、連絡先および配送ポリシーへのリンクを含むメニューを追加することができます。

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

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

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

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

決済アイコンを追加する

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

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

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

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

商品

商品セクションは、商品ページの主なカスタマイズ可能なセクションです。次のオプションを使用して、このセクションをカスタマイズすることができます。

  • 最初の商品画像をスキップする - このオプションを有効にすると、最初の商品画像は商品ページにではなく、コレクションページにのみ表示されます。このオプションを使用すると、最初の商品画像をコレクションページで最も見栄えが良くなるようデザインし、他の商品画像は商品ページの広いスペースに適して表示されるように調整することができます。
  • 画像スタイル - [縦長/正方形] または [横長] を選択します。
  • 販売元を表示する - 商品のブランドまたは販売元を商品ページに表示します。ブランドや販売元を表示するには、商品に販売元を追加する必要があります。
  • 数量セレクターを表示する - ユーザーがカートに追加する数量を指定することができます。
  • 動的チェックアウトボタンを表示する - お客様がカートをスキップして、特集商品セクションから直接チェックアウトに進むことができます。
  • 商品のフォームの幅 - [小] または [大] の幅を選択します。

商品ページに商品のおすすめを表示することもできます。

商品セクションをカスタマイズする

  1. [商品ページ] を選択します。
  2. [商品] セクションをクリックします。
  3. 設定を使用して、商品ページをカスタマイズします。
  4. [保存] をクリックします。

商品の推奨

お客様が興味のある可能性がある他の商品を見つけやすくするために、商品ページにおすすめ商品を表示できます。

商品のおすすめを有効にする

  1. [商品ページ] を選択します。

  2. [商品のおすすめ] セクションをクリックします。

  3. 商品ページに商品のおすすめを表示するには、[ダイナミックレコメンデーションを表示する] にチェックを入れます。

  4. オプション: おすすめ商品の上に表示されるタイトルを変更するには、[見出し] フィールドに新しいタイトルを入力します。

  5. オプション: 商品説明で販売元を表示または非表示にするには、販売元を表示するチェックボックスを使用します。

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

コレクション

コレクションセクションは、コレクションページの主なカスタマイズ可能なセクションです。次のオプションを使用して、このセクションをカスタマイズすることができます。

  • 画像スタイル - 画像を [縦長/正方形] または [横長] にするかを選択します。

    商品画像が正方形または縦向きの場合は、縦長/正方形が最適です。

    画像が長方形または横向きの場合は、横長が最適です。

  • 画像サイズ - 画像サイズを選択します。小さな商品画像を表示すると、1行により多くの画像を収めることができます。1行に表示できる画像数は、お客様のデバイスまたはウィンドウサイズによって異なります。

  • 画像間隔を追加する - 商品画像の周囲の間隔を広げます。

  • 商品の販売元を表示する - 商品画像の下に商品のブランドまたは販売元を表示します。ブランドや販売元を表示するには、商品に販売元を追加する必要があります。

  • 並べ替えオプションを表示する - このオプションを選択して、お客様がコレクションページで商品を並べ替えることができるようにします。

  • タグによる絞り込みを表示する - このオプションを選択して、お客様が商品タグでコレクションを絞り込むことができるようにします。

  • ページネーションタイプ - コレクション内に複数の商品ページがある場合、番号付きページ、またはさらに表示するボタンを表示するかを選択します。

コレクションセクションをカスタマイズする

  1. [コレクションページ] を選択します。
  2. [コレクション] セクションをクリックします。
  3. 設定を使用して、コレクションページをカスタマイズします。
  4. [保存] をクリックします。

特集コレクション

ホームページにコレクションを特集することができます。コレクションの特集は、販売促進や新作コレクションの宣伝に役立ちます。

特集コレクションセクションには次の設定が含まれています。

  • コレクション - セクションに表示されるコレクションを選択します。選択したコレクションから最大50個の商品が表示されます。
  • 画像スタイル - 画像を [縦長/正方形] または [横長] にするかを選択します。

    商品画像が正方形または縦向きの場合は、縦長/正方形が最適です。

    画像が長方形または横向きの場合は、横長が最適です。

  • 画像サイズ - 画像サイズを選択します。小さな商品画像を表示すると、1行により多くの画像を収めることができます。1行に表示できる画像数は、お客様のデバイスまたはウィンドウサイズによって異なります。

  • 画像の間隔を有効にする - 商品画像の周囲の間隔を広げます。

  • 商品の販売元を表示する - 商品画像の下に商品のブランドまたは販売元を表示します。ブランドや販売元を表示するには、商品に販売元を追加する必要があります。

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

  1. [セクションを追加する] をクリックします。
  2. [特集コレクション] をクリックして、[選択] をクリックします。
  3. [コレクションを選択する] をクリックして、[コレクション] リストからコレクションを選択します。選択したコレクションから最大50個の商品が表示されます。
  4. 設定でセクションをカスタマイズします。
  5. [保存] をクリックします。

ニュースレター

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

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

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

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

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

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

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

マップ

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

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

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

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

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

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

リッチテキスト

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

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

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

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

  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. [ビデオ] をクリックし、[選択] をクリックします。
  3. 設定でビデオセクションをカスタマイズします。
  4. [保存] をクリックします。

HTMLをカスタムする

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

ホームページにカスタムHTMLセクションを追加する

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

  2. [カスタムHTML] をクリックし、[選択] をクリックします。

  3. [カスタムHTML] をクリックし、ホームページに追加するHTMLコードを入力します。

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

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

無料体験を試す