オンラインストアの機能

セクションを使用してオンラインストアのどのページにも機能を追加できます。画像、テキスト、ブランドの色などを含むセクションを選択、追加、設定できます。

一部のページには、告知バー、ヘッダー、フッターなどのデフォルトセクションがあります。これらのセクションはすべてのページに表示されます。

告知バー

告知バーを使うと、どのページからでも重要な情報をお客様に知らせることができます。セクション自体に設定はありませんが、最大12個の異なる告知ブロックをカスタマイズして表示することができます。告知バーにクリック可能なリンクを追加して、特定のページにお客様をリダイレクトすることができます。

告知ブロック

告知バーセクションの告知ブロックの設定
設定 説明
テキスト お客様に表示する告知。
カラースキーム 告知バーに使用する配色。
リンク 告知バーをクリックしたお客様をリダイレクトするリンクです。

ヘッダー

ヘッダーは、テーマのすべてのページに表示されます。

セクション設定

見出しセクションの設定
設定 説明
ロゴ画像 ストアのロゴ。
ロゴの幅をカスタマイズする ロゴの幅は、50ピクセルから250ピクセルの10の倍数に設定します。デフォルトでは100ピクセルです。
大画面でのロゴの位置

お客様がデスクトップなどの大画面でサイトを表示する際、ヘッダーでロゴが表示される場所は以下のとおりです。

  • 左中央 - ロゴは垂直方向に中央揃えし、左端揃えにして、メインメニューと並ぶように表示します。
  • 左上 - ロゴはメインメニューの上に表示し、ロゴとメニュー項目を左端揃えにします。
  • 左中央 (デフォルト) - ロゴはメインメニューの上に表示し、ロゴとメニュー項目を中央揃えにします。
メニュー メインメニューに使用するメニュー。
区切り線を表示する ヘッダーとページのコンテンツを視覚的に区切る線を表示します。
常時表示のヘッダーを有効にする お客様が上にスクロールして戻ると、ヘッダーが再表示されます。お客様が下にスクロールすると、表示されなくなります。

フッター

フッターはテーマ内のすべてのページに表示されます。

セクション設定

フッターセクションの設定
設定 説明
カラースキーム フッターの背景は、[アクセント1]、[アクセント2]、[背景1]、[背景2]、[反転] から選択できます。
メール登録を表示する お客様がニュースレターとマーケティングに登録できるメール登録フォームを追加します。
見出し メール登録を表示する」フォームのタイトル。「メール登録を表示する」が有効ではない場合は表示されません。
SNSのアイコン テーマ設定でプロフィールリンクを入力したSNSプラットフォームのアイコンを表示します。
国/地域セレクターを有効にする セレクターを追加して、あなたが決済設定で有効にした国や地域の中から、お客様が選択できるようにします。これによりお客様は自分で選んだ通貨で商品価格を確認できます。
言語セレクターを有効にする セレクターを追加して、あなたが言語設定で有効にした国や地域の中から、お客様が選択できるようにします。これによりお客様は自分で選んだ言語でストアを閲覧できます。
決済アイコンを表示する ストアで有効になっている決済方法のアイコンを表示します。お客様がストアにアクセスすると、これらのアイコンが絞り込まれ、現在のお客様の地域および通貨でサポートされている決済方法だけが表示されます。

メニューブロック

フッターセクションのメニューブロックの設定
設定 説明
見出し ブロックのタイトル。
メニュー ブロックに表示するメニュー。

テキストブロック

[テキスト] ブロックは、ストアの詳細、プロモーション、連絡先情報などの重要な情報を目立たせるために使用できます。

フッターセクションのテキストブロックの設定
設定 説明
見出し ブロックのタイトル。
サブテキスト ブロックに表示するテキスト。

画像ブロック

フッターセクションの画像ブロックの設定
設定 説明
画像 ブロックに表示する画像。
画像の幅 画像の幅を設定します。50ピクセルから200ピクセルの5の倍数に設定できます。デフォルトでは100ピクセルです。
大画面での画像アラインメント

次の条件でブロック内の画像を揃えます。

  • - 画像をブロックの左に揃えます。
  • 中央 (デフォルト) - 画像をブロックの中央に揃えます。
  • - 画像をブロックの右に揃えます。

ブログ記事

Shopifyストアにブログがある場合、[ブログ記事] セクションを使用して、ブログからの投稿を目立たせることができます。[ブログ記事] セクションの各ブログ記事には、記事の抜粋の最初の55ワードが表示されます。ブログ記事に抜粋がない場合は、記事の最初の30ワードが表示されます。

セクション設定

ブログ記事セクションの設定
設定 説明
見出し セクションのタイトル。
ブログ ブログ記事セクションに表示するブログ。デフォルトでは、[ブログ] ページのアルファベット順に最初のブログが表示されます。
ブログ記事 セクションに表示するブログ記事数。記事数は最大で3件です。
記事のサムネイルを表示する ブログ記事のサムネイルが表示されます。推奨されるアスペクト比は2:3です。
日付を表示する ブログ記事が作成された日付を表示します。
筆者を表示する ブログ記事の筆者を表示します。
サブ背景を表示する テキストの配色に応じて、背景色を調整します。
ブログに表示されているよりも多くのブログ記事が含まれている場合、「すべてを表示」ボタンを有効にする ブログに [ブログ記事] フィールドで設定した記事数よりも多いブログ記事がある場合、この設定では、お客様がブログのページに移動できるようにする「すべてを表示」ボタンが表示されます。

ブログを選択する

  1. テーマエディタで、ブログ記事セクションのタイトルをクリックします。
  2. [ブログ] セクションで、[変更] をクリックします。
  3. ブログを選択します。
  4. [選択] をクリックし、[保存] をクリックします。

コラージュ

ビデオ、画像、商品、およびコレクションのコラージュを作成できます。それぞれの [コラージュ] セクションには、3つのブロックが含まれます。デフォルトでは、セクションには、ビデオ、商品、およびコレクションのブロックが含まれています。

3つを超えるブロックのコラージュを作成するには、最初のコラージュセクションの下にコラージュセクションを追加し、下のコラージュセクションには [見出し] の値を含めないようにします。それらのコラージュセクションは、単一のセクションとして一連の流れのように表示されます。

セクション設定

コラージュセクションの設定
設定 説明
見出し セクションのタイトル。
デスクトップのレイアウト

ブロックがデスクトップに表示される方法。

  • 左側の大きなブロック (デフォルト) - セクションの最初のブロックは左に、他のブロックよりも大きなサイズで表示されます。
  • 右側の大きなブロック - セクションの最後のブロックは右に、他のブロックよりも大きなサイズで表示されます。
  • モバイルのレイアウト

    モバイル機器でのブロックの表示方法。

    • コラージュ - 次のようにコラージュレイアウトで画像を表示します。
      • [デスクトップのレイアウト][左側の大きなブロック] が有効になっている場合、セクションの最初のブロックは上部に、他のブロックよりも大きなサイズで表示されます。
      • [デスクトップのレイアウト][右側の大きなブロック] が有効になっている場合、セクションの最後のブロックは下部に、他のブロックよりも大きなサイズで表示されます。
    • - 画像をすべて同じサイズで、列に表示します。

    ビデオブロック

    コラージュセクションのビデオブロックの設定
    設定 説明
    カバー画像 お客様がビデオを再生する前に表示される画像。
    リンク YouTubeまたはVimeoの動画へのリンク。動画は一般公開されている必要があります。
    動画の代替テキスト ビデオの代替テキスト。スクリーンリーダーを使用するお客様向けにビデオについて説明します。
    画像の余白を追加する 画像がトリミングされないように余分のスペースを追加します。画像がトリミングされないようにするには、[カバー画像] を16:9のアスペクト比でアップロードします。

    商品ブロック

    コラージュセクションの商品ブロックの設定
    設定 説明
    商品 表示する商品。
    サブ背景を表示する テキストの配色に応じて、背景色を調整します。
    マウスオーバー時に2番目の画像を表示する お客様が商品画像にカーソルを合わせると、商品に2枚目の商品画像がある場合は、その画像が表示されます。
    画像の余白を追加する 画像がトリミングされないように余分のスペースを追加します。画像がトリミングされないようにするには、商品画像を16:9のアスペクト比でアップロードします。

    コレクションブロック

    コラージュセクションのコレクションブロックの設定
    設定 説明
    コレクション 表示するコレクション。
    画像の余白を追加する 画像がトリミングされないように余分のスペースを追加します。画像がトリミングされないようにするには、商品画像を16:9のアスペクト比でアップロードします。
    カラースキーム コレクションブロックセクションの背景色。アクセント1、アクセント2、背景1、背景2、反転から選択できます。

    画像ブロック

    コラージュセクションの画像ブロックの設定
    設定 説明
    画像 表示させる画像。
    画像の余白を追加する 画像がトリミングされないように余分のスペースを追加します。画像がトリミングされないようにするには、商品画像を16:9のアスペクト比でアップロードします。
    カラースキーム 画像ブロックの背景色。アクセント1、アクセント2、背景1、背景2、反転から選択できます。

    折りたたみ可能なコンテンツ

    折りたたみ可能なコンテンツセクションでは、行を折りたたんだり展開したりしてコンテンツを表示し、折りたたみ可能なコンテンツの左または右に画像を表示する設定を行えます。

    セクション設定

    折りたたみ可能なコンテンツセクションの設定
    設定 説明
    キャプション 折りたたみ可能なコンテンツセクションのキャプションはオプションです。セクションの見出しの上部に表示されます。
    見出し 折りたたみ可能なコンテンツセクションの見出し。
    見出しの配置 セクションの見出しの配置を選択します。[左]、[中央] (デフォルト)、[右] から選択できます。
    レイアウト

    折りたたみ可能なコンテンツのレイアウトを選択します。

    • コンテナなし (デフォルト)
    • 行コンテナ - 折りたたみ可能な各行は影付きボックスに含まれています
    • セクションコンテナ - 折りたたみ可能なコンテンツセクション全体は影付きのボックスに含まれています
    カラースキーム 折りたたみ可能なコンテンツセクションの背景色。[アクセント1]、[アクセント2]、[背景1]、[背景2]、[反転] から選択します。
    コンテナの配色 折りたたみ可能なコンテンツコンテナの背景色。[アクセント1]、[アクセント2]、[背景1]、[背景2]、[反転] から選択します。選択した配色は、[レイアウト] オプションが [行] コンテナ、または [セクション] コンテナに設定されたときに初めて表示されます。
    最初の折りたたみ可能な行を開く チェックを入れると、デフォルトでは、折りたたみ可能なコンテンツの最初の行が展開されます。
    画像 セクションの画像。[変更] ボタンをクリックして、画像を変更または削除します。
    代替テキストを編集 画像の簡潔な説明を追加して、SEOを向上させ、スクリーンリーダーを使用しているお客様のために画像の説明を入力します。
    画像比 セクション画像の画像比:
    • 画像に合わせる (デフォルト) - 画像のアスペクト比を使用します。この比率を使用すると、画像がトリミングされないようになります。
    デスクトップのレイアウト 画像または折りたたみ可能な行のどちらが最初に表示されるかを選択します。デフォルトの設定では、テキストが最初に表示されます。モバイル版では画像がいつも最初に表示されます。
    最大幅 折りたたみ可能なセクションの最大幅を1200ピクセルから1600ピクセル (デフォルト) の間から選択します。
    アクセントアイコン 折りたたみ可能な各行を開始するアクセントアイコンの色を変更します。[アクセント1]、[アクセント2]、[アウトライン]、[テキスト] (デフォルト) から選択します。

    折りたたみ可能な行のブロック

    折りたたみ可能な行ブロックの設定
    設定 説明
    見出し 折りたたみ可能な行の見出し
    行のコンテンツ 折りたたみ可能な行のコンテンツ。コンテンツは書式化するか、URLリンクを含めることができます。この機能は [ページからの行のコンテンツ] とあわせて使用できます。
    ページからの行のコンテンツ 他のページからの既存のコンテンツを、折りたたみ可能な行に挿入できます。[変更] をクリックしてページを選択または削除します。この機能は、[行のコンテンツ] とあわせて使用できます。
    アイコン 折りたたみ可能なコンテンツの前に表示するアイコンを、ドロップダウンリストから選択します。デフォルトでは、チェックマークのアイコンが選択されています。

    コレクションリスト

    強調表示するコレクションのリストを追加できます。コレクションリストには最大16個のコレクションブロックを追加できます。

    セクション設定

    コレクションリストセクションの設定
    設定 説明
    見出し セクションのタイトル
    画像比 コレクションの記事のサムネイルには次の画像比があります。
    • 画像に合わせる - 画像のアスペクト比を使用します。この比率を使用すると、画像がトリミングされないようになります。
    • 縦長 - 画像を2:3の比率で使用できるようにトリミングします。
    • 正方形 (デフォルト) - 画像をトリミングして1:1の比率を使用します。
    カラースキーム コレクションリストセクションおよび画像の余白の背景色。アクセント1、アクセント2、背景1、背景2、反転から選択できます。
    モバイルでスワイプを有効にする モバイル機器での表示が列から行に変更され、お客様が横にスワイプするとコレクションブロックがさらに表示されます。
    画像の余白を追加する 画像がトリミングされないように余分のスペースを追加します。画像がトリミングされないようにするには、商品画像を16:9のアスペクト比でアップロードします。
    リストに表示されているよりも多くのコレクションが含まれている場合、「すべてを表示」ボタンを有効にする コレクションリストに、[表示するコレクションの最大数] フィールドで設定された数よりも多いコレクションがある場合、「すべてを表示」ボタンが表示され、お客様はコレクションのリストに移動できます。

    コレクションを選択する

    1. テーマエディタで、コレクションを追加する [コレクション] ブロックをクリックします。
    2. [コレクションを選択] をクリックします。
    3. コレクションをクリックし、[選択] をクリックします。

    お問い合わせフォーム

    お問い合わせフォームでは、ストアの [送信元のメールアドレス] にすべての投稿を送信します。管理画面の [ストアの詳細] 設定ページで送信元のメールアドレスを変更できます。

    フォームには次のフィールドがあります。

    • Name
    • メールアドレス (必須)
    • 電話番号
    • コメント

    お問い合わせフォームでは、次の配色が使用されます。

    • 背景色は、[背景1] の色です。
    • テキストとテキストフィールドの概要の色は、[テキスト] の色です。
    • [送信] ボタンの色は、[アクセント1] の色です。

    カスタムLiquid

    自身のLiquidコードを追加して、カスタムセクションを作成できます。

    • ダウンロードしたアプリの説明書に記載されているアプリのスニペットを追加して、アプリを簡単にページに導入することができます。
    • エディタでカスタムLiquidコードを直接追加します。

    メール登録者バナー

    パスワードページに、ストアがオープンした際にお客様が通知を受け取るためのメールアドレスを入力するセクションを追加できます。メールアドレスが登録されるたびに、お客様アカウントが作成されます。

    セクションには次の3つのデフォルトブロックがあります。

    • 見出し
    • 小見出し
    • メールフォーム

    セクション設定

    メール登録者バナーセクションの設定
    設定 説明
    背景画像 メール登録者バナーの背景画像。[変更] をクリックして、画像を変更または削除します。画像が削除されると、テーマの付属画像が表示されます。[背景画像を表示] チェックボックスの選択を解除すると、この画像は非表示になります。
    代替テキストを編集 検索エンジンの最適化 (SEO) のために画像のalt属性を設定し、スクリーンリーダーを使用しているお客様のための画像の説明を入力するには、これをクリックします。
    画像のオーバーレイ不透明率 オーバーレイでメール登録者バナー画像をぼやかします。スライダーを使ってオーバーレイの不透明率を設定します。デフォルトは0%です。
    背景画像を表示 メール登録者バナーの背景画像を表示するには、このボックスにチェックを入れます。
    バナーの高さ

    ドロップダウンメニューを使用して、メール登録者バナー画像の高さを設定します。[画像に合わせる]、[小]、[中] (デフォルト)、[大] から選択します。

    デスクトップのコンテンツ位置 デスクトップコンピューター用のメール登録者バナーの位置を設定します。[上]、[中央]、[下]、および [右]、[中央]、[左] から選択します。デフォルトのオプションでは、両方とも [中央] です。


    デスクトップ版では、テキストボックスの一部が画像と重なっています。モバイル版では、画像の下にテキストボックスが表示されます。

    デスクトップ上にコンテナを表示 画像上のテキストボックスに、デスクトップコンピューターで買い物をしているお客様向けのメール登録者バナー画像テキストを入力します。
    デスクトップのコンテンツ配置 デスクトップコンピューター用の画像バナーテキストの配置を設定します。[右]、[左]、[中央] (デフォルト) から選択します。
    カラースキーム メール登録者バナーセクションおよび画像の余白の背景色。[アクセント1]、[アクセント2]、[背景1] (デフォルト)、[背景2]、[反転] から選択できます。


    デスクトップでは、[デスクトップ上にコンテナを表示] オプションが選択されている場合にのみ、選択した配色が表示されます。モバイルでは、[モバイルで画像の下にコンテンツを表示] が選択されている場合にのみ、選択した配色が表示されます。

    モバイルのコンテンツ配置 モバイルデバイス用の画像バナーテキストの配置を設定します。[右]、[左]、[中央] (デフォルト) から選択します。
    モバイルで画像の下にコンテンツを表示 モバイルデバイスのメール登録者バナー画像の下にコンテンツが表示されます。

    見出しのブロック

    メール登録者セクションの見出しブロックの設定
    設定 説明
    見出し セクションのタイトル。

    小見出しのブロック

    メール登録者セクションの小見出しブロックの設定
    設定 説明
    説明 セクションの説明。
    テキストスタイル メール登録者セクションのテキストのスタイルを変更します。[本文] (デフォルト) と [サブタイトル] から選択します。

    メール登録

    お客様がメールアドレスを入力して、ニュースレターやマーケティングに登録するセクションを追加します。お客様が登録すると、管理画面にお客様アカウントが作成されます。

    セクションには次の3つのデフォルトブロックがあります。

    • 見出し
    • 小見出し
    • メールフォーム

    セクション設定

    メール登録セクションの設定
    設定 説明
    カラースキーム メール登録セクションの背景色。アクセント1、アクセント2、背景1、背景2、反転から選択できます。
    セクションを全幅にする セクションをブラウザーウィンドウの全幅にします。

    見出しのブロック

    コレクションリストセクションの見出しブロックの設定
    設定 説明
    見出し セクションのタイトル。

    小見出しのブロック

    コレクションリストセクションの小見出しブロックの設定
    設定 説明
    説明 セクションの説明。

    メールフォーム

    メールフォームのブロックには、お客様がメールアドレスを入力してマーケティングにサインアップできるフィールドが表示されます。ブロックにはカスタマイズ可能な設定はありません。

    特集商品

    特定の商品を特集するセクションを追加します。

    セクション設定

    特集商品セクションの設定
    設定 説明
    商品 セクションで特集する商品。
    サブ背景を表示する 特集商品をサブ背景の配色の上に表示します。
    ビデオループを有効にする ビデオをもう一度再生できるようにします。お客様は再生を開始するためにクリックする必要があります。

    セクションのブロック

    [特集商品] セクションには次のブロックを追加できます。

    特集商品セクションで利用可能なブロック
    ブロック 設定
    テキスト 次の設定で特集商品のテキストを入力します。
    • テキスト: テキストまたは動的ソースが利用できます。
    • テキストスタイル: [本文][字幕]、または [大文字] の中から選択します。
    Title このブロックにカスタマイズ可能な設定はありません。
    価格 このブロックにカスタマイズ可能な設定はありません。
    バリエーションピッカー ボタンまたはドロップダウンメニューのいずれかを選択します。
    数量セレクター このブロックにカスタマイズ可能な設定はありません。
    動的チェックアウトボタンを表示する [決済] 設定で有効にした動的チェックアウトオプションを表示します。
    提供する お客様が商品をSNSで共有できるようにするクリック可能なテキスト。
    商品評価 商品の平均評価を星印と括弧内のレビュー数で表示します。例: ★★★★★ (8)。また、Shopify Product Reviewsなどの商品レビューアプリが必要であり、メタフィールド定義reviews.rating_countreviews.ratingに必要です。
    カスタムLiquid カスタムLiquidコードまたはHTMLコードを追加します。

    特集コレクション

    1つのコレクションにある商品を表示するセクションを追加します。

    セクション設定

    特集コレクションセクションの設定
    設定 説明
    見出し セクションのタイトル。
    コレクション 商品を表示させるコレクション。
    表示する商品の最大数 表示するコレクションの商品数は、偶数である必要があります。最小値が2で、最大値は12です。
    コレクションに表示されているよりも多くの商品がある場合、「すべてを表示」ボタンを有効にする コレクションの商品数が、[表示する商品の最大数] フィールドで設定された数よりも多い場合、「すべてを表示」ボタンが表示され、お客様はコレクションのページに移動できます。
    モバイルでスワイプを有効にする モバイル機器での表示が列から行に変更され、お客様が横にスワイプするとさらに商品が表示されます。
    画像比 商品画像の画像比:
    • 画像に合わせる - 画像のアスペクト比を使用します。この比率を使用すると、画像がトリミングされないようになります。
    • 縦長 - 画像を2:3の比率で使用できるようにトリミングします。
    • 正方形 - 画像を1:1の比率で使用できるようにトリミングします。
    マウスオーバー時に2番目の画像を表示する お客様が商品画像にカーソルを合わせると、商品に2枚目の商品画像がある場合は、その画像が表示されます。
    余白を追加する 画像がトリミングされないように、画像に余白を追加します。
    画像の枠線を表示する 商品画像に細い枠線を追加します。
    販売元を表示する 商品の販売元を表示します。
    商品の評価を表示 商品の平均評価を星印と括弧内のレビュー数で表示します。例: ★★★★★ (8)。また、Shopify Product Reviewsなどの商品レビューアプリが必要であり、メタフィールド定義reviews.rating_countreviews.ratingに必要です。

    画像バナー

    画像バナーセクションでは、1つまたは2つの画像、およびボタン付きテキストボックスをサポートしています。2つの画像を使用すると、デスクトップでは2つの画像が並んで表示されます。モバイルでは、画像を横に並べて表示するか、縦列で表示するかを選択できます。

    デスクトップ版では、テキストボックスの一部が画像と重なっています。モバイル版では、画像の下にテキストボックスが表示されます。デスクトップ版とモバイル版の両方で、テキストの配置は、[右]、[左]、[中央] のいずれかに変更できます。

    セクション設定

    画像バナーセクションの設定
    設定 説明
    最初の画像 バナーのメイン画像。セクションに2つの画像が追加されていると、お客様がデスクトップ版またはモバイル版のどちらを使用しているかに応じて、この画像が左側または上部に表示されます。
    代替テキストを編集 検索エンジンの最適化 (SEO) のために画像のalt属性を設定し、スクリーンリーダーを使用しているお客様のための画像の説明を入力するには、これをクリックします。
    2番目の画像 バナーの2番目の画像。セクションに2つの画像が追加されていると、お客様がデスクトップ版またはモバイル版のどちらを使用しているかに応じて、この画像が右側または下部に表示されます。
    画像のオーバーレイ不透明率 バナー画像にオーバーレイを追加します。スライダーを使って、オーバーレイの不透明率を設定します。デフォルトは0%です。
    画像バナーの高さ

    ドロップダウンメニューを使用して、バナー画像の高さを設定します。

    • - デスクトップ: 420ピクセル、モバイル: 280ピクセル
    • (デフォルト) - デスクトップ: 560ピクセル、モバイル: 340ピクセル
    • - デスクトップ: 720ピクセル、モバイル: 390ピクセル
    セクションの高さを最初の画像サイズに合わせる セクションの高さを最初の画像の高さに設定します。モバイル版では、両方の画像が最初の画像の高さに調整されています。このボックスにチェックを入れると、画像バナーの高さ設定が上書きされます。
    デスクトップのコンテンツ位置 デスクトップ画像バナーの位置を設定します。[上]、[中央]、[下]、および [右]、[左]、[中央] から選択します。
    デスクトップ上にコンテナを表示 バナー画像上のテキストボックスに、デスクトップコンピューターで買い物をしているお客様向けのバナー画像テキストを入力します。
    デスクトップのコンテンツ配置 デスクトップコンピューター用の画像バナーテキストの配置を設定します。[右]、[左]、[中央] から選択します。
    カラースキーム 画像バナーセクションおよび画像の余白の背景色。アクセント1、アクセント2、背景1、背景2、反転から選択できます。選択した配色は、[デスクトップ上にテキストボックスを表示する] オプションが選択されている場合にのみ表示されます。
    モバイルのコンテンツ配置 モバイルデバイス用の画像バナーテキストの配置を設定します。[右]、[左]、[中央] から選択します。
    モバイルで画像を重ねる セクションに2つの画像を追加すると、画像が縦に並べて表示されます。横に並べて表示されることはありません。
    モバイル上にコンテナを表示 バナー画像上のテキストボックスに、モバイルデバイスで買い物をしているお客様向けのバナー画像テキストを入力します。

    見出しのブロック

    画像バナーセクションの見出しブロックの設定
    設定 説明
    見出し テキストボックスのタイトルに使用する大きなテキスト。
    見出しのサイズ 見出しテキストのサイズを変更します。中 (デスクトップ: 40ピクセル、モバイル: 30ピクセル) と大 (デスクトップ: 52ピクセル、モバイル: 40ピクセル) のいずれかを選択します。

    テキストブロック

    画像バナーセクションのテキストブロックの設定
    設定 説明
    説明 段落スタイルのテキストを表示します。
    テキストスタイル 画像バナーのテキストのスタイルを変更します。[本文]、[サブタイトル]、および [大文字] から選択します。

    ボタンのブロック

    画像バナーセクションのボタンブロックの設定
    設定 説明
    最初のボタンのラベル 最初のボタンに表示されるテキスト。
    最初のボタンのリンク 最初のボタンのリンク先にするURL。
    アウトラインボタンのスタイルを使用する ボタンのスタイルを調整して、無地の背景にするのではなく、ボタンのアウトラインにします。
    2番目のボタンのラベル 2番目のボタンに表示されるテキストです。
    2番目のボタンのリンク 2番目のボタンのリンク先にするURL。
    アウトラインボタンのスタイルを使用する ボタンのスタイルを調整して、無地の背景にするのではなく、ボタンのアウトラインにします。

    テキスト付き画像

    オプションのボタン付き画像とテキストブロックを含むセクションを追加して、お客様を新しいページに誘導できます。選択した商品、コレクション、ブログ記事をクローズアップできるよう、テキストと画像を組み合わせます。出品状況やスタイルの詳細を追加したり、レビューを提供したりできます。

    セクション設定

    テキスト付き画像セクションの設定
    設定 説明
    画像 セクションの画像。[変更] ボタンをクリックして、画像を変更または削除します。
    代替テキストを編集 検索エンジンの最適化 (SEO) のために画像のalt属性を設定し、スクリーンリーダーを使用しているお客様のための画像の説明を入力するには、これをクリックします。
    画像の高さ 画像の高さを選択します。
    • 画像に合わせる (デフォルト)
    デスクトップ画像の幅 画像の幅:
    • (デフォルト)
    デスクトップ画像の配置 画像とテキストのどちらを最初に表示するかを選択します。モバイル版のデフォルトレイアウトでは、画像が最初に表示されます。
    • 画像を最初にする (モバイル版のデフォルト)
    • 画像の表示秒数
    デスクトップのコンテンツ位置 デスクトップコンピューター用の画像の位置:
    • (デフォルト)
    • 中央
    デスクトップのコンテンツ配置 デスクトップコンピューター用のテキストの配置:
    • (デフォルト)
    • 中央
    コンテンツのレイアウト 画像とテキストボックスを互いに重ねることができます。[オーバーラップなし] を選択すると、コンテンツはテキストと画像を表示できるように調整されます。
    • オーバーラップ
    • オーバーラップなし (デフォルト)
    カラースキーム テキスト付き画像および画像の余白の背景色。アクセント1、アクセント2、背景1、背景2、反転から選択できます。
    モバイルのレイアウト モバイルデバイス用のコンテンツの配置を選択します。
    • (デフォルト)
    • 中央

    見出しのブロック

    テキスト付き画像セクションの見出しブロックの設定
    設定 説明
    見出し セクションのタイトルテキストです。
    見出しのサイズ 見出しテキストのサイズ:
    • (デフォルト)

    テキストブロック

    テキスト付き画像セクションのテキストブロックの設定
    設定 説明
    コンテンツ テキストセクションに段落スタイルのテキストを表示します。
    テキストスタイル コンテンツテキストのスタイル:
    • 本文 (デフォルト)
    • サブタイトル

    ボタンのブロック

    テキスト付き画像セクションのボタンブロックの設定
    設定 説明
    ボタンのラベル ボタンに表示されるテキスト。
    ボタンのリンク ボタンのリンク先にするURL。

    キャプションブロック

    テキスト付き画像セクションのキャプションブロックの設定
    設定 説明
    テキスト 画像にタグラインまたはキャプションを追加します。テキストは、テキスト付き画像セクションの下部に表示されます。
    テキストスタイル コンテンツテキストのスタイル:
    • 大文字 (デフォルト)
    • サブタイトル
    テキストサイズ コンテンツテキストのサイズ:
    • (デフォルト)

    マルチカラム

    マルチカラムセクションを使用して列レイアウトにコンテンツを表示し、列の下にボタンを追加して、お客様を新しいページに誘導できます。選択した商品、コレクション、ブログ記事をクローズアップできるよう、テキストと画像を組み合わせます。出品状況やスタイルの詳細を追加したり、レビューを提供したりできます。

    セクション設定

    マルチカラムセクションの設定
    設定 説明
    見出し セクションのタイトル。
    画像の幅

    列に追加された画像の幅。

    • 列の全幅 - 画像の幅は列と同じサイズです。
    • 列の半分の幅 - 画像の幅は列の半分のサイズです。
    • 列の幅の1/3 - 画像の幅は列のサイズの3分の1です。
    画像比

    画像には次の画像比があります。

    • 画像に合わせる - 画像のアスペクト比を使用します。この比率を使用すると、画像がトリミングされないようになります。
    • 縦長 - 画像を2:3の比率で使用できるようにトリミングします。
    • 正方形 - 画像を1:1の比率で使用できるようにトリミングします。
    • 円形 - 画像をトリミングして円形で表示します。
    列の配置

    列内の画像とテキストには次のアラインメントがあります。

    • 左 (デフォルト) - 画像とテキストを左揃えにします。
    • 中央 - 画像とテキストを中央揃えにします。
    サブ背景

    次の背景に基づいてセクションのスタイルを調整します。

    • なし - 列とセクションの背景は [背景1] の色のままで、列に余白はありません。
    • 列の背景として表示する - 列の背景はテキストの不透明色で、列に余白を追加します。
    • セクションの背景を表示する - セクションの背景はテキストの不透明色で、列の背景は [背景1] となり、列に余白を追加します。
    ボタンのラベル ボタンに表示されるテキスト。
    ボタンのリンク ボタンのリンク先にするURL。
    モバイルでスワイプを有効にする モバイル機器での表示が列から行に変更され、お客様が横にスワイプするとさらに列のブロックが表示されます。

    列のブロック

    1つのセクションに追加できるのは、12列までです。ブロックが1~3列の場合、デスクトップには1行で表示されます。ブロックが4列以上の場合、2列のレイアウトで表示されます。モバイル版では、[モバイルでスワイプを有効にする] オプションが有効になっていない場合、列ブロックは1列に表示されます。

    マルチカラムセクションの列ブロックの設定
    設定 説明
    画像 表示させる画像。
    見出し 列のタイトル。
    説明 列の段落テキストです。

    ページ

    セクションにカスタムページのコンテンツを表示するようにできます。この場合、ページのコンテンツ全体がセクションに取り込まれます。ただし、テンプレートからLiquidコードは取り込まれません。

    セクションの配色では、以下のように設定されています。

    • デフォルトでは、テキストは [テキスト] の色です。ページ上のテキストに適用されるスタイリングは、セクションで設定されます。
    • ハイパーリンクは[アクセント1] の色です。

    セクション設定

    ページセクションの設定
    設定 説明
    ページ 表示するオンラインストアのページ。

    リッチテキスト

    ヘッダー、段落コンテンツ、お客様を新しいページにリンクさせるボタンと合わせて、リッチテキストセクションを追加できます。

    セクション設定

    リッチテキストセクションの設定
    設定 説明
    カラースキーム リッチテキストセクションの背景。アクセント1、アクセント2、背景1、背景2、反転から選択できます。
    セクションを全幅にする セクションのサイズはデフォルトで全幅です。

    見出しのブロック

    リッチテキストセクションの見出しブロックの設定
    設定 説明
    見出し セクションのタイトル。
    見出しのフォントサイズ

    見出しテキストには次のサイズがあります。

    • 小 - デスクトップ: 24ピクセル、モバイル: 20ピクセル
    • 中 - デスクトップ: 40ピクセル、モバイル: 30ピクセル
    • 大 - デスクトップ: 52ピクセル、モバイル: 40ピクセル

    テキストブロック

    [テキスト] ブロックは、ブランドに関する情報をお客様と共有するのに適した方法です。商品のメリットを説明し、告知を行い、ストアへのお客様を歓迎し、ブランドの価値について説明できます。

    リッチテキストセクションのテキストブロックの設定
    設定 説明
    説明 セクションのメインコンテンツに使用する段落スタイルのテキストです。

    ボタンのブロック

    リッチテキストセクションのボタンブロックの設定
    設定 説明
    ボタンのラベル ボタンに表示されるテキスト。
    ボタンのリンク ボタンのリンク先にするURL。
    アウトラインボタンのスタイルを使用する ボタンのスタイルを調整して、無地の背景にするのではなく、ボタンのアウトラインにします。

    スライドショー

    スライドショーセクションを追加して、ストアのページに最大5点の画像のカルーセルを表示します。

    セクション設定

    スライドショーセクションの設定
    設定 説明
    レイアウト [全幅] (デフォルト) と [グリッド] のいずれかを選択します。全幅を選択するとセクションの全幅にスライドショーが表示され、グリッドを選択するとスライドショーのどちらかの側に余白ができます。
    スライドの高さ

    スライドショーの高さ:

    • 最初の画像に合わせる (デフォルト) - すべての画像は、カルーセルの最初の画像と同じ高さになります。
    ページネーションのスタイル

    画像の下に表示されるスライドショーメニューのスタイル

    • ドット
    • カウンター (デフォルト)
    • 数字
    スライドの自動切り替え

    スライドショーの画像を自動で切り替えるには、このボックスにチェックを入れます。このボックスにチェックが入っていないと、お客様が手動でスライドショーを進めるまで、スライドショーには静止画像が表示されます。

    スライドタイマーを変更 バーを使って、スライドショーの自動切り替え時間を設定します。最小: 3秒、最大: 9秒。
    モバイルのレイアウト ボックスにチェックを入れて、モバイル版で画像の下にコンテンツを表示します。
    アクセシビリティ 視覚障害のあるお客様向けにスライドショーの説明を追加します。

    画像スライドの設定

    スライドショーセクション画像の設定
    設定 説明
    画像 スライドショーの静的画像。画像をクリックして新しい画像を選択するか、[変更] メニューを使用して画像を変更または削除します。
    代替テキストを編集

    スクリーンリーダーを使用しているお客様向けにスライドショーの説明を記入してください。

    見出し

    画像の見出しテキストはオプションです。各画像に個別にテキストを追加できます。

    見出しのサイズ

    見出しのサイズは、小、中 (デフォルト)、大から選択します。

    小見出し 画像の小見出しテキストはオプションです。各画像には個別にテキストを追加できます。
    ボタンのラベル ボタンのテキストを入力するか、空白のままにしてボタンを完全に非表示にします。
    ボタンのリンク ボタンのリンク先にするURL。
    アウトラインボタンのスタイルを使用する チェックボックスをクリックして、ソリッドボタンかアウトラインボタンに切り替えます。
    デスクトップのコンテンツ位置 画像上のコンテンツボックスの位置を設定します。「上、中央、下」、および「左、中央、右」から選択します。デフォルト設定では、両方とも「中央」です。
    デスクトップ上にコンテナを表示 ボックスにチェックを入れて、コンテンツボックスを表示します。
    デスクトップのコンテンツ配置 画像上のコンテンツの位置を設定します。左、中央 (デフォルト)、右から選択します。
    画像のオーバーレイ不透明率 スライダーを使って画像オーバーレイの不透明率を調整します。
    カラースキーム コンテンツボックスの背景色を変更します。アクセント1、アクセント2、背景1 (デフォルト)、背景2、反転から選択します。この設定がスライドショー画像に適用されるようにするにはコンテナの表示が必須です。
    モバイルのレイアウト モバイルデバイス上にコンテンツがどのように表示されるかを選択します。左、中央 (デフォルト)、右から選択します。

    ビデオ

    ビデオセクションを追加して、ストアのページにYouTubeまたはVimeoからの動画を埋め込むことができます。

    セクション設定

    ビデオセクションの設定
    設定 説明
    見出し セクションのタイトル。
    カバー画像 お客様がビデオを再生する前に表示される画像。
    URL YouTubeまたはVimeoの動画へのリンク。動画は一般公開されている必要があります。
    動画の代替テキスト ビデオの代替テキスト。
    セクションを全幅にする デフォルトの余白を削除し、セクションをページの全幅に設定します。

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

    無料体験を試す