【Shopify】Dawnでスライドショーで
PCとモバイル別に画像を設定する方法

Shopifyでスライドショーバナーを設置する場合、各スライドはPCとモバイルが共通になっています。しかし、それではどちらかのデバイスの時に見栄えが良くない場合もあります。各デバイスで効果的にバナーを見せるためにはそれぞれに適したものを設置したいところです。そこでslideshow.liquidのコード編集によりPCとスマホでそれぞれ違う画像を設置できるようにカスタマイズして実装しました。

今回のゴールは

完成イメージ

カスタマイズ画面

デフォルトでは画像設置個所がなかったのに対し、テーマファイルのコード編集によりモバイル用も追加しました。

トップページ

PCとモバイルでバナーを変えるメリット

• 各デバイスに最適なレイアウトで表示できる
  例：PCは横長、モバイルは縦長のバナーなど
• 画像の一部が切れて見えなくなる問題を防げる
  画面サイズに応じて画像の端がトリミングされてしまうことがあります
• 視認性とデザイン性が向上し、ユーザー体験が良くなる
• デバイスごとに見やすい設計にすることで、コンバージョン率（CV）アップに貢献
  これまで流入が少なかったデバイスは、画像の見づらさが原因だった可能性もあります

初心者でもできるコード編集方法

流れは以下の通りで割とシンプルです。

ではそれぞれ見ていきましょう。

1. slideshow.liquidを開く

sections/slideshow.liquid を開きます。

Shopify 管理画面 → オンラインストア → テーマ → 「コードを編集」

2. マークアップ構造（HTML+Liquid）を修正

スライドごとに PC画像とモバイル画像を表示できるように構造を変更します。

１）書き換えるコード：PC画像の表示部分に pc-only クラスを追加

元のコードの最後にpc-only クラスを追加して、PC用の画像のみを表示させるようにします。

<div class="slideshow__media banner__media media{% if block.settings.image == blank %} placeholder{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %} pc-only"> コピー

２）追記するコード：モバイル用画像を表示する部分に sp-only クラスを追加

「divdiv class=”slideshow__text-wrapper banner__content banner__content–{{ block.settings.box_align }} page-width{% if block.settings.show_text_box == false %} banner–desktop-transparent{% endif %}”>」の上に「sp-only」 クラスを追加して、モバイル用の画像を表示します。Liquidコードを使って、モバイル画像の高さとサイズを調整しています。

<div class="slideshow__media banner__media media{% if block.settings.image == blank %} placeholder{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %} sp-only"> {%- liquid assign height = block.settings.image_sp.width | divided_by: block.settings.image_sp.aspect_ratio | round if section.settings.image_behavior == ‘ambient’ assign sizes = ‘120vw’ assign widths = ‘450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680’ else assign sizes = ‘100vw’ assign widths = ‘375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840’ endif -%} {{ block.settings.image_sp | image_url: width: 3840 | image_tag: loading: ‘lazy’, height: height, sizes: sizes, widths: widths }} </div> コピー

3. CSSを追記し、不要な既存スタイルを無効化

追記するCSS：PC用とモバイル用の画像を切り替えるスタイル

メディアクエリを使ってPCとモバイルの画像をそれぞれ表示/非表示に切り替えます。また、

.pc-only { display: none; } .sp-only { display: block; } @media screen and (min-width: 750px) { .sp-only { display: none; } .pc-only { display: block; } } @media screen and (max-width: 749px) { #Slider-{{ section.id }}::before, #Slider-{{ section.id }} .media::before, #Slider-{{ section.id }}:not(.banner–mobile-bottom) .banner__content::before { padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image_sp.aspect_ratio | times: 100 }}%; content: ”; display: block; } } コピー

元のSP用コードを削除またはコメントアウト

既存のSP用スタイルを無効化することで新しいモバイル画像用のスタイルが優先されるようになります。

{% comment %} 以下は元のコード @media screen and (max-width: 749px) { #Slider-{{ section.id }}::before, #Slider-{{ section.id }} .media::before, #Slider-{{ section.id }}:not(.banner–mobile-bottom) .banner__content::before { padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%; content: ”; display: block; } } {% endcomment %} コピー

４．{% schema %} にモバイル画像用の設定項目を追加

Schemaの「”label”: “t:sections.slideshow.blocks.slide.settings.image.label”},」の後ろ辺りに以下のコード追記し、Shopifyの管理画面で「SP用イメージ」をアップロードできる項目を作成します。

{ “type”: “image_picker”, “id”: “image_sp”, “label”: “SP用イメージ” } コピー

まとめ

shopifyのDawnテーマでスライドショーバナー画像をPCとモバイルで別のものにする方法をまとめてみました。バージョンによって少々設定方法は異なるかもしれませんが、流れとやることを把握いただければ似た感じで実装できると思います。slideshow.liquidしかいじらないのでコード初心者の私も比較的楽に設定できました。