【Shopify構築】Dawnのスライドショーにスマートフォン用の正方形画像を追加する方法

この記事ではShopify無料テーマのDawmのスライドショーにスマートフォン用の画像（正方形）を設定する方法を説明します。（作業時間約10分程度）

無料テーマDawnのデフォルトではスライドショーの画像はモバイル用に別で設定できないようになっています。

Liquidファイル編集とカスタムCSSでモバイル用の画像を設定できるようにしていきます。

＜設定方法＞
１．Shopify管理画面の『コード編集』より『slideshow.liquid』を開き下記検索コードの下に追加コードを追加します。

検索コード
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.slideshow.blocks.slide.settings.image.label"
        },

↑このコードの下に↓を追加する

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

２.クラス名を編集する

元ソース
<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 %}">

※slideshow__media~~の前に『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 %}">

3.2で編集したクラスの下に下記コードを追記して保存する。

 <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>

4.スライドショーセクションのカスタムCSSに下記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;
}
}

※100vw部分は画像サイズによって適宜数値を変更する。正方形の場合は100vwでOKでした。

こちらで完了です！
設定後はスマートフォン用画像がアップロードできるようになります！

以上、Dawnのスライドショーにモバイル用画像を設定するカスタム方法でした。
ご覧いただきありがとうございました✨

海外ノマドをしながらWebデザイナーとして活動しています🌏
良ければXのフォローもよろしくお願いします！

Tweets by nomad_yuri