Dawnのスライドショーにスマートフォン用の画像を追加する方法
こんにちは
ディレクターの小坂です。
ShopifyのDawnテーマを使ってスライドショーセクション（下記画像赤枠）をカスタマイズしたいと思ったことはありませんか。
Dawnテーマでは、デフォルトではPCとスマートフォンで同じ画像が表示されます。しかし、コードを少し修正してCSSを追加すれば、スマートフォン用の画像を登録する機能が使えるようになります。そうすれば、デバイスごとに最適な画像を表示できます。
今回は、Dawnテーマ（v11.0.0）を元に、スマートフォン用の画像を追加する方法をご紹介します。
前提条件
１．Dawnテーマの『slideshow.liquid』に変更が加えられていない。
２．スライドショーの設定、モバイルのレイアウトで『モバイルで画像の下にコンテンツを表示する』のチェックは外す
テンプレート修正方法
１．Shopify管理画面の『コード編集』より『slideshow.liquid』を開きます。
２．『slideshow.liquid』の下記コード（399行目〜403行目）の下に
{
"type": "image_picker",
"id": "image",
"label": "t:sections.slideshow.blocks.slide.settings.image.label"
},
下記コードを追加
{
"type": "image_picker",
"id": "image_sp",
"label": "スマートフォン用画像"
},
３．『slideshow.liquid』の下記コード（130行目）のclassを
<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 %}">下記コードに変更（classの先頭にpc-onlyを追加）
<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 %}">４．『slideshow.liquid』の下記コード（130行目〜155行目）の下に
<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 %}">
{%- 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
| 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>
下記コードの追加し、保存ボタンをクリック
<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>
css追加方法
１．管理画面の『カスタマイズ』よりサイドメニューの『スライドショー』をクリック
２．カスタムCSSに下記CSSを追加し、保存ボタンをクリック
.pc-only {
display: block;
}
.sp-only {
display: none;
}
@media screen and (max-width: 749px) {
.pc-only {
display: none;
}
.sp-only {
height: 177.777vw;
display: block;
}
.banner--small .banner__content,
.banner--medium .banner__content,
.banner--large .banner__content,
.banner--adapt_image .banner__content {
min-height: 177.777vw;
}
}
スマートフォン用画像登録方法
１．各スライドの画像登録部分に『スマートフォン用画像』の入力欄が表示されますので、画像を登録
下記スマートフォン用画像、登録時イメージ
まとめ
今回ご紹介した、スライドショーにスマートフォン用画像を追加する方法は、テーマやバージョン毎に修正箇所が異なる場合がありますので同様の箇所をお探しください。
また、ご自身で対応できない場合は、カスタマイズのご相談も承っておりますので、よろしければ下記よりお問い合せください。