商品ページはオンライン ストアにとって重要な要素です。セクションとブロックをカスタマイズすることで、情報量と説得力があり、ユーザーに製品やサービスの購入を促すページを作成できます。
製品ページには、ブロックで構成される複数のセクションが含まれています。この記事では、このテンプレートに含まれるテンプレート セクション グループの概要を説明します。
デフォルトでは、製品ページには次のセクションがあります。
1. 製品情報
このセクションには製品に関する情報が表示されます。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| 製品情報 | デスクトップ上でスティッキーコンテンツを有効にする | 顧客が注目の製品画像を下 (または上) にスクロールすると、製品コンテンツが画面に貼り付けられます。 |
| メディア | ||
| デスクトップメディアの幅 | デスクトップ上のメディアの幅。このセクションのサイズを変更するには、35% から 70% まで調整できます。 | |
| デスクトップのレイアウト | デスクトップのレイアウトを表示します。
| |
| 画像のズーム | 3 つのオプションが利用可能:
| |
| バリアントを選択した後、他のバリアントのメディアを非表示にする | バリアントが選択されると、他のバリアントの画像が表示されなくなります。バリアントの選択を解除すると、画像が再表示されます。 | |
| ビデオの自動再生を有効にする | ビデオを自動的に再生します。 | |
| ビデオループを有効にする | ビデオを繰り返し再生します。 | |
| モバイルレイアウト | 次の 2 つのオプションのいずれかを選択します。
| |
| モバイルでサムネイルを表示する | モバイルではサムネイルを表示します。 | |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
利用可能なブロック:
- 1.1 ブレッドクラム
- 1.2 テキスト
- 1.3 タイトル
- 1.4 価格
- 1.5SKU
- 1.6 在庫状況
- 1.7 数量セレクター
- 1.8 バリアントピッカー
- 1.9 製品バリエーション
- 1.10 購入ボタン
- 1.11 ピックアップの有無
- 1.12 説明
- 1.13 シェア
- 1.14 ヘルプデスク
- 1.15 カスタムリキッド
- 1.16 製品の評価
- 1.17 補完製品
- 1.18 折りたたみ可能な行
1.1 ブレッドクラムブロックの設定。
ブレッドクラムリストにコレクションページを表示できるようにします。
1.2 テキストブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 文章 | ||
| 文章 | テキストを追加します。 | |
| 文字サイズ | テキスト サイズは次のオプションのいずれかに設定できます。
|
1.3 タイトルブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| タイトル | ||
| タイトルサイズ | タイトルのサイズ:
| |
| 商品価格を表示 | 商品価格の表示が可能になります | |
| 製品の評価を表示する | 製品の評価を表示できるようにします。 |
1.4 価格ブロックの設定。
税金通知を表示するには、「税金通知を表示」を有効にします。
1.5 SKU ブロックの設定。
カスタマイズ可能な設定はありません。
1.6 インベントリステータスブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 在庫状況 | ||
| 在庫しきい値が低い | 企業がいつでも手元に置いておきたい特定の製品の最小数量。 0 を選択すると、在庫がある場合は常に在庫があると表示されます。 | |
| 在庫移動通知を表示する | 在庫移動通知を表示します | |
| 配色 | 次の 6 つのオプションから 1 つを選択します。
|
1.7 品質セレクターブロックの設定。
カスタマイズ可能な設定はありません。
1.8 バリアント ピッカー ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| バリアントピッカー | ||
| バリアントラベルを表示 | バリアントのラベルを表示します。 | |
| タイプ | バリアント ピッカーのスタイル。ドロップダウンまたはボタン のいずれかを選択します。 | |
| 色見本を有効にする バリアント ピッカー タイプが「ボタン」である必要があります。 | カラーバリエーションをスウォッチで表示します。 これには、「ボタン」バリアント ピッカー タイプが必要です。スウォッチを設定する方法を学びます。 | |
| スウォッチの種類 | カラー見本またはバリアント画像のいずれかを選択します。 | |
| サイズ表 | サイズチャートページ | 顧客が購入する前にサイズを知る必要がある衣料品を販売している場合は、商品ページにカスタム サイズ表を追加できます。ここでは、サイズ表の内容を表すページを選択します。 |
1.9 製品バリエーション ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 製品バリエーション | ||
| オプション名 | オプション名を追加します (例:カラー、スタイル... ) | |
| オプション値メタディルド | 名前空間と値を保持するメタフィールドのキーを入力します。例:カスタムカラー | |
| 製品 | 特集したい製品を選択します。 すべてのバリエーション (製品自体を含む) を選択します。 | |
| 色見本 | ||
| 色見本を有効にする | 色見本を表示できるようにします。 | |
| スウォッチの種類 | 次の 2 つのオプションのいずれかを選択します:カラー見本または製品画像。 | |
| サイズ表 | サイズチャートページ | 顧客が購入する前にサイズを知る必要がある衣料品を販売している場合は、商品ページにカスタム サイズ表を追加できます。サイズ表の内容を表すページを選択してください |
1.10 購入ボタン ブロックの設定。
このブロックには、「カートに追加」ボタンと店舗受け取り情報が表示されます。動的チェックアウト ボタンを表示することもできます。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 購入ボタン | ||
| 数量セレクターを表示 | 数量セレクターを表示できるようにします。 | |
| 動的なチェックアウト ボタンを表示する | ストアで利用可能な支払い方法を使用すると、顧客には PayPal や Apple Pay などの好みのオプションが表示されます。 | |
| ギフトカードの受取人情報フォームを表示します。 | 購入者は、予定された日に個人的なメッセージを添えてギフトカードを送信できます。 |
1.11 受け取り可能ブロックの設定。
ローカルピックアップを設定することで、顧客は小売店の在庫状況を確認できるようになります。
1.12 説明ブロックの設定。
説明テキストのサイズを選択します。
- 小さい
- 中くらい
- 大きい
- 特大
1.13 共有ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 共有 | 文章 | ブロックにテキストを追加します。 |
| ヘルプデスク | ||
| ヘルプデスクを表示する | ヘルプデスクを表示できるようにします | |
| ヘルプラベル | テキストはヘルプ ラベル ブロックについて説明します。 | |
| ヘルプの種類 | ヘルプ ページのスタイルドロワーとスタイルページのどちらかを選択します。 | |
| ヘルプページ | リンクしたいURLを追加します。 |
1.14 ヘルプ デスク ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| ヘルプデスク | ||
| ヘルプラベル | テキストはヘルプ ラベル ブロックについて説明します。 | |
| ヘルプの種類 | ヘルプ ページのスタイルドロワーとスタイルページのどちらかを選択します。 | |
| ヘルプページ | ヘルプ デスク ブロックをリンクするページを選択します。 |
1.15 カスタム液体ブロックの設定。
独自の Liquid コードを追加してカスタム ブロックを作成できます。もっと詳しく知る。
1.16 製品評価ブロックの設定。
製品の平均評価を星で表示し、括弧内にレビュー数を表示します (例: ★★★★★ (8))。また、Shopify Product Reviews などの製品レビュー アプリと、reviews.rated_count および reviews.rated のメタフィールド定義も必要です。 もっと詳しく知る。
1.17 相補積ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 補完的な製品 | ||
| 見出し | 補完製品のテキストを入力します。 | |
| 展示できる最大の商品数 | 相補積の数は 1 ～ 10 の範囲です。 | |
| ベンダーを表示 | 製品の販売元を表示します。 | |
| 価格を表示 | 商品の価格を表示します。 |
1.18 折りたたみ可能な行ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 折りたたみ可能な行 | ||
| アイコン | 折りたたみ可能なタブに対応する既成の SVG アイコンを選択します。 [なし] オプションを選択すると、アイコンが無効になります。 | |
| 見出し | タブのタイトル。折りたたんだときと展開したときに表示されます。 | |
| 行の内容 | タブの内容。タブが展開されている場合にのみ表示されます。 | |
| ページの行コンテンツ | ページのコンテンツをタブに表示します。ページ エディターからのページ コンテンツのみが表示され、ページのテンプレートからのリキッド スタイルはこのブロックには表示されません。 [タブ コンテンツ] に入力されたコンテンツはすべて、ページ コンテンツの上に表示されます。 |
2. ヘルプドロワー
このセクションでは、顧客がストアの製品、サービス、ポリシーなどの情報にすばやく簡単にアクセスできるようにします。
| セクション設定 | 設定 | 説明 | ヘルプドロワ |
|---|---|---|
| 見出し | セクションのタイトル。 | |
| 説明 | 見出しの説明テキストは見出しの下に配置されます。 |
利用可能なブロック:コンテンツ ブロック。
コンテンツブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| コンテンツ | ||
| アイコン | リスト上のコンテンツのアイコンを選択します。 | |
| 見出し | コンテンツのタイトルの大きなテキスト。 | |
| 文章 | テキストを追加します。 例:連絡先情報、店舗の詳細、ブランド コンテンツを顧客と共有する。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
3. ビデオヒーロー
。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| ビデオヒーロー | 透明なヘッダーを許可する | この設定は、このセクションが最初のセクションである場合にのみ適用されます。 |
| Shopify がホストするビデオ | ビデオ | Shopify がホストするビデオからビデオを選択します。 |
| URLからビデオを埋め込む | ||
| URL | ビデオへの YouTube または Vimeo リンク。ビデオは一般公開されている必要があります。 | |
| 表紙画像 | 顧客がビデオを再生する前に表示される画像。 | |
| ビデオの ALT テキスト | スクリーン リーダーを使用している顧客がビデオにアクセスできるようにビデオについて説明します。 | |
| ビデオの自動再生を有効にする | ビデオを自動的に再生します。 | |
| デスクトップコンテンツの幅 | デスクトップで表示するときの画像の幅を決定します。
| |
| モバイルレイアウト | ||
| モバイルビデオ | モバイルブラウザでアップロードすることでビデオを選択/アップロードします。 | |
| または URL からビデオを埋め込む | モバイル ブラウザ上の URL からビデオを埋め込みます。 | |
| モバイルのカバー画像 | 顧客がモバイル ブラウザでビデオを再生する前に表示される画像。 | |
| モバイルの高さ | モバイルで表示するときの画像の高さを決定します。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを全幅にする | コンテナを全幅にします。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
使用可能なブロック：スライドブロック。
スライドブロックの設定です。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| スライド | ||
| 見出し | ブロックのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
4. コラージュ
このセクションでは、2 列のビデオまたは画像のコラージュを作成します。デフォルトでは、このセクションにはビデオ、製品、およびコレクションのブロックが含まれています。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| 見出し | ||
| 見出し | セクションのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。 | |
| 見出しの配置 | 見出しは、 Left 、 Center 、またはRightに揃えることができます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| 説明 | 見出しの説明テキストは見出しの下に配置されます。 | |
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| 視差効果を有効にする | 視差効果を有効にすると、2 次元の画像またはシーンに奥行きの錯覚が生まれます。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
利用可能なブロック:
- 4.1 画像ブロック
- 4.2 ビデオブロック
4.1 画像ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 画像 | ||
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| 見出し | ブロックのタイトル。 | |
| リンク | 顧客がクリックした場合に移動するリンク。 | |
| 小見出しと見出しを反転する | 見出しと小見出しの位置を入れ替えます。 | |
| 画像 | ブロックの画像を選択/アップロードします。 | |
| 画像比率 | ブログ投稿画像の画像比率:
| |
| デスクトップのコンテンツの位置 | デスクトップ上のコンテンツの位置:
| |
| デスクトップコンテンツの配置 | デスクトップ上のコンテンツの配置:
| |
| モバイルレイアウト | ||
| モバイル画像 | モバイルに表示されるブロックの画像。 | |
| モバイル画像比率 | モバイルブラウザ上の画像の比率:
| |
| モバイルコンテンツの位置 | モバイルブラウザ上のコンテンツの位置:
| |
| モバイルコンテンツの調整 | モバイルブラウザでのコンテンツの配置:
| |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
4.2 ビデオブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| ビデオ | ||
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| 見出し | ブロックのタイトル。 | |
| リンク | 顧客がクリックした場合に移動するリンク。 | |
| 小見出しと見出しを反転する | 見出しと小見出しの位置を入れ替えます。 | |
| Shopify がホストするビデオ | ビデオ | Shopify がホストするビデオからビデオを選択します |
| URLからビデオを埋め込む | ||
| URL | ビデオへの YouTube または Vimeo リンク。ビデオは一般公開されている必要があります。 | |
| 表紙画像 | ビデオの再生前に表示される画像。 | |
| ビデオの ALT テキスト | スクリーン リーダーを使用している顧客がビデオにアクセスできるように、ビデオについて説明します。 | |
| ビデオの自動再生を有効にする | ビデオを自動的に再生します。 | |
| ビデオループを有効にする | ビデオを繰り返し再生します。 | |
| 画像比率 | ブログ投稿画像の画像比率:
| |
| デスクトップのコンテンツの位置 | デスクトップ上のコンテンツの位置を設定します。
| |
| デスクトップコンテンツの配置 | デスクトップ上のコンテンツの配置を設定します。
| |
| モバイルレイアウト | ||
| モバイルビデオ | モバイルブラウザ用にアップロードすることでビデオを選択/アップロードします。 | |
| または URL からビデオを埋め込む | モバイル ブラウザ上の URL からビデオを埋め込みます。 | |
| モバイルのカバー画像 | モバイルでビデオが再生される前に表示される画像。 | |
| モバイル画像比率 | デスクトップブラウザ上の画像の比率:
| |
| モバイルコンテンツの位置 | モバイルブラウザ上のコンテンツの位置を設定します。
| |
| モバイルコンテンツの調整 | モバイルブラウザでのコンテンツの配置を設定します。
| |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
5. テキスト付き画像
画像とテキスト ブロックを含むセクションを追加し、顧客を新しいページにリンクするオプションのボタンを追加できます。テキストと画像を組み合わせて、選択した製品、コレクション、ブログ投稿に焦点を当てます。在庫状況、スタイルに関する詳細を追加したり、レビューを提供したりすることもできます。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| テキスト付き画像 | ||
| 画像 | デスクトップブラウザに表示されるセクションの画像。 | |
| デスクトップの高さ | デスクトップ上で表示されるときの画像の高さを決定します。
| |
| デスクトップ画像の幅 | デスクトップで表示するときの画像の幅を決定します:小、中、または大 | |
| デスクトップ画像の配置 | デスクトップ上のセクションのレイアウト:
| |
| デスクトップコンテンツの配置 | デスクトップ上のコンテンツの配置を設定します。
| |
| モバイルレイアウト | ||
| モバイル画像 | モバイルブラウザに表示されるセクションの画像。 | |
| モバイルの高さ | モバイルで表示するときの画像の高さを決定します。
| |
| モバイルコンテンツの調整 | モバイルブラウザでのコンテンツの配置を設定します。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| 視差効果を有効にする | 2 次元の画像またはシーンに奥行きの錯覚を生み出す視差効果を表示できるようにします。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
利用可能なブロック:
- 5.1 見出し
- 5.2 テキスト
- 5.3 ボタン
- 5.4 リンク
- 5.5 画像
- 5.6 カスタムリキッド
- 5.7 空きスペース
5.1 見出しブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 見出し | ||
| 見出し | ブロックのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのオプションのいずれかに設定できます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
5.2 テキストブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 文章 | ||
| 文章 | テキストを追加します。 | |
| 文字サイズ | テキスト サイズは次のオプションのいずれかに設定できます。
カスタム オプションを使用すると、テキスト サイズを 12 ピクセルから 128 ピクセルまでの任意の値に設定でき、算術的に 2 ピクセルずつ増加します。 | |
| テキストフォント | テキストの書式設定として、本文または見出しの2 つのオプションから選択します。 | |
| 二次色を使用する | 二次色を有効にします。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
5.3 Button ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| ボタン | ||
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ボタンのサイズ | ボタンのサイズを 3 つのオプションで調整します: 小、中、または大 | |
| アウトラインボタンスタイルを使用する | ボタンのアウトライン スタイルを使用します。 |
5.4 リンクブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| リンク | ||
| 文章 | ボタンのすぐ横に配置されるリンクのテキスト。 | |
| リンク | リンクしたいURLを追加します。 |
5.5 画像ブロックの設定。
| ブロック設定 | 設定 | 説明 | 画像 |
|---|---|---|
| 画像 | ブロックする画像を選択します。 | |
| 画像の幅 | 2 つの画像幅オプションのいずれかを選択します。
|
5.6 カスタム液体ブロックの設定。
独自の Liquid コードを追加してカスタム ブロックを作成できます。
5.7 空きスペースブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 空きスペース | ||
| デスクトップの高さ | デスクトップ上で表示されるときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 40 ピクセルです。 | |
| モバイルの高さ | モバイルで表示するときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 28 ピクセルです。 |
6. テキストのスクロール
このセクションでは、画面上を移動するスクロール テキストを作成できます。狭いスペースに多くの情報を表示したり、注目を集めたり、その他の目的で使用できます。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| スクロールテキスト | ||
| 方向 | 希望のスクロール方向を選択します。
| |
| スピード | テキストのスクロール速度を決定します。 0.5/100px から 2.5/100px の範囲で、算術的に 0.1/100px ずつ増加します。 | |
| 水平方向の空間 | テキスト間の間隔は 50 ピクセルから 200 ピクセルの範囲で、5 ピクセルずつ増加します。 | |
| ツイン マーキーを有効にする | 2 つのマーキーを同時に表示します | |
| 視差効果を有効にする | 視差効果を有効にすると、2 次元の画像またはシーンに奥行きの錯覚が生まれます。この設定は、スクロールするテキストを強調表示するために使用できます。 | |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
利用可能なブロック:
- テキストブロック
- 画像ブロック
6.1 テキストブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 文章 | ||
| 文章 | テキストを追加します。 | |
| 文字サイズ | 文字サイズは12px～180pxまで設定可能です。 | |
| テキストフォント | テキストの書式設定について、本文または見出しの2 つのオプションから選択します。 | |
| ステンシルテキスト | ステンシルテキストを有効にします。 すべてのブラウザでは動作しない可能性があります。 |
6.2 画像ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 文章 | ||
| 画像 | ブロックの画像を選択します。 | |
| 画像の高さ | 画像の高さは 12px ～ 180px の間で設定できます。 |
7. 製品詳細
このセクションには製品に関する情報が表示されます。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| 製品詳細 | ||
| 最初の折りたたみ可能な行を開く | 最初の折りたたみ可能な行を開くことができます。 | |
| 仕様の見出し | ボックスに含まれるテキストを追加します。 | |
| 見出し | ||
| 見出し | セクションのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのオプションのいずれかに設定できます。 | |
| 見出しの配置 | 見出しは、 Left 、 Center 、またはRightに揃えることができます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| 説明 | 見出しの説明テキストは見出しの下に配置されます。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
利用可能なブロック:
- 7.1 説明
- 7.2 折りたたみ可能な行
- 7.3 仕様
7.1 説明ブロックの設定。
見出し- 見出しテキストを追加します。
7.2 折りたたみ可能な行ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 折りたたみ可能な行 | ||
| 見出し | タブのタイトル。折りたたんだときと展開したときに表示されます。 | |
| 行の内容 | タブの内容。タブが展開されている場合にのみ表示されます。 | |
| メタフィールド | 名前空間と値を保持するメタフィールドのキーを入力します。各メタフィールドは独自の行になければなりません。 |
7.3 仕様ブロックの設定。
| ブロック設定 | 設定 | 説明 | | アイコン | アイコン画像を選択/アップロードします。 | 見出し | ブロックのタイトル。 | |
|---|
8. よくある質問
このセクションでは、よくある質問に関する情報を示します。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| よくある質問 | スタイル | セクションを表示するには、 [境界線スタイルあり]または[背景スタイルあり] を選択します。 |
| 見出し | ||
| 見出し | セクションのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。 | |
| 見出しの配置 | 見出しは、 Left 、 Center 、またはRightに揃えることができます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| 説明 | 見出しの説明テキストは見出しの下に配置されます。 | |
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
利用可能なブロック:
- 8.1 リッチテキスト
- 8.2 質問
- 8.3 お問い合わせフォーム
8.1 リッチテキストブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| リッチテキスト | ||
| タイトル | ブロックのタイトル。 | |
| 文章 | このブロックの説明テキストを追加します。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
8.2 質問ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 質問 | ||
| 質問 | よくある質問を追加します。 | |
| 答え | 答えを追加します。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
8.3 コンタクトフォームブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| お問い合わせフォーム | ||
| 見出し | ブロックのタイトル。 | |
| 文章 | ブロック内に表示するテキスト。 | |
| 電話番号を表示 | 電話番号を表示します。 | |
| チームのアバター | チームのアバターを表示する画像を選択/アップロードします。 | |
| チームアバターの身長 | チームアバターの高さは20pxから100pxまで調整できます。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
9. アプリ
| セクション設定 | 設定 | 説明 |
|---|---|---|
| Shopify 製品レビュー | 製品レビューの統合を有効にする この機能を使用するには、 Shopify 製品レビュー アプリをインストールします。商品ページのみに表示されます。 | 製品レビューの統合を表示できるようにします。 製品レビュー アプリをテーマの外観と雰囲気に合わせて調整します。元のアプリのデザインを使用するにはオフにします。 |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
このセクションではブロックの追加はサポートされていません。
10. 関連商品
| セクション設定 | 設定 | 説明 |
|---|---|---|
| 関連商品 | ||
| 関連商品数 | このセクションに表示する製品を 2 ～ 12 個から選択します。 | |
| デスクトップ上の列の数 | デスクトップに表示される列の数を 1 から 5 までカスタマイズします。 | |
| デスクトップでカルーセルを有効にする | デスクトップに製品のカルーセルを表示します。 | |
| モバイルレイアウト | ||
| モバイルの列数 | モバイルに表示される列の数をカスタマイズします: 1 列または2 列。 | |
| モバイルでスワイプを有効にする | ||
| 見出し | ||
| 見出し | セクションのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。 | |
| 見出しの配置 | 見出しは、 Left 、 Center 、またはRightに揃えることができます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| 説明 | 見出しの説明テキストは見出しの下に配置されます。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
このセクションではブロックの追加はサポートされていません。
11. 最近閲覧したもの
顧客が以前にアクセスしたことのある製品を見つけて購入を促すのに役立ちます。これにより、顧客はナビゲーション メニューから道を見つけるよりも、再度見つけやすくなります。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| 最近見た | ||
| 最近の製品の数 | 相補積の数は 2 ～ 12 の範囲です。 | |
| デスクトップ上の列の数 | デスクトップブラウザに表示される列数を1列から5列までカスタマイズします。 | |
| デスクトップでカルーセルを有効にする | コレクションの製品のカルーセルをデスクトップ ブラウザーに表示します。 | |
| モバイルレイアウト | ||
| モバイルの列数 | モバイルブラウザに表示される列の数をカスタマイズします: 1 列または2 列。 | |
| モバイルでスワイプを有効にする | 水平スワイプでモバイル表示を 1 行に設定します。 | |
| 見出し | ||
| 見出し | セクションのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。 | |
| 見出しの配置 | 見出しは、 Left 、 Center 、またはRightに揃えることができます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| 説明 | 見出しの説明テキストは見出しの下に配置されます。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
このセクションではブロックの追加はサポートされていません。
この記事がお役に立てば幸いです。この機能についてご質問やご不明な点がございましたら、お気軽に弊社チームのサポートまでお問い合わせください。
