売上を伸ばし、コンセプトに合わせて店舗を変革しましょう。今すぐ無料でお試しください

コンセプトで利用可能なセクション

Concept を使用すると、セクションや関連ブロックを任意のページに追加できます。

Concept では、セクションは通常、 Header 、 Overlay 、 Template 、およびFooterの 4 つの主要なグループに分類されます。それぞれのセクションには複数のセクションが含まれています。ブロックを使用してセクションを追加できます。

この記事では、すべてのセクションとブロックの概要を説明します。

このページでは

Web ページのセクション グループは、特定の目的のためにグループ化されたセクションのコレクションです。通常、メイン セクション グループは 4 つあります:ヘッダー グループ、オーバーレイ グループ、テンプレート グループ、およびフッター グループ。

A. ヘッダーグループ

  1. アナウンスバー（静的セクション）
  2. ヘッダー(静的セクション)
  3. 利用可能なセクション（動的セクション）

B. オーバーレイグループ

  1. カート引き出し（静的セクション）
  2. 検索ドロワー(静的セクション)
  3. クッキーバンヌ（静的セクション）
  4. ニュースレターポップアップ(静的セクション)

C.テンプレートグループ

このグループを使用すると、より柔軟に動的セクションを作成できます。

  1. ブログ投稿
  2. コラージュ
  3. ブログ投稿のコラージュ
  4. コレクションリスト
  5. お問い合わせフォーム
  6. 地図でのお問い合わせ
  7. カウントダウンタイマー
  8. カスタムリキッド
  9. メール登録
  10. 空きスペース
  11. よくある質問
  12. 注目のコレクション
  13. 注目の製品
  14. 画像比較
  15. テキスト付きの画像
  16. テキスト付きの画像
  17. テキストオーバーレイを含む画像
  18. テキストオーバーレイを含む画像
  19. ロゴ一覧
  20. ルックブック
  21. 地図
  22. 複数列
  23. アイコン付きの複数列
  24. 複数の注目コレクション
  25. ポートフォリオ
  26. 最近見た
  27. リッチテキスト
  28. スクロールテキスト
  29. 外観を購入する
  30. スライドショー
  31. お客様の声
  32. お客様の声のバナー
  33. タイムライン
  34. ビデオ
  35. ビデオヒーロー
  36. テキストオーバーレイを含むビデオ

D. フッターグループ

  1. フッター
  2. フッターの著作権
  3. 利用可能なセクション

A.セクショングループ

「セクション グループを使用すると、テーマ開発者はテーマ レイアウト内にセクションの動的な集合体を作成できます。言い換えれば、セクション グループを使用すると、テーマ内で特定のセクションをグループ化できます。これにより、販売者はテーマ内でセクションを直接追加、削除、並べ替えることができます」エディタ。" 続きを読む

1. ヘッダーグループ

ページの上部にあるセクション。通常、Web サイトのロゴ、ナビゲーション メニュー、その他の重要な情報が含まれます。

1.1.アナウンスバー

お知らせバーを使用すると、どのページからでも重要な情報を顧客に伝えることができます。表示するアナウンス ブロックを最大 3 つまでカスタマイズできます。アナウンス バーにリンクを追加してクリック可能にし、顧客を特定のページに誘導できます。

アナウンスバーセクションの設定
セクション設定設定説明
アナウンスバー
ソーシャルメディアアイコンを表示するテーマ設定で設定したソーシャル メディア アイコンが表示されます。
言語セレクターを有効にする言語設定で有効にした国と地域を顧客が選択できるセレクターを追加し、顧客が選択した言語でストアを閲覧できるようにします。
国/地域セレクターを有効にする支払い設定で有効にした国と地域を顧客が選択できるセレクターを追加します。これにより、顧客は選択した通貨で商品価格を表示できるようになります。
アイコンとセレクターを反転するこのオプションを切り替えると、ブラウザ内のアイコンとセレクターの位置が入れ替わります。このオプションにチェックを入れると、アイコンが右側に、セレクターが左側に表示されます。このオプションがチェックされていない場合、アイコンとセレクターは元の位置にあります。
発表
デスクトップアナウンスの位置デスクトップ アナウンスの位置は、左、中央、または右に設定できます。この位置はモバイル デバイス用に自動的に最適化されます。
自動回転アナウンスカルーセルが自動的に再生されるように設定します。これにより、再生切り替えボタンも追加されます。
アナウンスを毎秒変更するアナウンスの表示時間はお好みに応じて 3 秒から 10 秒まで設定できます。
ナビゲーションを表示ナビゲーションボタンを表示します。
色
文章お知らせテキストの色。
背景アナウンスバーの背景の色。
背景のグラデーションアナウンスバーの背景のグラデーション。
ハイライトハイライトの色。
ハイライトグラデーションハイライトのグラデーション。
セクション
セクションを全幅にするセクションをブラウザ ウィンドウの全幅にします。
断面を丸くするセクションをブラウザ ウィンドウの丸みにします。
カスタムCSSこのセクションにカスタム CSS を追加します。

このセクションではアナウンス ブロックのみが利用可能です。

アナウンスブロックの設定。
ブロック設定設定説明
発表
アイコン長いリストからアイコンのタイプを選択します。
文章デスクトップ上で顧客に表示するアナウンス。
リンク顧客がアナウンス バーをクリックした場合に移動するリンク。
モバイルレイアウト
モバイルでアイコンを非表示にするモバイルでアイコンを非表示にできるようにする
モバイル上のテキストモバイルで顧客に表示するお知らせ。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

ハイライトされたテキスト スタイルを[手書きの落書き]に設定する必要があります。

この設定では、手書きの落書きで強調表示されたテキストを描画するための 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2

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

ヘッダーセクションの設定
セクション設定設定説明
ヘッダ
ロゴデスクトップブラウザ上のストアのロゴ。ロゴはテーマ設定でのみ編集されます。
メニューメインメニュー。
メニューがアクティブですメニュー項目にカーソルを置いたときの視覚的なインジケーターは、 [ドット]または[ブロック]に設定できます。
ヘッダーのレイアウトオプション リストでロゴとメニューのレイアウトをカスタマイズします。
  • ロゴ左、メニュー左
  • ロゴ左、メニューセント
  • ロゴ左、メニュードロワー
  • ロゴ中央、メニュー左
  • ロゴセンター、メニューセンター
  • ロゴセンター、メニュー分割
  • ロゴセンター、メニュードロワー
ホバー時のドロップダウンを有効にする
  • 有効:ユーザーがメニュー オプションの上にマウスを置くと、ドロップダウン メニューが開きます。これは、ほとんどの Web ブラウザのデフォルトの動作です。
  • 無効にする:ユーザーがメニュー オプションをクリックすると、ドロップダウン メニューが開きます。これによりアニメーションが減り、よりシンプルなユーザー エクスペリエンスが提供されます。
スティッキーヘッダースティッキー ヘッダーには 3 つのオプションがあります。
  • なし:スティッキーヘッダーは表示されません。
  • 上にスクロール:スティッキーヘッダーは、下にスクロールすると非表示になり、上にスクロールすると再び表示されます。
  • 常に:スティッキー ヘッダーは常に表示されます。
モバイルレイアウト
ロゴモバイルで表示されるロゴ。ロゴはテーマ設定でのみ編集されます。
モバイルロゴの位置モバイルでのロゴの位置:左または中央。
ソーシャルメディアアイコンを表示するテーマ設定で設定したソーシャル メディア アイコンが表示されます。
言語セレクターを有効にする言語設定で有効にした国と地域を顧客が選択できるセレクターを追加し、顧客が選択した言語でストアを閲覧できるようにします。
国/地域セレクターを有効にする支払い設定で有効にした国と地域を顧客が選択できるセレクターを追加します。これにより、顧客は選択した通貨で商品価格を表示できるようになります。
透明ヘッダー
文字の色透明ヘッダーのテキストの色を変更します。
色
文章ヘッダーテキストの色を変更します。この設定は透過ヘッダーには適用されません。
背景ヘッダーの背景の色を変更します。この設定は透過ヘッダーには適用されません。
セクション
上部のパディングセクションの上部内部空間の高さを決定します。 0px ～ 120px の範囲で、算術的に 4px ずつ増加します。
底部のパディングセクションの下部内部空間の高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。
セクションを全幅にするセクションをブラウザ ウィンドウの全幅にします。
断面を丸くするセクションをブラウザの円周にします。
カスタムCSSこのセクションにカスタム CSS を追加します。

このセクションでは、 Mega メニューの追加を許可します。

Mega メニューの設定。
メガメニューの設定設定説明
メガメニュー
メニュー項目メガメニューを追加するメニュー項目名。
メガメニューの画像を表示するメガメニュー画像の表示を有効にします。
ボタンラベル

ボタンを非表示にするには、ラベルを空白のままにします。

ボタンのテキスト
ボタンリンクボタンの URL。
プロモーション
画像表示したい画像
画像比率ブログ投稿画像の画像比率:
  • 画像に適応(デフォルト) - 画像のアスペクト比を使用します。これにより、画像が切り取られるのを防ぎます。
  • 正方形- 画像を 1:1 の比率でトリミングします。
  • ポートレート- 画像を 2:3 の比率にトリミングします。
  • 風景- 画像を 3:2 の比率にトリミングします。
  • ワイド- 画像を 16:9 の比率にトリミングします。
見出しプロモーションのタイトル。
サブテキストプロモーションの説明テキスト。
画像にテキストをオーバーレイする画像にテキストをオーバーレイするオプションを有効にします。このオプションが無効になっている場合、テキストは画像の下に表示されます。
リンクリンク先の URL。
タグ製品に関する追加情報を提供するために製品ページに表示される小さなテキスト。
文字の色テキストの色。
オーバーレイのテキストの色テキストのオーバーレイの色。

テキストオーバーレイの不透明度は0から100%まで設定できます。

1.3.利用可能なセクション

このグループには、次のような追加のセクションを追加できます。

2. オーバーレイグループ

ポップアップ ウィンドウ内で動作するセクションのグループ。

2.1.カート引き出し

カート ドロワーは、顧客がカートに追加した商品の概要を、別のカート ページにリダイレクトせずに表示するユーザー インターフェイス要素です。

カートドロワーセクションの設定
セクション設定設定説明
カート引き出し
ベンダーを表示製品の販売元を表示します。
カートメモを表示カートメモを表示します。
配送料計算ツールを表示

送料計算ツール

顧客が国/地域、都道府県、郵便番号/郵便番号を入力しておおよその送料を計算できるテーマ設定を有効にします。
カートを見るボタンを表示カートを見るボタンを表示します。
チェックアウトボタンを表示チェックアウトボタンを表示します。
送料無料バー
送料無料バーを表示送料無料バーを表示します
送料無料の最低金額数値のみを使用して金額を入力してください。複数の通貨を使用する場合は、各通貨コードをその金額で区切ります (例: USD:100、EUR:95、JPY:13000 )
カートの推奨事項
カートの推奨事項を有効にするカートのおすすめを表示します
見出しカートの推奨事項のタイトル。
展示できる最大の商品数一度に 1 ～ 10 個の製品を表示します。
ベンダーを表示製品の販売元を表示します。
価格を表示商品の価格を表示します。
空のカートの推奨事項
文章「どこから始めればよいかわかりませんか? これらのコレクションをお試しください: 」などの独自のテキストを使用します。
コレクションリストおすすめのコレクションを選択する
最近見た商品
最近閲覧した商品を有効にする最近閲覧した商品を表示します。
見出しセクションのタイトル。
展示できる最大の商品数一度に 1 ～ 10 個の製品を表示します。
ベンダーを表示製品のベンダーを表示します。
価格を表示商品の価格を表示します。
カスタムCSSこのセクションにカスタム CSS を追加します。

2.2.検索ドロワー

テーマ設定でカートの種類を「ページ」に設定している場合、検索ドロワーは顧客には表示されません。

検索ドロワーセクションの設定
セクション設定説明
カスタムCSSこのセクションにカスタム CSS を追加します。

Cookie バナーは、ユーザーが初めて Web サイトにアクセスしたときに Web サイトに表示される通知です。 Web サイトが使用する Cookie についてユーザーに通知し、デバイスに Cookie を保存することについてユーザーの同意を求めます。

Cookie バナーセクションの設定
セクション設定設定説明
クッキーバナー
表示モードテスト モードでは、関連する設定または非表示に関係なく、バナーは常に表示されるため、いつでも確認できます。外観に満足したら、 [有効]に切り替えます。
遅れ

見やすくするために、テーマエディターでは遅延が無効になっています。

このセクションのレンダリング時間は、ページが読み込まれた瞬間から始まります。

2秒から60秒まで調整します。

テキストの配置次の 3 つのオプションから希望のテキスト配置を選択します: Left 、 Center 、またはRight 。
コンテンツの位置好みのコンテンツ位置を選択します:左下または右下。
色
文章テキストの色。
背景背景色。
ハイライトハイライトカラー。
ボタンのテキストボタンのテキストの色。
ボタンの背景ボタンの背景色。
ボタンの背景のグラデーションボタンの背景のグラデーション。

利用可能なブロック:

  • 2.3.1 見出しブロック
  • 2.3.2 テキストブロック
  • 2.3.3 ボタンブロック
  • 2.3.4 画像ブロック
  • 2.3.5 カスタムリキッド
  • 2.3.6 空きスペース
2.3.1 見出しブロックの設定。
ブロック設定設定説明
見出し
見出しブロックのタイトル。
見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。
見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
2.3.2 テキストブロックの設定。
ブロック設定設定説明
文章
文章テキストを追加します。
文字サイズテキスト サイズは次のオプションのいずれかに設定できます。
  • 小さい
  • 中くらい
  • 大きい
  • 特大
  • カスタム。

カスタム オプションを使用すると、テキスト サイズを 12 ピクセルから 128 ピクセルまでの任意の値に設定でき、算術的に 2 ピクセルずつ増加します。

テキストフォントテキストの書式設定として、本文または見出しの 2 つのオプションから選択します。
二次色を使用する二次カラーを有効にします。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
2.3.3 ボタンブロックの設定。
ブロック設定設定説明
購入ボタン
ボタンのラベルを承認する承諾ボタンのテキスト。

ボタンを非表示にするには、ラベルを空白のままにします。

拒否ボタンのラベル辞退ボタンのテキスト。

ボタンを非表示にするには、ラベルを空白のままにします。

2.3.4 画像ブロックの設定。
ブロック設定設定説明
画像
画像ブロックする画像を選択します。
画像の幅2 つの画像幅オプションのいずれかを選択します。
  • 全幅:画像がブラウザ ウィンドウ全体に表示されます。
  • カスタム：
    • 最大幅- デスクトップ画像の幅 - 20px ～ 1000px (10px 増分)。
    • モバイルの最大幅- モバイル画像の幅 - 20px ～ 600px (10px 増分)。
2.3.5 カスタム液体ブロックの設定。

独自の Liquid コードを追加してカスタム ブロックを作成できます。

2.3.6 空きスペースブロックの設定。
ブロック設定設定説明
空きスペース
デスクトップの高さデスクトップ上で表示されるときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 40 ピクセルです。
モバイルの高さモバイルで表示するときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 28 ピクセルです。

2.4.ニュースレターのポップアップ

ポップアップ ウィンドウは、通常、ユーザーが初めてサイトにアクセスしたとき、またはサイトに一定時間滞在したときに Web サイトに表示されます。通常、ポップアップには、ユーザーが Web サイトのニュースレターを購読するために入力できるフォームが含まれています。

ニュースレターポップアップセクションの設定
セクション設定設定説明
ニュースレターのポップアップ
表示モード

テスト モードでは、関連する設定または非表示に関係なく、バナーは常に表示されるため、いつでも確認できます。外観に満足したら、 Enabkeに切り替えます。

  • ホームページを 1 つだけ表示する
  • 訪問者のみに表示
遅れ

見やすくするために、テーマエディターでは遅延が無効になっています。

このセクションのレンダリング時間は、ページが読み込まれた瞬間から始まります。

2秒から60秒まで調整します。

頻度閉じられたポップアップが再表示されるまでの日数を 1 日から 30 日まで調整します。
テキストの配置次の 3 つのオプションから希望のテキスト配置を選択します: Left 、 Center 、またはRight 。
コンテンツの位置好みのコンテンツ位置を選択します:左下または右下。
画像
画像セクションの画像を選択/アップロードします。
色
文章文字の色を変更します。
背景背景の色を変更します。
ハイライトハイライトの色を変更します。
ボタンのテキストボタンのテキストの色を変更します。
ボタンの背景ボタンの背景色を変更します。
ボタンの背景のグラデーションボタンの背景のグラデーションの色を変更します。

利用可能なブロック:

  • 2.4.1 見出し
  • 2.4.2 テキスト
  • 2.4.3 ボタン
  • 2.4.4 リンク
  • 2.4.5 画像
  • 2.4.6 フォーム
  • 2.4.7 ソーシャルメディアアイコン
  • 2.4.8 空きスペース
  • 2.4.9 カスタムリキッド
  • 2.4.10 フローティングバー
2.4.1 見出しブロックの設定。
ブロック設定設定説明
見出し
見出しブロックのタイトル。
見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。
見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
2.4.2 テキストブロックの設定。
ブロック設定設定説明
文章
文章テキストを追加します。
文字サイズテキスト サイズは次のオプションのいずれかに設定できます。
  • 小さい
  • 中くらい
  • 大きい
  • 特大
  • カスタム。

カスタム オプションを使用すると、テキスト サイズを 12 ピクセルから 128 ピクセルまでの任意の値に設定でき、算術的に 2 ピクセルずつ増加します。

テキストフォントテキストの書式設定として、本文または見出しの 2 つのオプションから選択します。
二次色を使用する二次カラーを有効にします。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
2.4.3 Button ブロックの設定。
ブロック設定設定説明
ボタン
ボタンラベルボタンに表示されるテキスト。
ボタンリンクボタンの URL。
ボタンのサイズボタンのサイズを 3 つのオプションで調整します: 小、中、または大
アウトラインボタンスタイルを使用するボタンのアウトライン スタイルを使用します。
2.4.4 Link ブロックの設定。
ブロック設定設定説明
リンク
文章ボタンのすぐ横に配置されるリンクのテキスト。
リンクリンクしたいURLを追加します。
2.4.5 画像ブロックの設定。
ブロック設定設定説明
画像
画像ブロックする画像を選択します。
画像の幅2 つの画像幅オプションのいずれかを選択します。
  • 全幅:画像がブラウザ ウィンドウ全体に表示されます。
  • カスタム：
    • 最大幅- デスクトップ画像の幅 - 20px ～ 1000px (10px 増分)。
    • モバイルの最大幅- モバイル画像の幅 - 20px ～ 600px (10px 増分)。
2.4.6 フォームブロックの設定。

カスタマイズ可能な設定はありません。

2.4.7 ソーシャルメディアアイコンブロックの設定。

ソーシャル メディア アカウントを表示するには、テーマ設定でアカウントをリンクします。

2.4.8 空きスペースブロックの設定。
ブロック設定設定説明
空きスペース
デスクトップの高さデスクトップ上で表示されるときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 40 ピクセルです。
モバイルの高さモバイルで表示するときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 28 ピクセルです。
2.4.9 カスタム液体ブロックの設定。

独自の Liquid コードを追加してカスタム ブロックを作成できます。

2.4.10 フローティングバーブロックの設定。
ブロック設定設定説明
フローティングバー
見出しブロックのタイトル。
コンテンツの位置好みのコンテンツ位置を選択します:左または右
ソーシャルメディアアイコンを表示するソーシャル メディア アカウントを表示するには、テーマ設定でアカウントをリンクします。
ソーシャルメディアの見出しソーシャルメディアのタイトル。
モバイルレイアウト
モバイルで無効にする携帯では非表示になります。
ソーシャルメディアアイコンを非表示にします有効にすると、ソーシャル メディアのアイコンが非表示になります。
色必要に応じて、次のようなブロックの色をカスタマイズできます。
  • 文章
  • 背景

C. テンプレートグループ

Web サイト上で特定の種類のページを作成するために使用されるセクションのコレクション。

1. ブログ投稿

Shopify ストアにブログがある場合は、ブログ投稿セクションを使用して、そのブログの投稿をハイライト表示できます。

ブログ投稿セクションの設定>
セクション設定設定説明
ブログ投稿
ブログブログ投稿を表示するブログを選択します。ブログが選択されていない場合は、「ブログ」ページのアルファベット順で最初のブログが使用されます。
表示するブログ投稿の数セクションに表示するブログ投稿の数。
デスクトップ上の列の数デスクトップに表示される列の数を 1 から 5 までカスタマイズします。
デスクトップでカルーセルを有効にするデスクトップ ブラウザ上のコレクションからブログ投稿のカルーセルを表示します。
「すべて表示」ボタンを有効にするブログに指定された制限を超える投稿がある場合は、ブログ ページにリンクする[すべて表示]ボタンを表示します。
モバイルレイアウト
モバイルの列数モバイルブラウザに表示される列の数をカスタマイズします: 1 列または2 列。
モバイルでスワイプを有効にする水平スワイプでモバイル表示を 1 行に設定します。
ブログ投稿カード
画像比率ブログ投稿画像の画像比率:
  • 画像に適応(デフォルト) - 画像のアスペクト比を使用します。これにより、画像が切り取られるのを防ぎます。
  • 正方形- 画像を 1:1 の比率でトリミングします。
  • ポートレート- 画像を 2:3 の比率にトリミングします。
  • 風景- 画像を 3:2 の比率にトリミングします。
  • ワイド- 画像を 16:9 の比率にトリミングします。
タグを表示管理者のブログ投稿のタグを画像付きで表示します。
上映日ブログ投稿の公開日を表示します。
コメント数を表示公開されたコメントの総数を表示します。
著者を表示ブログ投稿の作成者を表示します。
以外を表示ブログ投稿の抜粋を表示します。
見出し
見出しセクションのタイトル。
見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。
見出しの配置見出しは、 Left 、 Center 、またはRightに揃えることができます。
見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。
小見出し見出しの小見出しは見出しの上に配置されます。
説明見出しの説明テキストは見出しの下に配置されます。
ボタンラベルボタンに表示されるテキスト。
ボタンリンクボタンの URL。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
色必要に応じて、次のセクションの色をカスタマイズできます。
  • 文章
  • 背景
  • 背景のグラデーション
  • ハイライト
  • ハイライトグラデーション
  • ボタンのテキスト
  • ボタンの背景
  • ボタンの背景のグラデーション
セクション
上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。
セクション区切り線を表示このセクションの上に行区切りを表示します
セクションを狭くする容器が狭くなってしまいます。
断面を丸くする上の 2 つの角に丸いエッジを適用します。
カスタムCSSこのセクションにカスタム CSS を追加します。

このセクションではブロックの追加はサポートされていません。

2. コラージュ

このセクションでは、2 列のビデオまたは画像のコラージュを作成します。デフォルトでは、セクションにはビデオ、製品、およびコレクションのブロックが含まれています。

コラージュセクションの設定
セクション設定設定説明
見出し
見出しセクションのタイトル。
見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。
見出しの配置見出しは、 Left 、 Center 、またはRightに揃えることができます。
見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。
小見出し見出しの小見出しは見出しの上に配置されます。
説明見出しの説明テキストは見出しの下に配置されます。
ボタンラベルボタンに表示されるテキスト。
ボタンリンクボタンの URL。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
色必要に応じて、次のセクションの色をカスタマイズできます。
  • 文章
  • 背景
  • 背景のグラデーション
  • ハイライト
  • ハイライトグラデーション
  • ボタンのテキスト
  • ボタンの背景
  • ボタンの背景のグラデーション
セクション
上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。
セクション区切り線を表示このセクションの上に行区切りを表示します。
セクションを狭くする容器が狭くなってしまいます。
断面を丸くする上の 2 つの角に丸いエッジを適用します。
視差効果を有効にする視差効果を有効にすると、2 次元の画像またはシーンに奥行きの錯覚が生まれます。

視差方向は次の 3 つのオプションから選択できます。

  • 垂直
  • 水平
  • ズーム
カスタムCSSこのセクションにカスタム CSS を追加します。

利用可能なブロック:

  • 2.1 画像ブロック
  • 2.2 ビデオブロック
2.1 画像ブロックの設定。
ブロック設定設定説明
画像
小見出し見出しの小見出しは見出しの上に配置されます。
見出しブロックのタイトル。
リンク顧客がクリックした場合に移動するリンク。
小見出しと見出しを反転する見出しと小見出しの位置を入れ替えます。
画像ブロックの画像を選択/アップロードします。
画像比率ブログ投稿画像の画像比率:
  • 画像に適応(デフォルト) - 画像のアスペクト比を使用します。これにより、画像が切り取られるのを防ぎます。
  • 正方形- 画像を 1:1 の比率でトリミングします。
  • ポートレート- 画像を 2:3 の比率にトリミングします。
  • 風景- 画像を 3:2 の比率にトリミングします。
  • ワイド- 画像を 16:9 の比率にトリミングします。
デスクトップのコンテンツの位置デスクトップ上のコンテンツの位置:
  • 左上
  • 中左
  • 左下
  • 中央上部
  • ミドルセンター
  • 中央下
  • 右上
  • 中右
  • 右下
デスクトップコンテンツの配置デスクトップ上のコンテンツの配置:
  • 左
  • 中心
  • 右
モバイルレイアウト
モバイル画像モバイルに表示されるブロックの画像。
モバイル画像比率モバイルブラウザ上の画像の比率:
  • 画像に適応(デフォルト) - 画像のアスペクト比を使用します。これにより、画像が切り取られるのを防ぎます。
  • 正方形- 画像を 1:1 の比率でトリミングします。
  • ポートレート- 画像を 2:3 の比率にトリミングします。
  • 風景- 画像を 3:2 の比率にトリミングします。
  • ワイド- 画像を 16:9 の比率にトリミングします。
  • Rounded - 画像を円として切り抜きます。
モバイルコンテンツの位置モバイルブラウザ上のコンテンツの位置:
  • 左上
  • 中左
  • 左下
  • 中央上部
  • ミドルセンター
  • 中央下
  • 右上
  • 中右
  • 右下
モバイルコンテンツの調整モバイルブラウザでのコンテンツの配置:
  • 左
  • 中心
  • 右
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
2.2 ビデオブロックの設定。
ブロック設定設定説明
ビデオ
小見出し見出しの小見出しは見出しの上に配置されます。
見出しブロックのタイトル。
リンク顧客がクリックした場合に移動するリンク。
小見出しと見出しを反転する見出しと小見出しの位置を入れ替えます。
Shopify がホストするビデオビデオShopify がホストするビデオからビデオを選択します
URLからビデオを埋め込む
URLビデオへの YouTube または Vimeo リンク。ビデオは一般公開されている必要があります。
表紙画像ビデオの再生前に表示される画像。
ビデオの ALT テキストスクリーン リーダーを使用している顧客がビデオにアクセスできるように、ビデオについて説明します。
ビデオの自動再生を有効にするビデオを自動的に再生します。
ビデオループを有効にするビデオを繰り返し再生します。
画像比率ブログ投稿画像の画像比率:
  • 画像に適応(デフォルト) - 画像のアスペクト比を使用します。これにより、画像が切り取られるのを防ぎます。
  • 正方形- 画像を 1:1 の比率でトリミングします。
  • ポートレート- 画像を 2:3 の比率にトリミングします。
  • 風景- 画像を 3:2 の比率にトリミングします。
  • ワイド- 画像を 16:9 の比率にトリミングします。
デスクトップのコンテンツの位置デスクトップ上のコンテンツの位置を設定します。
  • 左上
  • 中左
  • 左下
  • 中央上部
  • ミドルセンター
  • 中央下
  • 右上
  • 中右
  • 右下
デスクトップコンテンツの配置デスクトップ上のコンテンツの配置を設定します。
  • 左
  • 中心
  • 右
モバイルレイアウト
モバイルビデオモバイルブラウザ用にアップロードすることでビデオを選択/アップロードします。
または URL からビデオを埋め込むモバイル ブラウザ上の URL からビデオを埋め込みます。
モバイルのカバー画像モバイルでビデオが再生される前に表示される画像。
モバイル画像比率デスクトップブラウザ上の画像の比率:
  • 画像に適応(デフォルト) - 画像のアスペクト比を使用します。これにより、画像が切り取られるのを防ぎます。
  • 正方形- 画像を 1:1 の比率でトリミングします。
  • ポートレート- 画像を 2:3 の比率にトリミングします。
  • 風景- 画像を 3:2 の比率にトリミングします。
  • ワイド- 画像を 16:9 の比率にトリミングします。
モバイルコンテンツの位置モバイルブラウザ上のコンテンツの位置を設定します。
  • 左上
  • 中左
  • 左下
  • 中央上部
  • ミドルセンター
  • 中央下
  • 右上
  • 中右
  • 右下
モバイルコンテンツの調整モバイルブラウザでのコンテンツの配置を設定します。
  • 左
  • 中心
  • 右
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
色必要に応じて、次のようなブロックの色をカスタマイズできます。
  • 文章
  • 背景
  • 背景のグラデーション
  • ハイライト
  • ハイライトグラデーション
  • ボタンのテキスト
  • ボタンの背景
  • ボタンの背景のグラデーション

3. ブログ投稿のコラージュ

このセクションでは、ブログ投稿のコラージュで読者の注目を集めています。

コラージュブログ投稿セクションの設定>
セクション設定設定説明
ブログ投稿のコラージュ
ブログブログ投稿を表示したいブログ。
表示するブログ投稿の数セクションに表示するブログ投稿の数。
「すべて表示」ボタンを有効にするブログに指定された制限を超える投稿がある場合、ブログ ページにリンクする[すべて表示]ボタンを表示します。
ブログポストカード
画像比率ブログ投稿画像の画像比率:
  • 画像に適応(デフォルト) - 画像のアスペクト比を使用します。これにより、画像が切り取られるのを防ぎます。
  • 正方形- 画像を 1:1 の比率でトリミングします。
  • ポートレート- 画像を 2:3 の比率にトリミングします。
  • 風景- 画像を 3:2 の比率にトリミングします。
  • ワイド- 画像を 16:9 の比率にトリミングします。
タグを表示管理者ブログ投稿のタグを表示し、コンテンツを強化するために必要に応じて画像を組み込みます。
上映日ブログ投稿の公開日を表示します。
コメント数を表示公開されたブログ投稿のコメントの合計数が表示されます。
著者を表示ブログ投稿の作成者を表示します。
見出し
見出しセクションのタイトル。
見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。
見出しの配置見出しは、 Left 、 Center 、またはRightに揃えることができます。
見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。
小見出し見出しの小見出しは見出しの上に配置されます。
説明見出しの説明テキストは見出しの下に配置されます。
ボタンラベルボタンに表示されるテキスト。
ボタンリンクボタンの URL。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
色必要に応じて、次のセクションの色をカスタマイズできます。
  • 文章
  • 背景
  • 背景のグラデーション
  • ハイライト
  • テキストを強調表示する
  • ボタンのテキスト
  • ボタンの背景
  • ボタンの背景のグラデーション
セクション
上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。
セクション区切り線を表示このセクションの上に行区切りを表示します。
セクションを狭くする容器が狭くなってしまいます。
断面を丸くする上の 2 つの角に丸いエッジを適用します。
カスタムCSSこのセクションにカスタム CSS を追加します。

このセクションではブロックの追加はサポートされていません。

4. コレクションリスト

強調表示するコレクションのリストを追加できます。

コレクションリストセクションの設定
セクション設定設定説明
コレクションリスト
デスクトップ上の列の数デスクトップブラウザに表示される列数を 1 から 5 までカスタマイズします。
デスクトップでカルーセルを有効にするコレクションからの製品のカルーセルをデスクトップ ブラウザーに表示します。
画像コレクション画像または最初の製品から画像を選択します。
画像比率コレクション画像の画像比率:
  • 画像に適応(デフォルト) - 画像のアスペクト比を使用します。これにより、画像が切り取られるのを防ぎます。
  • 正方形- 画像を 1:1 の比率でトリミングします。
  • ポートレート- 画像を 2:3 の比率にトリミングします。
  • 風景- 画像を 3:2 の比率にトリミングします。
  • ワイド- 画像を 16:9 の比率にトリミングします。
「すべて表示」ボタンを有効にするブログに [ブログ投稿] フィールドに設定されているよりも多くのブログ投稿がある場合、顧客をブログのページに誘導する [すべて表示] ボタンが表示されます。
モバイルレイアウト
モバイルの列数モバイルブラウザに表示される列の数をカスタマイズします: 1 列または2 列。
モバイルでスワイプを有効にする水平スワイプでモバイル表示を 1 行に設定します。
見出し
見出しセクションのタイトル。
見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。
見出しの配置見出しは、 Left 、 Center 、またはRightに揃えることができます。
見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。
小見出し見出しの小見出しは見出しの上に配置されます。
説明見出しの説明テキストは見出しの下に配置されます。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
色必要に応じて、次のセクションの色をカスタマイズできます。
  • 文章
  • 背景
  • 背景のグラデーション
  • ハイライト
  • ハイライトグラデーション
  • ボタンのテキスト
  • ボタンの背景
  • ボタンの背景のグラデーション
セクション
上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。
セクション区切り線を表示このセクションの上に行区切りを表示します。
セクションを狭くする容器が狭くなってしまいます。
断面を丸くする上の 2 つの角に丸いエッジを適用します。
カスタムCSSこのセクションにカスタム CSS を追加します。

使用可能なブロック:コレクション ブロック。

コレクション ブロックの設定。
ブロック設定設定説明
コレクション
コレクション商品を表示したいコレクションを選択してください。
製品コレクション全体ではなく、個々の製品を表示できます。
タイトル注目のコレクションのタイトル

5.お問い合わせフォーム

お問い合わせフォームでは、すべての送信内容がストアの送信者メール アドレスに送信されます。送信者のメール アドレスは、管理者の[全般] 設定で変更できます。

フォームには次の基本的な要素があります。

  • 名前
  • メールアドレス (必須)
  • コメント
  • カスタムフィールドもサポートされています。
お問い合わせフォームセクションの設定
セクション設定設定説明
お問い合わせフォームすべての提出物はストアの送信者メール アドレスに送信されます。
見出し
見出しセクションのタイトル。
見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。
見出しの配置見出しは、 Left 、 Center 、またはRightに揃えることができます。
見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。
小見出し見出しの小見出しは見出しの上に配置されます。
説明見出しの説明テキストは見出しの下に配置されます。
ボタンラベルボタンに表示されるテキスト。
ボタンリンクボタンの URL。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
色必要に応じて、次のセクションの色をカスタマイズできます。
  • 文章
  • 背景
  • 背景のグラデーション
  • ハイライト
  • ハイライトグラデーション
  • ボタンのテキスト
  • ボタンの背景
  • ボタンの背景のグラデーション
セクション
上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。
セクション区切り線を表示このセクションの上に行区切りを表示します。
セクションを狭くする容器が狭くなってしまいます。
断面を丸くする上の 2 つの角に丸いエッジを適用します。
カスタムCSS CSS を使用してこのセクションにカスタム スタイルを追加します

利用可能なブロック:

  • 5.1 コンタクトプレス
  • 5.2 ソーシャルメディアアイコン
  • 5.3 カスタムフィールド
5.1 コンタクトプレスブロックの設定。
ブロック設定設定説明
プレスに問い合わせる
見出しブロックのタイトル (例:カスタマー サービス)
文章ブロック内に表示するテキスト。
5.2 ソーシャルメディアアイコンブロックの設定。
ブロック設定説明
見出し

このブロックのタイトルを変更できます。

5.2 カスタムフィールドブロックの設定。
ブロック設定設定説明
カスタムフィールド
タイプ次の中から 5 つを選択してブロック タイプを表示します。
  • テキスト - 短い
  • テキスト - 長い
  • チェックボックス
  • ラジオボタン
  • ドロップダウンリスト
ラベルラベルのテキストを追加します。
必須この設定を必須オプションとしてマークします。
全幅ブロック設定を全幅にします。
チェックボックス
チェック値チェック値に値を設定します。
未チェックの値未チェックの値に値を設定します。
ラジオボタン
オプションオプションを追加します。オプションをカンマで区切ります (例: Option 1、Option 2、Option 3 )。
ドロップダウンリスト
オプションオプションを追加します。オプションをカンマで区切ります (例: Option 1、Option 2、Option 3 )。

6. 地図で連絡する

セクションには地図の住所が表示されます。

「地図で連絡」セクションの設定
セクション設定設定説明
地図でのお問い合わせすべての提出物はストアの送信者メール アドレスに送信されます。
見出し
見出しセクションのタイトル。
見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。
見出しの配置見出しは、 Left 、 Center 、またはRightに揃えることができます。
見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。
小見出し見出しの小見出しは見出しの上に配置されます。
説明見出しの説明テキストは見出しの下に配置されます。
ボタンラベルボタンに表示されるテキスト。
ボタンリンクボタンの URL。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
地図
地図の住所住所を入力してください。 Google マップは正確な場所を見つけます。
Google マップ API キー Google API キーを入力してください
地図のズームレベル 12 から 20 にズームインします。ズーム レベルが高くなると、より詳細が表示されます。
マップスタイル次の 6 つのオプションのいずれかを選択して、マップ スタイルをフォーマットします。
  • 標準
  • 銀
  • レトロ
  • 暗い
  • 夜
  • 茄子
画像マップのロードに失敗した場合に表示する代替マップ イメージを選択します。
デスクトップの高さデスクトップ上で表示されるときの画像の高さを決定します。
  • 画像に適応- 画像の元のアスペクト比を維持します。
  • 400ピクセル - 400ピクセル。
  • 450ピクセル - 450ピクセル。
  • 550ピクセル - 550ピクセル。
  • 650ピクセル - 650ピクセル。
  • 750ピクセル - 750ピクセル
  • 全画面 - ウィンドウ ブラウザの高さに合わせて画像を拡張します。
モバイルレイアウト
モバイルの高さモバイルで表示するときの画像の高さを決定します。
  • 自動- ブラウザはデスクトップの値に基づいて決定します。
  • 200ピクセル - 200ピクセル。
  • 250ピクセル - 250ピクセル。
  • 300ピクセル - 300ピクセル。
  • 400ピクセル - 400ピクセル。
  • 500ピクセル - 500ピクセル。
  • 全画面 - 画像をブラウザ ウィンドウの高さまで拡張します。
色必要に応じて、次のセクションの色をカスタマイズできます。
  • 文章
  • 背景
  • 背景のグラデーション
  • ハイライト
  • ハイライトグラデーション
  • ボタンのテキスト
  • ボタンの背景
  • ボタンの背景のグラデーション
セクション
上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。
セクション区切り線を表示このセクションの上に行区切りを表示します。
セクションを狭くする容器が狭くなってしまいます。
断面を丸くする上の 2 つの角に丸いエッジを適用します。
視差効果を有効にする視差効果を有効にすると、2 次元の画像またはシーンに奥行きの錯覚が生まれます。

視差方向は次の 3 つのオプションから選択できます。

  • 垂直
  • 水平
  • ズーム
カスタムCSSこのセクションにカスタム CSS を追加します。

利用可能なブロック:

  • 6.1 コンタクトプレス
  • 6.2 ソーシャルメディアアイコン
  • 6.3 カスタムフィールド
6.1 コンタクトプレスブロックの設定。
ブロック設定設定説明
プレスに問い合わせる
見出しブロックのタイトル (例:カスタマー サービス。 )
文章ブロック内に表示するテキスト。
6.2 ソーシャルメディアアイコンブロックの設定。
ブロック設定説明
見出し

このブロックのタイトルを変更できます。

6.3 カスタムフィールドブロックの設定。
ブロック設定設定説明
カスタムフィールド
タイプ次の中から 5 つを選択してブロック タイプを表示します。
  • テキスト - 短い
  • テキスト - 長い
  • チェックボックス
  • ラジオボタン
  • ドロップダウンリスト
ラベルラベルのテキストを追加します。
必須この設定を必須オプションとしてマークします。
全幅ブロック設定を全幅にします。
チェックボックス
チェック値チェック値に値を設定します。
未チェックの値未チェックの値に値を設定します。
ラジオボタン
オプションオプションを追加します。オプションはカンマで区切ります (例:オプション 1、オプション 2、オプション 3 )。
ドロップダウンリスト
オプションオプションを追加します。オプションはカンマで区切ります (例:オプション 1、オプション 2、オプション 3 )。

7. カウントダウンタイマー

このセクションには、特定の時刻に期限切れになるように設定されているアクティブなカウントダウン クロックが表示されます。セール開始、出店、限定特典の終了など幅広くご利用いただけます。これは、特定の製品の週間売上カウントダウン タイマーのサンプルです。

カウントダウンタイマーセクションの設定
セクション設定設定説明
カウントダウンタイマー
透明なヘッダーを許可するこの設定は、このセクションが最初のセクションである場合にのみ適用されます
画像デスクトップブラウザ上のセクションの画像。
デスクトップの高さデスクトップ上で表示されるときの画像の高さを決定します。
  • 画像に適応- 画像の元のアスペクト比を維持します。
  • 400ピクセル - 400ピクセル。
  • 450ピクセル - 450ピクセル。
  • 550ピクセル - 550ピクセル。
  • 650ピクセル - 650ピクセル。
  • 750ピクセル - 750ピクセル
  • 全画面 - ウィンドウ ブラウザの高さに合わせて画像を拡張します。
デスクトップコンテンツの幅デスクトップで表示するときの画像の幅を決定します。
  • 小さい
  • 中くらい
  • 大きい
デスクトップのコンテンツの位置デスクトップ上のコンテンツの位置を設定します。
  • 左上
  • 中左
  • 左下
  • 中央上部
  • ミドルセンター
  • 中央下
  • 右上
  • 中右
  • 右下
デスクトップコンテンツの配置デスクトップ上のコンテンツの配置を設定します。
  • 左
  • 中心
  • 右
モバイルレイアウト
モバイル画像モバイルブラウザ上のセクションのカバー画像。
モバイルの高さモバイルで表示するときの画像の高さを決定します。
  • 自動- ブラウザはデスクトップの値に基づいて決定します。
  • 200ピクセル - 200ピクセル。
  • 250ピクセル - 250ピクセル。
  • 300ピクセル - 300ピクセル。
  • 400ピクセル - 400ピクセル。
  • 500ピクセル - 500ピクセル。
  • 全画面 - 画像をブラウザ ウィンドウの高さまで拡張します。
モバイルコンテンツの位置モバイルブラウザ上のコンテンツの位置を設定します。
  • 左上
  • 中左
  • 左下
  • 中央上部
  • ミドルセンター
  • 中央下
  • 右上
  • 中右
  • 右下
モバイルコンテンツの調整モバイルブラウザでのコンテンツの配置を設定します。
  • 左
  • 中心
  • 右
色必要に応じて、次のセクションの色をカスタマイズできます。
  • 文章
  • ハイライト
  • ハイライトグラデーション
  • ボタンのテキスト
  • ボタンの背景
  • ボタンの背景のグラデーション
  • オーバーレイ、0 ～ 100% で調整可能
セクション
上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。
セクション区切り線を表示このセクションの上に行区切りを表示します。
セクションを狭くする容器が狭くなってしまいます。
断面を丸くする上の 2 つの角に丸いエッジを適用します。
視差効果を有効にする視差効果を有効にすると、2 次元の画像またはシーンに奥行きの錯覚が生まれます。

視差方向は次の 3 つのオプションから選択できます。

  • 垂直
  • 水平
  • ズーム
カスタムCSSこのセクションにカスタム CSS を追加します。

利用可能なブロック:

  • 7.1 見出し
  • 7.2 小見出し
  • 7.3 テキスト
  • 7.4 ボタン
  • 7.5 リンク
  • 7.6 画像
  • 7.7 カスタムリキッド
  • 7.8 空きスペース
7.1 見出しブロックの設定。
ブロック設定設定説明
見出し
見出しブロックのタイトル。
見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。
見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
7.2 小見出しブロックの設定。
ブロック設定設定説明
小見出し
小見出し見出しの小見出し。
小見出しのサイズ小見出しのサイズ:
  • 小さい
  • 中くらい
  • 大きい
二次色を使用する文字の色に基づいて少し明るい色を適用します。
7.3 テキストブロックの設定。
ブロック設定設定説明
文章
文章テキストを追加します。
文字サイズテキスト サイズは次のオプションのいずれかに設定できます。
  • 小さい
  • 中くらい
  • 大きい
  • 特大
  • カスタム。

カスタム オプションを使用すると、テキスト サイズを 12 ピクセルから 128 ピクセルまでの任意の値に設定でき、算術的に 2 ピクセルずつ増加します。

テキストフォントテキストの書式設定として、本文または見出しの 2 つのオプションから選択します。
二次色を使用する二次カラーを有効にします。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
7.4 ボタンブロックの設定。
ブロック設定設定説明
ボタン
ボタンラベルボタンに表示されるテキスト。
ボタンリンクボタンの URL。
ボタンのサイズボタンのサイズを 3 つのオプションで調整します: 小、中、または大
アウトラインボタンスタイルを使用するボタンのアウトライン スタイルを使用します。
7.2 リンクブロックの設定。
ブロック設定設定説明
リンク
文章ボタンのすぐ横に配置されるリンクのテキスト。
リンクリンクしたいURLを追加します。
7.6 画像ブロックの設定。
ブロック設定設定説明
画像
画像ブロックする画像を選択します。
画像の幅2 つの画像幅オプションのいずれかを選択します。
  • 全幅:画像がブラウザ ウィンドウ全体に表示されます。
  • カスタム:画像の幅を 20 ピクセルから 1000 ピクセルまで 10 ピクセル単位で設定します。
7.7 カスタム液体ブロックの設定。

独自の Liquid コードを追加してカスタム ブロックを作成できます。

7.8 空きスペースブロックの設定。
ブロック設定設定説明
空きスペース
デスクトップの高さデスクトップ上で表示されるときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 40 ピクセルです。
モバイルの高さモバイルで表示するときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 28 ピクセルです。

8.カスタムリキッド

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

  • ダウンロードしたアプリの手順に記載されているアプリ スニペットを追加すると、ページにアプリを簡単に導入できます。
  • カスタムの Liquid コードをエディターに直接追加します。
Custom Liquid セクションの設定>
セクション設定設定説明
カスタムリキッド
リキッドコードアプリ スニペットまたはその他のコードを追加して、高度なカスタマイズを作成します。
色必要に応じて、次のセクションの色をカスタマイズできます。
  • 文章
  • 背景
  • 背景のグラデーション
  • ハイライト
  • ハイライトグラデーション
  • ボタンのテキスト
  • ボタンの背景
  • ボタンの背景のグラデーション
セクション
上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。
セクション区切り線を表示このセクションの上に行区切りを表示します。
セクションを狭くする容器が狭くなってしまいます。
断面を丸くする上の 2 つの角に丸いエッジを適用します。
カスタムCSSこのセクションにカスタム CSS を追加します。

このセクションではブロックの追加はサポートされていません。

9. メール登録

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

  • ダウンロードしたアプリの手順に記載されているアプリ スニペットを追加すると、ページにアプリを簡単に導入できます。
  • カスタムの Liquid コードをエディターに直接追加します。
電子メールサインアップセクションの設定
セクション設定設定説明
メール登録
デスクトップコンテンツの幅デスクトップで表示するときの画像の幅を決定します。
  • 小さい
  • 中くらい
  • 大きい
デスクトップコンテンツの配置デスクトップ上のコンテンツの配置を設定します。
  • 左
  • 中心
  • 右
モバイルコンテンツの調整モバイルブラウザでのコンテンツの配置を設定します。
  • 左
  • 中心
  • 右
色必要に応じて、次のセクションの色をカスタマイズできます。
  • 文章
  • 背景
  • 背景のグラデーション
  • ハイライト
  • ハイライトグラデーション
  • ボタンのテキスト
  • ボタンの背景
  • ボタンの背景のグラデーション
セクション
上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。
セクション区切り線を表示このセクションの上に行区切りを表示します。
セクションを狭くする容器が狭くなってしまいます。
断面を丸くする上の 2 つの角に丸いエッジを適用します。
カスタムCSSこのセクションにカスタム CSS を追加します。

利用可能なブロック:

  • 9.1 見出し
  • 9.2 小見出し
  • 9.3 テキスト
  • 9.4 ボタン
  • 9.5 リンク
  • 9.6 画像
  • 9.7 カスタムリキッド
  • 9.8 空きスペース
9.1 見出しブロックの設定。
ブロック設定設定説明
見出し
見出しブロックのタイトル。
見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。
見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
9.2 ソーシャルメディアアイコンブロックの設定。

テーマ設定で設定したソーシャル メディア アカウントが表示されます。

9.3 テキストブロックの設定。
ブロック設定設定説明
文章
文章テキストを追加します。
文字サイズテキスト サイズは次のオプションのいずれかに設定できます。
  • 小さい
  • 中くらい
  • 大きい
  • 特大
  • カスタム。

カスタム オプションを使用すると、テキスト サイズを 12 ピクセルから 128 ピクセルまでの任意の値に設定でき、算術的に 2 ピクセルずつ増加します。

テキストフォントテキストの書式設定として、本文または見出しの 2 つのオプションから選択します。
二次色を使用する二次カラーを有効にします。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
9.4 ボタンブロックの設定。
ブロック設定設定説明
ボタン
ボタンラベルボタンに表示されるテキスト。
ボタンリンクボタンの URL。
ボタンのサイズボタンのサイズを 3 つのオプションで調整します: 小、中、または大
アウトラインボタンスタイルを使用するボタンのアウトライン スタイルを使用します。
9.5 リンクブロックの設定。
ブロック設定設定説明
リンク
文章ボタンのすぐ横に配置されるリンクのテキスト。
リンクリンクしたいURLを追加します。
9.6 画像ブロックの設定。
ブロック設定設定説明
画像
画像ブロックする画像を選択します。
画像の幅2 つの画像幅オプションのいずれかを選択します。
  • 全幅:画像がブラウザ ウィンドウ全体に表示されます。
  • カスタム:画像の幅を 20 ピクセルから 1000 ピクセルまで 10 ピクセル単位で設定します。
9.7 カスタム液体ブロックの設定。

独自の Liquid コードを追加してカスタム ブロックを作成できます。

9.8 空きスペースブロックの設定。
ブロック設定設定説明
空きスペース
デスクトップの高さデスクトップ上で表示されるときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 40 ピクセルです。
モバイルの高さモバイルで表示するときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 28 ピクセルです。

10. 空きスペース

このセクションを使用すると、セクション間の垂直スペースの高さをさまざまなデバイスに合わせてカスタマイズできます。

空きスペースセクションの設定
セクション設定設定説明
空きスペース
デスクトップの高さデスクトップ上で表示されるときの画像の高さを決定します。
  • 画像に適応- 画像の元のアスペクト比を維持します。
  • 400ピクセル - 400ピクセル。
  • 450ピクセル - 450ピクセル。
  • 550ピクセル - 550ピクセル。
  • 650ピクセル - 650ピクセル。
  • 750ピクセル - 750ピクセル
  • 全画面 - ウィンドウ ブラウザの高さに合わせて画像を拡張します。
モバイルの高さモバイルで表示するときの画像の高さを決定します。
  • 自動- ブラウザはデスクトップの値に基づいて決定します。
  • 200ピクセル - 200ピクセル。
  • 250ピクセル - 250ピクセル。
  • 300ピクセル - 300ピクセル。
  • 400ピクセル - 400ピクセル。
  • 500ピクセル - 500ピクセル。
  • 全画面 - 画像をブラウザ ウィンドウの高さまで拡張します。
色必要に応じて、次のセクションの色をカスタマイズできます。
  • 背景
  • 背景のグラデーション
カスタムCSSこのセクションにカスタム CSS を追加します。

このセクションではブロックの追加はサポートされていません。

11. よくある質問

FAQ (よくある質問) セクションには、動的なアコーディオン スタイルのレイアウトを使用して、顧客からのよくある質問と回答が表示されます。

FAQセクションの設定
セクション設定設定説明
よくある質問
スタイルセクションを表示するには、 [境界線スタイルあり] または[背景スタイルあり] を選択します。
見出し
見出しセクションのタイトル。
見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。
見出しの配置見出しは、 Left 、 Center 、またはRightに揃えることができます。
見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。
小見出し見出しの小見出しは見出しの上に配置されます。
説明見出しの説明テキストは見出しの下に配置されます。
ボタンラベルボタンに表示されるテキスト。
ボタンリンクボタンの URL。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
色必要に応じて、次のセクションの色をカスタマイズできます。
  • 文章
  • 背景
  • 背景のグラデーション
  • ハイライト
  • ハイライトグラデーション
  • ボタンのテキスト
  • ボタンの背景
  • ボタンの背景のグラデーション
セクション
上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。
セクション区切り線を表示このセクションの上に行区切りを表示します。
セクションを狭くする容器が狭くなってしまいます。
断面を丸くする上の 2 つの角に丸いエッジを適用します。
カスタムCSSこのセクションにカスタム CSS を追加します。

利用可能なブロック:

  • 11.1 リッチテキスト
  • 11.2 質問
  • 11.3 お問い合わせフォーム
11.1 リッチテキストブロックの設定。
ブロック設定設定説明
リッチテキスト
タイトルブロックのタイトル。
文章このブロックの説明テキストを追加します。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
11.2 質問ブロックの設定。
ブロック設定設定説明
質問
質問よくある質問を追加します。
答え答えを追加します。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
11.3 コンタクトフォームブロックの設定。
ブロック設定設定説明
お問い合わせフォーム
タイトルコラムのタイトル。
文章ブロック内に表示するテキスト。
電話番号を表示電話番号を表示します。
チームのアバターチームのアバターを表示する画像を選択/アップロードします。
チームアバターの身長チームアバターの高さは20pxから100pxまで調整できます。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2

このセクションでは、複数のコレクションを複数の列に表示し、各列を独自のタブに表示できます。特定のコレクションを特集するセクションを追加することもできます。

「注目のコレクション」セクションの設定>
セクション設定設定説明
注目のコレクション
コレクション製品を表示するコレクションを選択します。
製品表示する製品を最大 50 個追加します。

選択するとコレクションを置き換えます。

展示できる最大の商品数相補積の数は 2 ～ 12 の範囲です。
デスクトップ上の列の数デスクトップブラウザに表示される列数を 1 から 5 までカスタマイズします。
デスクトップでカルーセルを有効にするコレクションの製品のカルーセルをデスクトップ ブラウザーに表示します。
「すべて表示」ボタンを有効にするコレクションリストの下に「すべて表示」ボタンが追加されます。これは、リストに表示されているコレクションよりも多くのコレクションが含まれている場合に推奨されます。
モバイルレイアウト
モバイルの列数モバイルブラウザに表示される列の数をカスタマイズします: 1 列または2 列。
モバイルでスワイプを有効にする水平スワイプでモバイル表示を 1 行に設定します。
見出し
見出しセクションのタイトル。
見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。
見出しの配置見出しは、 Left 、 Center 、またはRightに揃えることができます。
見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。
小見出し見出しの小見出しは見出しの上に配置されます。
説明見出しの説明テキストは見出しの下に配置されます。
ボタンラベルボタンに表示されるテキスト。
ボタンリンクボタンの URL。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
色必要に応じて、次のセクションの色をカスタマイズできます。
  • 文章
  • 背景
  • 背景のグラデーション
  • ハイライト
  • ハイライトグラデーション
  • ボタンのテキスト
  • ボタンの背景
  • ボタンの背景のグラデーション
セクション
上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。
セクション区切り線を表示このセクションの上に行区切りを表示します。
セクションを狭くする容器が狭くなってしまいます。
断面を丸くする上の 2 つの角に丸いエッジを適用します。
カスタムCSSこのセクションにカスタム CSS を追加します。

このセクションではブロックの追加はサポートされていません。

特定の製品を紹介するセクションを追加できます。

注目の製品セクションの設定
セクション設定設定説明
注目の製品
製品このセクションで表示する製品を選択してください。
デスクトップ上のスティッキーコンテンツを有効にする顧客が注目の製品の画像を下（または上）にスクロールしたときに、コンテンツを画面に固定します。
メディア
デスクトップメディアの幅デスクトップ上のメディアの幅。このセクションのサイズを変更するには、35% から 70% まで調整できます。
デスクトップのレイアウトデスクトップのレイアウトを表示します。
  • フリー スクロール- 製品の最初の画像を左側に表示し、他の画像を右側のスクロール リストに表示します。
  • 2 列- 製品画像を 2 列で表示します。
  • サムネイル- 大きな画像の小さな画像を表示して、大きな画像グループの中から特定の画像を見つけやすくします。
サムネイルの位置サムネイルの位置:メディアの横またはメディアの下
画像のズーム3 つのオプションが利用可能:
  • ライトボックスを開く:ページを離れることなく、ポップアップ ライトボックス内の画像をズームします。
  • クリックしてホバー:ワンクリックまたはホバーすると、画像の内部ズームがトリガーされます。
  • ズームはありません。
バリアントを選択した後、他のバリアントのメディアを非表示にします。バリアントが選択されると、他のバリアントの画像は表示されなくなります。バリアントの選択を解除すると、画像が再表示されます。
ビデオの自動再生を有効にするビデオを自動的に再生します。
ビデオループを有効にするビデオを繰り返し再生します。
モバイルレイアウト
セクション
上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。
セクション区切り線を表示このセクションの上に行区切りを表示します。
断面を丸くする上の 2 つの角に丸いエッジを適用します。
カスタムCSSこのセクションにカスタム CSS を追加します。

利用可能なブロック:

  • 13.1 ブレッドクラム
  • 13.2 テキスト
  • 13.3 タイトル
  • 13.4 価格
  • 13.5 SKU
  • 13.6 在庫状況
  • 13.7 数量セレクター
  • 13.8 バリアントピッカー
  • 13.9 購入ボタン
  • 13.10 ピックアップの空き状況
  • 13.11 説明
  • 13.12 シェア
  • 13.13 ヘルプデスク
  • 13.14 カスタムリキッド
  • 13.15 製品の評価
  • 13.16 補完製品
  • 13.17 折りたたみ可能な行
  • 13.18 続きを読む
  • 13.19 テキストの回転
13.1 ブレッドクラム ブロックの設定。

ブレッドクラムリストにコレクションページを表示できるようにします。

13.2 テキストブロックの設定。
ブロック設定設定説明
文章
文章テキストを追加します。
文字サイズテキスト サイズは次のオプションのいずれかに設定できます。
  • 小さい
  • 中くらい
  • 大きい
  • 特大
13.3 タイトルブロックの設定。
ブロック設定設定説明
タイトル
タイトルサイズタイトルのサイズ:
  • 小さい
  • 中くらい
  • 大きい
商品価格を表示商品価格の表示が可能になります
製品の評価を表示する製品の評価を表示できるようにします。
13.4 価格ブロックの設定。

税金通知を表示するには、「税金通知を表示」を有効にします。

13.5 SKU ブロックの設定。

カスタマイズ可能な設定はありません。

13.6 インベントリステータスブロックの設定。
ブロック設定設定説明
在庫状況
在庫しきい値が低い企業がいつでも手元に置いておきたい特定の製品の最小数量。

0 を選択すると、在庫がある場合は常に在庫があると表示されます。

在庫移動通知を表示する在庫移動通知を表示します
配色次の 6 つのオプションから 1 つを選択します。
  • アクセント1
  • アクセント2
  • アクセント3
  • アクセント4
  • アクセント5
  • アクセント6
13.7 品質セレクターブロックの設定。

カスタマイズ可能な設定はありません。

13.8 バリアント ピッカー ブロックの設定。
ブロック設定設定説明
バリアントピッカー
バリアントラベルを表示バリアントのラベルを表示します。
タイプバリアント ピッカーのスタイル。ドロップダウンまたはボタンのいずれかを選択します。
色見本を有効にする

バリアント ピッカー タイプを「ボタン」にする必要があります。

カラーバリエーションをスウォッチで表示します。これには、「ボタン」バリアント ピッカー タイプが必要です。
サイズ表
サイズチャートページ

顧客が購入する前にサイズを知る必要がある衣料品を販売している場合は、商品ページにカスタム サイズ表を追加できます。ここでは、サイズ表の内容を表すページを選択します。

13.9 購入ボタン ブロックの設定。

このブロックには、「カートに追加」ボタンと店舗受け取り情報が表示されます。動的チェックアウト ボタンを表示することもできます。

ブロック設定設定説明
購入ボタン
数量セレクターを表示顧客が購入する製品の単位数を変更するために使用できる数量セレクターが表示されます。デフォルトの数量は 1 です。
動的なチェックアウト ボタンを表示するストアで利用可能な支払い方法を使用すると、顧客には PayPal や Apple Pay などの好みのオプションが表示されます。
ギフトカードの受取人情報フォームを表示します。購入者は、個人的なメッセージを添えて、予定された日付にギフトカードを送信できます。
13.10 受け取り可能ブロックの設定。

ローカルピックアップを設定することで、顧客は小売店の在庫状況を確認できるようになります。

13.11 説明ブロックの設定。

説明テキストのサイズを選択します。

  • 小さい
  • 中くらい
  • 大きい
  • 特大
13.12 共有ブロックの設定。
ブロック設定設定説明
共有
文章ブロックにテキストを追加します
ヘルプデスク
ヘルプデスクを表示するヘルプデスクを表示できるようにします
ヘルプラベルテキストはヘルプ ラベル ブロックについて説明します。
ヘルプページリンクしたいURLを追加します。
13.13 ヘルプ デスク ブロックの設定。
ブロック設定設定説明
ヘルプデスク
ヘルプラベルテキストはヘルプ ラベル ブロックについて説明します。
ヘルプページヘルプ デスク ブロックをリンクするページを選択します。
13.14 カスタム液体ブロックの設定。

独自の Liquid コードを追加してカスタム ブロックを作成できます。

13.15 製品評価ブロックの設定。

製品の平均評価を星で表示し、括弧内にレビュー数を表示します (例: ★★★★★ (8))。また、Shopify Product Reviews などの製品レビュー アプリと、reviews.rated_count および reviews.rated のメタフィールド定義も必要です。

13.16 相補積ブロックの設定。
ブロック設定設定説明
補完的な製品
見出し補完製品のテキストを入力します。
展示できる最大の商品数相補積の数は 1 ～ 10 の範囲です。
ベンダーを表示製品の販売元を表示します。
価格を表示商品の価格を表示します。
13.17 折りたたみ可能な行ブロックの設定。
ブロック設定設定説明
折りたたみ可能な行
アイコン折りたたみ可能なタブに対応する既成の SVG アイコンを選択します。 [なし] オプションを選択すると、アイコンが無効になります。
見出しタブのタイトル。折りたたんだときと展開したときに表示されます。
行の内容タブの内容。タブが展開されている場合にのみ表示されます。
ページの行コンテンツページのコンテンツをタブに表示します。ページ エディターからのページ コンテンツのみが表示され、ページのテンプレートからのリキッド スタイルはこのブロックには表示されません。 [タブ コンテンツ] に入力されたコンテンツはすべて、ページ コンテンツの上に表示されます。
13.18 続きを読むブロックの設定。

カスタマイズ可能な設定はありません。

13.19 スピニングテキストブロックの設定。

テキスト:回転するテキストを追加します。

14. 画像比較

このセクションでは、目的に基づいて 2 つの製品を比較します。

画像比較セクションの設定
セクション設定設定説明
画像比較
レイアウト比較を 2 つの形式で表示します。
  • 水平
  • 垂直
デスクトップの高さデスクトップ上で表示されるときの画像の高さを決定します。
  • 画像に適応- 画像の元のアスペクト比を維持します。
  • 400ピクセル - 400ピクセル。
  • 450ピクセル - 450ピクセル。
  • 550ピクセル - 550ピクセル。
  • 650ピクセル - 650ピクセル。
  • 750ピクセル - 750ピクセル
  • 全画面 - ウィンドウ ブラウザの高さに合わせて画像を拡張します。
モバイルレイアウト
モバイルの高さモバイルで表示するときの画像の高さを決定します。
  • 自動- ブラウザはデスクトップの値に基づいて決定します。
  • 200ピクセル - 200ピクセル。
  • 250ピクセル - 250ピクセル。
  • 300ピクセル - 300ピクセル。
  • 400ピクセル - 400ピクセル。
  • 500ピクセル - 500ピクセル。
  • 全画面 - 画像をブラウザ ウィンドウの高さまで拡張します。
見出し
見出しセクションのタイトル。
見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。
見出しの配置見出しは、 Left 、 Center 、またはRightに揃えることができます。
見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。
小見出し見出しの小見出しは見出しの上に配置されます。
説明見出しの説明テキストは見出しの下に配置されます。
ボタンラベルボタンに表示されるテキスト。
ボタンリンクボタンの URL。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
色必要に応じて、次のセクションの色をカスタマイズできます。
  • 文章
  • 背景
  • 背景のグラデーション
  • ハイライト
  • ハイライトグラデーション
  • ボタンのテキスト
  • ボタンの背景
  • ボタンの背景のグラデーション
セクション
上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。
セクション区切り線を表示このセクションの上に行区切りを表示します。
セクションを狭くする容器が狭くなってしまいます。
断面を丸くする上の 2 つの角に丸いエッジを適用します。
カスタムCSSこのセクションにカスタム CSS を追加します。

このセクションには最大 2 つの画像ブロックを追加します。

画像ブロックの設定。
ブロック設定設定説明
画像
画像デスクトップ ブラウザ上でこのコレクションの比較として使用する画像を割り当てます。
モバイル画像モバイル ブラウザーでこのコレクションの比較として使用する画像を割り当てます。
小見出し小見出しは、対応する見出しの上に配置され、サイズが小さくなります。
見出し画像のタイトルの大きなテキスト。
コンテンツの位置見出しと小見出しのテキストの位置。 3 つのオプションから 1 つを選択します: スター、センター、エンド。
文字の色テキストの色。

15. テキスト付き画像

画像とテキスト ブロックを含むセクションを追加し、顧客を新しいページにリンクするオプションのボタンを追加できます。テキストと画像を組み合わせて、選択した製品、コレクション、ブログ投稿に焦点を当てます。在庫状況、スタイルに関する詳細を追加したり、レビューを提供したりすることもできます。

「テキスト付き画像」セクションの設定
セクション設定設定説明
テキスト付き画像
画像デスクトップブラウザに表示されるセクションの画像。
デスクトップの高さデスクトップ上で表示されるときの画像の高さを決定します。
  • 画像に適応- 画像の元のアスペクト比を維持します。
  • 400ピクセル - 400ピクセル。
  • 450ピクセル - 450ピクセル。
  • 550ピクセル - 550ピクセル。
  • 650ピクセル - 650ピクセル。
  • 750ピクセル - 750ピクセル
  • 全画面 - ウィンドウ ブラウザの高さに合わせて画像を拡張します。
デスクトップ画像の幅デスクトップで表示するときの画像の幅を決定します:小、中、または大
デスクトップ画像の配置デスクトップ上のセクションのレイアウト:
  • 画像を最初に表示:左側の画像を表示します。
  • 2 番目の画像:左側のテキストを表示します。
最初の画像はデフォルトのモバイルレイアウトです
デスクトップコンテンツの配置デスクトップ上のコンテンツの配置を設定します。
  • 左
  • 中心
  • 右
モバイルレイアウト
モバイル画像モバイルブラウザに表示されるセクションの画像。
モバイルの高さモバイルで表示するときの画像の高さを決定します。
  • 自動- ブラウザはデスクトップの値に基づいて決定します。
  • 200ピクセル - 200ピクセル。
  • 250ピクセル - 250ピクセル。
  • 300ピクセル - 300ピクセル。
  • 400ピクセル - 400ピクセル。
  • 500ピクセル - 500ピクセル。
  • 全画面 - 画像をブラウザ ウィンドウの高さまで拡張します。
モバイルコンテンツの調整モバイルブラウザでのコンテンツの配置を設定します。
  • 左
  • 中心
  • 右
色必要に応じて、次のセクションの色をカスタマイズできます。
  • 文章
  • 背景
  • 背景のグラデーション
  • ハイライト
  • ハイライトグラデーション
  • ボタンのテキスト
  • ボタンの背景
  • ボタンの背景のグラデーション
セクション
上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。
セクション区切り線を表示このセクションの上に行区切りを表示します。
セクションを狭くする容器が狭くなってしまいます。
断面を丸くする上の 2 つの角に丸いエッジを適用します。
視差効果を有効にする2 次元の画像またはシーンに奥行きの錯覚を生み出す視差効果を表示できるようにします。
カスタムCSSこのセクションにカスタム CSS を追加します。

利用可能なブロック:

  • 15.1 見出し
  • 15.2 テキスト
  • 15.3 ボタン
  • 15.4 リンク
  • 15.5 画像
  • 15.6 カスタムリキッド
  • 15.7 空きスペース
15.1 見出しブロックの設定。
ブロック設定設定説明
見出し
見出しブロックのタイトル。
見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralarge のオプションのいずれかに設定できます。
見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
15.2 テキストブロックの設定。
ブロック設定設定説明
文章
文章テキストを追加します。
文字サイズテキスト サイズは次のオプションのいずれかに設定できます。
  • 小さい
  • 中くらい
  • 大きい
  • 特大
  • カスタム。

カスタム オプションを使用すると、テキスト サイズを 12 ピクセルから 128 ピクセルまでの任意の値に設定でき、算術的に 2 ピクセルずつ増加します。

テキストフォントテキストの書式設定として、本文または見出しの 2 つのオプションから選択します。
二次色を使用する二次カラーを有効にします。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
15.3 Button ブロックの設定。
ブロック設定設定説明
ボタン
ボタンラベルボタンに表示されるテキスト。
ボタンリンクボタンの URL。
ボタンのサイズボタンのサイズを 3 つのオプションで調整します: 小、中、または大
アウトラインボタンスタイルを使用するボタンのアウトライン スタイルを使用します。
15.4 リンクブロックの設定。
ブロック設定設定説明
リンク
文章ボタンのすぐ横に配置されるリンクのテキスト。
リンクリンクしたいURLを追加します。
15.5 画像ブロックの設定。
ブロック設定設定説明
画像
画像ブロックする画像を選択します。
画像の幅2 つの画像幅オプションのいずれかを選択します。
  • 全幅:画像がブラウザ ウィンドウ全体に表示されます。
  • カスタム:画像の幅を 20 ピクセルから 1000 ピクセルまで 10 ピクセル単位で設定します。
15.6 カスタム液体ブロックの設定。

独自の Liquid コードを追加してカスタム ブロックを作成できます。

15.7 空スペースブロックの設定。
ブロック設定設定説明
空きスペース
デスクトップの高さデスクトップ上で表示されるときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 40 ピクセルです。
モバイルの高さモバイルで表示するときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 28 ピクセルです。

16. テキスト付き画像

このセクションは [テキスト付き画像] セクションと似ていますが、2 つの画像を同時に表示できます。これにより、ページのデザインの柔軟性が高まります。

「テキスト付き画像」セクションの設定
セクション設定設定説明
テキスト付き画像
画像デスクトップブラウザに表示されるセクションの最初の画像。
画像2デスクトップ ブラウザに表示されるセクションの 2 番目の画像。
画像比率画像の画像比率:
  • 画像に適応(デフォルト) - 画像のアスペクト比を使用します。これにより、画像が切り取られるのを防ぎます。
  • 正方形- 画像を 1:1 の比率でトリミングします。
  • ポートレート- 画像を 2:3 の比率にトリミングします。
  • 風景- 画像を 3:2 の比率にトリミングします。
  • ワイド- 画像を 16:9 の比率にトリミングします。
  • Rounded - 画像を円として切り抜きます。
デスクトップ画像の幅デスクトップで表示するときの画像の幅を決定します:小、中、または大

画像はモバイル向けに自動的に最適化されます

デスクトップ画像の配置デスクトップ上のセクションのレイアウト:
  • 画像を最初に表示:左側の画像を表示します。
  • 2 番目の画像:左側にテキストを表示します。
最初の画像はデフォルトのモバイルレイアウトです。
デスクトップコンテンツの配置デスクトップ上のコンテンツの配置を設定します。
  • 左
  • 中心
  • 右
モバイルレイアウト
モバイルコンテンツの調整モバイルブラウザでのコンテンツの配置を設定します。
  • 左
  • 中心
  • 右
色必要に応じて、次のセクションの色をカスタマイズできます。
  • 文章
  • 背景
  • 背景のグラデーション
  • ハイライト
  • ハイライトグラデーション
  • ボタンのテキスト
  • ボタンの背景
  • ボタンの背景のグラデーション
セクション
上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。
セクション区切り線を表示このセクションの上に行区切りを表示します。
セクションを狭くする容器が狭くなってしまいます。
断面を丸くする上の 2 つの角に丸いエッジを適用します。
視差効果を有効にする2 次元の画像またはシーンに奥行きの錯覚を生み出す視差効果を表示できるようにします。
カスタムCSSこのセクションにカスタム CSS を追加します。

利用可能なブロック:

  • 16.1 見出し
  • 16.2 テキスト
  • 16.3 ボタン
  • 16.45 リンク
  • 16.5 画像
  • 16.6 カスタムリキッド
  • 16.7 空きスペース
16.1 見出しブロックの設定。
ブロック設定設定説明
見出し
見出しブロックのタイトル。
見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralarge のオプションのいずれかに設定できます。
見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
16.2 テキストブロックの設定。
ブロック設定設定説明
文章
文章テキストを追加します。
文字サイズテキスト サイズは次のオプションのいずれかに設定できます。
  • 小さい
  • 中くらい
  • 大きい
  • 特大
  • カスタム。

カスタム オプションを使用すると、テキスト サイズを 12 ピクセルから 128 ピクセルまでの任意の値に設定でき、算術的に 2 ピクセルずつ増加します。

テキストフォントテキストの書式設定として、本文または見出しの 2 つのオプションから選択します。
二次色を使用する二次カラーを有効にします。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
16.3 Button ブロックの設定。
ブロック設定設定説明
ボタン
ボタンラベルボタンに表示されるテキスト。
ボタンリンクボタンの URL。
ボタンのサイズボタンのサイズを 3 つのオプションで調整します: 小、中、または大
アウトラインボタンスタイルを使用するボタンのアウトライン スタイルを使用します。
16.4 リンクブロックの設定。
ブロック設定設定説明
リンク
文章ボタンのすぐ横に配置されるリンクのテキスト。
リンクリンクしたいURLを追加します。
16.5 画像ブロックの設定。
ブロック設定設定説明
画像
画像ブロックする画像を選択します。
画像の幅2 つの画像幅オプションのいずれかを選択します。
  • 全幅:画像がブラウザ ウィンドウ全体に表示されます。
  • カスタム:画像の幅を 20 ピクセルから 1000 ピクセルまで 10 ピクセル単位で設定します。
16.6 カスタム液体ブロックの設定。

独自の Liquid コードを追加してカスタム ブロックを作成できます。

16.7 空スペースブロックの設定。
ブロック設定設定説明
空きスペース
デスクトップの高さデスクトップ上で表示されるときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 40 ピクセルです。
モバイルの高さモバイルで表示するときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 28 ピクセルです。

17. テキストオーバーレイを含む画像

カスタム テキスト オーバーレイを備えた大きな画像を顧客に紹介できます。メッセージには、製品について説明したり、お知らせを共有したり、店舗への顧客を歓迎したりすることができます。

「テキスト付き画像オーバーレイ」セクションの設定
セクション設定設定説明
テキスト付き画像
画像デスクトップブラウザに表示されるセクションの画像。
デスクトップの高さデスクトップ上で表示されるときの画像の高さを決定します。
  • 画像に適応- 画像の元のアスペクト比を維持します。
  • 400ピクセル - 400ピクセル。
  • 450ピクセル - 450ピクセル。
  • 550ピクセル - 550ピクセル。
  • 650ピクセル - 650ピクセル。
  • 750ピクセル - 750ピクセル
  • 全画面 - ウィンドウ ブラウザの高さに合わせて画像を拡張します。
デスクトップ画像の幅デスクトップで表示するときの画像の幅を決定します:小、中、または大

画像はモバイル向けに自動的に最適化されます。

デスクトップ画像の配置デスクトップ上のセクションのレイアウト:
  • 画像を最初に表示:左側の画像を表示します。
  • 2 番目の画像:左側にテキストを表示します。

最初の画像はデフォルトのモバイルレイアウトです。

デスクトップコンテンツの配置デスクトップ上のコンテンツの配置を設定します。
  • 左
  • 中心
  • 右
モバイルレイアウト
モバイル画像モバイルブラウザに表示されるセクションの画像。
モバイルの高さモバイルで表示するときの画像の高さを決定します。
  • 自動- ブラウザはデスクトップの値に基づいて決定します。
  • 200ピクセル - 200ピクセル。
  • 250ピクセル - 250ピクセル。
  • 300ピクセル - 300ピクセル。
  • 400ピクセル - 400ピクセル。
  • 500ピクセル - 500ピクセル。
  • 全画面 - 画像をブラウザ ウィンドウの高さまで拡張します。
モバイルコンテンツの調整モバイルブラウザでのコンテンツの配置を設定します。
  • 左
  • 中心
  • 右
色必要に応じて、次のセクションの色をカスタマイズできます。
  • 文章
  • 背景
  • 背景のグラデーション
  • ハイライト
  • ハイライトグラデーション
  • ボタンのテキスト
  • ボタンの背景
  • ボタンの背景のグラデーション
セクション
上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。
セクション区切り線を表示このセクションの上に行区切りを表示します。
セクションを狭くする容器が狭くなってしまいます。
断面を丸くする上の 2 つの角に丸いエッジを適用します。
視差効果を有効にする2 次元の画像またはシーンに奥行きの錯覚を生み出す視差効果を表示できるようにします。
カスタムCSSこのセクションにカスタム CSS を追加します。

利用可能なブロック:

  • 17.1 見出し
  • 17.2 小見出し
  • 17.3 テキスト
  • 17.4 ボタン
  • 17.5 リンク
  • 17.6 画像
  • 17.7 カスタムリキッド
  • 17.8 空きスペース
17.1 見出しブロックの設定。
ブロック設定設定説明
見出し
見出しブロックのタイトル。
見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralarge のオプションのいずれかに設定できます。
見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
17.2 小見出しブロックの設定。
ブロック設定設定説明
小見出し
小見出し見出しの小見出し。
小見出しのサイズ小見出しのサイズ:
  • 小さい
  • 中くらい
  • 大きい
二次色を使用する文字の色をベースに少し明るい色を適用します。
17.3 テキストブロックの設定。
ブロック設定設定説明
文章
文章テキストを追加します。
文字サイズテキスト サイズは次のオプションのいずれかに設定できます。
  • 小さい
  • 中くらい
  • 大きい
  • 特大
  • カスタム。

カスタム オプションを使用すると、テキスト サイズを 12 ピクセルから 128 ピクセルまでの任意の値に設定でき、算術的に 2 ピクセルずつ増加します。

テキストフォントテキストの書式設定として、本文または見出しの 2 つのオプションから選択します。
二次色を使用する二次カラーを有効にします。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
17.4 Button ブロックの設定。
ブロック設定設定説明
ボタン
ボタンラベルボタンに表示されるテキスト。
ボタンリンクボタンの URL。
ボタンのサイズボタンのサイズを 3 つのオプションで調整します: 小、中、または大
アウトラインボタンスタイルを使用するボタンのアウトライン スタイルを使用します。
17.5 リンクブロックの設定。
ブロック設定設定説明
リンク
文章ボタンのすぐ横に配置されるリンクのテキスト。
リンクリンクしたいURLを追加します。
17.6 画像ブロックの設定。
ブロック設定設定説明
画像
画像ブロックする画像を選択します。
画像の幅2 つの画像幅オプションのいずれかを選択します。
  • 全幅:画像がブラウザ ウィンドウ全体に表示されます。
  • カスタム:画像の幅を 20 ピクセルから 1000 ピクセルまで 10 ピクセル単位で設定します。
17.7 カスタム液体ブロックの設定。

独自の Liquid コードを追加してカスタム ブロックを作成できます。

17.8 空スペースブロックの設定。
ブロック設定設定説明
空きスペース
デスクトップの高さデスクトップ上で表示されるときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 40 ピクセルです。
モバイルの高さモバイルで表示するときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 28 ピクセルです。

18. テキストオーバーレイを含む画像

このセクションは [テキスト オーバーレイ付き画像] セクションと似ていますが、最大 5 つの画像を同時に表示できます。これにより、ページのデザインの柔軟性が高まります。

「テキスト付き画像オーバーレイ」セクションの設定
セクション設定設定説明
テキストオーバーレイを含む画像
透明なヘッダーを許可するこの設定は、このセクションが最初のセクションである場合にのみ適用されます。
デスクトップの高さデスクトップ上で表示されるときの画像の高さを決定します。
  • 画像に適応- 画像の元のアスペクト比を維持します。
  • 400ピクセル - 400ピクセル。
  • 450ピクセル - 450ピクセル。
  • 550ピクセル - 550ピクセル。
  • 650ピクセル - 650ピクセル。
  • 750ピクセル - 750ピクセル
  • 全画面 - ウィンドウ ブラウザの高さに合わせて画像を拡張します。
デスクトップコンテンツの幅デスクトップで表示するときの画像の幅を決定します。
  • 小さい
  • 中くらい
  • 大きい
デスクトップのコンテンツの位置デスクトップ上のコンテンツの位置を設定します。
  • 左上
  • 中左
  • 左下
  • 中央上部
  • ミドルセンター
  • 中央下
  • 右上
  • 中右
  • 右下
デスクトップコンテンツの配置デスクトップ上のコンテンツの配置を設定します。
  • 左
  • 中心
  • 右
画像1デスクトップブラウザに表示されるセクションの最初の画像。
画像2デスクトップ ブラウザに表示されるセクションの 2 番目の画像。
画像3デスクトップ ブラウザに表示されるセクションの 3 番目の画像。
画像4デスクトップ ブラウザに表示されるセクションの 4 番目の画像。
画像5デスクトップ ブラウザに表示されるセクションの 5 番目の画像。
モバイルレイアウト
モバイルの高さモバイルで表示するときの画像の高さを決定します。
  • 自動- ブラウザはデスクトップの値に基づいて決定します。
  • 200ピクセル - 200ピクセル。
  • 250ピクセル - 250ピクセル。
  • 300ピクセル - 300ピクセル。
  • 400ピクセル - 400ピクセル。
  • 500ピクセル - 500ピクセル。
  • 全画面 - 画像をブラウザ ウィンドウの高さまで拡張します。
モバイルコンテンツの位置モバイルブラウザ上のコンテンツの位置を設定します。
  • 左上
  • 中左
  • 左下
  • 中央上部
  • ミドルセンター
  • 中央下
  • 右上
  • 中右
  • 右下
モバイルコンテンツの調整モバイルブラウザでのコンテンツの配置を設定します。
  • 左
  • 中心
  • 右
色必要に応じて、次のセクションの色をカスタマイズできます。
  • 文章
  • ハイライト
  • ハイライトグラデーション
  • ボタンの背景
  • ボタンの背景のグラデーション
  • オーバーレイは 0% から 100% まで調整できます。
セクション
上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。
セクション区切り線を表示このセクションの上に行区切りを表示します。
セクションを狭くする容器が狭くなってしまいます。
断面を丸くする上の 2 つの角に丸いエッジを適用します。
視差効果を有効にする2 次元の画像またはシーンに奥行きの錯覚を生み出す視差効果を表示できるようにします。
カスタムCSSこのセクションにカスタム CSS を追加します。

利用可能なブロック:

  • 18.1 見出し
  • 18.2 小見出し
  • 18.3 テキスト
  • 18.4 ボタン
  • 18.5 リンク
  • 18.6 画像
  • 18.7 カスタムリキッド
  • 18.8 空きスペース
18.1 見出しブロックの設定。
ブロック設定設定説明
見出し
見出しブロックのタイトル。
見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralarge のオプションのいずれかに設定できます。
見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
18.2 小見出しブロックの設定。
ブロック設定設定説明
小見出し
小見出し見出しの小見出し。
小見出しのサイズ小見出しのサイズ:
  • 小さい
  • 中くらい
  • 大きい
二次色を使用する文字の色をベースに少し明るい色を適用します。
18.3 テキストブロックの設定。
ブロック設定設定説明
文章
文章テキストを追加します。
文字サイズテキスト サイズは次のオプションのいずれかに設定できます。
  • 小さい
  • 中くらい
  • 大きい
  • 特大
  • カスタム。

カスタム オプションを使用すると、テキスト サイズを 12 ピクセルから 128 ピクセルまでの任意の値に設定でき、算術的に 2 ピクセルずつ増加します。

テキストフォントテキストの書式設定として、本文または見出しの 2 つのオプションから選択します。
二次色を使用する二次カラーを有効にします。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
18.4 Button ブロックの設定。
ブロック設定設定説明
ボタン
ボタンラベルボタンに表示されるテキスト。
ボタンリンクボタンの URL。
ボタンのサイズボタンのサイズを 3 つのオプションで調整します: 小、中、または大
アウトラインボタンスタイルを使用するボタンのアウトライン スタイルを使用します。
18.5 リンクブロックの設定。
ブロック設定設定説明
リンク
文章ボタンのすぐ横に配置されるリンクのテキスト。
リンクリンクしたいURLを追加します。
18.6 画像ブロックの設定。
ブロック設定設定説明
画像
画像ブロックする画像を選択します。
画像の幅2 つの画像幅オプションのいずれかを選択します。
  • 全幅:画像がブラウザ ウィンドウ全体に表示されます。
  • カスタム:画像の幅を 20 ピクセルから 1000 ピクセルまで 10 ピクセル単位で設定します。
18.7 カスタム液体ブロックの設定。

独自の Liquid コードを追加してカスタム ブロックを作成できます。

18.8 空スペースブロックの設定。
ブロック設定設定説明
空きスペース
デスクトップの高さデスクトップ上で表示されるときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 40 ピクセルです。
モバイルの高さモバイルで表示するときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 28 ピクセルです。

19. ロゴ一覧

セクションでは、ロゴの水平リストを表示できます。

ロゴリストセクションの設定
セクション設定設定説明
ロゴ一覧
スタイルセクションを表示するには、[境界線スタイルあり] または[背景スタイルあり] を選択します。
水平方向の空間隣接するロゴの水平方向の間隔。 50 ピクセルから 200 ピクセルの範囲で、算術的に 5 ピクセルずつ増加します。
マーキースタイル
方向ロゴの動きを左または右に移動します。
スピードナビゲーションの速度を 1 倍から 30 倍まで調整します。
見出し
見出しセクションのタイトル。
見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。
見出しの配置見出しは、 Left 、 Center 、またはRightに揃えることができます。
見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。
小見出し見出しの小見出しは見出しの上に配置されます。
説明見出しの説明テキストは見出しの下に配置されます。
ボタンラベルボタンに表示されるテキスト。
ボタンリンクボタンの URL。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
色必要に応じて、次のセクションの色をカスタマイズできます。
  • 文章
  • 背景
  • 背景のグラデーション
  • ハイライト
  • ハイライトグラデーション
  • ボタンのテキスト
  • ボタンの背景
  • ボタンの背景のグラデーション
セクション
上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。
セクション区切り線を表示このセクションの上に行区切りを表示します。
セクションを狭くする容器が狭くなってしまいます。
断面を丸くする上の 2 つの角に丸いエッジを適用します。
カスタムCSSこのセクションにカスタム CSS を追加します。

各ロゴはロゴブロックに設定されます

ロゴブロックの設定。
ブロック設定設定説明
ロゴ
画像ロゴ画像を選択します。
画像の高さロゴの高さを 0px から 200px まで調整し、算術的に 4px ずつ増加します。
リンクリンクしたいURLを追加します。

20. ルックブック

このセクションでは、画像ボード上に製品のピンを作成し、各ピンが顧客を製品の詳細に誘導します。

Lookbook セクションの設定
セクション設定設定説明
ルックブック
画像デスクトップ上のセクションのイメージ。
モバイル画像モバイル上のセクションの画像。
見出し
見出しセクションのタイトル。
見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。
見出しの配置見出しは、 Left 、 Center 、またはRightに揃えることができます。
見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。
小見出し見出しの小見出しは見出しの上に配置されます。
説明見出しの説明テキストは見出しの下に配置されます。
ボタンラベルボタンに表示されるテキスト。
ボタンリンクボタンの URL。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
色必要に応じて、次のセクションの色をカスタマイズできます。
  • 文章
  • 背景
  • 背景のグラデーション
  • ハイライト
  • ハイライトグラデーション
  • ボタンのテキスト
  • ボタンの背景
  • ボタンの背景のグラデーション
セクション
上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。
セクション区切り線を表示このセクションの上に行区切りを表示します。
セクションを狭くする容器が狭くなってしまいます。
断面を丸くする上の 2 つの角に丸いエッジを適用します。
カスタムCSSこのセクションにカスタム CSS を追加します。

利用可能なブロック:

  • 製品ブロック
  • コンテンツブロック
20.1 Product ブロックの設定。
ブロック設定設定説明
製品
製品を選択してくださいこのブロックの積を選択します。
ホットスポット
文章文字の色を調整します。
縦位置スポットと画像の上端の間の距離を指定します。
水平位置スポットと画像の左端の間の距離を指定します。
モバイルレイアウト
縦位置スポットとモバイルブラウザ上の画像の上端の間の距離を指定します。
水平位置スポットとモバイルブラウザ上の画像の左端の間の距離を指定します。
20.2 コンテンツブロックの設定。
ブロック設定設定説明
コンテンツ
タイトルスポットのタイトル。
文章タイトルよりも小さいサブテキスト。
リンク顧客がクリックした場合に移動するリンク。
ホットスポット
文章テキストの色。
縦位置スポットと画像の上端の間の距離を指定します。
水平位置スポットと画像の左端の間の距離を指定します。
モバイルレイアウト
縦位置スポットとモバイルブラウザ上の画像の上端の間の距離を指定します。
水平位置スポットとモバイルブラウザ上の画像の左端の間の距離を指定します。

21. 地図

このセクションには、ビジネスの場所を強調表示する Google マップが表示されます。

マップセクションの設定
セクション設定設定説明
地図
透明なヘッダーを許可するこの設定は、このセクションが最初のセクションである場合にのみ適用されます。
地図の住所住所を入力してください。 Google マップは正確な場所を見つけます。
Google マップ API キー Google API キーを入力します。
地図のズームレベル 12 から 20 にズームインします。ズーム レベルが高くなると、より詳細が表示されます。
マップスタイルマップ スタイルの書式を設定するには、次の 6 つのオプションのいずれかを選択します。
  • 標準
  • 銀
  • レトロ
  • 暗い
  • 夜
  • 茄子
画像マップのロードに失敗した場合に表示する代替マップ イメージを選択します。
デスクトップの高さデスクトップ上で表示されるときの画像の高さを決定します。
  • 画像に適応- 画像の元のアスペクト比を維持します。
  • 400ピクセル - 400ピクセル。
  • 450ピクセル - 450ピクセル。
  • 550ピクセル - 550ピクセル。
  • 650ピクセル - 650ピクセル。
  • 750ピクセル - 750ピクセル
  • 全画面 - ウィンドウ ブラウザの高さに合わせて画像を拡張します。
デスクトップのコンテンツの位置デスクトップ上のコンテンツの位置を設定します。
  • 左上
  • 中左
  • 左下
  • 中央上部
  • ミドルセンター
  • 中央下
  • 右上
  • 中右
  • 右下
デスクトップコンテンツの配置デスクトップ上のコンテンツの配置を設定します。
  • 左
  • 中心
  • 右
モバイルレイアウト
モバイルレイアウトこのセクションをモバイル ブラウザで表示するスタイルを選択してください:
  • 最初に地図を表示 - テキストの上に地図を表示します。
  • テキスト オーバーレイ- テキストがマップにオーバーレイされます。
モバイルの高さモバイルで表示するときの画像の高さを決定します。
  • 自動- ブラウザはデスクトップの値に基づいて決定します。
  • 200ピクセル - 200ピクセル。
  • 250ピクセル - 250ピクセル。
  • 300ピクセル - 300ピクセル。
  • 400ピクセル - 400ピクセル。
  • 500ピクセル - 500ピクセル。
  • 全画面 - 画像をブラウザ ウィンドウの高さまで拡張します。
モバイルコンテンツの調整モバイルブラウザでのコンテンツの配置を設定します。
  • 左
  • 中心
  • 右
色必要に応じて、次のセクションの色をカスタマイズできます。
  • 文章
  • 背景
  • 背景のグラデーション
  • ハイライト
  • ハイライトグラデーション
  • ボタンのテキスト
  • ボタンの背景
  • ボタンの背景のグラデーション
セクション
上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。
セクション区切り線を表示このセクションの上に行区切りを表示します。
セクションを狭くする容器が狭くなってしまいます。
断面を丸くする上の 2 つの角に丸いエッジを適用します。
視差効果を有効にする視差効果を有効にすると、2 次元の画像またはシーンに奥行きの錯覚が生まれます。

視差方向は次の 3 つのオプションから選択できます。

  • 垂直
  • 水平
  • ズーム
カスタムCSSこのセクションにカスタム CSS を追加します。

利用可能なブロック:

  • 21.1 見出し
  • 21.2 小見出し
  • 21.3 テキスト
  • 21.4 ボタン
  • 21.5 リンク
  • 21.6 画像
  • 21.7 カスタムリキッド
  • 21.8 空きスペース
21.1 見出しブロックの設定。
ブロック設定設定説明
見出し
見出しブロックのタイトル。
見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。
見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
21.2 小見出しブロックの設定。
ブロック設定設定説明
小見出し
小見出し見出しの小見出し。
小見出しのサイズ小見出しのサイズ:
  • 小さい
  • 中くらい
  • 大きい
二次色を使用する文字の色をベースに少し明るい色を適用します。
21.3 テキストブロックの設定。
ブロック設定設定説明
文章
文章テキストを追加します。
文字サイズテキスト サイズは次のオプションのいずれかに設定できます。
  • 小さい
  • 中くらい
  • 大きい
  • 特大
  • カスタム。

カスタム オプションを使用すると、テキスト サイズを 12 ピクセルから 128 ピクセルまでの任意の値に設定でき、算術的に 2 ピクセルずつ増加します。

テキストフォントテキストの書式設定として、本文または見出しの 2 つのオプションから選択します。
二次色を使用する二次カラーを有効にします。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
21.4 Button ブロックの設定。
ブロック設定設定説明
ボタン
ボタンラベルボタンに表示されるテキスト。
ボタンリンクボタンの URL。
ボタンのサイズボタンのサイズを 3 つのオプションで調整します: 小、中、または大
アウトラインボタンスタイルを使用するボタンのアウトライン スタイルを使用します。
21.5 リンクブロックの設定。
ブロック設定設定説明
リンク
文章ボタンのすぐ横に配置されるリンクのテキスト。
リンクリンクしたいURLを追加します。
21.6 画像ブロックの設定。
ブロック設定設定説明
画像
画像ブロックする画像を選択します。
画像の幅2 つの画像幅オプションのいずれかを選択します。
  • 全幅:画像がブラウザ ウィンドウ全体に表示されます。
  • カスタム:画像の幅を 20 ピクセルから 1000 ピクセルまで 10 ピクセル単位で設定します。
21.7 カスタム液体ブロックの設定。

独自の Liquid コードを追加してカスタム ブロックを作成できます。

21.8 空スペースブロックの設定。
ブロック設定設定説明
空きスペース
デスクトップの高さデスクトップ上で表示されるときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 40 ピクセルです。
モバイルの高さモバイルで表示するときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 28 ピクセルです。

22. 複数列

マルチカラム セクションを使用して、コンテンツを列レイアウトで表示し、列の下にボタンを追加して顧客を新しいページに移動できます。テキストと画像を組み合わせて、選択した製品、コレクション、ブログ投稿に焦点を当てます。可用性、スタイルに関する詳細を追加するか、レビューを提供します。

複数列セクションの設定
セクション設定設定説明
複数列
デスクトップ上の列の数デスクトップブラウザに表示される列数をカスタマイズします: 2 列または4 列。
モバイルレイアウト
モバイルの列数モバイルブラウザに表示される列の数をカスタマイズします: 1 列または2 列。
モバイルでスワイプを有効にする水平スワイプでモバイル表示を 1 行に設定します。
見出し
見出しセクションのタイトル。
見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。
見出しの配置見出しは、 Left 、 Center 、またはRightに揃えることができます。
見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。
小見出し見出しの小見出しは見出しの上に配置されます。
説明見出しの説明テキストは見出しの下に配置されます。
ボタンラベルボタンに表示されるテキスト。
ボタンリンクボタンの URL。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
色必要に応じて、次のセクションの色をカスタマイズできます。
  • 文章
  • 背景
  • 背景のグラデーション
  • ハイライト
  • ハイライトグラデーション
  • ボタンのテキスト
  • ボタンの背景
  • ボタンの背景のグラデーション
セクション
上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。
セクション区切り線を表示このセクションの上に行区切りを表示します。
セクションを狭くする容器が狭くなってしまいます。
断面を丸くする上の 2 つの角に丸いエッジを適用します。
カスタムCSSこのセクションにカスタム CSS を追加します。

使用可能なブロック:列ブロック。

列ブロックの設定。
ブロック設定設定説明
カラム
デスクトップコンテンツの配置デスクトップ上のコンテンツの配置を設定します。
  • 左
  • 中心
  • 右
モバイルコンテンツの調整モバイルブラウザでのコンテンツの配置を設定します。
  • 左
  • 中心
  • 右
画像ブロックの画像です。
画像比率ブロック画像の画像比率:
  • 画像に適応(デフォルト) - 画像のアスペクト比を使用します。これにより、画像が切り取られるのを防ぎます。
  • 正方形- 画像を 1:1 の比率でトリミングします。
  • ポートレート- 画像を 2:3 の比率にトリミングします。
  • 風景- 画像を 3:2 の比率にトリミングします。
  • ワイド- 画像を 16:9 の比率にトリミングします。
見出しブロックのタイトル。
見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Largeのいずれかのオプションに設定できます。
説明画像の説明。
ボタンラベルボタンに表示されるテキスト。
ボタンリンクボタンの URL。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2

23. アイコン付きの複数列

「アイコン付き複数列」セクションの設定
セクション設定設定説明
アイコン付きの複数列
デスクトップ上の列の数デスクトップブラウザに表示される列数をカスタマイズします: 2 列または 4 列。
デスクトップコンテンツの配置デスクトップ上のコンテンツの配置を設定します。
  • 左
  • 中心
  • 右
見出し
見出しセクションのタイトル。
見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。
見出しの配置見出しは、 Left 、 Center 、またはRightに揃えることができます。
見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。
小見出し見出しの小見出しは見出しの上に配置されます。
説明見出しの説明テキストは見出しの下に配置されます。
ボタンラベルボタンに表示されるテキスト。
ボタンリンクボタンの URL。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
色必要に応じて、次のセクションの色をカスタマイズできます。
  • 文章
  • 背景
  • 背景のグラデーション
  • ハイライト
  • ハイライトグラデーション
  • ボタンのテキスト
  • ボタンの背景
  • ボタンの背景のグラデーション
セクション
上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。
セクション区切り線を表示このセクションの上に行区切りを表示します。
セクションを狭くする容器が狭くなってしまいます。
断面を丸くする上の 2 つの角に丸いエッジを適用します。
カスタムCSSこのセクションにカスタム CSS を追加します。

使用可能なブロック:列ブロック。

列ブロックの設定。
ブロック設定設定説明
カラム
アイコンアイコンリストからアイコンを選択します。
見出しコラムのタイトル。
説明テキストは列を説明します。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2

コレクションの任意の組み合わせから製品を表示するセクションを追加できます。

各コレクションはCollectionブロックに設定されます

「複数の注目コレクション」セクションの設定>
セクション設定設定説明
注目のコレクション
展示できる最大の商品数相補積の数は 2 ～ 12 の範囲です。
デスクトップ上の列の数デスクトップブラウザに表示される列の数を 1 から 5 までカスタマイズします。
デスクトップでカルーセルを有効にするコレクションの製品のカルーセルをデスクトップ ブラウザーに表示します。
「すべて表示」ボタンを有効にするコレクションリストの下に「すべて表示」ボタンが追加されます。これは、リストに表示されているコレクションよりも多くのコレクションが含まれている場合に推奨されます。
モバイルレイアウト
モバイルの列数モバイルブラウザに表示される列の数をカスタマイズします: 1 列または2 列。
モバイルでスワイプを有効にする水平スワイプでモバイル表示を 1 行に設定します。
見出し
見出しセクションのタイトル。
見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralarge のオプションのいずれかに設定できます。
見出しの配置見出しは、 Left 、 Center 、またはRightに揃えることができます。
見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。
小見出し見出しの小見出しは見出しの上に配置されます。
説明見出しの説明テキストは見出しの下に配置されます。
ボタンラベルボタンに表示されるテキスト。
ボタンリンクボタンの URL。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
色必要に応じて、次のセクションの色をカスタマイズできます。
  • 文章
  • 背景
  • 背景のグラデーション
  • ハイライト
  • ハイライトグラデーション
  • ボタンのテキスト
  • ボタンの背景
  • ボタンの背景のグラデーション
セクション
上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。
セクション区切り線を表示このセクションの上に行区切りを表示します。
セクションを狭くする容器が狭くなってしまいます。
断面を丸くする上の 2 つの角に丸いエッジを適用します。
カスタムCSSこのセクションにカスタム CSS を追加します。

利用可能なブロック:コレクション ブロック。

コレクション ブロックの設定。
ブロック設定設定説明
コレクション
コレクション製品を表示するコレクションを選択します。
製品コレクション全体ではなく、個々の製品を表示できます。
タイトル注目のコレクションのタイトル

25. ポートフォリオ

このセクションでは、クライアントに価値を示すために、作業サンプル、製品、その他の関連アイテムのコレクションを追加できます。

ポートフォリオセクションの設定
セクション設定設定説明
ポートフォリオ
デスクトップ上の列の数デスクトップブラウザに表示される列数を1列から5列にカスタマイズします。
デスクトップのレイアウトデスクトップのレイアウトを表示します。
  • グリッド
  • 標準
画像比率デスクトップブラウザ上の画像の比率:
  • 画像に適応(デフォルト) - 画像のアスペクト比を使用します。これにより、画像が切り取られるのを防ぎます。
  • 正方形- 画像を 1:1 の比率でトリミングします。
  • ポートレート- 画像を 2:3 の比率にトリミングします。
  • 風景- 画像を 3:2 の比率にトリミングします。
  • ワイド- 画像を 16:9 の比率にトリミングします。
  • Rounded - 画像を円として切り抜きます。
モバイルレイアウト
モバイル画像比率モバイルブラウザ上の画像の比率:
  • 画像に適応(デフォルト) - 画像のアスペクト比を使用します。これにより、画像が切り取られるのを防ぎます。
  • 正方形- 画像を 1:1 の比率でトリミングします。
  • ポートレート- 画像を 2:3 の比率にトリミングします。
  • 風景- 画像を 3:2 の比率にトリミングします。
  • ワイド- 画像を 16:9 の比率にトリミングします。
  • Rounded - 画像を円として切り抜きます。
モバイルの列数モバイルブラウザに表示される列の数をカスタマイズします: 1 列または2 列。
モバイルでスワイプを有効にする水平スワイプでモバイル表示を 1 行に設定します。
見出し
見出しセクションのタイトル。
見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。
見出しの配置見出しは、 Left 、 Center 、またはRightに揃えることができます。
見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。
小見出し見出しの小見出しは見出しの上に配置されます。
説明見出しの説明テキストは見出しの下に配置されます。
ボタンラベルボタンに表示されるテキスト。
ボタンリンクボタンの URL。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
色必要に応じて、次のセクションの色をカスタマイズできます。
  • 文章
  • 背景
  • 背景のグラデーション
  • ハイライト
  • ハイライトグラデーション
  • ボタンのテキスト
  • ボタンの背景
  • ボタンの背景のグラデーション
セクション
上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。
セクション区切り線を表示このセクションの上に行区切りを表示します。
セクションを狭くする容器が狭くなってしまいます。
断面を丸くする上の 2 つの角に丸いエッジを適用します。
カスタムCSSこのセクションにカスタム CSS を追加します。

ポートフォリオの各項目は見出しブロックに設定されます。

見出しブロックの設定。
ブロック設定設定説明
プロフィール
画像ブロックのイメージです。
モバイル画像モバイルブラウザ上のブロックの画像。
見出しブロックのタイトル。
文章テキストでブロックについて説明します。
カラーテキストテキストと背景の色を調整できます。

26. 最近閲覧したもの

顧客が以前にアクセスしたことのある製品を見つけて購入を促すのに役立ちます。これにより、顧客はナビゲーション メニューから道を見つけるよりも、再度見つけやすくなります。

最近閲覧したセクションの設定
セクション設定設定説明
最近見た
最近の製品の数相補積の数は 2 ～ 12 の範囲です。
デスクトップ上の列の数デスクトップブラウザに表示される列数を1列から5列までカスタマイズします。
デスクトップでカルーセルを有効にするコレクションの製品のカルーセルをデスクトップ ブラウザーに表示します。
モバイルレイアウト
モバイルの列数モバイルブラウザに表示される列の数をカスタマイズします: 1 列または2 列。
モバイルでスワイプを有効にする水平スワイプでモバイル表示を 1 行に設定します。
見出し
見出しセクションのタイトル。
見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。
見出しの配置見出しは、 Left 、 Center 、またはRightに揃えることができます。
見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。
小見出し見出しの小見出しは見出しの上に配置されます。
説明見出しの説明テキストは見出しの下に配置されます。
ボタンラベルボタンに表示されるテキスト。
ボタンリンクボタンの URL。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
色必要に応じて、次のセクションの色をカスタマイズできます。
  • 文章
  • 背景
  • 背景のグラデーション
  • ハイライト
  • ハイライトグラデーション
  • ボタンのテキスト
  • ボタンの背景
  • ボタンの背景のグラデーション
セクション
上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。
セクション区切り線を表示このセクションの上に行区切りを表示します。
セクションを狭くする容器が狭くなってしまいます。
断面を丸くする上の 2 つの角に丸いエッジを適用します。
カスタムCSSこのセクションにカスタム CSS を追加します。

このセクションではブロックの追加はサポートされていません。

27. リッチテキスト

ヘッダー、段落コンテンツ、および顧客を新しいページにリンクするボタンを含むリッチ テキスト セクションを追加できます。

リッチテキストセクションの設定
セクション設定設定説明
リッチテキスト
デスクトップコンテンツの配置デスクトップ上のコンテンツの配置:
  • 左
  • 中心
  • 右
モバイルコンテンツの調整モバイルブラウザでのコンテンツの配置を設定します。
  • 左
  • 中心
  • 右
見出し
見出しセクションのタイトル。
見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。
見出しの配置見出しは、 Left 、 Center 、またはRightに揃えることができます。
見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。
小見出し見出しの小見出しは見出しの上に配置されます。
説明見出しの説明テキストは見出しの下に配置されます。
ボタンラベルボタンに表示されるテキスト。
ボタンリンクボタンの URL。
ハイライトされたテキスト
ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
色必要に応じて、次のセクションの色をカスタマイズできます。
  • 文章
  • 背景
  • 背景のグラデーション
  • ハイライト
  • ハイライトグラデーション
  • ボタンのテキスト
  • ボタンの背景
  • ボタンの背景のグラデーション
セクション
上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します