Express向けのセクション

このページはAug 17, 2022に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/online-store/themes/themes-by-shopify/vintage-themes/express/sectionsをご覧ください。

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

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

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

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

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

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

静的セクション

Expressには次の静的セクションが含まれます。

動的セクション

Expressには次の動的セクションが含まれます。

ヘッダー

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

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

  • ロゴ
  • 告知バー
  • メニュー
  • 検索
  • ヘッダーのスタイル

カスタムロゴを追加する

あなたの会社のロゴを、ストアのヘッダー部分に追加することができます。最適なフォーマットは、背景を透明にした.pngファイルです。ロゴ画像の最大幅は180ピクセルです。幅を調整することで、ロゴ画像のサイズを変更できます。

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

  • ロゴの幅をカスタマイズする: ロゴの幅。

  • ロゴアラインメント: ヘッダーのロゴのアラインメント。[左揃え] または [中央揃え] を選択します。

ロゴを追加して設定する

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Express向けのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. [ヘッダー] をクリックします。

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

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

  3. 設定で、ロゴのサイズや配置をカスタマイズします。

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

告知バーを追加する

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

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Express向けのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。

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

  2. 告知バーエリアで、[告知を表示する] にチェックを入れます。

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

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

(Version 1.11.0+)

  1. オプション: アイコンメニューから、告知バーに表示するアイコンを選択します。アイコンには告知のテキストと同じ色が使われます。

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

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

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

メニューを追加する

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

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Express向けのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。

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

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

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

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

検索を有効にする

ヘッダーに検索オプションを追加できます。そうすることにより、お客様はストア内のアイテムをすぐに見つけることができます。

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Express向けのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. [ヘッダー] をクリックします。
  2. [検索を表示する] をオンにします。
  3. [保存] をクリックします。

ヘッダーにサブの配色を使用する

[サブ背景とテキストの配色を有効にする] を選択して、ヘッダーにサブ背景とテキストの配色を使用することができます。

フッター

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

  • 決済アイコン
  • メニュー
  • ニュースレターの登録
  • あなたのビジネスに関する情報を含むテキストセクション
  • SNSのアイコン
  • 言語セレクター

決済アイコンを追加する

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

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Express向けのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。

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

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

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

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

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Express向けのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。

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

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

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

SNSのアイコンを追加する

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Express向けのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。

  1. [テーマ設定] をクリックします。

  2. [SNS] をクリックします。

  3. ソーシャルメディアで共有する画像をアップロードするには、ソーシャルメディアで共有する画像エリアで、[画像を選択する] または [無料の画像を探す] をクリックします。

  4. 商品やブログ記事にソーシャルメディアでの共有ボタンを追加するには、以下のオプションのいずれかまたはすべてを確認してください。

  5. SNSアカウントへのリンクを追加するには、アカウントの下のフィールドにアカウントへのリンクを入力します。https://instagram.com/shopify、またはhttps://twitter.com/shopifyなどの完全なリンクを入力します。

  6. 共有ボタンのスタイルを変更するには、[ボタンのスタイル] メニューから [ブランド化されました] または [ロゴのみ] を選択します。

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

言語セレクターを追加する

複数のストアの言語を有効にしている場合にのみ、言語セレクターを追加する必要があります。

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Express向けのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。

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

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

  3. [言語セレクター] で、[言語セレクターを表示する] を選択します。

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

商品

購入者が特集コレクションから商品をクリックすると、商品ページが表示されます。商品ページには商品の説明、価格、バリエーション、画像が表示されます。新たなページにユーザーを誘導するか、ホームページ上にオーバーレイで商品の詳細を表示するかを選択することができます。この設定はテーマ設定で管理されます。[商品ページをオーバーレイで表示する] を有効にすると、特集コレクションから商品が選択されたとき、商品ページはオーバーレイとして表示されます。

店舗受取を有効にし、[商品ページをオーバーレイで表示する] を無効にした場合、このセクションには商品の受取の対応可否も表示されます。

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

  • 数量セレクターを表示する - ユーザーがカートに追加する数量を指定することができます。
  • 販売元を表示する - 商品のブランドまたは販売元を商品ページに表示します。ブランドや販売元を表示するには、商品に販売元を追加する必要があります。
  • 動的チェックアウトボタンを表示する - お客様がカートをスキップして、特集商品セクションから直接チェックアウトに進むことができます。
  • オーバーレイで商品ページを表示する: このオプションを選択すると、現在のページ上にオーバーレイ形式で商品の詳細を表示できます。オーバーレイは、特集コレクションから商品が選択されている場合に表示されます。
  • SNSでの共有ボタンを表示する - お客様が商品をSNSで共有できるようボタンを表示します。これらのボタンはテーマ設定で管理されます。

商品の設定を編集する

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Express向けのセクションの隣にある [カスタマイズする] をクリックします。
  3. ページ上部のドロップダウンメニューを開きます。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [テンプレート] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [テンプレート] をタップします。
  1. [商品] をクリックします。
  2. 設定を使用して、商品ページをカスタマイズします。
  3. [保存] をクリックします。

受取の対応可否を表示する

Version 1.11.0以上

Expressにより、オンラインストアにある商品の店舗受取が可能かどうかをお客様に表示することができます。各商品ページの受取の対応可否セクションには、商品が受取可能かどうかに加え、受取が可能になる想定時期が表示されます。この情報は [商品ページをオーバーレイで表示する] が無効になっている場合にのみ表示されます。

この機能を使用するには、店舗受取を設定する必要があります。受取が有効になっている場合、この機能は常に商品ページに表示され、無効にすることはできません。

店舗受取を有効にすると、商品ページには、店舗受取ロケーションで商品の受取ができるかどうかが表示されます。この情報は、少なくとも1か所の受取ロケーションに在庫が保管されており、商品バリエーションの詳細の配送セクションで [物理的商品] が選択されているいる商品についてのみ表示されます。

商品バリエーションの [物理的な商品] を選択するには、以下の手順を実行します。

  1. 管理画面から商品に移動します。

  2. 商品を選択します。

  3. バリエーションから、バリエーションを1つ選択します。

  4. 配送で、[物理的な商品] にチェックを入れます。

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

1か所のロケーションでのみ店舗受取を有効にしている場合、そのロケーションの位置情報と受取の対応可否が表示されます。お客様は [ストア情報を表示する] をクリックして、受取ロケーションの詳細を確認できます。

複数のロケーションで店舗受取を有効にしている場合、受取の対応可否セクションには、お客様のIPアドレスに基づいて、お客様に最も近いロケーションの位置情報と受取の対応可否が表示されます。お客様が [別のストアでの出品状況を確認する] をクリックすると、受取ロケーションのリストがお客様からの距離の順に表示されます。

お客様のロケーションがIPアドレスから特定できない場合、受取の対応可否セクションには、アルファベット順にロケーションと受取の対応可否が、都市名、ロケーション名の順に表示されます。たとえば、トロントの「クイーンストリート」、トロントの「フロントストリート」、バンクーバーの「アルバーニストリート」の3か所の受取ロケーションがあるとします。受取の対応可否セクションには、トロントの「フロントストリート」の詳細が表示されます。

おすすめ商品

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

[オーバーレイで商品ページを表示する] が商品ページに対して有効になっている場合に、このセクションからアクセスすると、現在のページ上にオーバーレイ形式で商品の詳細を表示できます。

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

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Express向けのセクションの隣にある [カスタマイズする] をクリックします。
  3. ページ上部のドロップダウンメニューを開きます。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [テンプレート] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [テンプレート] をタップします。

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

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

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

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

  5. オプション: お客様が [おすすめ商品] セクションから商品をカートに直接追加できるようにするには、[「クイック購入」ボタンを有効にする] を選択します。

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

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

コレクションテンプレート

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

コレクションテンプレートセクションには次の設定が含まれます。

  • コレクションの画像を表示する - コレクションページの上部にコレクションの画像を表示します。
  • コレクションの説明を表示する - コレクションページの上部にコレクションの説明を表示します。(Version 1.11.0以上)
  • 商品の販売元を表示する - 商品のブランドまたは販売元を商品カードに表示します。

コレクションページをカスタマイズする

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Express向けのセクションの隣にある [カスタマイズする] をクリックします。
  3. ページ上部のドロップダウンメニューを開きます。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [テンプレート] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [テンプレート] をタップします。
  1. [コレクション] を選択します。
  2. [コレクションテンプレート] セクションをクリックします。
  3. 設定で、コレクションテンプレートセクションをカスタマイズします。
  4. [保存] をクリックします。

バナー

Version 1.11.0以上

カスタム画像、テキスト、ストア内の別のロケーションにリンクするボタンを含むバナーを作成できます。バナーを使用して、ブランドを強調したり、特定のコレクションを特集したり、プロモーションを宣伝したりすることができます。

設定

  • 画像 - セクションに含める画像を追加します。画像をアップロードしたり、以前アップロードした画像を使用したりするほか、Burstから無料のストック画像を選択したりすることができます。
  • 見出し - バナーにメインのテキストを追加します。
  • 見出しサイズ - 見出しテキストのサイズを選択します。
  • 説明 - バナーに説明を追加します。
  • ボタンのラベル - ボタンに表示するテキストを追加します。
  • ボタンのリンク - ボタンのリンク先となるURLまたはページを設定します。URLに貼り付けるか、メニューからページを選択します。バナーにボタンを含めない場合は、このフィールドを空白のままにします。

レイアウトオプション

  • バナーの高さ - バナーセクションの高さを選択します。
  • バナーの幅 - バナーセクションの幅を選択します。
  • 画像アラインメント - セクション内の画像のアラインメントを選択します。
  • テキストボックスのアラインメント - セクション内のテキストボックスのアラインメントを選択します。

テキストボックスが左揃えまたは右揃えの場合、テキストは左揃えになります。テキストボックスが中央揃えの場合、テキストも中央揃えになります。

色の設定

  • テキストボックスの背景 - テキストボックスの色を選択します。
  • テキスト - バナーの見出しとボタンの色を選択します。バナーの説明にはテーマの本文の配色を使用します。配色はテーマ設定で変更できます。

バナーセクションを追加する

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Express向けのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. [セクションを追加する] をクリックします。
  2. [バナー] をクリックして、[選択] をクリックします。
  3. 設定で、バナーセクションをカスタマイズします。
  4. [保存] をクリックします。

特集コレクション

ホームページの1つのセクションで、複数のコレクションを特集することができます。コレクションはタブとして表示され、お客様がコレクション間を移動できるようになっています。

お客様が特集コレクションからカートに1個以上の商品を追加すると、カートに追加された商品の数量が商品のバッジとして表示されます。

複数のコレクションを含む特集コレクションセクションです。コレクション名は、クリック可能なタブとしてセクション上部に表示されます。

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

  • コレクション - 特集コレクションセクションに含めるコレクションを選択します。
  • コレクションリストのサイズ - デフォルトで表示する商品の数を選択します。この設定は、[特集コレクション] セクションのすべてのコレクションに適用されます。_ [小] - 6個の商品 _ [中] - 18個の商品 * [大] - 36個の商品
  • 画像スタイル - コレクション内の商品画像のトリミングスタイルを選択します。この設定は、セクション内のすべてのコレクションに適用されます。
  • 「クイック購入」ボタンを有効にする - お客様が [特集コレクション] セクションから直接カートに商品を追加できるオプションを追加します。
  • コレクションの画像を表示する - 特集コレクションタブの上部にコレクションの画像を表示します。(Version 1.11.0以上)
  • コレクションの説明を表示する - 特集コレクションタブの上部にコレクションの説明を表示します。(Version 1.11.0以上)

ヒント: お客様が特集コレクションセクションから商品をクリックしたとき、ホームページ上にオーバーレイで開くようにすることができます。詳細については、「Expressのテーマ設定」をご覧ください。

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

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Express向けのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. [セクションを追加する] をクリックします。
  2. [特集コレクション] をクリックして、[選択] をクリックします。
  3. コンテンツエリアで、[コレクション] ブロックを選択するか [コレクションを追加する] をクリックします。
  4. [コレクションを選択] をクリックします。
  5. コレクションリストから、タブで表示するコレクションを選択し、[選択] をクリックします。

コレクションを追加するには、[コレクションを追加] リンクをクリックして、新しいタブでコレクションを作成するページを開きます。

選択したコレクションの商品を追加または削除する場合は、[コレクションを編集する] リンクをクリックし、新しいタブでコレクションページを開きます。

  1. セクションにさらにコレクションを追加するには、上記の手順を繰り返します。
  2. [保存] をクリックします。

ヒント: セクション内のコレクションタブの並び順を変更するには、コンテンツエリアでコレクションを再配置します。コレクションのドラッグアンドドロップハンドル [⋮⋮] をクリックして、ブロックを別の場所にドラッグします。

特集商品

ホームページで商品を特集できます。商品の特集は、新しい商品やセール中の商品を宣伝するのに最適な方法です。お客様は、商品画像の下にある左右の矢印を使用して、画像をさらに表示できます。

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

  • 商品 - ホームページで特集する商品を選択します。
  • 数量セレクターを表示する - ユーザーがカートに追加する数量を指定することができます。
  • 販売元を表示する - 商品のブランド名または販売元を特集商品セクションに表示します。ブランドや販売元を表示するには、商品に販売元を追加する必要があります。
  • 動的チェックアウトボタンを表示する - お客様がカートをスキップして、特集商品セクションから直接チェックアウトに進むことができます。
  • SNSでの共有ボタンを表示する - お客様が商品をSNSで共有できるようボタンを表示します。これらのボタンはテーマ設定で管理されます。
  • 画像スタイル - 特集商品の画像を正方形または円形にトリミングするかどうかを選択します。

特集商品セクションを追加する

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Express向けのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. [セクションを追加する] をクリックします。
  2. [特集商品] をクリックし、[選択] をクリックします。
  3. 設定で特集商品セクションをカスタマイズします。
  4. [保存] をクリックします。

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

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

カスタムコンテンツ セクションには、以下の設定が含まれています。

  • 見出し - セクションのタイトルです。

  • モバイルレイアウト - ストアがモバイルデバイスで表示される際のブロックのレイアウトです。次のオプションから選択します。

    • グリッド - 同じ行に表示される最大50%の幅のブロックです。50%の幅を超えるコンテナーはそれぞれの行に専有表示されます。
    • スタック - 各ブロックはそれぞれの行に専有表示されます。
    • スライダー - ブロックは、単一のスライドショースタイルセクションに折りたたまれています。お客様はメニューの矢印をクリックして、追加のブロックを表示することができます。

次のブロックタイプから選択することができます。

カスタムコンテンツブロックのタイプ
ブロックのタイプ 設定
テキスト

見出し - テキストブロックに見出しを追加します。

テキスト - カスタムテキストを追加して書式設定します。

ボタンのラベル - テキストラベル付きボタンをブロックに追加します。

ボタンのリンク - ボタンに表示するテキストを追加します。

テキストサイズ - テキストのサイズを設定します。

コンテナーの幅 - ブロックの幅を設定します。

垂直アラインメント - ブロック内コンテンツの垂直方向位置を設定します。

水平アラインメント - ブロック内のコンテンツの水平方向位置を設定します。
画像

画像 - ブロックに表示する画像を追加します。画像をアップロードしたり、以前アップロードした画像を使用したりするほか、Burstから無料のストック画像を選択したりすることができます。

コンテナーの幅 - ブロックの幅を設定します。

垂直アラインメント - ブロック内コンテンツの垂直方向位置を設定します。
商品

商品: ブロック内に掲載する商品を選択します。商品名、画像、価格が表示されます。商品に画像が含まれていない場合、商品名がブロックに表示されます。

コンテナーの幅 - ブロックの幅を設定します。

垂直アラインメント - ブロック内コンテンツの垂直方向位置を設定します。

[オーバーレイで商品ページを表示する] が商品ページに対して有効になっている場合に、このセクションからアクセスすると現在のページ上にオーバーレイ形式で商品の詳細を表示できます。
コレクション

コレクション: ブロック内で掲載するコレクションを選択します。コレクションのタイトルと記事のサムネイルが表示されます。記事のサムネイルがない場合は、コレクションの最初の商品画像が表示されます。コレクション内の商品に画像が含まれていない場合、コレクションタイトルがブロック内に表示されます。

コンテナーの幅 - ブロックの幅を設定します。

垂直アラインメント - ブロック内コンテンツの垂直方向位置を設定します。
メニュー

メニュー - ブロックに表示するメニューを選択します。

見出し - メニューの見出しを追加します。

コンテナーの幅 - ブロックの幅を設定します。

垂直アラインメント - ブロック内コンテンツの垂直方向位置を設定します。

水平アラインメント - ブロック内のコンテンツの水平方向位置を設定します。

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

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Express向けのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。

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

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

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

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

テキスト付き画像

Expressではテキスト付き画像を追加し、画像の左右いずれかに表示することができます。また、別ページにリンクするボタンを追加することも可能です。

テキスト付き画像のセクションを使用して、特定の商品またはコレクションを宣伝することもできます。

テキスト付き画像セクションには、以下の設定が含まれます。

  • 画像 - セクションに含める画像を追加します。画像をアップロードしたり、以前アップロードした画像を使用したりするほか、Burstから無料のストック画像を選択したりすることができます。
  • 見出し - 画像とペアリングするメインのテキストを追加します。
  • テキスト - 画像とペアリングするサブテキストを追加します。このテキストは見出しテキストの下に表示されます。
  • ボタンのラベル - ボタンに表示するテキストを追加します。
  • ボタンのリンク - ボタンのリンク先となるURLまたはページを設定します。URLに貼り付けるか、メニューからページを選択します。セクションにボタンを含めない場合は、このフィールドを空白のままにします。

レイアウトオプション

  • デスクトップ - デスクトップコンピューターから閲覧するときにセクションの画像を左または右のどちらに表示させるかを選択します。左に画像を表示するには、[1つ目の画像] を選択します。
  • モバイル - モバイルデバイスで閲覧するときにセクション内の画像を最初または2番目のどちらに表示させるかを選択します。
  • サブ背景 - セクションにサブ背景の配色を追加するかどうかを選択します。セクションの上から5分の3の位置まで背景色を追加するには、[一部分] を選択します。この配色は、テーマ設定で変更することができます。
  • テキストサイズ - セクションの見出しとテキストの相対的なサイズを選択します。
  • 画像比を維持する - 選択した画像がトリミングされないようにするには、このオプションを選択します。このオプションのチェックを外したままにすると、画像が正方形にトリミングされます。
  • サブテキストの配色を有効にする - 見出しとテキストにサブ背景用のテキストの配色を使用するには、このオプションを選択します。この配色は、テーマ設定で変更することができます。

ホームページにテキスト付き画像セクションを追加する

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Express向けのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. [セクションを追加する] をクリックします。
  2. [テキスト付き画像] をクリックし、[選択] をクリックします。
  3. 画像エリアで [画像を選択する] をクリックのうえ、次のいずれかの操作を行います。
  • 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。
  • Burstからストック画像を選択するには、[無料の画像] タブをクリックします。ここで検索ワードを入力するか、画像カテゴリーを閲覧することができます。
  • ローカルコンピューターから画像を選択する場合は、[ライブラリー] タブをクリックし、次に [アップロード] をクリックします。
  1. 設定でセクションをカスタマイズします。
  2. [保存] をクリックします。

複数列

Version 1.11.0以上

Expressでは、複数のコンテンツ列を含むセクションを追加できます。各複数列セクションに最大4つの列を追加できます。

複数列セクションには次の設定が含まれます。

列の設定

  • 画像 - 列に画像を追加します。
  • 見出し - 列にメインのテキストを追加します。
  • テキスト - 列にサブテキストを追加します。

セクション設定

  • 見出し - セクションのメインのテキストを追加します。
  • ボタンのラベル - ボタンに表示するテキストを追加します。
  • ボタンのリンク - ボタンのリンク先となるURLまたはページを設定します。URLに貼り付けるか、メニューからページを選択します。セクションにボタンを含めない場合は、このフィールドを空白のままにします。

レイアウトオプション

  • アラインメント - 各列の要素のアラインメントを選択します。
  • モバイルレイアウト - モバイルデバイス上でセクションの列がスタック表示、またはグリッド表示されるかを選択します。
  • 画像サイズ - 列の画像サイズを選択します。
  • 画像比を維持する - 選択した画像がトリミングされないようにするには、このオプションを選択します。このオプションのチェックを外したままにすると、画像は正方形にトリミングされます。
  • サブ背景とテキストの配色を有効にする - このオプションを選択すると、サブ背景のテキストの配色を見出しとテキストに、サブ背景の配色をセクションに使用できます。この配色はテーマ設定で変更することができます。

複数列のセクションをホームページに追加する

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Express向けのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. [セクションを追加する] をクリックします。
  2. [複数列]、[選択] の順にクリックします。
  3. [列を追加する] をクリックして、セクションに列を追加します。
  4. [コンテンツ] セクションの列をクリックして、列にコンテンツを追加します。
  5. 設定でセクションをカスタマイズします。
  6. [保存] をクリックします。

ページ

バージョン 1.10.0+

ホームページ上で、ページのリッチテキストコンテンツ機能を使用することができます。このセクションを使用して、ストアポリシーページまたは会社概要ページのコンテンツを装飾することができます。

このセクションは、異なるテンプレートが適用されている場合でも、常にデフォルトのページテンプレートを使用しています。たとえば、page.contactテンプレートを使用しているお問い合わせページをセクションに追加した場合、そのテンプレートのインタラクティブフィールドは、ホームページに表示されません。ページの [タイトル] と [コンテンツ] のボックスに追加する情報は、全てセクションに表示されます。

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

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Express向けのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Express向けのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. [セクションを追加する] をクリックします。
  2. [ページ]をクリックし、[選択]をクリックします。
  3. ページエリアで、[ページを選択する] をクリックします。
  4. 表示するコンテンツを含むページを選択し、[選択] をクリックします。現在公開されているページからのみ選択できます。新しいページを作成する必要がある場合は、[ページを作成する] を選択します。
  5. [保存] をクリックします。

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

無料体験を試す