Features bar

注目のリンク

1. セクションとブロックに関するShopifyドキュメント
2. カラー設定に関するCompany XYZドキュメント
3. Featureブロックに関するCompany XYZドキュメント
4. セクションのカスタマイズに関するShopifyドキュメント
5. セクションの余白設定に関するCompany XYZドキュメント
6. セクション背景設定に関するCompany XYZドキュメント
7. 区切り線設定に関するCompany XYZドキュメント
8. 表示設定に関するCompany XYZドキュメント
9. レイアウト幅設定に関するCompany XYZドキュメント

役立つ動画

Shopify Academy動画：ストアをカスタマイズする

Shopify Academy動画：ストアをカスタマイズする

短く、価値の高いメッセージを強調するためにこのセクションを使用してください。たとえば、配送特典、サポートの約束、ストアポリシー、タイムリーなお知らせなどです。既定では共有テーマの動作に従うこともできますし、Feature ブロックを追加して、ここに表示するコンテンツを完全に制御することもできます。

基本設定

これらの設定では、個々の項目をカスタマイズする前に、バー全体のレイアウトと表示方法を決定します。

1. テキストの配置 は、各項目内で feature のコピーがどの位置に表示されるかを制御します。ページ全体の一貫性を保つため、近くのセクションと合わせてください。
2. アイコンの位置 は、アイコンとテキストの関係を変更します。左または右はコンパクトな横並びレイアウトに適しており、上または下は各 feature をより視覚的に分けたい場合に適しています。
3. アイコンの枠線を表示 は、アイコンの周囲に追加の強調を加えます。シンプルなアイコンを目立たせるのに役立ちますが、セクションにすでに強い区切り線や太字の背景がある場合は、少し煩雑に感じられることがあります。

このセクションにカスタムの feature コンテンツを表示したい場合は、少なくとも 1 つの Feature ブロックを追加してください。ブロックを追加すると、このセクションではデフォルトの共有コンテンツ動作が上書きされます。

エディターでのブロックの仕組みについて詳しくは、セクションとブロックに関するShopifyドキュメント を参照してください。

カラー設定

これらの設定では、このセクションの既定の色を上書きします。features bar により強いコントラスト、ブランドに合ったアクセント、または周囲のレイアウトとは異なる視覚的な優先度が必要なときに使用してください。カラー設定の詳細は カラー設定に関するCompany XYZドキュメント で確認できます。

アイコン、テキスト、アイコン枠線の色を一緒に調整して、意図のある見た目にしてください。カスタム背景を使用する場合は、公開前に可読性を十分確認してください。

対応ブロックタイプ

1. Feature

Feature ブロック

Feature ブロックを使用して、アイコン、タイトル、任意の補足テキスト、任意のリンクを追加します。Feature ブロックの詳細は Featureに関するCompany XYZドキュメント で確認できます。

1. Icon は絵文字またはアイコン名にできます。よりシンプルなテキスト中心の表示にするには、空欄のままにしてください。
2. Title and subheading は、短くまとめると最も効果的です。簡潔なコピーにすると、複数の feature を 1 行でバランスよく見せやすくなります。
3. Link は、ポリシー、FAQ、コレクションなどの関連先に役立ちます。リンクは、リンク先がメッセージと明確に一致する場合のみ追加してください。
4. Block visibility を使うと、個々の feature をデスクトップまたはモバイルで非表示にできます。短いモバイル版のほうが読みやすい場合に便利です。

ノート

このセクションは最大 4 つの Feature ブロックをサポートします。顧客が最初に気づくべきメッセージに重点を置いてください。

エディターの設定詳細は、セクションのカスタマイズに関するShopifyドキュメント を参照してください。

標準セクション設定

余白設定

余白設定 では、features bar の上下の余白を調整します。小さめの余白はユーティリティ系のメッセージに適しており、大きめの余白はセクションを独立したコンテンツ領域のように見せます。バーが小さい画面で窮屈に見える場合は、デスクトップとモバイルで別々の値を設定すると便利です。

セクション背景設定

セクション背景設定 では、features bar の背後に色、グラデーション、画像、または動画を追加できます。セクションをより明確に分けたい場合や、よりプロモーション感のある見た目にしたい場合に便利です。オーバーレイ設定は可読性の維持に役立ち、グラデーションのオーバーレイは単色のオーバーレイより優先されます。

注意

画像や動画の背景は、このような小さなセクションではテキストの見やすさをすぐに低下させることがあります。デスクトップとモバイルの両方を確認し、コピーが読みやすいことを確かめてください。

区切り線設定

区切り線設定 では、セクションの上または下に線を追加します。バーが大きなセクションの間にあり、余白を増やさずに控えめな境界が必要なときに使用してください。区切り線の色が透明のままの場合は、共有の枠線色が使用されます。

表示設定

表示設定 では、セクション全体をデスクトップ、モバイル、またはその両方に表示するかを制御します。モバイル向けに簡略化したレイアウトにしたい場合や、デバイスごとに異なる配置にしたい場合に便利です。ブロック単位の表示設定も使う場合は、必要な場所で少なくとも 1 つの feature が表示されたままになっていることを確認してください。

幅設定

幅設定 では、コンテンツの最大幅とセクション外側の幅の両方を制御します。コンテンツ幅を狭くすると短い feature テキストを読み取りやすくなり、幅を広くするとバーを大きなページレイアウトになじませやすくなります。エディターの枠組みで余白が誤って見えることがあるため、可能であればライブページで幅の変更をプレビューしてください。

使用上の注意

1. コピーは短く保ってください。 このセクションは、顧客が一目で理解できる短い文に最適です。
   1. 短いメッセージは、細いバーでも読み取りやすくなります。
   2. メッセージにより詳しい説明が必要な場合は、テキストを増やす代わりに完全なリンク先に誘導してください。
2. ブロックは意図的に使用してください。 このバーで共有コンテンツの動作ではなく、セクション固有のアイコン、テキスト、リンクを表示したい場合は、Feature ブロックを追加してください。
   1. ブロックを追加すると、ここに表示される内容が大きく変わることがあります。
   2. ブロックを追加または削除した後はセクションを確認し、最終的なメッセージのバランスが保たれていることを確かめてください。
3. 両方のビューポートサイズを確認してください。 デスクトップとモバイルのコントロールは、レイアウト、配置、表示、メディアの動作にそれぞれ異なる影響を与えることがあります。
   1. 小さい画面でもアイコンとテキストの配置が適切に見えることを確認してください。
   2. モバイルのみ、またはデスクトップのみの設定でも、バーが読みやすく有用であることを確認してください。
4. 色とメディアの上書きは慎重に使用してください。 既定スタイルの値は通常フォールバックのスタイルを維持しますが、明示的な色、グラデーション、またはメディアの選択によってセクションはより独立した見た目になります。
   1. 強いローカルスタイルは強調に役立ちますが、コントラスト確認の必要性も高まります。
   2. デスクトップとモバイルで別々のメディアを使うと、切り抜きや可読性に影響することがあるため、公開前に両方のバージョンを確認してください。
5. フォーム形式のメッセージは読みやすく保ってください。 バーを顧客入力、検証、成功・エラーメッセージに使用する場合は、これらの状態がはっきり目立つように十分なコントラストと余白を確保してください。