Supplyのセクション

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

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

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

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

静的セクション

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

  • ヘッダー
  • フッター
  • 商品
  • コレクション
  • コレクションリストのページ
  • 記事ページ

動的セクション

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

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

ヘッダー

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

ヘッダーで次のアイテムをカスタマイズできます。

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

カスタムロゴを追加する

カスタムロゴ画像を、ストアのヘッダーに追加することができます。最適なフォーマットは、背景を透明にした.pngファイルです。Supplyでは幅400ピクセルのロゴを使用するのが見た目にも最適です。幅を調整することにより、ロゴ画像をリサイズすることができます。ロゴ画像の元の幅を超える値の設定は避けてください。元の幅を超えてしまうと、画像の歪みや品質の損失が生じる恐れがあります。

  1. [ヘッダー] をクリックします。5. ロゴ画像エリアで [画像を選択する] をクリックし、次のいずれかを実施します。* 管理画面にすでにアップロードした画像を選択するには、[ライブラリー] タブをクリックします。* ローカルコンピューターから画像を選択するには、[ライブラリー] > [アップロード] をクリックします。6. カスタムロゴの幅フィールドにロゴの幅を入力します。8. [保存] をクリックします。

告知バーを追加する

ヘッダーに告知バーを追加して、お客様にメッセージを表示することができます。メッセージはカスタマイズ可能で、連絡先情報、ストアのイベントや販売に関する情報、またはストアのスローガンを含めることが可能です。メッセージは最大55文字です。

  1. [ヘッダー] をクリックします。5. 告知バーエリアで、[告知を表示する] にチェックを入れます。6. 告知のテキストを入力します。7. オプション: URLを入力して告知へのリンクを追加します。9. 告知バーの背景色を変更するには、[バー] の色見本をクリックして色を選択します。10. 告知テキストの色を変更するには、[テキスト] の色見本をクリックして色を選択します。11. [保存] をクリックします。

メニューを追加する

ヘッダーにメニューを追加できます。ヘッダーにすべてのメニューのリンクが表示されるので、お客様がアクセスする共通のページを強調することができます。たとえば、コレクションへのリンクを含むメニューを追加できます。

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

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

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

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

フッター

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

  • SNSのアイコン
  • 決済アイコン
  • 水平メニュー
  • ニュースレターの登録
  • カスタムテキスト
  • クイックリンク

SNSのアイコンを追加する

オプションを有効にして、オンラインストアのフッターにSNSのアイコンを表示することができます。フッターに表示されるSNSのアイコンは、テーマ設定で管理されます。

  1. [フッター] をクリックします。3. [SNSアイコンを表示する] にチェックを入れます。4. [保存] をクリックします。

決済アイコンを追加する

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

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

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

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

水平メニューを追加する

フッターにメニューを追加することができます。これにより、フッターの下部にある水平のバーにすべてのメニューのリンクが表示されます。このメニューにより、お客様がよくアクセスするページにリンクさせることができます。たとえば、配送および返品ポリシーへのリンクを含むメニューを追加できます。

  1. [フッター] をクリックします。2. リーガルメニューの設定を編集します。メニューを選択するには、[変更] をクリックします。リストからメニューを選択するか、[メニューを作成する] をクリックして新しく作成します。3. メニューを編集するには、[メニューを編集する] をクリックします。4. [保存] をクリックします。

メニュー、ニュースレターの登録、またはテキストを追加する

フッターに最大9つのコンテンツブロックを追加できます。

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

  2. コンテンツエリアの [コンテンツを追加する] をクリックして、コンテンツブロックを追加します。次の選択肢からブロックの種類を選択します。

  • メニュー
  • ニュースレター
  • テキスト

    コンテンツブロックを削除するには、ブロックをクリックしてから [コンテンツを削除] をクリックします。

    コンテンツブロックをカスタマイズするには、ブロックをクリックしてから設定を編集します。

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

ヒント: このセクションのブロックを再配置するには、各ブロックのドラッグアンドドロップハンドル⋮⋮を使用することができます。

商品

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

  • 画像ズームを有効にする - お客様が商品画像にマウスオーバーすることによりズームインできるようにします。
  • 数量セレクターを表示する - ユーザーがカートに追加する数量を指定することができます。
  • 残数のメッセージを表示する - 在庫が少ない場合、残りの在庫を表示します。残数のメッセージは、選択したバリエーションの在庫が9個以下の場合に表示されます。このメッセージを表示するには、商品の在庫追跡を有効にする必要があります。
  • 売り切れ時に入荷予定のメッセージを表示する - 完売した商品がいつ入荷するかを示すメッセージが表示されます。表示されるメッセージは「[日付]より後に入荷予定」です。このメッセージを表示するには、商品の仕入れを作成して入荷した在庫を記録する必要があります。
  • 販売元を表示する - 商品のブランドまたは販売元を表示します。ブランドや販売元を表示するには、商品に販売元を追加する必要があります。
  • 割引額を表示する - お客様が節減した金額を表示します。割引額は、商品の通常価格と割引前価格の差額です。割引額を表示するには、商品の割引前価格を設定する必要があります。
  • 割引前価格を表示する - 商品の割引前価格を表示します。
  • 関連商品を表示する - ページ下部に関連商品を取り揃えて表示します。商品が属するコレクションにより、このセクションに表示される関連商品が決まります。関連商品を表示するには、コレクションに商品を追加する必要があります。商品がコレクションの一部でない場合、または商品がコレクション内の唯一のアイテムである場合、関連商品は表示されません。
  • 動的チェックアウトボタンを表示する - お客様がカートをスキップして、特集商品セクションから直接チェックアウトに進むことができます。
  • 商品の共有を有効にする - お客様がSNSで商品を共有できるようボタンを表示します。表示される共有オプションはテーマ設定で管理されます。
  • 商品レビューを有効にする - ページに商品レビューセクションを追加します。レビューを表示するには、無料のShopify Product Reviewsアプリをインストールして商品のレビューを受け取る必要があります。
  • バリエーションピッカーとボタンサイズ - バリエーションピッカー、カートに追加するボタン、動的チェックアウトボタンのサイズを設定するには、このドロップダウンメニューからサイズを選択します。

商品の設定を編集する

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

コレクション

コレクションセクションは、コレクションページの主なカスタマイズ可能なセクションです。

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

  • 行あたりの商品数 - コレクションページの各行に表示する商品数を選択します。
  • ページあたりの行数 (グリッドのみ) - コレクションページに表示する商品の行数を選択します。
  • サイドバー商品絞り込み - サイドバーの商品タグ、または絞り込みグループのどちらでコレクションを並べ替えるか選択します。
  • 割引前価格を表示する - 商品の割引前価格を表示します。
  • 割引額を表示する - お客様が節減した金額を表示します。割引額は、商品の通常価格と割引前価格の差額です。割引額を表示するには、商品の割引前価格を設定する必要があります。
  • 商品レビューを有効にする - ページにレビュースコアバッジを表示します。レビュースコアバッジを表示するには、無料のShopify Product Reviewsアプリをインストールして商品のレビューを受け取る必要があります。
  • サイドバーを有効にする - サイドバーを表示して、選択した絞り込みタイプでお客様が商品を絞り込むことができるようにします。

コレクションの設定を編集する

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

コレクションリスト

ホームページで最大6つの商品コレクションを特集するには、コレクションリストセクションを使用します。

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

  1. [セクションを追加する] をクリックします。2. [コレクションリスト] をクリックし、[選択] をクリックします。3. コレクションをセクションに追加するには、各コレクションブロックをカスタマイズします。*コレクションブロックをクリックし、[コレクションを選択する] をクリックします。* [コレクション] ドロップダウンリストから、表示するコレクションを選択するか、[コレクションを作成する] をクリックして新しく作成します。*[選択] をクリックします。4. さらにコレクションブロックを追加するには、[コレクションを追加する] をクリックします。5. [保存] をクリックします。

ヒント: このセクションのブロックを再配置するには、各ブロックのドラッグアンドドロップハンドル⋮⋮を使用することができます。

特集コレクション

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

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

  • 見出し - 特集コレクションセクションの見出しを追加します。
  • コレクション - セクションに表示されるコレクションを選択します。
  • 行あたりの商品数 - セクションの各行に表示する商品数を選択します。
  • - セクションに表示する商品の行数を選択します。
  • 割引額を表示する - お客様が節減した金額を表示します。割引額は、商品の通常価格と割引前価格の差額です。割引額を表示するには、商品の割引前価格を設定する必要があります。
  • 割引前価格を表示する - 商品の割引前価格を表示します。

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

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

スライドショー

スライドショーセクションでは、ホームページのスライドショーに使用する画像をアップロードすることができます。

ホームページに最大6枚のスライド画像を選択することができます。各スライドにリンクを追加して、お客様がクリックしてストアのページを開くことができるようにします。

各スライド画像は幅1000ピクセル、高さ500ピクセルであることが必要です。異なる高さのスライドショー画像を使用すると、移行時にスライドが飛んだり、ばらついて表示されたりるする恐れがあります。

ヒント: スライドショー画像にテキストが含まれる場合、切り替えスピードを遅めに設定することで、顧客が各スライドのテキストを読む時間を十分確保することができます。

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

コンテンツ

  • 画像 - スライドショーのスライドに表示する画像を追加します。
  • リンクURL - スライドをオンラインストアの別の部分にリンクさせます。

設定

  • スライドの自動切り替え - 自動的に再生するようにスライドショーを設定します。
  • トランジション時間 - スライドを変更する頻度を選択します。

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

  1. [セクションを追加する] をクリックします。2. [スライドショー] をクリックし、[選択] をクリックします。3. スライドショーに画像を追加するには、[画像] ブロックをクリックしてカスタマイズします。1. [画像を選択する] をクリックし、次のいずれかを行います。- 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。
  2. Burstからストック画像を選択するには、[無料の画像] タブをクリックします。ここで検索ワードを入力するか、画像カテゴリーを閲覧することができます。
  3. ローカルコンピューターから画像を選択する場合は、[ライブラリー] タブをクリックし、次に [アップロード] をクリックします。
  4. スライドにリンクを追加する場合は、次のいずれかを行います。*スライド上のテキストをストア内のページにリンクさせる場合、[リンクURL] フィールドをクリックしてページを選択します。*スライド上のテキストをウェブサイトにリンクさせる場合は、リンクURLフィールドにウェブサイトのURLを貼り付けます。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. [セクションを追加する] をクリックします。3. [ビデオ] をクリックし、[選択] をクリックします。4. 設定で、ビデオセクションをカスタマイズします。5. [保存] をクリックします。

コンテンツをカスタムする

カスタムコンテンツセクションでは、いくつかのコンテンツブロックをグループ化することができます。各ブロックの幅と配置を調整して、カスタムレイアウトを構築することができます。

HTMLを使用してテキストブロックの書式を設定したり、表を作成したり、他のウェブサイトからのコンテンツを埋め込んだりすることができます。カスタムコンテンツセクションには、最大9つのカスタムHTMLブロックを追加することができます。

カスタムHTMLブロックには、次の設定が含まれます。

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

ホームページにカスタムのコンテンツを追加する

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

  2. [カスタムコンテンツ] をクリックし、[選択] をクリックします。

  3. セクションに含めるコンテンツブロックを選択して設定します。

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

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

無料体験を試す