成功
Price
デバイス間での商品価格のスタイル、ポリシーテキスト、表示を調整します。
このブロックを使用して、商品の価格をわかりやすく表示し、商品詳細内で適切な視覚的優先度を設定します。価格をすばやく確認できる状態に保ちつつ、任意でセールを強調し、近くに補足的なポリシーテキストを表示したい場合に最適です。ブロックの仕組みの概要については、セクションとブロックに関するShopifyドキュメントを参照してください。
主な設定では、商品情報エリアで価格をどの程度目立たせるかを調整します。テキストサイズによって視覚的な階層が変わり、テキストの色とセール価格の色によって、通常価格と割引価格を区別しやすくなります。
周囲の商品詳細より目立たせながらも、価格が確認しやすいサイズを選択してください。色については、まず十分な読みやすさを確保し、そのうえで割引を目立たせたい場合にのみセールカラーで強調します。
価格とともに配送・税務ポリシーに関するメッセージを表示することもできます。購入者が早い段階で追加費用に関する情報を確認できると便利ですが、ポリシーの文言が明確で完全な場合に最も効果を発揮します。
配送・税務ポリシーに関するメッセージは、ポリシーが最新で購入者に提示できる状態の場合にのみ表示してください。不明確なポリシーテキストは、価格エリアの信頼感を損なう可能性があります。
標準ブロック設定
Section titled “標準ブロック設定”表示設定では、このブロックをデスクトップ、モバイル、または両方に表示するかどうかを制御します。小さい画面と大きい画面で異なる商品情報レイアウトを作成する場合に便利です。エディターでのブロック管理について詳しくは、セクションのカスタマイズに関するShopifyドキュメントを参照してください。
一方のデバイスでブロックを非表示にする場合は、そのレイアウト内の別の場所に価格が明確に表示されることを確認してください。共有の表示設定について詳しく確認できます。
使用上の注意
Section titled “使用上の注意”- 明確な階層を設定します。 タイトル、バッジ、購入アクションに対して価格が十分に強調されるテキストサイズを使用してください。
- 近くにある詳細情報は控えめにして、価格を最もすばやく確認できるようにします。
- 割引を慎重に強調します。 読みやすさを損なったり、ページデザインとぶつかったりすることなく、値下げされた価格に注意を引くためにセールカラーを使用してください。
- セール価格と比較できるよう、通常価格も十分に読みやすくしてください。
- ポリシーテキストを意図的に表示します。 追加情報によって購入をためらう気持ちを減らせる場合にのみ、配送・税務ポリシーに関するメッセージを有効にしてください。
- 価格エリアで使用する前に、文言が完全で最新であることを確認してください。
- 両方のデバイスで確認します。 表示設定を変更した場合は、デスクトップとモバイルの両方で価格を簡単に見つけられることを確認してください。
- 一方のデバイスでブロックを非表示にする場合でも、別の場所で価格が明確に表示されるレイアウトにする必要があります。
- 商品コンテキストによって購入者に表示される内容が変わることを想定します。 価格の表示は、選択したバリエーション、数量、在庫状況、設定済みのコマースアクションによって変わる場合があります。
- オプションや在庫状況が変わっても価格エリアが適切に機能することを確認できるよう、いくつかの商品状態をテストしてください。
- 共有フォールバック動作を使用する場合は、控えめなスタイルにします。 空白、透明、またはデフォルトスタイルの値を使用すると、通常は周囲のデザインに価格エリアを任せることができます。
- 価格ブロックをより明確に際立たせたい場合にのみ、明示的な色や強い視覚的オーバーライドを使用してください。