成功
商品
柔軟なカードスタイル、カラー、表示設定で商品を強調表示します。
このブロックを使うと、特定の商品を強調したい場所に単一の商品カードを表示できます。テーマの商品カードのスタイルを継承することも、このカードに独自のレイアウトや見た目が必要な場合にここで上書きすることもできます。ブロックの仕組みの詳細については、テーマエディターに関するセクションとブロックに関するShopifyドキュメントをご覧ください。
このブロックで表示する商品を選択します。ほかのブロック設定によってその商品の表示が調整されるため、このブロックは、選択した商品にすでに強い注目画像と分かりやすい商品テキストがある場合に最適です。
標準ブロック設定
Section titled “標準ブロック設定”これらの設定では、カードのレイアウト、画像のトリミング、テキスト表示、ボタンの見た目、バリアント表示を調整できます。ほかの商品カードと合わせたい場合はテーマ設定を使用のままにし、この商品に別の強調を与えたい場合は上書きしてください。
カードスタイルは最も大きな見た目の選択です。Banner スタイルは大きめの販促配置に適しており、よりシンプルなスタイルは狭いレイアウトや混在したコンテンツ行に収めやすいことが多いです。
デスクトップとモバイルの画像比率は別々に設定できます。デスクトップではバランスよく見えても、小さい画面で画像の切り抜きが不自然に見える場合は、カード全体のスタイルを変えるのではなくモバイルの比率を調整してください。
ボタンスタイルは、購入アクションの目立ち方を変えます。モバイルではアイコンのみの見た目になるため、長いボタンラベルに頼らなくても、商品画像とテキストだけでカードの内容が伝わる必要があります。
テキスト設定を使うと、スペースが限られている場合にカードを簡潔にできます。大きめの配置ではタイトルと抜粋の両方を使えますが、小さめの配置ではタイトルのみのテキストのほうが適していることがよくあります。
中央の縦方向のテキスト配置は、Banner カードスタイルでのみ機能します。
バリアントセレクターは、意味のある選択肢を持つ商品でカードをより便利にできますが、選択肢が明確に設定されていて、カード自体から理解しやすい場合に限ります。
共通の動作については、商品カード設定をご覧ください。
これらの設定は、このブロックに対してのみカードカラーを上書きします。注目商品を際立たせたい場合や、周囲のページ背景に合わせて別のカードの見た目にしたい場合に使用します。
Banner のオーバーレイ設定は、Banner カードスタイルにのみ適用されます。商品画像が込み合っているときに、画像を置き換えずにテキストの読みやすさを改善するのに役立ちます。
背景、枠線、見出し、テキストの色は、まとめて調整するのが最適です。通常は、1つの色だけを個別に変更するよりも、よりすっきりした結果になります。
共通のカードカラー動作については、カード設定をご覧ください。
表示コントロールを使うと、このブロックをすべての画面で表示することも、デスクトップまたはモバイルで非表示にすることもできます。これは、大きい画面向けの注目商品カードと、小さい画面向けのよりシンプルな版、または別の切り抜きの版を用意したい場合に便利です。
表示コントロールの詳細については、表示設定をご覧ください。
エディター設定
Section titled “エディター設定”サイドバーでブロックを分かりやすくラベル付けするために、エディターのタイトルを使用してください。複数の商品ブロックを含むレイアウトでは、編集時に各ブロックをすばやく識別したい場合に特に便利です。
使用上の注意
Section titled “使用上の注意”- 強い商品を選ぶ。 一目で分かる注目画像と簡潔な補足テキストを持つ商品を選ぶと、カードがぱっと見で読み取りやすくなります。
- 小さい画面で画像がより強くトリミングされても、意味が通る商品を使用してください。
- カードカラーを上書きしたりオーバーレイを追加したりする予定がある場合は、メインの商品画像が読みやすいままになるようにしてください。
- 上書きを用途に合わせる。 一貫性を重視する場合は共通のカード設定をそのままにし、この注目商品により強い見た目の役割が必要な場合にのみ上書きしてください。
- 空白またはデフォルトスタイルの値は、通常フォールバックのスタイルを維持します。
- 明示的なカラーやメディアの選択は、このカードをレイアウトのほかの部分からより独立して見せます。
- モバイルは別途確認する。 ブロックを確定する前に、小さい画面で画像のトリミング、テキストの長さ、ボタンの分かりやすさを確認してください。
- モバイルのコントロールでは、デスクトップと比べて配置、表示、メディアの動作が変わることがあります。
- デスクトップとモバイルでメディアが異なる場合は、両方の表示を確認して、カードが引き続き分かりやすく読めることを確かめてください。
- バリアントは必要な場合のみ使用する。 カードから直接商品を選ぶうえで役立つ場合にのみ、スウォッチまたはピルを表示してください。
- コントラストを慎重にテストする。 カラーやオーバーレイを上書きする場合は、さまざまな画像やデバイスで商品テキストが読みやすいことを確認してください。