デスクトップとモバイルでバナーをより見やすくするには？

注目のリンク

1. 画像のアップロードに関するShopifyドキュメント：画像バナー、アスペクト比、焦点位置のベストプラクティス
2. テーマエディターの機能概要に関するShopifyドキュメント：デスクトップとモバイルのレイアウトをプレビューして比較する
3. セクションのカスタマイズに関するShopifyドキュメント
4. 表示設定に関するCompany XYZドキュメント

役立つ動画

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

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

まずは1つのBannerセクションから始めます。Alignでは、モバイル向けにバナーのアスペクト比と背景メディアを調整できるため、通常は2つ目のバージョンを作成しなくても小さい画面向けのレイアウトを改善できます。

モバイル向けにバナーを調整する

1. テーマエディターでBannerセクションを開きます。
2. デスクトップで使用するアスペクト比と背景メディアを選択します。
3. 小さい画面で画像やテキストが窮屈に見える場合は、より縦長のモバイルのアスペクト比を設定します。
4. デスクトップの画像がモバイルで適切にトリミングされない場合は、モバイル専用の背景メディアを追加します。
5. 保存する前に、デスクトップとモバイルの両方をプレビューします。

プレビュー機能については、テーマエディターの機能に関するShopifyドキュメントを参照してください。

重要なテキストや画像の細部は、端から離して配置してください。端ではトリミングが発生しやすいためです。画像については、テーマ画像のアップロードに関するShopifyドキュメントを参照してください。

必要な場合にのみ個別のバナーを使用する

モバイル版で異なるテキストやコンテンツ、または大幅に異なるレイアウトが必要な場合は、Bannerセクションを複製します。表示設定を使用して、デスクトップでは一方のバージョンを、モバイルではもう一方のバージョンを表示します。

ノート

デバイスごとのバージョン間でメッセージと遷移先を統一し、顧客が同じ重要な情報を受け取れるようにしてください。