RoarTheme で行うすべてのことは、お客様のビジネスを推進するという 1 つの目標に集中しています。これには、私たちが作成するテーマと使用するテクノロジーが含まれます。しかし、マーケティング行為は時間の経過とともに変化し、以前のスペックシートへの強い依存から脱却してきました。本質的に、私たちと私たちが支援しようとしている人々の間にコミュニケーションのチャネルが開かれました。人々はもはや、少なくとも以前と同じようには「売り込まれる」ことを望んでいません。
これが、クライアントの最終製品が非常に価値があると私たちが考える理由です。私たちの製品やサービスがあなたの生活を改善するという「私たちの言葉を信じる」のではなく、他の本物の顧客から、あなたが行おうとしている決定が正しい理由を聞くことができます。
会社用に Shopify テーマを購入するには、特にこの分野に慣れていない人にとって、長くて難しい意思決定プロセスが必要です。組織に最適なものを選択する際には、考慮すべき要素がいくつかあります。困難を理解したので、あなたの判断を和らげさせてください。
ああ、でも私たちの言うことをすべて信じる必要はありません。自分の目で確かめたほうがいいでしょう。 Be Yours テーマを効果的に活用している英国の 5 つの店舗をご覧ください。
Cheeses of Muswell Hill は受賞歴のある家族経営のチーズ屋で、45 年以上にわたって優れたチーズの調達、製造、熟成を行っています。すべてのチーズ、チャツネ、ビスケットを細心の注意を払って調査して調達しており、場合によっては地元で調達していることもあります。
RoarTheme の Be Yours を使用して、Cheese of Muswell Hill は自社のさまざまな製品を表示すると同時に、顧客が製品を購入する際のオファーを表示することに成功しました。
ホームページには、目を引く巨大な写真を掲載する機会がたくさんあるだけでなく、ブランドの独特の手法、メッセージ、バックストーリーを反映する強力で力強いステートメントを作成するためのスペースも十分にあります。
Be Yours テーマは、お客様の声やビデオなどを共有することでブランドを宣伝します。単一製品のビジネスや、販売する製品の数が限られている新しい食品および飲料会社に最適です。
Bijoux De Mimi では、ユニークでカラフルなハギー フープ イヤリングや、これまで見たことのないお手頃価格のジュエリーを提供しています。目立ち、ルールを無視し、自分らしくありましょう。 Be Yours テーマでは、制限はありません。 Bijoux de Mimi の場合、この店はそのすべての機能と機能をジュエリーの販売に利用することで、多大な利益を得ています。ファッショナブルで最新のデザインのおかげで、誰もが素材を探索し、何がトレンドになっているかをチェックし、購入するでしょう。
Be Yours は、このようなジュエリー ストアを迅速に稼働させる、他に類を見ない多用途な Shopify テーマです。ビジュー ドゥ ミミはスタイリッシュな雰囲気を醸し出し、アイテムを目を引く方法で見せます。それだけでなく、その特徴的な外観により、誰もが目指すコンバージョンの増加が期待できるチャンスがあります。
Be Yours キットに付属する機能は広範囲にわたります。とりわけ、スライダー、ニュースレターのポップアップ、クイック検索オプション、素晴らしいメニュー、バーゲンカウンター、ブログ、通貨スイッチャーなどが利用できます。
Luxury Gift in a Box の活動の中核は顧客であり、地元の中小企業として提供する支援を顧客は楽しんでいます。各プレゼントボックスは細心の注意を払って梱包されています。ありがとう、ごめんなさい、愛しています、あなたを想っていますなど、さまざまな気持ちを込めてギフトボックスが届けられます。
企業の製品をオンラインで表示する場合、常にシンプルさと清潔さがうまく組み合わされます。 Luxury Gift in a Box は、ギフト ボックス ビジネスに適したデザインを提供する、またはシンプルなものも必要な場合に最適な例です。
Be Yours テーマは使い方が簡単ですが、結果は驚くべきものです
「Luxury Gift in a Box」は、現代の e コマース Web サイトに必須の数多くの機能も提供します。モジュラー バンドルには、簡単購入、全画面バナー、カスタマー レビュー、無限スクロール、スティッキー ナビゲーション、サイドバー フィルタリングが含まれています。
3 人で構成する集団 Tiny Riot の明るく見事なアートワークはインパクトを与え、話題になること間違いなしです。彼らのプリントには、迷彩柄のポップアートからロックやポップの王族まで、あらゆるものが含まれています。
Be Yours コンセプトを強調するために、視覚的に魅力的な画像と同様に素晴らしいアートワークを含めることで、Tiny Riot の創造性は可能な限り最大限に拡張されます。彼らの活動に命を吹き込むウェブサイトと、アートワークを独特で魅力的な方法で表現する現代的な美学により、Tiny Riot のブランドの個性はさらに強調されているようです。
タイニーライオットは、ホームページを見た瞬間からお店の雰囲気が決まる印象的なデザインを目指しています。
このテーマには、コンバージョン率の向上に役立つアップセルおよび販売指向の機能が多数含まれています。たとえば、クロスセル、再入荷通知、メニュー内プロモーション、より優れた検索、クイック購入、その他の機能が Be Yours によってサポートされています。
Be Yours Shopify テーマは、Tiny Riot の Web サイトで使用されています。アイテムそのものに重点を置いているため、余分なデザインが入り込む余地はありません。
パブリック スピリットは、団結の力と、飲み物のひとつひとつに伴うシンプルな親切な行為に基づいています。私たちは誰も飢えるべきではないと信じているので、私たちのスピリッツを飲むことは、困っている人たちに食事を与えることになります。
The Public Spirit の Web サイトを訪れた顧客は、この店が使用しているさわやかで控えめでありながら印象的な美学にすぐに衝撃を受けます。黒と白を組み合わせることで、お店の魅力がぐっと高まります。
柔軟性に関して言えば、Be Yours は優れたオンライン ストア ページと最先端の機能を備えた素晴らしい Shopify アルコール テーマでもあります。バーやパブの魅力的な Web プレゼンスを作成したいと考えている人のために、このテーマの事前構築済みデモは滑らかな暗い外観を提供します。
Be Yours を使用することで、The Public Spirit は同時にさまざまなものと結びつきます。すべての実用的な機能と互換性のある拡張機能を備えた、コレクションに含まれる酒類の Shopify テーマは、考え抜かれたレイアウトでオンライン ストアの開発を簡素化します。
結論
RoarTheme が Be Yours テーマで行うような柔軟性を備えた人は誰もいません。当社は、あらゆるビジネスオーナーの目的を支援するために正確に設計された幅広いプリセットと豊富な機能を備えた、貴社が探していた e コマース ソリューションです。
宝石店から酒屋、チーズ店に至るまで、上に挙げた 5 つのビジネスは、Be Yours のテーマをうまく活用しています。私たちのコンセプトをどこまで実現できるかという実際のテストは、お客様の完成品に見られます。したがって、次に可能性の間で引き裂かれ、選択肢の海をナビゲートしようとするときは、Be Yours powered by RoarTheme を念頭に置いてください。
Concept を使用すると、セクションや関連ブロックを任意のページに追加できます。
Concept では、セクションは通常、 Header 、 Overlay 、 Template 、およびFooterの 4 つの主要なグループに分類されます。それぞれのセクションには複数のセクションが含まれています。ブロックを使用してセクションを追加できます。
この記事では、すべてのセクションとブロックの概要を説明します。
このページでは
Web ページのセクション グループは、特定の目的のためにグループ化されたセクションのコレクションです。通常、メイン セクション グループは 4 つあります:ヘッダー グループ、オーバーレイ グループ、テンプレート グループ、およびフッター グループ。
A. ヘッダーグループ
- アナウンスバー（静的セクション）
- ヘッダー(静的セクション)
- 利用可能なセクション（動的セクション）
B. オーバーレイグループ
- カート引き出し（静的セクション）
- 検索ドロワー(静的セクション)
- クッキーバンヌ（静的セクション）
- ニュースレターポップアップ(静的セクション)
C.テンプレートグループ
このグループを使用すると、より柔軟に動的セクションを作成できます。
- ブログ投稿
- コラージュ
- ブログ投稿のコラージュ
- コレクションリスト
- お問い合わせフォーム
- 地図でのお問い合わせ
- カウントダウンタイマー
- カスタムリキッド
- メール登録
- 空きスペース
- よくある質問
- 注目のコレクション
- 注目の製品
- 画像比較
- テキスト付きの画像
- テキスト付きの画像
- テキストオーバーレイを含む画像
- テキストオーバーレイを含む画像
- ロゴ一覧
- ルックブック
- 地図
- 複数列
- アイコン付きの複数列
- 複数の注目コレクション
- ポートフォリオ
- 最近見た
- リッチテキスト
- スクロールテキスト
- 外観を購入する
- スライドショー
- お客様の声
- お客様の声のバナー
- タイムライン
- ビデオ
- ビデオヒーロー
- テキストオーバーレイ付きビデオ
D. フッターグループ
A.セクショングループ
「セクション グループを使用すると、テーマ開発者はテーマ レイアウト内にセクションの動的な集合体を作成できます。言い換えれば、セクション グループを使用すると、テーマ内で特定のセクションをグループ化できます。これにより、販売者はテーマ内でセクションを直接追加、削除、並べ替えることができます」エディタ。"続きを読む
1. ヘッダーグループ
ページの上部にあるセクション。通常、Web サイトのロゴ、ナビゲーション メニュー、その他の重要な情報が含まれます。
1.1.アナウンスバー
お知らせバーを使用すると、どのページからでも重要な情報を顧客に伝えることができます。表示するアナウンス ブロックを最大 3 つまでカスタマイズできます。アナウンス バーにリンクを追加してクリック可能にし、顧客を特定のページに誘導できます。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| アナウンスバー | ||
| ソーシャルメディアアイコンを表示する | テーマ設定で設定したソーシャル メディア アイコンが表示されます。 | |
| 言語セレクターを有効にする | 言語設定で有効にした国と地域を顧客が選択できるセレクターを追加し、顧客が選択した言語でストアを閲覧できるようにします。 | |
| 国/地域セレクターを有効にする | 支払い設定で有効にした国と地域を顧客が選択できるセレクターを追加します。これにより、顧客は選択した通貨で商品価格を表示できるようになります。 | |
| アイコンとセレクターを反転する | このオプションを切り替えると、ブラウザ内のアイコンとセレクターの位置が入れ替わります。このオプションにチェックを入れると、アイコンが右側に、セレクターが左側に表示されます。このオプションがチェックされていない場合、アイコンとセレクターは元の位置にあります。 | |
| 発表 | ||
| デスクトップアナウンスの位置 | デスクトップ アナウンスの位置は、左、中央、または右に設定できます。この位置はモバイル デバイス用に自動的に最適化されます。 | |
| 自動回転アナウンス | カルーセルが自動的に再生されるように設定します。これにより、再生切り替えボタンも追加されます。 | |
| アナウンスを毎秒変更する | アナウンスの表示時間はお好みに応じて 3 秒から 10 秒まで設定できます。 | |
| ナビゲーションを表示 | ナビゲーションボタンを表示します。 | |
| 色 | ||
| 文章 | お知らせテキストの色。 | |
| 背景 | アナウンスバーの背景の色。 | |
| 背景のグラデーション | アナウンスバーの背景のグラデーション。 | |
| ハイライト | ハイライトの色。 | |
| ハイライトグラデーション | ハイライトのグラデーション。 | |
| セクション | ||
| セクションを全幅にする | セクションをブラウザ ウィンドウの全幅にします。 | |
| 断面を丸くする | セクションをブラウザ ウィンドウの丸みにします。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
このセクションではアナウンス ブロックのみが利用可能です。
アナウンスブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 発表 | ||
| アイコン | 長いリストからアイコンのタイプを選択します。 | |
| 文章 | デスクトップ上で顧客に表示するアナウンス。 | |
| リンク | 顧客がアナウンス バーをクリックした場合に移動するリンク。 | |
| モバイルレイアウト | ||
| モバイルでアイコンを非表示にする | モバイルでアイコンを非表示にできるようにする | |
| モバイル上のテキスト | モバイルで顧客に表示するお知らせ。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き ハイライトされたテキスト スタイルを[手書きの落書き]に設定する必要があります。 | この設定では、手書きの落書きで強調表示されたテキストを描画するための 5 つの方法が提供されます。
|
1.2.ヘッダー
ヘッダーはテーマ内のすべてのページに表示されます。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| ヘッダ | ||
| ロゴ | デスクトップブラウザ上のストアのロゴ。ロゴはテーマ設定でのみ編集されます。 | |
| メニュー | メインメニュー。 | |
| メニューがアクティブです | メニュー項目にカーソルを置いたときの視覚的なインジケーターは、 [ドット]または[ブロック]に設定できます。 | |
| ヘッダーのレイアウト | オプション リストでロゴとメニューのレイアウトをカスタマイズします。 | |
| ホバー時のドロップダウンを有効にする |
| |
| スティッキーヘッダー | スティッキー ヘッダーには 3 つのオプションがあります。
| |
| モバイルレイアウト | ||
| ロゴ | モバイルで表示されるロゴ。ロゴはテーマ設定でのみ編集されます。 | |
| モバイルロゴの位置 | モバイルでのロゴの位置:左または中央。 | |
| ソーシャルメディアアイコンを表示する | テーマ設定で設定したソーシャル メディア アイコンが表示されます。 | |
| 言語セレクターを有効にする | 言語設定で有効にした国と地域を顧客が選択できるセレクターを追加し、顧客が選択した言語でストアを閲覧できるようにします。 | |
| 国/地域セレクターを有効にする | 支払い設定で有効にした国と地域を顧客が選択できるセレクターを追加します。これにより、顧客は選択した通貨で商品価格を表示できるようになります。 | |
| 透明ヘッダー | 文字の色 | 透明ヘッダーのテキストの色を変更します。 |
| 色 | ||
| 文章 | ヘッダーテキストの色を変更します。この設定は透過ヘッダーには適用されません。 | |
| 背景 | ヘッダーの背景の色を変更します。この設定は透過ヘッダーには適用されません。 | |
| セクション | ||
| 上部のパディング | セクションの上部内部空間の高さを決定します。 0px ～ 120px の範囲で、算術的に 4px ずつ増加します。 | |
| 底部のパディング | セクションの下部内部空間の高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。 | |
| セクションを全幅にする | セクションをブラウザ ウィンドウの全幅にします。 | |
| 断面を丸くする | セクションをブラウザの円周にします。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
このセクションでは、 Mega メニューの追加を許可します。
Mega メニューの設定。
| メガメニューの設定 | 設定 | 説明 |
|---|---|---|
| メガメニュー | ||
| メニュー項目 | メガメニューを追加するメニュー項目名。 | |
| メガメニューの画像を表示する | メガメニュー画像の表示を有効にします。 | |
| ボタンラベル ボタンを非表示にするには、ラベルを空白のままにします。 | ボタンのテキスト | |
| ボタンリンク | ボタンの URL。 | |
| プロモーション | ||
| 画像 | 表示したい画像 | |
| 画像比率 | ブログ投稿画像の画像比率:
| |
| 見出し | プロモーションのタイトル。 | |
| サブテキスト | プロモーションの説明テキスト。 | |
| 画像にテキストをオーバーレイする | 画像にテキストをオーバーレイするオプションを有効にします。このオプションが無効になっている場合、テキストは画像の下に表示されます。 | |
| リンク | リンク先の URL。 | |
| タグ | 製品に関する追加情報を提供するために製品ページに表示される小さなテキスト。 | |
| 文字の色 | テキストの色。 | |
| オーバーレイのテキストの色 | テキストのオーバーレイの色。 テキストオーバーレイの不透明度は0から100%まで設定できます。 |
1.3.利用可能なセクション
このグループには、次のような追加のセクションを追加できます。
2. オーバーレイグループ
ポップアップ ウィンドウ内で動作するセクションのグループ。
2.1.カート引き出し
カート ドロワーは、顧客がカートに追加した商品の概要を、別のカート ページにリダイレクトせずに表示するユーザー インターフェイス要素です。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| カート引き出し | ||
| ベンダーを表示 | 製品の販売元を表示します。 | |
| カートメモを表示 | カートメモを表示します。 | |
| 配送料計算ツールを表示 | 顧客が国/地域、都道府県、郵便番号/郵便番号を入力しておおよその送料を計算できるテーマ設定を有効にします。 | |
| カートを見るボタンを表示 | カートを見るボタンを表示します。 | |
| チェックアウトボタンを表示 | チェックアウトボタンを表示します。 | |
| 送料無料バー | ||
| 送料無料バーを表示 | 送料無料バーを表示します | |
| 送料無料の最低金額 | 数値のみを使用して金額を入力してください。複数の通貨を使用する場合は、各通貨コードをその金額で区切ります (例: USD:100、EUR:95、JPY:13000 ) | |
| カートの推奨事項 | ||
| カートの推奨事項を有効にする | カートのおすすめを表示します | |
| 見出し | カートの推奨事項のタイトル。 | |
| 展示できる最大の商品数 | 一度に 1 ～ 10 個の製品を表示します。 | |
| ベンダーを表示 | 製品の販売元を表示します。 | |
| 価格を表示 | 商品の価格を表示します。 | |
| 空のカートの推奨事項 | ||
| 文章 | 「どこから始めればよいかわかりませんか? これらのコレクションをお試しください: 」などの独自のテキストを使用します。 | |
| コレクションリスト | おすすめのコレクションを選択する | |
| 最近見た商品 | ||
| 最近閲覧した商品を有効にする | 最近閲覧した商品を表示します。 | |
| 見出し | セクションのタイトル。 | |
| 展示できる最大の商品数 | 一度に 1 ～ 10 個の製品を表示します。 | |
| ベンダーを表示 | 製品のベンダーを表示します。 | |
| 価格を表示 | 商品の価格を表示します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
2.2.検索ドロワー
テーマ設定でカートの種類を「ページ」に設定している場合、検索ドロワーは顧客には表示されません。
| カスタムCSS | このセクションにカスタム CSS を追加します。 |
|---|
2.3.クッキーバナー
Cookie バナーは、ユーザーが初めて Web サイトにアクセスしたときに Web サイトに表示される通知です。 Web サイトが使用する 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.3.2 テキストブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 文章 | ||
| 文章 | テキストを追加します。 | |
| 文字サイズ | テキスト サイズは次のオプションのいずれかに設定できます。 カスタム オプションを使用すると、テキスト サイズを 12 ピクセルから 128 ピクセルまでの任意の値に設定でき、算術的に 2 ピクセルずつ増加します。 | |
| テキストフォント | テキストの書式設定として、本文または見出しの2 つのオプションから選択します。 | |
| 二次色を使用する | 二次カラーを有効にします。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
2.3.3 ボタンブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 購入ボタン | ||
| ボタンのラベルを承認する | 承諾ボタンのテキスト。 ボタンを非表示にするには、ラベルを空白のままにします。 | |
| 拒否ボタンのラベル | 辞退ボタンのテキスト。 ボタンを非表示にするには、ラベルを空白のままにします。 |
2.3.4 画像ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 画像 | ||
| 画像 | ブロックする画像を選択します。 | |
| 画像の幅 | 2 つの画像幅オプションのいずれかを選択します。
|
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.4.2 テキストブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 文章 | ||
| 文章 | テキストを追加します。 | |
| 文字サイズ | テキスト サイズは次のオプションのいずれかに設定できます。 カスタム オプションを使用すると、テキスト サイズを 12 ピクセルから 128 ピクセルまでの任意の値に設定でき、算術的に 2 ピクセルずつ増加します。 | |
| テキストフォント | テキストの書式設定として、本文または見出しの2 つのオプションから選択します。 | |
| 二次色を使用する | 二次カラーを有効にします。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
2.4.3 Button ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| ボタン | ||
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ボタンのサイズ | ボタンのサイズを 3 つのオプションで調整します: 小、中、または大 | |
| アウトラインボタンスタイルを使用する | ボタンのアウトライン スタイルを使用します。 |
2.4.4 Link ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| リンク | ||
| 文章 | ボタンのすぐ横に配置されるリンクのテキスト。 | |
| リンク | リンクしたいURLを追加します。 |
2.4.5 画像ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 画像 | ||
| 画像 | ブロックする画像を選択します。 | |
| 画像の幅 | 2 つの画像幅オプションのいずれかを選択します。
|
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 行に設定します。 | |
| ブログ投稿カード | ||
| 画像比率 | ブログ投稿画像の画像比率:
| |
| タグを表示 | 管理ブログ投稿のタグを画像付きで表示します。 | |
| 上映日 | ブログ投稿の公開日を表示します。 | |
| コメント数を表示 | 公開されたコメントの総数を表示します。 | |
| 著者を表示 | ブログ投稿の作成者を表示します。 | |
| 以外を表示 | ブログ投稿の抜粋を表示します。 | |
| 見出し | ||
| 見出し | セクションのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。 | |
| 見出しの配置 | 見出しは、 Left 、 Center 、またはRightに揃えることができます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| 説明 | 見出しの説明テキストは見出しの下に配置されます。 | |
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
このセクションではブロックの追加はサポートされていません。
2. コラージュ
このセクションでは、2 列のビデオまたは画像のコラージュを作成します。デフォルトでは、セクションにはビデオ、製品、およびコレクションのブロックが含まれています。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| 見出し | ||
| 見出し | セクションのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。 | |
| 見出しの配置 | 見出しは、 Left 、 Center 、またはRightに揃えることができます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| 説明 | 見出しの説明テキストは見出しの下に配置されます。 | |
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| 視差効果を有効にする | 視差効果を有効にすると、2 次元の画像またはシーンに奥行きの錯覚が生まれます。 視差方向は次の 3 つのオプションから選択できます。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
利用可能なブロック:
- 2.1 画像ブロック
- 2.2 ビデオブロック
2.1 画像ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 画像 | ||
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| 見出し | ブロックのタイトル。 | |
| リンク | 顧客がクリックした場合に移動するリンク。 | |
| 小見出しと見出しを反転する | 見出しと小見出しの位置を入れ替えます。 | |
| 画像 | ブロックの画像を選択/アップロードします。 | |
| 画像比率 | ブログ投稿画像の画像比率:
| |
| デスクトップのコンテンツの位置 | デスクトップ上のコンテンツの位置: | |
| デスクトップコンテンツの配置 | デスクトップ上のコンテンツの配置: | |
| モバイルレイアウト | ||
| モバイル画像 | モバイルに表示されるブロックの画像。 | |
| モバイル画像比率 | モバイルブラウザ上の画像の比率:
| |
| モバイルコンテンツの位置 | モバイルブラウザ上のコンテンツの位置: | |
| モバイルコンテンツの調整 | モバイルブラウザでのコンテンツの配置: | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
2.2 ビデオブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| ビデオ | ||
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| 見出し | ブロックのタイトル。 | |
| リンク | 顧客がクリックした場合に移動するリンク。 | |
| 小見出しと見出しを反転する | 見出しと小見出しの位置を入れ替えます。 | |
| Shopify がホストするビデオ | ビデオ | Shopify がホストするビデオからビデオを選択します |
| URLからビデオを埋め込む | ||
| URL | ビデオへの YouTube または Vimeo リンク。ビデオは一般公開されている必要があります。 | |
| 表紙画像 | ビデオの再生前に表示される画像。 | |
| ビデオの ALT テキスト | スクリーン リーダーを使用している顧客がビデオにアクセスできるように、ビデオについて説明します。 | |
| ビデオの自動再生を有効にする | ビデオを自動的に再生します。 | |
| ビデオループを有効にする | ビデオを繰り返し再生します。 | |
| 画像比率 | ブログ投稿画像の画像比率:
| |
| デスクトップのコンテンツの位置 | デスクトップ上のコンテンツの位置を設定します。 | |
| デスクトップコンテンツの配置 | デスクトップ上のコンテンツの配置を設定します。 | |
| モバイルレイアウト | ||
| モバイルビデオ | モバイルブラウザ用にアップロードすることでビデオを選択/アップロードします。 | |
| または URL からビデオを埋め込む | モバイル ブラウザ上の URL からビデオを埋め込みます。 | |
| モバイルのカバー画像 | モバイルでビデオが再生される前に表示される画像。 | |
| モバイル画像比率 | デスクトップブラウザ上の画像の比率:
| |
| モバイルコンテンツの位置 | モバイルブラウザ上のコンテンツの位置を設定します。 | |
| モバイルコンテンツの調整 | モバイルブラウザでのコンテンツの配置を設定します。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のようなブロックの色をカスタマイズできます。
| |
3. ブログ投稿のコラージュ
このセクションでは、ブログ投稿のコラージュで読者の注目を集めています。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| ブログ投稿のコラージュ | ||
| ブログ | ブログ投稿を表示したいブログ。 | |
| 表示するブログ投稿の数 | セクションに表示するブログ投稿の数。 | |
| 「すべて表示」ボタンを有効にする | ブログに指定された制限を超える投稿がある場合、ブログ ページにリンクする[すべて表示]ボタンを表示します。 | |
| ブログポストカード | ||
| 画像比率 | ブログ投稿画像の画像比率:
| |
| タグを表示 | 管理者ブログ投稿のタグを表示し、コンテンツを強化するために必要に応じて画像を組み込みます。 | |
| 上映日 | ブログ投稿の公開日を表示します。 | |
| コメント数を表示 | 公開されたブログ投稿のコメントの合計数が表示されます。 | |
| 著者を表示 | ブログ投稿の作成者を表示します。 | |
| 見出し | ||
| 見出し | セクションのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのオプションのいずれかに設定できます。 | |
| 見出しの配置 | 見出しは、 Left 、 Center 、またはRightに揃えることができます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| 説明 | 見出しの説明テキストは見出しの下に配置されます。 | |
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
このセクションではブロックの追加はサポートされていません。
4. コレクションリスト
強調表示するコレクションのリストを追加できます。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| コレクションリスト | ||
| デスクトップ上の列の数 | デスクトップブラウザに表示される列数を 1 から 5 までカスタマイズします。 | |
| デスクトップでカルーセルを有効にする | コレクションからの製品のカルーセルをデスクトップ ブラウザーに表示します。 | |
| 画像 | コレクション画像または最初の製品から画像を選択します。 | |
| 画像比率 | コレクション画像の画像比率:
| |
| 「すべて表示」ボタンを有効にする | ブログに [ブログ投稿] フィールドに設定されているよりも多くのブログ投稿がある場合、顧客をブログのページに誘導する [すべて表示] ボタンが表示されます。 | |
| モバイルレイアウト | ||
| モバイルの列数 | モバイルブラウザに表示される列の数をカスタマイズします: 1 列または2 列。 | |
| モバイルでスワイプを有効にする | 水平スワイプでモバイル表示を 1 行に設定します。 | |
| 見出し | ||
| 見出し | セクションのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。 | |
| 見出しの配置 | 見出しは、 Left 、 Center 、またはRightに揃えることができます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| 説明 | 見出しの説明テキストは見出しの下に配置されます。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
使用可能なブロック:コレクション ブロック。
コレクション ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| コレクション | ||
| コレクション | 商品を表示したいコレクションを選択してください。 | |
| 製品 | コレクション全体ではなく、個々の製品を表示できます。 | |
| タイトル | 注目のコレクションのタイトル |
5.お問い合わせフォーム
お問い合わせフォームでは、すべての送信内容がストアの送信者メール アドレスに送信されます。送信者のメール アドレスは、管理者の[全般] 設定で変更できます。
フォームには次の基本的な要素があります。
- 名前
- メールアドレス (必須)
- コメント
- カスタムフィールドもサポートされています。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| お問い合わせフォーム | すべての提出物はストアの送信者メール アドレスに送信されます。 | |
| 見出し | ||
| 見出し | セクションのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。 | |
| 見出しの配置 | 見出しは、 Left 、 Center 、またはRightに揃えることができます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| 説明 | 見出しの説明テキストは見出しの下に配置されます。 | |
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 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 つの方法が提供されます。
| |
| 地図 | ||
| 地図の住所 | 住所を入力してください。 Google マップは正確な場所を見つけます。 | |
| Google マップ API キー | Google API キーを入力してください | |
| 地図のズーム | レベル 12 から 20 にズームインします。ズーム レベルが高くなると、より詳細が表示されます。 | |
| マップスタイル | 次の 6 つのオプションのいずれかを選択して、マップ スタイルをフォーマットします。 | |
| 画像 | マップのロードに失敗した場合に表示する代替マップ イメージを選択します。 | |
| デスクトップの高さ | デスクトップ上で表示されるときの画像の高さを決定します。
| |
| モバイルレイアウト | モバイルの高さ | モバイルで表示するときの画像の高さを決定します。
|
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 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. カウントダウンタイマー
このセクションには、特定の時刻に期限切れになるように設定されているアクティブなカウントダウン クロックが表示されます。セール開始、出店、限定特典の終了など幅広くご利用いただけます。これは、特定の製品の週間売上カウントダウン タイマーのサンプルです。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| カウントダウンタイマー | ||
| 透明なヘッダーを許可する | この設定は、このセクションが最初のセクションである場合にのみ適用されます | |
| 画像 | デスクトップブラウザ上のセクションの画像。 | |
| デスクトップの高さ | デスクトップ上で表示されるときの画像の高さを決定します。
| |
| デスクトップコンテンツの幅 | デスクトップで表示するときの画像の幅を決定します。 | |
| デスクトップのコンテンツの位置 | デスクトップ上のコンテンツの位置を設定します。 | |
| デスクトップコンテンツの配置 | デスクトップ上のコンテンツの配置を設定します。 | |
| モバイルレイアウト | ||
| モバイル画像 | モバイルブラウザ上のセクションのカバー画像。 | |
| モバイルの高さ | モバイルで表示するときの画像の高さを決定します。
| |
| モバイルコンテンツの位置 | モバイルブラウザ上のコンテンツの位置を設定します。 | |
| モバイルコンテンツの調整 | モバイルブラウザでのコンテンツの配置を設定します。 | |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 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 つの方法が提供されます。
|
7.2 小見出しブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 小見出し | ||
| 小見出し | 見出しの小見出し。 | |
| 小見出しのサイズ | 小見出しのサイズ: | |
| 二次色を使用する | 文字の色に基づいて少し明るい色を適用します。 |
7.3 テキストブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 文章 | ||
| 文章 | テキストを追加します。 | |
| 文字サイズ | テキスト サイズは次のオプションのいずれかに設定できます。 カスタム オプションを使用すると、テキスト サイズを 12 ピクセルから 128 ピクセルまでの任意の値に設定でき、算術的に 2 ピクセルずつ増加します。 | |
| テキストフォント | テキストの書式設定として、本文または見出しの2 つのオプションから選択します。 | |
| 二次色を使用する | 二次カラーを有効にします。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
7.4 ボタンブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| ボタン | ||
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ボタンのサイズ | ボタンのサイズを 3 つのオプションで調整します: 小、中、または大 | |
| アウトラインボタンスタイルを使用する | ボタンのアウトライン スタイルを使用します。 |
7.2 リンクブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| リンク | ||
| 文章 | ボタンのすぐ横に配置されるリンクのテキスト。 | |
| リンク | リンクしたいURLを追加します。 |
7.6 画像ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 画像 | ||
| 画像 | ブロックする画像を選択します。 | |
| 画像の幅 | 2 つの画像幅オプションのいずれかを選択します。
|
7.7 カスタム液体ブロックの設定。
独自の Liquid コードを追加してカスタム ブロックを作成できます。
7.8 空きスペースブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 空きスペース | ||
| デスクトップの高さ | デスクトップ上で表示されるときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 40 ピクセルです。 | |
| モバイルの高さ | モバイルで表示するときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 28 ピクセルです。 |
8.カスタムリキッド
独自の Liquid コードを追加してカスタム セクションを作成できます。
- ダウンロードしたアプリの手順に記載されているアプリ スニペットを追加すると、ページにアプリを簡単に導入できます。
- カスタムの 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 つの方法が提供されます。
|
9.2 ソーシャルメディアアイコンブロックの設定。
テーマ設定で設定したソーシャル メディア アカウントが表示されます。
9.3 テキストブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 文章 | ||
| 文章 | テキストを追加します。 | |
| 文字サイズ | テキスト サイズは次のオプションのいずれかに設定できます。 カスタム オプションを使用すると、テキスト サイズを 12 ピクセルから 128 ピクセルまでの任意の値に設定でき、算術的に 2 ピクセルずつ増加します。 | |
| テキストフォント | テキストの書式設定として、本文または見出しの2 つのオプションから選択します。 | |
| 二次色を使用する | 二次カラーを有効にします。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
9.4 ボタンブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| ボタン | ||
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ボタンのサイズ | ボタンのサイズを 3 つのオプションで調整します: 小、中、または大 | |
| アウトラインボタンスタイルを使用する | ボタンのアウトライン スタイルを使用します。 |
9.5 リンクブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| リンク | ||
| 文章 | ボタンのすぐ横に配置されるリンクのテキスト。 | |
| リンク | リンクしたいURLを追加します。 |
9.6 画像ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 画像 | ||
| 画像 | ブロックする画像を選択します。 | |
| 画像の幅 | 2 つの画像幅オプションのいずれかを選択します。
|
9.7 カスタム液体ブロックの設定。
独自の Liquid コードを追加してカスタム ブロックを作成できます。
9.8 空スペースブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 空きスペース | ||
| デスクトップの高さ | デスクトップ上で表示されるときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 40 ピクセルです。 | |
| モバイルの高さ | モバイルで表示するときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 28 ピクセルです。 |
10. 空きスペース
このセクションを使用すると、セクション間の垂直スペースの高さをさまざまなデバイスに合わせてカスタマイズできます。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| 空きスペース | ||
| デスクトップの高さ | デスクトップ上で表示されるときの画像の高さを決定します。
| |
| モバイルの高さ | モバイルで表示するときの画像の高さを決定します。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
このセクションではブロックの追加はサポートされていません。
11. よくある質問
FAQ (よくある質問) セクションには、動的なアコーディオン スタイルのレイアウトを使用して、顧客からのよくある質問と回答が表示されます。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| よくある質問 | スタイル | セクションを表示するには、 [境界線スタイルあり]または[背景スタイルあり] を選択します。 |
| 見出し | ||
| 見出し | セクションのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。 | |
| 見出しの配置 | 見出しは、 Left 、 Center 、またはRightに揃えることができます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| 説明 | 見出しの説明テキストは見出しの下に配置されます。 | |
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
利用可能なブロック:
- 11.1 リッチテキスト
- 11.2 質問
- 11.3 お問い合わせフォーム
11.1 リッチテキストブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| リッチテキスト | ||
| タイトル | ブロックのタイトル。 | |
| 文章 | このブロックの説明テキストを追加します。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
11.2 質問ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 質問 | ||
| 質問 | よくある質問を追加します。 | |
| 答え | 答えを追加します。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
11.3 コンタクトフォームブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| お問い合わせフォーム | ||
| タイトル | コラムのタイトル。 | |
| 文章 | ブロック内に表示するテキスト。 | |
| 電話番号を表示 | 電話番号を表示します。 | |
| チームのアバター | チームのアバターを表示する画像を選択/アップロードします。 | |
| チームアバターの身長 | チームアバターの高さは20pxから100pxまで調整できます。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
12. 注目のコレクション
このセクションでは、複数のコレクションを複数の列に表示し、各列を独自のタブに表示できます。特定のコレクションを特集するセクションを追加することもできます。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| 注目のコレクション | ||
| コレクション | 製品を表示するコレクションを選択します。 | |
| 製品 | 表示する製品を最大 50 個追加します。 選択するとコレクションを置き換えます。 | |
| 展示できる最大の商品数 | 相補積の数は 2 ～ 12 の範囲です。 | |
| デスクトップ上の列の数 | デスクトップブラウザに表示される列数を 1 から 5 までカスタマイズします。 | |
| デスクトップでカルーセルを有効にする | コレクションの製品のカルーセルをデスクトップ ブラウザーに表示します。 | |
| 「すべて表示」ボタンを有効にする | コレクションリストの下に「すべて表示」ボタンが追加されます。これは、リストに表示されているコレクションよりも多くのコレクションが含まれている場合に推奨されます。 | |
| モバイルレイアウト | ||
| モバイルの列数 | モバイルブラウザに表示される列の数をカスタマイズします: 1 列または2 列。 | |
| モバイルでスワイプを有効にする | 水平スワイプでモバイル表示を 1 行に設定します。 | |
| 見出し | ||
| 見出し | セクションのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。 | |
| 見出しの配置 | 見出しは、 Left 、 Center 、またはRightに揃えることができます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| 説明 | 見出しの説明テキストは見出しの下に配置されます。 | |
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
このセクションではブロックの追加はサポートされていません。
13. 注目の製品
特定の製品を紹介するセクションを追加できます。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| 注目の製品 | ||
| 製品 | このセクションで表示する製品を選択してください。 | |
| デスクトップ上のスティッキーコンテンツを有効にする | 顧客が注目の製品の画像を下（または上）にスクロールしたときに、コンテンツを画面に固定します。 | |
| メディア | ||
| デスクトップメディアの幅 | デスクトップ上のメディアの幅。このセクションのサイズを変更するには、35% から 70% まで調整できます。 | |
| デスクトップのレイアウト | デスクトップのレイアウトを表示します。
| |
| サムネイルの位置 | サムネイルの位置:メディアの横またはメディアの下 | |
| 画像のズーム | 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 つを選択します。 |
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 つの形式で表示します。 | |
| デスクトップの高さ | デスクトップ上で表示されるときの画像の高さを決定します。
| |
| モバイルレイアウト | モバイルの高さ | モバイルで表示するときの画像の高さを決定します。
|
| 見出し | ||
| 見出し | セクションのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。 | |
| 見出しの配置 | 見出しは、 Left 、 Center 、またはRightに揃えることができます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| 説明 | 見出しの説明テキストは見出しの下に配置されます。 | |
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
このセクションには最大 2 つの画像ブロックを追加します。
画像ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 画像 | ||
| 画像 | デスクトップ ブラウザ上でこのコレクションの比較として使用する画像を割り当てます。 | |
| モバイル画像 | モバイル ブラウザーでこのコレクションの比較として使用する画像を割り当てます。 | |
| 小見出し | 小見出しは、対応する見出しの上に配置され、サイズが小さくなります。 | |
| 見出し | 画像のタイトルの大きなテキスト。 | |
| コンテンツの位置 | 見出しと小見出しのテキストの位置。 3 つのオプションから 1 つを選択します: スター、センター、エンド。 | |
| 文字の色 | テキストの色。 |
15. テキスト付き画像
画像とテキスト ブロックを含むセクションを追加し、顧客を新しいページにリンクするオプションのボタンを追加できます。テキストと画像を組み合わせて、選択した製品、コレクション、ブログ投稿に焦点を当てます。在庫状況、スタイルに関する詳細を追加したり、レビューを提供したりすることもできます。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| テキスト付き画像 | ||
| 画像 | デスクトップブラウザに表示されるセクションの画像。 | |
| デスクトップの高さ | デスクトップ上で表示されるときの画像の高さを決定します。
| |
| デスクトップ画像の幅 | デスクトップで表示するときの画像の幅を決定します:小、中、または大 | |
| デスクトップ画像の配置 | デスクトップ上のセクションのレイアウト:
| |
| デスクトップコンテンツの配置 | デスクトップ上のコンテンツの配置を設定します。 | |
| モバイルレイアウト | ||
| モバイル画像 | モバイルブラウザに表示されるセクションの画像。 | |
| モバイルの高さ | モバイルで表示するときの画像の高さを決定します。
| |
| モバイルコンテンツの調整 | モバイルブラウザでのコンテンツの配置を設定します。 | |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 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 つの方法が提供されます。
|
15.2 テキストブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 文章 | ||
| 文章 | テキストを追加します。 | |
| 文字サイズ | テキスト サイズは次のオプションのいずれかに設定できます。 カスタム オプションを使用すると、テキスト サイズを 12 ピクセルから 128 ピクセルまでの任意の値に設定でき、算術的に 2 ピクセルずつ増加します。 | |
| テキストフォント | テキストの書式設定として、本文または見出しの2 つのオプションから選択します。 | |
| 二次色を使用する | 二次カラーを有効にします。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
15.3 Button ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| ボタン | ||
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ボタンのサイズ | ボタンのサイズを 3 つのオプションで調整します: 小、中、または大 | |
| アウトラインボタンスタイルを使用する | ボタンのアウトライン スタイルを使用します。 |
15.4 リンクブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| リンク | ||
| 文章 | ボタンのすぐ横に配置されるリンクのテキスト。 | |
| リンク | リンクしたいURLを追加します。 |
15.5 画像ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 画像 | ||
| 画像 | ブロックする画像を選択します。 | |
| 画像の幅 | 2 つの画像幅オプションのいずれかを選択します。
|
15.6 カスタム液体ブロックの設定。
独自の Liquid コードを追加してカスタム ブロックを作成できます。
15.7 空スペースブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 空きスペース | ||
| デスクトップの高さ | デスクトップ上で表示されるときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 40 ピクセルです。 | |
| モバイルの高さ | モバイルで表示するときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 28 ピクセルです。 |
16. テキスト付き画像
このセクションは [テキスト付き画像] セクションと似ていますが、2 つの画像を同時に表示できます。これにより、ページのデザインの柔軟性が高まります。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| テキスト付き画像 | ||
| 画像 | デスクトップブラウザに表示されるセクションの最初の画像。 | |
| 画像2 | デスクトップ ブラウザに表示されるセクションの 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 つの方法が提供されます。
|
16.2 テキストブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 文章 | ||
| 文章 | テキストを追加します。 | |
| 文字サイズ | テキスト サイズは次のオプションのいずれかに設定できます。 カスタム オプションを使用すると、テキスト サイズを 12 ピクセルから 128 ピクセルまでの任意の値に設定でき、算術的に 2 ピクセルずつ増加します。 | |
| テキストフォント | テキストの書式設定として、本文または見出しの2 つのオプションから選択します。 | |
| 二次色を使用する | 二次カラーを有効にします。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
16.3 Button ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| ボタン | ||
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ボタンのサイズ | ボタンのサイズを 3 つのオプションで調整します: 小、中、または大 | |
| アウトラインボタンスタイルを使用する | ボタンのアウトライン スタイルを使用します。 |
16.4 リンクブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| リンク | ||
| 文章 | ボタンのすぐ横に配置されるリンクのテキスト。 | |
| リンク | リンクしたいURLを追加します。 |
16.5 画像ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 画像 | ||
| 画像 | ブロックする画像を選択します。 | |
| 画像の幅 | 2 つの画像幅オプションのいずれかを選択します。
|
16.6 カスタム液体ブロックの設定。
独自の Liquid コードを追加してカスタム ブロックを作成できます。
16.7 空スペースブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 空きスペース | ||
| デスクトップの高さ | デスクトップ上で表示されるときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 40 ピクセルです。 | |
| モバイルの高さ | モバイルで表示するときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 28 ピクセルです。 |
17. テキストオーバーレイを含む画像
カスタム テキスト オーバーレイを備えた大きな画像を顧客に紹介できます。メッセージには、製品について説明したり、お知らせを共有したり、店舗への顧客を歓迎したりすることができます。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| テキスト付き画像 | ||
| 画像 | デスクトップブラウザに表示されるセクションの画像。 | |
| デスクトップの高さ | デスクトップ上で表示されるときの画像の高さを決定します。
| |
| デスクトップ画像の幅 | デスクトップで表示するときの画像の幅を決定します:小、中、または大 画像はモバイル向けに自動的に最適化されます。 | |
| デスクトップ画像の配置 | デスクトップ上のセクションのレイアウト:
最初の画像はデフォルトのモバイル レイアウトです。 | |
| デスクトップコンテンツの配置 | デスクトップ上のコンテンツの配置を設定します。 | |
| モバイルレイアウト | ||
| モバイル画像 | モバイルブラウザに表示されるセクションの画像。 | |
| モバイルの高さ | モバイルで表示するときの画像の高さを決定します。
| |
| モバイルコンテンツの調整 | モバイルブラウザでのコンテンツの配置を設定します。 | |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 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 つの方法が提供されます。
|
17.2 小見出しブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 小見出し | ||
| 小見出し | 見出しの小見出し。 | |
| 小見出しのサイズ | 小見出しのサイズ: | |
| 二次色を使用する | 文字の色をベースに少し明るい色を適用します。 |
17.3 テキストブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 文章 | ||
| 文章 | テキストを追加します。 | |
| 文字サイズ | テキスト サイズは次のオプションのいずれかに設定できます。 カスタム オプションを使用すると、テキスト サイズを 12 ピクセルから 128 ピクセルまでの任意の値に設定でき、算術的に 2 ピクセルずつ増加します。 | |
| テキストフォント | テキストの書式設定として、本文または見出しの2 つのオプションから選択します。 | |
| 二次色を使用する | 二次カラーを有効にします。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
17.4 Button ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| ボタン | ||
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ボタンのサイズ | ボタンのサイズを 3 つのオプションで調整します: 小、中、または大 | |
| アウトラインボタンスタイルを使用する | ボタンのアウトライン スタイルを使用します。 |
17.5 リンクブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| リンク | ||
| 文章 | ボタンのすぐ横に配置されるリンクのテキスト。 | |
| リンク | リンクしたいURLを追加します。 |
17.6 画像ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 画像 | ||
| 画像 | ブロックする画像を選択します。 | |
| 画像の幅 | 2 つの画像幅オプションのいずれかを選択します。
|
17.7 カスタム液体ブロックの設定。
独自の Liquid コードを追加してカスタム ブロックを作成できます。
17.8 空スペースブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 空きスペース | ||
| デスクトップの高さ | デスクトップ上で表示されるときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 40 ピクセルです。 | |
| モバイルの高さ | モバイルで表示するときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 28 ピクセルです。 |
18. テキストオーバーレイを含む画像
このセクションは [テキスト オーバーレイ付き画像] セクションと似ていますが、最大 5 つの画像を同時に表示できます。これにより、ページのデザインの柔軟性が高まります。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| テキストオーバーレイを含む画像 | ||
| 透明なヘッダーを許可する | この設定は、このセクションが最初のセクションである場合にのみ適用されます。 | |
| デスクトップの高さ | デスクトップ上で表示されるときの画像の高さを決定します。
| |
| デスクトップコンテンツの幅 | デスクトップで表示するときの画像の幅を決定します。 | |
| デスクトップのコンテンツの位置 | デスクトップ上のコンテンツの位置を設定します。 | |
| デスクトップコンテンツの配置 | デスクトップ上のコンテンツの配置を設定します。 | |
| 画像1 | デスクトップブラウザに表示されるセクションの最初の画像。 | |
| 画像2 | デスクトップ ブラウザに表示されるセクションの 2 番目の画像。 | |
| 画像3 | デスクトップ ブラウザに表示されるセクションの 3 番目の画像。 | |
| 画像4 | デスクトップ ブラウザに表示されるセクションの 4 番目の画像。 | |
| 画像5 | デスクトップ ブラウザに表示されるセクションの 5 番目の画像。 | |
| モバイルレイアウト | ||
| モバイルの高さ | モバイルで表示するときの画像の高さを決定します。
| |
| モバイルコンテンツの位置 | モバイルブラウザ上のコンテンツの位置を設定します。 | |
| モバイルコンテンツの調整 | モバイルブラウザでのコンテンツの配置を設定します。 | |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 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 つの方法が提供されます。
|
18.2 小見出しブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 小見出し | ||
| 小見出し | 見出しの小見出し。 | |
| 小見出しのサイズ | 小見出しのサイズ: | |
| 二次色を使用する | 文字の色をベースに少し明るい色を適用します。 |
18.3 テキストブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 文章 | ||
| 文章 | テキストを追加します。 | |
| 文字サイズ | テキスト サイズは次のオプションのいずれかに設定できます。 カスタム オプションを使用すると、テキスト サイズを 12 ピクセルから 128 ピクセルまでの任意の値に設定でき、算術的に 2 ピクセルずつ増加します。 | |
| テキストフォント | テキストの書式設定として、本文または見出しの2 つのオプションから選択します。 | |
| 二次色を使用する | 二次カラーを有効にします。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
18.4 Button ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| ボタン | ||
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ボタンのサイズ | ボタンのサイズを 3 つのオプションで調整します: 小、中、または大 | |
| アウトラインボタンスタイルを使用する | ボタンのアウトライン スタイルを使用します。 |
18.5 Link ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| リンク | ||
| 文章 | ボタンのすぐ横に配置されるリンクのテキスト。 | |
| リンク | リンクしたいURLを追加します。 |
18.6 画像ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 画像 | ||
| 画像 | ブロックする画像を選択します。 | |
| 画像の幅 | 2 つの画像幅オプションのいずれかを選択します。
|
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 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
各ロゴはロゴブロックに設定されます
ロゴブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| ロゴ | ||
| 画像 | ロゴ画像を選択します。 | |
| 画像の高さ | ロゴの高さを 0px から 200px まで調整し、算術的に 4px ずつ増加します。 | |
| リンク | リンクしたいURLを追加します。 |
20. ルックブック
このセクションでは、画像ボード上に製品のピンを作成し、各ピンが顧客を製品の詳細に誘導します。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| ルックブック | ||
| 画像 | デスクトップ上のセクションのイメージ。 | |
| モバイル画像 | モバイル上のセクションの画像。 | |
| 見出し | ||
| 見出し | セクションのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。 | |
| 見出しの配置 | 見出しは、 Left 、 Center 、またはRightに揃えることができます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| 説明 | 見出しの説明テキストは見出しの下に配置されます。 | |
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
利用可能なブロック:
- 製品ブロック
- コンテンツブロック
20.1 Product ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 製品 | 製品を選択してください | このブロックの積を選択します。 |
| ホットスポット | ||
| 文章 | 文字の色を調整します。 | |
| 縦位置 | スポットと画像の上端の間の距離を指定します。 | |
| 水平位置 | スポットと画像の左端の間の距離を指定します。 | |
| モバイルレイアウト | ||
| 縦位置 | スポットとモバイルブラウザ上の画像の上端の間の距離を指定します。 | |
| 水平位置 | モバイルブラウザ上のスポットと画像の左端の間の距離を指定します。 |
20.2 コンテンツブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| コンテンツ | ||
| タイトル | スポットのタイトル。 | |
| 文章 | タイトルよりも小さいサブテキスト。 | |
| リンク | 顧客がクリックした場合に移動するリンク。 | |
| ホットスポット | ||
| 文章 | テキストの色。 | |
| 縦位置 | スポットと画像の上端の間の距離を指定します。 | |
| 水平位置 | スポットと画像の左端の間の距離を指定します。 | |
| モバイルレイアウト | ||
| 縦位置 | スポットとモバイルブラウザ上の画像の上端の間の距離を指定します。 | |
| 水平位置 | モバイルブラウザ上のスポットと画像の左端の間の距離を指定します。 |
21. 地図
このセクションには、ビジネスの場所を強調表示する Google マップが表示されます。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| 地図 | ||
| 透明なヘッダーを許可する | この設定は、このセクションが最初のセクションである場合にのみ適用されます。 | |
| 地図の住所 | 住所を入力してください。 Google マップは正確な場所を見つけます。 | |
| Google マップ API キー | Google API キーを入力します。 | |
| 地図のズーム | レベル 12 から 20 にズームインします。ズーム レベルが高くなると、より詳細が表示されます。 | |
| マップスタイル | 次の 6 つのオプションのいずれかを選択して、マップ スタイルを書式設定します。 | |
| 画像 | マップのロードに失敗した場合に表示する代替マップ イメージを選択します。 | |
| デスクトップの高さ | デスクトップ上で表示されるときの画像の高さを決定します。
| |
| デスクトップのコンテンツの位置 | デスクトップ上のコンテンツの位置を設定します。 | |
| デスクトップコンテンツの配置 | デスクトップ上のコンテンツの配置を設定します。 | |
| モバイルレイアウト | ||
| モバイルレイアウト | このセクションをモバイル ブラウザで表示するスタイルを選択してください:
| |
| モバイルの高さ | モバイルで表示するときの画像の高さを決定します。
| |
| モバイルコンテンツの調整 | モバイルブラウザでのコンテンツの配置を設定します。 | |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 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 つの方法が提供されます。
|
21.2 小見出しブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 小見出し | ||
| 小見出し | 見出しの小見出し。 | |
| 小見出しのサイズ | 小見出しのサイズ:
| |
| 二次色を使用する | 文字の色をベースに少し明るい色を適用します。 |
21.3 テキストブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 文章 | ||
| 文章 | テキストを追加します。 | |
| 文字サイズ | テキスト サイズは次のオプションのいずれかに設定できます。 カスタム オプションを使用すると、テキスト サイズを 12 ピクセルから 128 ピクセルまでの任意の値に設定でき、算術的に 2 ピクセルずつ増加します。 | |
| テキストフォント | テキストの書式設定として、本文または見出しの2 つのオプションから選択します。 | |
| 二次色を使用する | 二次カラーを有効にします。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
21.4 Button ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| ボタン | ||
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ボタンのサイズ | ボタンのサイズを 3 つのオプションで調整します: 小、中、または大 | |
| アウトラインボタンスタイルを使用する | ボタンのアウトライン スタイルを使用します。 |
21.5 リンクブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| リンク | ||
| 文章 | ボタンのすぐ横に配置されるリンクのテキスト。 | |
| リンク | リンクしたいURLを追加します。 |
21.6 画像ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 画像 | ||
| 画像 | ブロックする画像を選択します。 | |
| 画像の幅 | 2 つの画像幅オプションのいずれかを選択します。
|
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 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
使用可能なブロック:列ブロック。
列ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| カラム | ||
| デスクトップコンテンツの配置 | デスクトップ上のコンテンツの配置を設定します。 | |
| モバイルコンテンツの調整 | モバイルブラウザでのコンテンツの配置を設定します。 | |
| 画像 | ブロックの画像です。 | |
| 画像比率 | ブロック画像の画像比率:
| |
| 見出し | ブロックのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Largeのいずれかのオプションに設定できます。 | |
| 説明 | 画像の説明。 | |
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
23. アイコン付きの複数列
| セクション設定 | 設定 | 説明 |
|---|---|---|
| アイコン付きの複数列 | ||
| デスクトップ上の列の数 | デスクトップブラウザに表示される列数をカスタマイズします: 2 列または 4 列。 | |
| デスクトップコンテンツの配置 | デスクトップ上のコンテンツの配置を設定します。 | |
| 見出し | ||
| 見出し | セクションのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。 | |
| 見出しの配置 | 見出しは、 Left 、 Center 、またはRightに揃えることができます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| 説明 | 見出しの説明テキストは見出しの下に配置されます。 | |
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
使用可能なブロック:列ブロック。
列ブロックの設定。
\| ブロック設定 | 設定 | 説明 |
|---|---|---|
| カラム | ||
| アイコン | アイコンリストからアイコンを選択します。 | |
| 見出し | コラムのタイトル。 | |
| 説明 | テキストは列を説明します。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
24. 複数の注目コレクション
コレクションの任意の組み合わせから製品を表示するセクションを追加できます。
各コレクションはCollectionブロックに設定されます
| セクション設定 | 設定 | 説明 |
|---|---|---|
| 注目のコレクション | ||
| 展示できる最大の商品数 | 相補積の数は 2 ～ 12 の範囲です。 | |
| デスクトップ上の列の数 | デスクトップブラウザに表示される列の数を 1 から 5 までカスタマイズします。 | |
| デスクトップでカルーセルを有効にする | コレクションの製品のカルーセルをデスクトップ ブラウザーに表示します。 | |
| 「すべて表示」ボタンを有効にする | コレクションリストの下に「すべて表示」ボタンが追加されます。これは、リストに表示されているコレクションよりも多くのコレクションが含まれている場合に推奨されます。 | |
| モバイルレイアウト | ||
| モバイルの列数 | モバイルブラウザに表示される列の数をカスタマイズします: 1 列または2 列。 | |
| モバイルでスワイプを有効にする | 水平スワイプでモバイル表示を 1 行に設定します。 | |
| 見出し | ||
| 見出し | セクションのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。 | |
| 見出しの配置 | 見出しは、 Left 、 Center 、またはRightに揃えることができます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| 説明 | 見出しの説明テキストは見出しの下に配置されます。 | |
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
利用可能なブロック:コレクション ブロック。
コレクション ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| コレクション | ||
| コレクション | 製品を表示するコレクションを選択します。 | |
| 製品 | コレクション全体ではなく、個々の製品を表示できます。 | |
| タイトル | 注目のコレクションのタイトル |
25. ポートフォリオ
このセクションでは、クライアントに価値を示すために、作業サンプル、製品、その他の関連アイテムのコレクションを追加できます。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| ポートフォリオ | ||
| デスクトップ上の列の数 | デスクトップブラウザに表示される列数を1列から5列にカスタマイズします。 | |
| デスクトップのレイアウト | デスクトップのレイアウトを表示します。 | |
| 画像比率 | デスクトップブラウザ上の画像の比率:
| |
| モバイルレイアウト | ||
| モバイル画像比率 | モバイルブラウザ上の画像の比率:
| |
| モバイルの列数 | モバイルブラウザに表示される列の数をカスタマイズします: 1 列または2 列。 | |
| モバイルでスワイプを有効にする | 水平スワイプでモバイル表示を 1 行に設定します。 | |
| 見出し | ||
| 見出し | セクションのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。 | |
| 見出しの配置 | 見出しは、 Left 、 Center 、またはRightに揃えることができます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| 説明 | 見出しの説明テキストは見出しの下に配置されます。 | |
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 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 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
このセクションではブロックの追加はサポートされていません。
27. リッチテキスト
ヘッダー、段落コンテンツ、および顧客を新しいページにリンクするボタンを含むリッチ テキスト セクションを追加できます。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| リッチテキスト | ||
| デスクトップコンテンツの配置 | デスクトップ上のコンテンツの配置: | |
| モバイルコンテンツの調整 | モバイルブラウザでのコンテンツの配置を設定します。 | |
| 見出し | ||
| 見出し | セクションのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。 | |
| 見出しの配置 | 見出しは、 Left 、 Center 、またはRightに揃えることができます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| 説明 | 見出しの説明テキストは見出しの下に配置されます。 | |
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
利用可能なブロック:
- 27.1 見出し
- 27.2 テキスト
- 27.3 ボタン
- 27.4 リンク
- 27.5 画像
- 27.6 カスタムリキッド
- 27.7 空きスペース
27.1 見出しブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 見出し | ||
| 見出し | ブロックのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
27.2 テキストブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 文章 | ||
| 文章 | テキストを追加します。 | |
| 文字サイズ | テキスト サイズは次のオプションのいずれかに設定できます。 カスタム オプションを使用すると、テキスト サイズを 12 ピクセルから 128 ピクセルまでの任意の値に設定でき、算術的に 2 ピクセルずつ増加します。 | |
| テキストフォント | テキストの書式設定として、本文または見出しの2 つのオプションから選択します。 | |
| 二次色を使用する | 二次カラーを有効にします。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
27.3 Button ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| ボタン | ||
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ボタンのサイズ | ボタンのサイズを 3 つのオプションで調整します: 小、中、または大 | |
| アウトラインボタンスタイルを使用する | ボタンのアウトライン スタイルを使用します。 |
27.4 Link ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| リンク | ||
| 文章 | ボタンのすぐ横に配置されるリンクのテキスト。 | |
| リンク | リンクしたいURLを追加します。 |
27.5 画像ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 画像 | ||
| 画像 | ブロックする画像を選択します。 | |
| 画像の幅 | 2 つの画像幅オプションのいずれかを選択します。
|
27.6 カスタム液体ブロックの設定。
独自の Liquid コードを追加してカスタム ブロックを作成できます。
27.7 空スペースブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 空きスペース | ||
| デスクトップの高さ | デスクトップ上で表示されるときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 40 ピクセルです。 | |
| モバイルの高さ | モバイルで表示するときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 28 ピクセルです。 |
28. テキストのスクロール
このセクションでは、画面上を移動するスクロール テキストを作成できます。狭いスペースに多くの情報を表示したり、注目を集めたり、その他の目的で使用できます。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| スクロールテキスト | ||
| 方向 | 希望のスクロール方向を選択します。
| |
| スピード | テキストのスクロール速度を決定します。 0.5/100px から 2.5/100px の範囲で、算術的に 0.1/100px ずつ増加します。 | |
| 水平方向の空間 | テキスト間の間隔は 50 ピクセルから 200 ピクセルの範囲で、5 ピクセルずつ増加します。 | |
| ツイン マーキーを有効にする | 2 つのマーキーを同時に表示します | |
| 視差効果を有効にする | 視差効果を有効にすると、2 次元の画像またはシーンに奥行きの錯覚が生まれます。この設定は、スクロールするテキストを強調表示するために使用できます。 | |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
利用可能なブロック:
- テキストブロック
- 画像ブロック
28.1 テキストブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 文章 | ||
| 文章 | テキストを追加します。 | |
| 文字サイズ | 文字サイズは12px～180pxまで設定可能です。 | |
| テキストフォント | テキストの書式設定について、本文または見出しの2 つのオプションから選択します。 | |
| ステンシルテキスト | ステンシルテキストを有効にします。 すべてのブラウザでは動作しない可能性があります。 |
28.2 画像ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 文章 | ||
| 画像 | ブロックの画像を選択します。 | |
| 画像の高さ | 画像の高さは 12px ～ 180px の間で設定できます。 |
29. ルックを購入する
顧客がクリックしたときに製品またはコレクションを操作できるセクション。
Shop the Look の各製品はProduct ブロックに設定されます
| セクション設定 | 設定 | 説明 |
|---|---|---|
| 外観を購入する | ||
| 画像 | デスクトップブラウザ上のセクションのイメージ | |
| モバイル画像 | モバイルブラウザ上のセクションのイメージ | |
| 見出し | ||
| 見出し | セクションのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。 | |
| 見出しの配置 | 見出しは、 Left 、 Center 、またはRightに揃えることができます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| 説明 | 見出しの説明テキストは見出しの下に配置されます。 | |
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
利用可能なブロック：製品ブロック
Product ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 製品 | 製品を選択してください | このブロックの積を選択します。 |
| ホットスポット | ||
| 文章 | 文字の色を調整します。 | |
| 縦位置 | スポットと画像の上端の間の距離を指定します。 | |
| 水平位置 | スポットと画像の左端の間の距離を指定します。 | |
| モバイルレイアウト | ||
| 縦位置 | スポットとモバイルブラウザ上の画像の上端の間の距離を指定します。 | |
| 水平位置 | モバイルブラウザ上のスポットと画像の左端の間の距離を指定します。 |
30. スライドショー
画像のスライドショーをホームページに追加できます。スライドショー セクションでは、スライドの高さを設定したり、テキストやボタンを追加したり、スライドショーを自動的に再生するかどうかを選択したりできます。スムーズなトランジション効果を得るには、通常、少なくとも 3 つのスライドを使用することをお勧めします。
注:画像を使用しているため、スライダーを使用すると Web サイトの速度が若干遅くなる可能性があります。したがって、使用することはできますが、自己責任でお願いします。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| スライドショー | ||
| スライドの自動回転 | スライドショーが自動的に再生されるように設定します。 | |
| スライドを切り替える間隔 | スライドの移行時間を 3 秒から 9 秒まで設定します。 | |
| デスクトップの高さ | デスクトップ上で表示されるときの画像の高さを決定します。
| |
| デスクトップコンテンツの幅 | デスクトップで表示するときの画像の幅を決定します。 | |
| モバイルレイアウト | モバイルの高さ | モバイルで表示するときの画像の高さを決定します。
|
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
利用可能なブロック:画像スライド ブロックとビデオ スライド ブロック
30.1 画像スライドブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 画像 | ||
| 画像 | 表示したい画像。 | |
| モビー画像 | オプションで、モバイル用の画像を設定できます。 | |
| 見出し | ||
| 見出し | ブロックのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| アウトラインボタンスタイルを使用する | ボタンのアウトラインスタイルを表示します。 |
30.1 ビデオ スライド ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| ビデオ | ||
| Shopify がホストするビデオ | Shopify がホストするビデオからビデオを選択します | |
| URLからビデオを埋め込む | デスクトップブラウザ上の URL からビデオを埋め込みます。 | |
| 表紙画像 | 顧客がビデオを再生する前に表示される画像。 | |
| ビデオの ALT テキスト | スクリーン リーダーを使用している顧客がビデオにアクセスできるように、ビデオについて説明します。 | |
| モバイルレイアウト | ||
| モバイルビデオ | モバイルブラウザ用にアップロードしてビデオを挿入します。 | |
| URLからビデオを埋め込む | モバイル ブラウザ上の URL からビデオを埋め込みます。 | |
| モバイルのカバー画像 | 顧客がモバイル ブラウザでビデオを再生する前に表示される画像。 | |
| 見出し | ||
| 見出し | ブロックのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| アウトラインボタンスタイルを使用する | アウトラインボタンスタイルを有効にします。 |
31. お客様の声
オンラインで購入を決定する場合、顧客のレビューや消費者の声が販売の成否を左右します。このセクションは、専用のページ セクションを使用して社会的証明を構築し、コンバージョンを増やすのに役立ちます。
このセクションの各お客様の声は、お客様の声ブロックに設定されています
| セクション設定 | 設定 | 説明 |
|---|---|---|
| 見出し | ||
| 見出し | セクションのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。 | |
| 見出しの配置 | 見出しは、 Left 、 Center 、またはRightに揃えることができます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| 説明 | 見出しの説明テキストは見出しの下に配置されます。 | |
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
利用可能なブロック:お客様の声ブロック。
証言ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| お客様の声 | ||
| アイコン | 引用テキストのすぐ上に表示される既製のアイコンを選択します。 [なし] オプションを選択すると、アイコンが無効になります。
| |
| 文章 | カスタム テキスト。これは顧客からのレビューである可能性があります。 | |
| 著者 | カスタム テキスト。これは顧客の名前である可能性があります。 | |
| 作者のイメージ | これは、お客様の声をより信頼できるものにするための顧客のイメージである可能性があります。 | |
| 画像比率 | 次の 3 つのオプションのいずれかを選択します。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
32. お客様の声のバナー
このセクションには、満足した顧客からの声が表示されます。多くの場合、潜在的な顧客との信頼を構築するために使用されます。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| お客様の声のバナー | ||
| 透明なヘッダーを許可する | この設定は、このセクションが最初のセクションである場合にのみ適用されます。 | |
| 画像 | デスクトップブラウザ上のセクションの画像。 | |
| デスクトップの高さ | デスクトップ上で表示されるときの画像の高さを決定します。
| |
| デスクトップコンテンツの幅 | デスクトップで表示するときの画像の幅を決定します。 | |
| モバイルレイアウト | ||
| モバイル画像 | モバイルブラウザのセクションの画像。 | |
| モバイルの高さ | モバイルで表示するときの画像の高さを決定します。
| |
| モバイルコンテンツの位置 | モバイルブラウザ上のコンテンツの位置を設定します。 | |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| 視差効果を有効にする | 視差効果を有効にすると、2 次元の画像またはシーンに奥行きの錯覚が生まれます。 視差方向は次の 3 つのオプションから選択できます。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
利用可能なブロック:お客様の声ブロック。
証言ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 証言 | ||
| アイコン | 引用テキストのすぐ上に表示される既製のアイコンを選択します。 [なし] オプションを選択すると、アイコンが無効になります。
| |
| 文章 | カスタム テキスト。これは顧客からのレビューである可能性があります。 | |
| 著者 | カスタム テキスト。これは顧客の名前である可能性があります。 | |
| 作者のイメージ | これは、お客様の声をより信頼できるものにするための顧客のイメージである可能性があります。 | |
| 画像比率 | 次の 3 つのオプションのいずれかを選択します。
| |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
33. タイムライン
| セクション設定 | 設定 | 説明 |
|---|---|---|
| タイムライン | ||
| 画像比率 | デスクトップブラウザ上の画像の比率:
| |
| モバイル画像比率 | モバイルブラウザ上の画像の比率:
| |
| 見出し | ||
| 見出し | セクションのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。 | |
| 見出しの配置 | 見出しは、 Left 、 Center 、またはRightに揃えることができます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| 説明 | 見出しの説明テキストは見出しの下に配置されます。 | |
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
利用可能なブロック:コンテンツ ブロック。
コンテンツブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| コンテンツ | ||
| 画像 | デスクトップブラウザ上のブロックの画像。 | |
| モバイル画像 | モバイルブラウザ上のブロックの画像。 | |
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| 見出し | ブロックのタイトルの大きなテキスト。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| 文章 | テキストを追加します。 テキストと画像を組み合わせて、選択した製品、コレクション、ブログ投稿に焦点を当てます。在庫状況、スタイルに関する詳細を追加したり、レビューを提供したりすることもできます。 | |
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
34. ビデオ
動画を表示する部分です。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| ビデオ | 透明なヘッダーを許可する | この設定は、このセクションが最初のセクションである場合にのみ適用されます。 |
| Shopify がホストするビデオ | ビデオ | Shopify がホストするビデオからビデオを選択します。 |
| URLからビデオを埋め込む | ||
| URL | ビデオへの YouTube または Vimeo リンク。ビデオは一般公開されている必要があります。 | |
| 表紙画像 | 顧客がデスクトップ ブラウザでビデオを再生する前に表示される画像。 | |
| ビデオの ALT テキスト | スクリーン リーダーを使用している顧客がビデオにアクセスできるように、ビデオについて説明します。 | |
| ビデオの自動再生を有効にする | ビデオを自動的に再生します。 自動再生を可能にするために、ビデオは自動的にミュートされます。 | |
| デスクトップの高さ | デスクトップ上で表示されるときの画像の高さを決定します。
| |
| モバイルレイアウト | ||
| モバイルビデオ | モバイルブラウザ用にアップロードすることでビデオを選択/アップロードします。 | |
| または URL からビデオを埋め込む | モバイル ブラウザ上の URL からビデオを埋め込みます。 | |
| モバイルのカバー画像 | 顧客がモバイル ブラウザでビデオを再生する前に表示される画像。 | |
| モバイルの高さ | モバイルで表示するときの画像の高さを決定します。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを全幅にする | コンテナを全幅にします。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
このセクションではブロックの追加はサポートされていません。
35.ビデオヒーロー
背景のビデオとボタン付きのテキスト ボックスで構成される大きなバナーを表示します。
| セクション設定 | 設定 | 説明 |
|---|---|---|
| ビデオヒーロー | 透明なヘッダーを許可する | この設定は、このセクションが最初のセクションである場合にのみ適用されます。 |
| Shopify がホストするビデオ | ビデオ | Shopify がホストするビデオからビデオを選択します。 |
| URLからビデオを埋め込む | ||
| URL | ビデオへの YouTube または Vimeo リンク。ビデオは一般公開されている必要があります。 | |
| 表紙画像 | 顧客がビデオを再生する前に表示される画像。 | |
| ビデオの ALT テキスト | スクリーン リーダーを使用している顧客がビデオにアクセスできるように、ビデオについて説明します。 | |
| ビデオの自動再生を有効にする | ビデオを自動的に再生します。 自動再生を可能にするために、ビデオは自動的にミュートされます。 | |
| デスクトップコンテンツの幅 | デスクトップで表示するときの画像の幅を決定します。 | |
| モバイルレイアウト | ||
| モバイルビデオ | モバイルブラウザでアップロードすることでビデオを選択/アップロードします。 | |
| または URL からビデオを埋め込む | モバイル ブラウザ上の URL からビデオを埋め込みます。 | |
| モバイルのカバー画像 | 顧客がモバイル ブラウザでビデオを再生する前に表示される画像。 | |
| モバイルの高さ | モバイルで表示するときの画像の高さを決定します。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを全幅にする | コンテナを全幅にします。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
使用可能なブロック:スライド ブロック。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| スライド | ||
| 見出し | ブロックのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
36. テキストオーバーレイ付きビデオ
| セクション設定 | 設定 | 説明 |
|---|---|---|
| ビデオテキストオーバーレイ | ||
| 透明なヘッダーを許可する | この設定は、このセクションが最初のセクションである場合にのみ適用されます | |
| ビデオ | デスクトップブラウザにビデオをアップロードまたは埋め込みます。 | |
| 表紙画像 | デスクトップブラウザ上のセクションの画像。 | |
| ビデオの ALT テキスト | スクリーン リーダーを使用している顧客がビデオにアクセスできるように、ビデオについて説明します。 | |
| ビデオの自動再生を有効にする | ビデオを自動的に再生します。 自動再生を可能にするために、ビデオは自動的にミュートされます。 | |
| ビデオループを有効にする | ビデオを繰り返し再生します。 | |
| デスクトップの高さ | デスクトップ上で表示されるときの画像の高さを決定します。
| |
| デスクトップコンテンツの幅 | デスクトップで表示するときの画像の幅を決定します。 | |
| デスクトップのコンテンツの位置 | デスクトップ上のコンテンツの位置を設定します。 | |
| デスクトップコンテンツの配置 | デスクトップ上のコンテンツの配置を設定します。 | |
| モバイルレイアウト | ||
| モバイルビデオ | デスクトップブラウザにビデオをアップロードまたは埋め込みます。 | |
| モバイルのカバー画像 | モバイルブラウザ上のセクションのカバー画像。 | |
| モバイルの高さ | モバイルで表示するときの画像の高さを決定します。
| |
| モバイルコンテンツの位置 | モバイルブラウザ上のコンテンツの位置を設定します。 | |
| モバイルコンテンツの調整 | モバイルブラウザでのコンテンツの配置を設定します。 | |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
利用可能なブロック:
- 36.1 見出し
- 36.2 小見出し
- 36.3 テキスト
- 36.4 ボタン
- 36.5 リンク
- 36.6 画像
- 36.7 カスタムリキッド
- 36.8 空きスペース
36.1 見出しブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 見出し | ||
| 見出し | ブロックのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
36.2 小見出しブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 小見出し | ||
| 小見出し | 見出しの小見出し。 | |
| 小見出しのサイズ | 小見出しのサイズ:
| |
| 二次色を使用する | 文字の色をベースに少し明るい色を適用します。 |
36.3 テキストブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 文章 | ||
| 文章 | テキストを追加します。 | |
| 文字サイズ | テキスト サイズは次のオプションのいずれかに設定できます。 カスタム オプションを使用すると、テキスト サイズを 12 ピクセルから 128 ピクセルまでの任意の値に設定でき、算術的に 2 ピクセルずつ増加します。 | |
| テキストフォント | テキストの書式設定として、本文または見出しの2 つのオプションから選択します。 | |
| 二次色を使用する | 二次カラーを有効にします。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
|
36.4 Button ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| ボタン | ||
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ボタンのサイズ | ボタンのサイズを 3 つのオプションで調整します: 小、中、または大 | |
| アウトラインボタンスタイルを使用する | ボタンのアウトライン スタイルを使用します。 |
36.5 Link ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| リンク | ||
| 文章 | ボタンのすぐ横に配置されるリンクのテキスト。 | |
| リンク | リンクしたいURLを追加します。 |
36.6 画像ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 画像 | ||
| 画像 | ブロックする画像を選択します。 | |
| 画像の幅 | 2 つの画像幅オプションのいずれかを選択します。
|
36.7 カスタム液体ブロックの設定。
独自の Liquid コードを追加してカスタム ブロックを作成できます。
36.8 空スペースブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 空きスペース | ||
| デスクトップの高さ | デスクトップ上で表示されるときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 40 ピクセルです。 | |
| モバイルの高さ | モバイルで表示するときの空きスペースの高さを決定します。 0 ピクセルから 120 ピクセルの範囲で、算術的に 4 ピクセルずつ増加します。デフォルトは 28 ピクセルです。 |
D. フッターグループ
ページの下部にあるセクション グループ。通常、著作権表示、Web サイトの連絡先情報、ソーシャル メディア ページへのリンクなど、Web サイトに関する情報が含まれます。
1. フッター
| セクション設定 | 設定 | 説明 |
|---|---|---|
| フッター | ||
| メール登録 購読者は、「承認されたマーケティング」顧客リストに自動的に追加されます。 詳細 。 | 電子メールのサインアップを表示するには有効にします。 | |
| 見出し | セクションのタイトル。 | |
| タイトル | 表示説明に独自のテキストを追加します。 | |
| ソーシャルメディアアイコン | ソーシャルメディアアイコンを表示する | テーマ設定で設定したソーシャル メディア アイコンが表示されます。 |
| ショップでフォローする | ショップでのフォローを有効にする | ショップでフォローを表示できるようにします。 |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| 視差効果を有効にする | 視差効果を有効にすると、2 次元の画像またはシーンに奥行きの錯覚が生まれます。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
利用可能なブロック:
- ロゴ
- メニュー
- 文章
- ブランド情報
1.1 ロゴブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| ロゴ | ||
| 画像 | ロゴ画像を選択/アップロードします。 | |
| 画像の高さ | ロゴの高さを 0px から 200px まで調整し、算術的に 4px ずつ増加します。 | |
| ソーシャルメディアアイコンを表示する | テーマ設定で設定したソーシャル メディア アイコンが表示されます。 | |
| ショップでのフォローを有効にする | 「ショップでフォロー」を表示します。 |
1.2 メニューブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| メニュー | ||
| 見出し | オプション、ブロックのタイトル。 | |
| メニューを選択してください | 表示するメニューを選択します。 最上位のメニュー項目のみを表示します。 | |
| 列幅 | 列の幅を 15 ピクセルから 95 ピクセルまで、算術的に 1 ピクセルずつ増やして調整します。 |
1.3 テキストブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| 文章 | ||
| 見出し | オプション、ブロックのタイトル。 | |
| 文章 | 表示説明に独自のテキストを追加します。 | |
| 列幅 | 列幅をセクション幅の 15% ～ 95% に設定します。 |
1.4 ブランド情報ブロックの設定。
| ブロック設定 | 設定 | 説明 |
|---|---|---|
| ブランド情報 | ||
| 見出し | オプション、ブロックのタイトル。 | |
| キャッチフレーズ #1 | 短いテキストを追加します。 （例えば：企業の使命、価値観、独自の販売など） | |
| キャッチフレーズ #1 のリンク | 顧客が画像をクリックした場合に移動するリンク。 | |
| キャッチフレーズ #2 | 短いテキストを追加します。 | |
| キャッチフレーズ #2 のリンク | 顧客が画像をクリックした場合に移動するリンク。 | |
| キャッチフレーズ #3 | 短いテキストを追加します。 | |
| キャッチフレーズ #3 のリンク | 顧客が画像をクリックした場合に移動するリンク。 | |
| キャッチフレーズ #4 | 短いテキストを追加します。 | |
| キャッチフレーズ #4 へのリンク | 顧客が画像をクリックした場合に移動するリンク。 | |
| 列幅 | 列の幅を 15 ピクセルから 95 ピクセルまで、算術的に 1 ピクセルずつ増やして調整します。 |
2. フッターの著作権
| セクション設定 | 設定 | 説明 |
|---|---|---|
| 言語セレクター | 言語セレクターを有効にする 言語を追加するには、言語設定に移動します。 | 言語セレクターの表示を有効にする |
| 国/地域セレクター | 国/地域セレクターを有効にする 国/地域を追加するには、市場設定に移動します。 | 国/地域セレクターの表示を有効にする |
| ポリシーのリンク | ポリシーリンクを表示 ストア ポリシーを追加するには、ポリシー設定に移動します。 | ポリシーリンクを表示するには有効にします。 |
| 支払い方法 | ||
| 支払いアイコンを表示する | 支払いアイコンを表示できるようにします。 | |
| モノクロアイコンを使用する | モノクロアイコンを表示できるようにします。 | |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| 視差効果を有効にする | 視差効果を有効にすると、2 次元の画像またはシーンに奥行きの錯覚が生まれます。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
このセクションではブロックの追加はサポートされていません。
3. フッターグループで利用可能なセクション
このセクションでは、ページ設定の目的に応じて、次のリストからセクションを追加できます。
この記事では、Shopify、Google マップなどの有名なブランドの名前を使用していますが、これは広告目的ではなく、議論されている概念を説明するためです。
