はじめに

Shopifyでサイト制作をする際、ビジュアルで訴求できる便利な機能がスライドショーです。
しかしShopifyで多く使われている無料テーマDawnやRiseのスライドショー機能では、PCとスマホで同じ画像を使用しているため、スマホ表示の際にスライド画像が見えづらくなるなどの課題を感じることも少なくありません。

そこで本記事では、Dawnでスマホ専用の正方形画像をスライドショーに設定する方法をご紹介します。

外部アプリや高度なコーディングスキルを使わず、Liquidとテーマエディタによるシンプルなカスタマイズで、PCとスマホそれぞれに最適なスライドを表示できるようになります。
見た目の調整の手間を削減することができ、またエンドユーザーにとっても快適で見やすいビジュアル体験が得られるようになります。
モバイルファーストの今だからこそ、ぜひ実践しておきたい改善です！

実装方法

1. テーマエディタからモバイルレイアウトを設定

画像のように、モバイルレイアウト内にある「画像の下にテキストを重ねる」をあらかじめオフにしておきます。

2. 「slideshow.liquid」にスマホ画像用のコードを追加

「slideshow.liquid」の{% schema %}{% endschema %}内に、スマホ用の画像を表示するための記述を下記の通り追加します。（画像はクリックで拡大します）

{
  "type": "image_picker",
  "id": "image",
  "label": "t:sections.slideshow.blocks.slide.settings.image.label"
}

↓ この直後に下記を追記

{
  "type": "image_picker",
  "id": "image_sp",
  "label": "スマートフォン用画像"
}

次に、同ファイルの123行目あたりにあるdivに新しいclass「pc-only」を付与します。

<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 %}">

↓ 下記に変更

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

さらに上記<div></div>の直後に、スマホ用画像を出力するための下記コードを追加します。（画像はクリックで拡大します）

<div class="sp-only slideshow__media banner__media media{% if block.settings.image == blank %} placeholder{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}">
  {%- if block.settings.image -%}
    {%- liquid
      assign height = block.settings.image.width | divided_by: block.settings.image.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
    }}
  {%- else -%}
    {%- assign placeholder_slide = forloop.index | modulo: 2 -%}
    {%- if placeholder_slide == 1 -%}
      {{ 'hero-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }}
    {%- else -%}
      {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
    {%- endif -%}
  {%- endif -%}
</div>

3. スマホ用画像のスタイルを調整

「slideshow.liquid」内または別ファイルに下記CSSを追加します。

.pc-only {
  display: block;
}
.sp-only {
  display: none;
}

@media screen and (max-width: 749px) {
.pc-only {
  display: none;
}
.sp-only {
  height: 100vw;
  display: block;
}
.banner--small .banner__content,
.banner--medium .banner__content,
.banner--large .banner__content,
.banner--adapt_image .banner__content {
  min-height: 100vw;
}
}

本記事ではスマホ用画像が正方形で表示されるようにしています。
画像サイズを変更したい方は、「height: 100vw;」「min-height: 100vw;」の箇所をご調整ください。

まとめ

いかがでしたか？
スマホとPCで画像を使い分けることで、スライドショーの見え方は格段に向上します。
見やすさを調整するための工数を大幅に削減できることはもちろん、デバイスに応じて最適化されたビジュアルを用意することでブランドイメージや商品の訴求をより効果的に伝えることができます。

スライドショーはサイトのファーストビューを大きく左右します。
ほんの少しの工夫で、より洗練された見せ方が可能になりますので、ぜひこのカスタマイズを取り入れてサイトをさらにブラッシュアップしてみてくださいね。

弊社では、ECサイト制作だけでなくその後の運用までを、成果にコミットした万全のバックアップ体制でご支援しています。
売上最大化のために必要な運用すべてをサポートさせていただきますので、マーチャント様からの運用フェーズのご相談などでお困りの制作者様もお気軽にご連絡ください！