Supplyのセクション

セクションは、オンラインストアの各ページのレイアウトを決定するカスタマイズ可能なコンテンツブロックです。

  • ホームセクションでは、スライドショーやニュースレターの登録といった機能が含まれており、追加、再配置、削除することができます。ホームページには最大25個のセクションを追加できます。

  • 各ページタイプには、独自のセクションが含まれています。たとえば、商品ページセクションで、オンラインストアの各商品ページのレイアウトを決定します。

  • ページセクションは常に、オンラインストアの特定の場所にあります。カスタマイズ可能ですが、再配置および削除することはできません。

  • 各テーマには、ヘッダーやフッターなどの固定セクションが含まれており、オンラインストアの各ページに表示されます。

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

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

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

動的セクション

動的セクションを追加並べ替え、あるいは削除して、ホームページのレイアウトをカスタマイズすることができます。各テーマには、選択可能な固有の動的セクションがあります。

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

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

ヘッダー

Supplyにはストアのヘッダーの独自設定が含まれます。ヘッダーに表示するメニューの選択、ロゴのアップロード、お客様へのメッセージ表示が可能です。

ヘッダーをカスタマイズするには

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

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

  3. メニューリストから表示するメニューを選択します。

ロゴ

Supplyでは、ストアのヘッダー部分にロゴを挿入することができます。カスタムロゴを使用する場合の最適なフォーマットは、背景を透明にした.pngファイルです。

Supplyでは幅400ピクセルのロゴを使用するのが見た目にも最適です。カスタムロゴ幅フィールドを使用して、画像の幅を変更することができます。ロゴ画像のオリジナル幅を超える値の設定は避けてください。これにより画像の品質が損なわれる恐れがあります。

メッセージ

Supplyでは、ストアのヘッダーに最大55文字のメッセージを入力することができます。メッセージは検索バーの上に表示されます。

たとえば挨拶メッセージの入力、販売または新作コレクションの宣伝、配送の遅延に関するお知らせなどに使用することができます。

ヘッダーメッセージを追加するには

  1. メッセージエリアにヘッダーメッセージを入力します。

  2. テキストを太字またはイタリックに設定することも可能です。

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

フッター

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

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

クイックリンクのメニュー、連絡先情報、ニュースレターの登録、水平メニュー、著作権のテキスト、支払いアイコンを表示するウェブサイトのフッターセクション。

フッターセクションをカスタマイズするには

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

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

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

  4. [SNSのアイコンを表示する] にチェックを入れ、SNSのアイコンをフッターに表示します。SNSのテーマ設定からリンク先のアカウントを選択します。

  5. [支払いアイコンを表示する] にチェックを入れることで、フッターに支払いアイコン (MastercardやPayPalなど) を追加します。

  6. リーガルメニューエリアからフッターの下部に水平メニューを追加します。デフォルトのメニューを編集するには、[メニューを編集] をクリックします。別のメニューに変更するには、[変更] をクリックし、既存のメニューを選択するか、[メニューを作成する] をクリックします。

  7. コンテンツエリアのフッターに最大9つのコンテンツブロックを追加します。

- [コンテンツを追加する] をクリックしてコンテンツブロックを追加します。次の選択肢からブロックの種類を選択します。 - メニュー - リッチテキスト - ニュースレターの登録

- [⁞⁞] アイコンをクリックしてブロックを別の場所にドラッグすることで、コンテンツブロックを移動します。 - ブロックをクリックしてから [コンテンツを削除] をクリックして、コンテンツブロックを削除します。 - ブロックをクリックしてから設定を編集して、コンテンツブロックをカスタマイズします。

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

商品ページ

商品セクションでは、以下の要素を追加したり削除したりできます。

  • 画像ズーム
  • 数量セレクター
  • 在庫情報
  • 商品のブランド名または販売元
  • 節約情報
  • 関連商品
  • 動的チェックアウトボタン
  • 各種ソーシャル共有アイコン
  • お客様のレビュー

商品ページの設定を編集するには、以下の手順を実行します。

  1. トップバーのドロップダウンメニューから [商品ページ] を選択します。

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

  3. [商品] をクリックします。

  4. お客様が商品画像にマウスポインターを重ねることによりズームインできるようにするには、[画像ズームを有効にする] にチェックを入れます。

  5. 数量セレクターを表示するには、[数量セレクターを表示する] にチェックを入れます。

  6. 在庫が少なくなったときに在庫数を表示するには、[商品の在庫数が10個以下の場合は在庫を表示する] にチェックを入れます。このメッセージが実際に表示されるようにするには、商品の在庫追跡を有効にする必要があります。

  7. 売り切れた商品が再入荷することを示すメッセージを表示するには、[売り切れ時に入荷予定のメッセージを表示する] にチェックを入れます。表示されるメッセージは、「(日付) 以降に再入荷予定」となります。このメッセージが実際に表示されるには、商品の仕入れを作成する必要があります。

  8. 商品のブランド名または販売元を表示するには、[販売元を表示する] にチェックを入れます。ブランド名や販売元を表示するには、商品に販売元を追加する必要があります。

  9. お客様にとってどれだけお得かを表示するには、[保存された金額を表示] にチェックを入れます。割引額は、商品の通常価格と割引前価格の差額です。割引額は、切りのいいドル値に切り下げられます。たとえば、価格差が25.51ドルの場合、割引額は「25ドル」になります。割引額が実際に表示されるには、商品の割引前価格を設定する必要があります。

  10. 割引前価格を表示するには、[価格比較を表示する] にチェックを入れます。

  11. ページの下部に関連商品を表示するには、[関連商品を表示する] を選択します。商品が属するコレクションによって、表示される関連商品が決まります。関連商品を表示するには、商品のコレクションを作成するか、既存のコレクションに追加する必要があります。商品がコレクションの一部でない場合、関連商品は表示されません。

  12. 動的チェックアウトボタンを表示するには、[動的チェックアウトボタンを表示する] をオンにします。

  13. ソーシャルメディアでの共有アイコンを表示するには、[商品の共有を有効にする] にチェックを入れます。

  14. 商品に関するお客様のレビューを表示するには、[商品レビューを有効にする] にチェックを入れます。レビューが実際に表示されるには、無料のShopify商品レビューアプリをインストールして商品のレビューを受け取る必要があります。

  15. バリエーションピッカー、カートに追加するボタン、および動的チェックアウトボタンのサイズを設定するには、バリエーションピッカーとボタンサイズドロップダウンメニューからサイズを選択します。

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

コレクションページ

Supplyではコレクションページのサイドバーメニューで、コレクションの並べ替え方法が選択できます。商品タグまたは絞り込みグループによる並べ替えのいずれかが選択可能です。

  1. ストアのテーマエディタプレビューで、コレクションページを開きます。

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

  3. [コレクション] をクリックします。

  4. 行数ごとの商品ドロップダウンリストから、各行に表示する商品数を選択します。

  5. ページごとの行ドロップダウンリストから、表示する行数を選択します。

  6. サイドバー商品絞り込みの下で、商品タグまたは絞り込みグループのどちらでコレクションを並べ替えるか選択します。

  7. コレクションの商品が元価格から値引きされた場合に差額を表示、または競合他社商品との価格比較を表示する場合は、割引前価格を表示にチェックを入れます。

  8. 商品の値引き額を表示するには、値引き額の表示にチェックを入れます。

  9. コレクションページの商品レビューを許可するには、[商品レビューを有効にする] にチェックを入れます。

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

特集コレクション

特集コレクションセクションを用いて、ホームページで特集する商品を最大6点選択します。顧客がホームページの特集コレクションをクリックすると、コレクションの特集商品が表示されます。特集商品がない場合は、コレクションの最初の商品画像が表示されます。

ホームページに特集コレクションを表示させるには

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

  2. [特集コレクション] をクリックします。

  3. コンテンツエリアで [コレクション] をクリックします。

  4. コレクションドロップダウンリストから、表示するコレクションを選択します。

  5. 表示するコレクションがすべて選択されるまで、コレクションの追加を続けて行います。

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

スライドショー

スライドショーセクションでは、スライドショーに使用する画像をアップロードできます。スライドショー画像を自動で切り替えるかどうかを選択し、その頻度を秒単位で設定することが可能です。

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

Supplyではホームページに最大6点のスライド画像を選択することが可能です。各スライドにURLを追加すると、顧客はこれをクリックしストアページを開くことができます。

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

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

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

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

  3. スライドを自動で切り替えるには、設定エリアで [スライドの自動切り替え] にチェックを入れます。

  4. トランジション時間ドロップダウンリストから、切り替え頻度を秒単位で選択します。

画像スライドを追加するには

  1. コンテンツエリアで [画像] をクリックします。

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

- 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。 - Shopifyのバーストストック画像コレクションからストック画像を選択するには、[無料の画像] タブをクリックします。ここに検索語を入力するか、画像カテゴリーを閲覧して探すことができます。 - ローカルコンピューターから画像を選択するには、[ライブラリー] タブをクリックし、次にプラスボタンをクリックします。

  1. スライドにリンクを追加するには、次のいずれかの操作を行います。

- スライドのテキストをストアページにリンクさせる場合は、[リンクURL] フィールドをクリックしページを選択します。 - スライド上のテキストをウェブサイトにリンクさせる場合は、ウェブサイトのURLをスライドリンクフィールドに貼り付けます。

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

ニュースレター

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

ウェブサイトにあるニュースレターのセクション。お客様がメールアドレスを入力するフィールドと「購読」と書かれたボタンがあります。

ホームページにニュースレターの登録を追加するには、次のとおりにします。

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

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

  3. [セクションを追加] > [ニュースレター] をクリックします。

  4. 見出しフィールドに、ニュースレターの登録の見出しを入力します。デフォルトの見出しは「ストアからのお知らせを受け取る」です。

  5. サブテキストフィールドにニュースレターの登録の小見出しを入力します。デフォルトのテキストは、「プロモーション、新商品、セールについて、あなたの受信箱に直接知らせる。」です。

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

ビデオ

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

ホームページにビデオを追加するには、次のとおりにします。

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

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

  3. [セクションを追加] > [ビデオ] をクリックします。

  4. 見出しフィールドに、ビデオの見出しを入力します。

  5. ビデオリンクフィールドに、ビデオの共有リンクを入力します。

    YouTubeの共有リンクは次のようになります。https://youtu.be/OTJXAUZY9t0このYouTubeヘルプの記事では、YouTubeビデオの共有リンクをコピーする方法を学ぶことができます。

    Vimeoの共有リンクは次のようになります。https://vimeo.com/281332510このVimeoヘルプセンターの記事では、Vimeoビデオの共有リンクをコピーする方法を学ぶことができます。

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

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

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

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

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

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

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

  4. 高度なレイアウトエリアで、[カスタムコンテンツ] > [追加] をクリックします。

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

  6. 保存をクリック

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

無料体験を試す