Ventureのセクション

テーマコンテンツはセクションを使用して作成されます。セクションは、オンラインストアのさまざまなページのレイアウトと見た目を左右するカスタマイズ可能なコンテンツブロックです。アップデートされたテーマエディタを使用して、セクションを追加、削除、編集、カスタマイズできます。

Shopifyのテーマには、以下のようなセクションがあります。

  • 静的セクションは、オンラインストアの所定の位置に表示されるセクションです。これらのセクションを削除または再配置することはできません。静的セクションには、商品ページやコレクションページなどのページ上に配置されているヘッダー、フッター、メニューセクション、またはコンテンツセクションなどがあり、[商品] セクションはその一例です。[商品] セクションの内容は、オンラインストアの各商品ページの見た目を左右します。
  • 動的セクションは任意のセクションで、ホームページのレイアウトをカスタマイズするために使用できます。ストアのホームページで、動的セクションを追加再配置削除して、ページレイアウトを作成することができます。ホームページに最多25個の動的セクションを追加できます。

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

ヒント: Shopifyの無料テーマを使用している場合は、Shopifyの無料のテーマをチェックして、使用中のテーマ名をクリックすることで、セクションと設定の詳細を確認できます。

有料テーマのセクションと設定の詳細については、テーマのドキュメントを参照してください。

静的セクション

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

  • ヘッダー
  • フッター
  • 商品ページ
  • おすすめ商品
  • コレクション
  • コレクションリストのページ
  • カートページ
  • 記事の内容
  • 特集商品

動的セクション

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

  • ブログ記事
  • スライドショー
  • コレクションリスト
  • 特集コレクション
  • 特集商品
  • ギャラリー
  • テキスト付き画像
  • テキストリンク付き画像
  • ロゴリスト
  • 複数のリンクのブロック
  • ニュースレター
  • マップ
  • 検索
  • リッチテキスト
  • お客様の声
  • 画像付きテキスト列
  • ビデオ
  • HTMLをカスタムする

ヘッダー

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

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

カスタムロゴを追加する

カスタムロゴを、ストアのヘッダーに追加することができます。最適なフォーマットは、背景を透明にした.pngファイルです。幅を調整することにより、ロゴ画像をリサイズすることができます。

ロゴ画像を追加しない場合、ストア名がテキストで表示されます。管理画面の [ストアの詳細] 設定ページで、ストア名を変更できます。

  • カスタムロゴの幅 (ピクセル): ロゴの幅。

ロゴを追加して設定する

  1. [ヘッダー] をクリックします。2. [ロゴ画像] エリアで、[画像を選択する] を選択してから、以下のいずれかを実行します。*管理画面にアップロードした画像を選択するには、[ライブラリー] タブをクリックします。*ローカルコンピューターから画像を選択するには、[ライブラリー] > [アップロード] の順にクリックします。3. 設定でロゴのサイズと位置をカスタマイズします。4. [保存] をクリックします。

告知バーを追加する

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

  1. [ヘッダー] をクリックします。
  2. 告知エリアで、[告知を表示する] にチェックを入れます。
  3. 告知のテキストを入力します。
  4. オプション: URLを入力して告知にリンクを追加します。
  5. [保存] をクリックします。

メニューを追加する

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

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

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

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

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

メニューにコレクション画像を表示、または非表示にする

Ventureのドロップダウンメニューのコレクション内に、商品画像を表示することができます。お客様がメニュー内で気に入ったアイテムを見つけた場合、お客様はそのアイテムをコレクションページで探すことなく、直接商品ページにアクセスすることができます。

選択されたメニューを含むヘッダー。メニュー内のコレクションに表示される商品画像。

コレクションの商品画像を表示するには、メニューが以下の基準を満たしていることを確認してください。

  • メニューに、サブメニュー項目が必要です。
  • トップレベルのアイテムはコレクションである必要があります。
  • トップレベルのコレクションをメニューに追加する場合、リンクメニューから選択する必要があります。コレクションのURLをリンクフィールドに手動で入力すると、画像は表示されません。

メニューがこれらの基準を満たしていない場合、トップメニューには、商品画像の代わりにリンクが表示されます。

サブメニューのトップレベルの商品画像を非表示にするには、コレクションのURLをリンクフィールドに手動で入力します。

フッター

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

  • 決済アイコン
  • メニュー
  • SNSのアイコン
  • ニュースレターの登録
  • text

フッターに表示されるSNSのアイコンは、テーマ設定で管理されます。

決済アイコンを追加する

フッターには、対応している決済方法のアイコンを表示することができます。このエリアには、管理画面の [決済設定] セクションで有効にした決済サービスに関連付けられているアイコンが表示されます。お客様がストアにアクセスすると、これらアイコンが絞り込まれ、現在のお客様の地域および通貨でサポートされている決済方法だけが表示されます。

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

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

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

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

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

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

- [Menu](/manual/online-store/os/menus-and-links)

- [Newsletter](/manual/online-store/os/using-themes/change-the-layout/theme-settings/theme-newsletter)

- Text


- Social accounts

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

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

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

商品ページ

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

  • アイテムがカートに追加されたときに現在のページにとどまる - このオプションを選択して、お客様が [カートに追加する] ボタンをクリックしたときに、カートページに移動するのではなく、商品ページにとどまるようにします。
  • 商品の在庫数が10個未満の場合は在庫を表示する - 在庫が不足している場合、残りの在庫を表示します。在庫レベルを表示するには、商品の在庫追跡を有効にする必要があります。
  • 動的チェックアウトボタンを表示する - お客様がカートをスキップして、特集商品セクションから直接チェックアウトに進むことができます。
  • 商品の共有を有効にする - お客様がSNSで商品を共有できるようボタンを表示します。表示される共有オプションはテーマ設定で管理されます。

商品ページの設定を編集する

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

おすすめ商品

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

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

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

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

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

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

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

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

コレクション

コレクションページには、そのコレクションに含まれる商品すべてが表示されます。ストア内の各コレクションには独自のコレクションページがあります。

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

  • タグでの絞り込みを有効にする - 絞り込みを追加することにより、お客様が特定のタグでコレクションの商品を表示できるようにします。コレクションページに絞り込みを表示するには、そのコレクションの商品にタグを追加する必要があります。
  • 並べ替えを有効にする - おすすめ順、アルファベット順、価格順などのさまざまな方法で、お客様がコレクションの並び替えに使用できるメニューを追加します。

コレクションページのその他の設定は、テーマ設定で利用可能です。

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

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

カートページ

カートページセクションは、オンラインストアのカートの主なカスタマイズ可能なセクションです。カートページセクションでは、カートメモを有効にすることにより、お客様が注文への特別な指示を入力できるようにします。

注文メモを有効にする

  1. [カート] を選択します。
  2. [カートページ] セクションをクリックします。
  3. [注文メモを有効にする] を選択します。
  4. [保存] をクリックします。

記事の内容

記事の内容セクションは、ストアの記事ページの主なカスタマイズ可能なセクションです。記事ページテンプレートは、ブログ記事で使用されます。記事ページでは、ソーシャルメディアでの共有オプションを有効にして、お客様があなたの記事を共有できるようにします。

ブログ記事の共有を有効にする

  1. [ブログ記事] を選択します。
  2. [記事の内容] セクションをクリックします。
  3. [ブログ記事の共有を有効にする] にチェックを入れ、ブログ記事にソーシャルメディアでの共有ボタンを表示します。SNS設定で共有に使用するプラットフォームを選択することができます。
  4. [保存] をクリックします。

特集商品

おすすめ商品セクションは、ストアの記事ページのカスタマイズ可能な別のセクションです。ストアのブログ記事を閲覧しているお客様に、あなたが選択したコレクションからおすすめ商品を表示することができます。たとえば、秋のファッションに関するブログ記事の場合、記事の下に秋物コレクションの商品を特集することができます。

記事ページに特集商品を表示する

  1. [ブログ記事] を選択します。
  2. [特集商品] セクションをクリックします。
  3. コレクションリストから、表示するコレクションを選択します。
  4. [保存] をクリックします。

スライドショー

Ventureでは、ホームページに大型のスライドショーを表示することができます。

スライドショー画像の推奨サイズは1,800 x 1,000ピクセルです。Ventureのスライドショーはレスポンシブ型です。つまり、顧客がストアを閲覧する際に使用しているデバイスに応じて画像を動的にサイズ変更してトリミングします。画像の最適化の詳細については、「画像のベストプラクティス」を参照してください。

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

コンテンツ

  • 画像 - スライドショーに表示する画像を追加します。
  • リンクURL - スライドをオンラインストアの別の部分にリンクさせます。
  • 画像位置 - スライドショーで最優先してフォーカスする画像の領域を選択します。
  • 見出し - 見出しをスライドに追加します。
  • ボタンテキスト - スライドにテキストラベル付きのボタンを追加します。
  • ボタンのリンク - ボタンのリンク先となるURLまたはページを設定します。URLに貼り付けるか、メニューからページを選択します。セクションにボタンを含めない場合は、このフィールドを空白のままにします。

設定

  • スライドの高さ - スライドショーの高さを設定します。[最初の画像に対応する] を選択して、スライドショーの高さを最初の画像の高さに合わせます。
  • スライドの自動切り替え - 自動的に再生するようにスライドショーを設定します。
  • スライドを変更する間隔 - スライドを変更する頻度を選択します。

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

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

    1. スライドショーで画像のどの部分を表示するかを変更するには、画像の位置ドロップダウンメニューから、オプションを選択します。
    2. スライドにリンクを追加するには、次のいずれかの操作を行います。
      • スライドのテキストをストアページにリンクさせる場合は、[リンクURL] フィールドをクリックしページを選択します。
      • スライド上のテキストをウェブサイトにリンクさせる場合は、ウェブサイトのURLをリンクURLフィールドに貼り付けます。
    3. スライドにテキストを追加する場合は、以下の手順を実施します。
      1. スライドに表示する見出しを見出しフィールドに入力します。
      2. 小見出しフィールドに、見出しの下に表示する小見出しテキストを入力します。
  6. 設定でスライドショーをカスタマイズします。

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

コレクションリスト

デスクトップまたはタブレットでは、ホームページに最大6つの特集コレクションを表示することができます。

モバイルデバイスの特集コレクションセクションには、デフォルトでストアのメインメニューが表示されます。これによりモバイルデバイスのお客様は、ストアのすべての在庫にアクセスしやすくなります。

[サブ画像レイアウトを使用する] にチェックを入れ、タイル全体をコレクション画像で塗りつぶすことができます。このオプションを選択した場合は、特集コレクションタイトル色の設定を変更する必要がある場合があります。

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

  1. [セクションを追加する] をクリックします。
  2. [コレクションリスト] をクリックし、[選択] をクリックします。
  3. コレクションをセクションに追加するには、各コレクションブロックをカスタマイズします。

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

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

特集コレクション

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

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

  • コレクション - 商品を特集するコレクションを選択します。
  • - セクションに表示する商品の行数を設定します。

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

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

特集商品

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

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

  • 商品 - ホームページで特集する商品を選択します。
  • アイテムがカートに追加されたときに現在のページにとどまる - このオプションを選択して、お客様が [カートに追加する] ボタンをクリックしたときに、カートページに移動するのではなく、商品ページにとどまるようにします。
  • 商品の在庫数が10個未満の場合は在庫を表示する - 在庫が不足している場合、残りの在庫を表示します。在庫レベルを表示するには、商品の在庫追跡を有効にする必要があります。
  • 商品の共有を有効にする - お客様がSNSで商品を共有できるようボタンを表示します。表示される共有オプションは、テーマ設定で管理されます。動的チェックアウトボタンを表示する - お客様がカートをスキップして、おすすめ商品セクションから直接チェックアウトに進むことができるようにします。

特集商品をホームページに追加する

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

テキスト付き画像

Ventureにはテキスト付き画像セクションがあり、画像とテキストブロックの組み合わせが含まれています。

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

  5. テキストを追加するには次を実行します。

    1. [コンテンツを追加する] > [テキスト付き画像] をクリックします。
    2. 見出しフィールドに、表示する見出しのテキストを入力します。
    3. テキストフィールドに、見出しの下に表示するテキストを入力します。
    4. テキストアラインメントエリアで、ブロック内の段落の位置合わせ方法を選択します。
  6. [保存] をクリックします。

ニュースレター

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

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

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

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

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

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

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

マップ

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

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

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

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

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

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

ビデオ

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

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

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

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

設定

  • ボタンのラベル - 再生ボタンに表示されるテキストを追加します。
  • ビデオリンク - ビデオの共有リンクを追加します。

表紙

  • 画像 - ビデオが再生されていないときに、ビデオセクションに表示される画像を追加します。
  • 画像の位置 - ビデオセクション内の画像の位置を設定します。
  • 画像の高さ - プレースホルダー画像の高さを設定します。

オーバーレイ

  • オーバーレイを表示する - プレースホルダー画像とボタンのラベルの間に色のレイヤーを追加します。オーバーレイは、動画上のテキストを読みやすくし、再生ボタンがクリックされるまで表示されます。
  • オーバーレイ - オーバーレイの色を設定します。
  • 不透過率 - オーバーレイの不透過率を設定します。

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

  1. [セクションを追加する] をクリックします。
  2. [ビデオ] をクリックし、[選択] をクリックします。
  3. ビデオリンクフィールドに、ビデオの共有リンクを貼り付けます。
  4. 設定でビデオセクションをカスタマイズします。
  5. [保存] をクリックします。

HTMLをカスタムする

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

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

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

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

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

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

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

無料体験を試す