Shopify Dawnテーマで画像バナーの表示をスマホとPCで分ける方法
こんにちは
ディレクターの小坂です。
今回は、Shopify Dawnテーマの画像バナーにおいて、PCとスマホで画像を切り替える手法をご紹介いたします。
通常、このようなケースでは、liquidテンプレートを編集する必要がありますが、Dawnテーマの画像バナーには、標準の機能（最初の画像、2番目の画像）それぞれに画像を登録することで、画像を横並びに2枚表示する機能が用意されています。
今回はこの機能を利用し、PCでは『最初の画像』、スマホでは『2番目の画像』に登録された画像が表示されるようになります。
ただし、この手法を適用すると画像を横並びで表示する機能は失われてしまいます。
条件
今回はDawnテーマのバージジョン11.0.0、バージジョン12.0.0では確認しておりますが、それ以外のバージョンでは対応できない場合もございます。
調整方法
１．ダッシュボードの「オンラインストア」 → 「カスタマイズ」 → 「画像バナー」を選択します。
２．画像バナーのカスタムCSSに以下のCSSを追加します。
.banner {
aspect-ratio: 9/16;
}
.banner__media {
width: 100%;
}
.banner > div.banner__media {
display: none;
}
div.banner__media + div.banner__media {
display: block;
}
@media (min-width: 750px) {
.banner {
aspect-ratio: auto;
}
.banner > div.banner__media {
display: block;
}
div.banner__media + div.banner__media {
display: none;
}
}
表示例
PC
PCで表示した場合、画像バナーの高さは、上部画像赤枠の『バナーの高さ』で選択した『最初の画像に合わせる・小・中・大』で選択した高さで表示されます。
スマホ
スマホで表示した場合、画像バナーの高さは、追加したカスタムCSSにより9/16比率の縦長で固定表示されます。この比率を変更することで、画像の縦幅を調整することが可能です。
まとめ
今回は、標準の機能（最初の画像、2番目の画像）を使用して、PCとスマホで画像を切り替える方法をご紹介しました。
liquidテーマを修正することで、標準の機能を活かしたまま、スマホ用の画像を追加することも可能です。
今後、別の記事でこれに関連する情報を紹介する予定ですが、ご興味がございましたらお問い合わせください。