Debutのセクション

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

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

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

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

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

静的セクション

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

  • ヘッダー
  • フッター
  • 商品ページ
  • 商品の推奨
  • コレクションページ
  • コレクションリストのページ
  • ブログページ
  • 投稿
  • カートページ

動的セクション

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

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

ヘッダー

ヘッダーセクションでは、ストアの各ページの上部に表示されるコンテンツを編集できます。ロゴ画像を追加したり、表示するメニューを選択したり、告知メッセージを作成したりすることができます。

カスタムロゴを追加する

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

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Debutのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Debutのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Debutのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. [ヘッダー] をクリックします。
  2. ロゴ画像エリアで [画像を選択する] をクリックのうえ、次のいずれかの操作を行います。 - 管理画面にアップロードした画像を選択するには、[ライブラリー] タブをクリックします。
    • ローカルコンピューターから画像を選択する場合は、[ライブラリー] > [アップロードする] をクリックします。
  3. ロゴの幅をカスタマイズするには、ロゴの幅をカスタマイズするスライダーを使用します。
  4. ロゴの配置を設定するには、ロゴアラインメントエリアで、[左揃え] または [中央揃え] を選択します。ロゴ画像を追加しない場合、ストア名がテキストで表示されます。管理画面の一般設定ページで、ストア名を変更できます。
  5. [保存] をクリックします。

告知バーを追加する

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

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Debutのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Debutのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Debutのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. [ヘッダー] をクリックします。
  2. 告知エリアで、[告知を表示する] にチェックを入れます。ホームページのみに告知メッセージを表示するには、[ホームページのみ] を選択します。
  3. 告知のテキストを入力します。
  4. オプション: URLを入力して告知へのリンクを追加します。
  5. 告知バーの背景色を変更するには、バーの色見本をクリックして色を選択します。
  6. 告知のテキストの配色を変更するには、テキストの色見本をクリックして配色を選択します。
  7. [保存] をクリックします。

メニューを追加する

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

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

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

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

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

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

フッター

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

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

決済アイコンを追加する

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

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

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

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

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

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

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

  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

最大4つのコンテンツブロックを追加することができます。

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

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

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

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

SNSのアイコンを追加する

テーマ設定にSNSアカウントを追加すると、フッターに自動的に表示されます。

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

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

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

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

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

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

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

通貨セレクターを追加する

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

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

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

  2. [通貨セレクター] で、[通貨セレクターを表示する] を選択します。

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

商品ページ

商品ページセクションは、商品ページの主なカスタマイズ可能なセクションです。店舗受取を有効にしている場合、このセクションには商品が受取可能かどうかも表示されます。

次のオプションを使用して、このセクションをカスタマイズすることができます。

  • 数量セレクターを表示する - ユーザーがカートに追加する数量を指定することができます。
  • バリエーションのラベルを表示する - バリエーションのドロップダウンメニューの上の「サイズ」および「色」などのバリエーションのラベルを表示します。表示されるバリエーションのラベルは、商品のバリエーションのオプション名に基づいて決まります。
  • 販売元を表示する - 商品のブランドまたは販売元を表示します。ブランドや販売元を表示するには、商品に販売元を追加する必要があります。
  • 動的チェックアウトボタンを表示する - お客様がカートをスキップして、特集商品セクションから直接チェックアウトに進むことができます。
  • ソーシャルメディアでの共有ボタンを表示する - お客様が商品をSNSで共有できるようボタンを表示します。表示される共有オプションはテーマ設定で管理されます。

メディア

  • サイズ - 商品メディアのサイズを設定します。
  • 画像ズームを有効にする - お客様が商品画像にマウスオーバーすることによりズームインできるようにします。
  • ビデオループを有効にする - このオプションを選択して商品のビデオをループ再生します。このオプションを解除すると、ビデオの再生終了時に再生ボタンが表示されます。

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

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

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

Debutにより、オンラインストアの商品の店舗受取が利用可能かどうかをお客様に表示することができます。各商品ページの受取の対応可否セクションには、商品が入手可能かどうかに加え、受取が可能になる想定時期が表示されます。この機能を使用するには、店舗受取を設定する必要があります。店舗受取が有効になっている場合、この機能は商品ページに常に表示されるため、無効にすることはできません。

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

  1. 管理画面で、商品 > すべての商品に移動します。

  2. 商品を選択します。

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

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

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

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

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

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

商品の推奨

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

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

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

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

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

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

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

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

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

コレクションページ

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

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

  • レイアウト - コレクションページの商品の配置方法を選択します。
  • 行あたりの商品数 (グリッドのみ) - コレクションページの各行に表示する商品数を選択します。このセクションは、レイアウトをグリッドに設定している場合にのみ適用されます。
  • ページあたりの行数 (グリッドのみ) - コレクションページに表示する商品の行数を選択します。このセクションは、レイアウトをグリッドに設定している場合にのみ適用されます。
  • コレクションの画像を表示する - コレクションページの上部にコレクションの画像を表示します。
  • 商品の販売元を表示する - 商品名の下に各商品の販売元を表示します。
  • 並べ替えを有効にする - このオプションを選択して、お客様がコレクションページで商品を並べ替えることができるようにします。
  • タグによる絞り込みを有効にする - このオプションを選択して、お客様が商品タグによりコレクションを絞り込めるようにします。

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

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

コレクションリストのページ

お客様は、コレクションリストページを使用して、閲覧したいコレクションを見つけることができます。コレクションリストのページには、ストア内のすべてのコレクションを表示することも、あなたが選択したコレクショングループを表示することもできます。

コレクションリストのページには次の設定が含まれます。

  • コレクション - コレクションリストのページに表示するコレクションを設定します。この情報は、表示するコレクションを選択するが、選択済みに設定されている場合にのみ使用されます。
  • 表示するコレクションを選択する - 表示するコレクションを選択します。
  • コレクションの並べ替え方法 - コレクションの並べ替え方法を設定します。この設定は、表示するコレクションを選択するが、すべてに設定される場合にのみ使用されます。
  • 行あたりのコレクション数 - コレクションリストのページの各行に表示するコレクションの数を設定します。

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

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

ブログページ

ブログページセクションは、カスタマイズ可能なブログページの主要なセクションです。ブログページには、ブログに公開されているすべての記事が一覧表示されています。ブログの投稿をリスト表示したり、グリッド表示したりすることができます。リスト表示およびグリッド表示では、ブログ記事のタイトルと抜粋 (利用可能な場合) が表示されます。利用可能な抜粋がない場合、ブログ記事の最初の数行の文章が表示されます。

ブログページセクションには次の設定が含まれます。

  • レイアウト - [リスト] または [グリッド] を選択します。
  • 執筆者を表示する - ブログ記事のタイトルの下に執筆者名を表示します。
  • 日付を表示する ブログ記事のタイトルの下に公開日を表示します。

ヒント: ストアに掲載するブログを作成する、または既存のブログに投稿を追加する場合、管理画面から [オンラインストア > [ブログ記事] に移動します。オンラインストアのブログ作成方法の詳細については、ブログを参照してください。

ブログページセクションをカスタマイズする

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

投稿

ブログ記事ページには、個々のブログ記事が表示されます。記事セクションには次の設定が含まれます。

  • 執筆者を表示する - ブログ記事のタイトルの下に執筆者名を表示します。
  • 日付を表示する - ブログ記事のタイトルの下にブログ記事が公開された日付を表示します。
  • ソーシャルメディアでの共有ボタンを表示する - このオプションを選択して、ブログ記事にソーシャルメディアでの共有ボタンを表示します。SNS設定で共有に使用するプラットフォームを選択することができます。

ヒント: ストアに掲載するブログを作成する、または既存のブログに投稿を追加する場合、管理画面から [オンラインストア > [ブログ記事] に移動します。オンラインストアのブログ作成方法の詳細については、ブログを参照してください。

投稿セクションをカスタマイズする

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

カートページ

カートページセクションには次の設定が含まれます。

  • カートの自動更新を有効にする - このオプションを選択し、お客様が変更するとすぐにカートが更新されるようにします。たとえば、お客様がカート内のアイテムの数量を変更すると小計価格が更新されます。
  • カートメモを有効にする - いくつかのテーマでは、このオプションは注文メモと呼ばれています。

[カートページ] セクションをカスタマイズする

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

特集コレクション

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

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

  • 見出し - コレクションの商品の上に表示されるテキストを追加します。デフォルトのテキストは特集コレクションです。
  • コレクション - セクションに表示するコレクションを選択します。
  • 行あたりの商品数 - セクションの各行に表示する商品数を選択します。
  • 行 - セクションに表示する商品の行数を選択します。
  • 商品の販売元を表示する - 商品名の下に各商品の販売元を表示します。
  • 「すべてを表示する」ボタンを表示する - このオプションを選択して、すべてを表示するボタンをセクションの最終行の下に追加します。お客様はこのボタンをクリックすることにより、コレクション全体を表示することができます。

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

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

テキスト付き画像

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

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

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

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

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

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

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

  6. 設定でセクションをカスタマイズします。

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

テキストオーバーレイ付き画像

ホームページにカスタムテキストオーバーレイ付きの大きな画像を特集することができます。

テキストオーバーレイ付き画像セクションには次の設定が含まれます。

  • 画像 - セクションに含める画像を選択します。画像をアップロードしたり、以前にアップロードした画像を使用したりするほか、Burstから無料のストック画像を選択したりすることができます。
  • 画像アラインメント - セクションの画像を左右のどちらに表示するかを選択します。
  • レイアウト - セクションの幅を設定します。
  • セクションの高さ - セクションの高さを設定します。画像がトリミングされないようにするには、[画像に対応] を選択し、画像の高さに基づいてセクションの高さを設定します。
  • テキストサイズ - テキストのサイズを設定します。
  • 見出し - 画像とペアリングするメインのテキストを追加します。テキストオーバーレイ付き画像セクションの名前は、入力した見出しに自動的に変更されます。
  • テキスト - 画像とペアリングするサブテキストを追加します。このテキストは見出しテキストの下に表示されます。
  • ボタンのラベル - ボタンに表示するテキストを追加します。
  • ボタンのリンク - ボタンのリンク先となるURLまたはページを設定します。URLに貼り付けるか、メニューからページを選択します。セクションにボタンを含めない場合は、このフィールドを空白のままにします。

ホームページにテキストオーバーレイ付き画像を追加する

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Debutのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Debutのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Debutのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. [セクションを追加する] をクリックします。
  2. [テキストオーバーレイ付き画像] をクリックし、[選択] をクリックします。
  3. 画像エリアで [画像を選択する] をクリックし、次のいずれかを実施します。- 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。
  4. Burstからストック画像を選択するには、[無料の画像] タブをクリックします。ここで検索ワードを入力するか、画像カテゴリーを閲覧することができます。

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

  6. 設定でテキストオーバーレイ付き画像セクションをカスタマイズします。

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

特集商品

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

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

  • 商品 - ホームページで特集する商品を選択します。
  • 数量セレクターを表示する - ユーザーがカートに追加する数量を指定することができます。
  • バリエーションのラベルを表示する - バリエーションのドロップダウンメニューの上の「サイズ」および「色」などのバリエーションのラベルを表示します。表示されるバリエーションのラベルは、商品のバリエーションのオプション名に基づいて決まります。
  • 販売元を表示する - 商品のブランドまたは販売元を表示します。ブランドや販売元を表示するには、商品に販売元を追加する必要があります。
  • 動的チェックアウトボタンを表示する - お客様がカートをスキップして、特集商品セクションから直接チェックアウトに進むことができます。
  • ソーシャルメディアでの共有ボタンを表示する - お客様が商品をSNSで共有できるようボタンを表示します。

メディア

  • サイズ - 商品メディアのサイズを設定します。
  • 画像ズームを有効にする - お客様が商品画像にマウスオーバーすることによりズームインできるようにします。
  • ビデオループを有効にする - 商品のビデオをループ再生します。このオプションの選択が解除されると、ビデオの再生終了時に再生ボタンが表示されます。

おすすめ商品セクションを追加する

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">デスクトップ</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>管理画面から <strong>[オンラインストア]</strong> &gt; <strong>[テーマ]</strong> の順に移動します。
</li><li><strong>Debutのセクション</strong>の隣にある <strong>[カスタマイズする]</strong> をクリックします。
</li></ol></div><div class="iphone changeable-content"><ol>
<li><a href="https://www.shopify.com/install/detect">Shopifyアプリ</a>から <strong>[Store]</strong> をタップします。
</li><li><strong>[販売チャネル]</strong> セクションで、<strong>[オンラインストア]</strong> をタップします。
</li><li><strong>[テーマを管理する]</strong> をタップします。
</li><li><strong>Debutのセクション</strong>の横にある <strong>[カスタマイズ]</strong> をタップします。
</li><li><strong>[編集]</strong> をタップします。
</li></ol></div><div class="android changeable-content"><ol>
<li><a href="https://www.shopify.com/install/detect">Shopifyアプリ</a>から <strong>[Store]</strong> をタップします。
</li><li><strong>[販売チャネル]</strong> セクションで、<strong>[オンラインストア]</strong> をタップします。
</li><li><strong>[テーマを管理する]</strong> をタップします。
</li><li><strong>Debutのセクション</strong>の横にある <strong>[カスタマイズ]</strong> をタップします。
</li><li><strong>[編集]</strong> をタップします。
</li></ol></div>
</div>
  1. [セクションを追加する] をクリックします。
  2. [特集商品] をクリックし、[選択] をクリックします。
  3. 設定で特集商品セクションをカスタマイズします。
  4. [保存] をクリックします。

ニュースレター

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

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

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

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

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

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

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

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

マップ

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

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

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

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

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

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

リッチテキスト

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

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

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

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

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

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

  2. [リッチテキスト] をクリックし、[選択] をクリックします。

  3. 設定でリッチテキストセクションをカスタマイズします。

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

ビデオ

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

ヒント: カスタムコンテンツセクションでVimeoのビデオをホームページに追加することができます。

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

  • 表紙画像 - ビデオに表紙画像を追加します。ビデオの再生中は、表紙画像は非表示になります。
  • 画像アラインメント - 最も重要な部分が常に見えるように表紙画像を配置します。
  • ビデオリンク - ビデオのYouTube URLを追加します。
  • オーバーレイを表示する - ビデオに色のレイヤーを追加し、テキストを読みやすくできます。ビデオのスタイルを再生ボタン付き画像に設定した場合、ビデオの再生中はオーバーレイが削除されます。
  • スタイル - ビデオのスタイルを設定します。バックグラウンドビデオスタイルはデスクトップのみで利用可能です。お客様がタブレットやモバイルデバイスを使用してストアにアクセスした場合、常に再生ボタン付き画像スタイルで表示されます。
  • ビデオの高さ - ビデオの高さを設定します。
  • 見出し - ビデオに見出しを追加します。
  • テキストサイズ - ビデオにテキストを追加します。ビデオのスタイルを再生ボタン付き画像に設定した場合、ビデオの再生中はテキストが削除されます。

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

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

スライドショー

ホームページに画像スライドショーを追加できます。スライドショーセクションでは、スライドの高さを設定し、テキストとボタンを追加し、スライドショーを自動再生するかどうかを選択できます。

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

  • 画像スライド - スライドショーに含める画像を選択します。画像をアップロードしたり、以前にアップロードした画像を使用したり、Burstから無料のストック画像を選択したりすることができます。各スライドは次のように設定することができます。 - 画像の位置 - スライドショーのフレームで画像アラインメントを選択します。画像の位置に関する詳細については、以下のガイドラインをご覧ください。

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

  • スライドの高さ - スライドショーの高さを設定します。詳しくはスライドの高さがスライドショーに与える影響をご覧ください。

  • テキストサイズ - スライドショーの見出しのサイズを設定します。

  • テキストアラインメント - スライドのテキストの位置を選択します。

  • オーバーレイを表示する - 画像とその画像上のテキストとの間に色のレイヤーを追加します。オーバーレイにより、色のコントラストおよび読みやすさを向上させます。オーバーレイの色と不透過率は、色の設定で設定できます。

  • スライドの自動切り替え - 自動的に再生するようにスライドショーを設定します。

  • スライドを変更する間隔 - スライドを変更する頻度を選択します。

スライドショーの画像トリミングおよび推奨画像サイズについて詳しくは、「スライドショーのガイドライン」を参照してください。

ホームページにスライドショーを追加する

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

  3. 画像スライドを追加するには、次の手順を実行します。

    1. コンテンツエリアで [画像スライドを追加する] をクリックします。
    2. 画像で [画像を選択する] をクリックします。コンピューターから画像をアップロードするには、[アップロード] をクリックします。Burstから無料のストック画像を使用するには、[無料の画像] をクリックします。
    3. スライドショーでどのように画像の位置を調整するかを選択するには [画像の位置] ドロップダウンメニューで位置を選択します。画像の位置については詳しく知るには、以下のガイドラインをご覧ください。
    4. 画像スライドにテキストを追加するには [見出し] フィールド [小見出し] フィールド、またはその両方にテキストを入力します。
    5. 画像スライドにボタンを追加するには、ボタンのラベルフィールドにテキストを入力します。ボタンのリンクフィールドで、ボタンをリンクさせるオンラインストアの部分を選択します。

  4. 設定で、スライドショーセクションをカスタマイズします。

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

スライドショーのガイドライン

以下の設定と推奨画像を使用して、オンラインストアでのスライドショーの表示方法をコントロールできます。スライドの表示方法は以下の要素によって決まります。

  • 画像の寸法
  • 画像の位置設定
  • スライドの高さ設定
  • 画像の幅と高さの比

画面のサイズと形状が異なるため、スライド表示がモバイル端末とデスクトップ端末で異なる場合があります。

推奨画像サイズ

スライドショー画像で推奨される寸法は、スライドの高さ設定によって異なります。次のガイドラインを使用してください。

設定時の画像サイズの推奨事項
スライドの高さ設定 推奨される幅 推奨される高さ
最初の画像に対応 1200ピクセル 600ピクセル
小 1200ピクセル 475ピクセル
中 1200ピクセル 489ピクセル
大 1200ピクセル 775ピクセル

スライドの高さ設定を表示または変更するには、スライドショーの作成手順のステップ5を参照します。

画像のトリミング

画像のトリミングをコントロールする、あるいはすべてトリミングされてしまうことを回避するためのステップを実行できます。

画像のトリミング方法をコントロールする

次の状況では、一部の画面サイズで画像のトリミングが発生することがあります。

  • 画像の幅と高さの比が同じではありません。
  • スライドの高さが [小] [中] または [大] に設定されています。
  • スライドの高さは最初の画像に適応するに設定され、画像は端末の画面やブラウザーのウィンドウよりも高くなります。

[画像の位置] の設定を使用して、画像のトリミングをコントロールできます。

各画像について、トリミングが発生したときに表示する部分を選択することができます。次の例では、一部の画面サイズで同じ画像がどのようにトリミングされるかを確認できます。左側のスライドでは画像の位置が [中心] に設定されています。右側のスライドでは画像の位置が [左上] に設定されています。

画像の位置設定に応じて別々にトリミングされるスライドの例。

画像の位置設定を表示または変更するには、スライドショーの作成手順のステップ10を参照します。

画像のトリミングを避ける

スライドショーで画像のトリミングを避けるには、次のステップを実行してください。

  • スライドの高さを最初の画像に対応に設定します。
  • 幅が長さに対して2倍の画像を使用してください。このような画像の幅と高さの比は2:1です。推奨される寸法は1200ピクセルx600ピクセルです。
  • すべてのスライドの幅と高さの比が同じであることを確認してください。スライドの比はピクセル単位の寸法よりも重要です。

次の例では、デスクトップとモバイルデバイスに2:1の比のスライドショー画像が表示されます。

スライドはトリミングされることなくデスクトップやモバイルデバイス上に表示されます。

スライドの高さ

スライドショーセクションの幅は、常にブラウザーウィンドウの100%です。スライドの高さはその幅に比例します。画面サイズが異なるため、スライドの幅と高さは端末によって異なります。スライドの高さは、スライドの高さ設定の影響を受けます。

最初の画像に対応のスライドの高さ設定を使用して、スライドショーの高さを最初の画像の高さに合わせることができます。この設定は、すべての画像が同じサイズであるか、幅と高さの比が同じ場合に最適です。画像のサイズや比が異なる場合は、スライドの順序を変更して異なる高さでどのように表示されるかを確認できます。

次の例では、最短のスライドが最初に配置されます。

より低いスライドによって他の2つのスライドの高さが決まります。他のスライドは高いので、上部と下部でトリミングされます。

次の例では、より大きなスライドが最初に配置されます。

中程度の高さのスライドにより他の2つのスライドの高さが決まります。より高いスライドは上部と下部でトリミングされます。より低いスライドは画像の端がトリミングされます。

代わりに [小]、[中]、[大] のいずれかの高さの設定を使用する場合は、スライドの推奨画像サイズを参照してください。

画像比

スライドショーで画像のトリミングを避けたい場合は、画像の幅と高さの比を2:1にすることをおすすめします。

デスクトップディスプレイではなく、モバイルデバイスのトリミングによる影響を考慮する場合、正方形の画像、または幅よりも高さのある画像を使用してください。次のスライドの例は、幅と高さの比率が1:1の正方形の画像を表示しています。

正方形のスライドがデスクトップとモバイルデバイスに表示されます。画像はデスクトップ端末でトリミングされますが、モバイルデバイスでトリミングされません。

次のスライドの例は、幅と高さの比率が2:3のポートレート画像を表示しています。

高いスライドがデスクトップとモバイルデバイスに表示されます。画像はデスクトップ端末でトリミングされますが、モバイルデバイスでトリミングされません。

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

無料体験を試す