Shopify LiquidでPC/SPでセクションに登録する画像を分ける

今回の目的

Shopifyのセクションでは何もしなければ登録される画像はPC/SPで共通であり、画面のサイズで画像を切り替えたりすることはできません。

調べてみると、意外と簡単にPC/SPで登録する画像を分ける方法があったので紹介します。

PC/SPで登録したい画像をわける

Debutにあるセクションを編集しても良いのですが、やり方の紹介なので今回は新しくセクションを作成します。

sectionディレクトリでimage.liquidというものを作成し、下のコードを貼り付けます。
pictureタグを使うことによって画面幅に応じて、別の画像を表示する事が可能になります。

<picture>
  <source  class="feature-row__image-wrapper " media="(min-width: 768px)" srcset="{{ section.settings.image_pc | img_url: 'large' }}">　// 幅768px以上はsourceタグの画像を表示
  <img  class="feature-row__image-wrapper" src="{{ section.settings.image_sp | img_url: 'large'}}"/> // 幅768px未満はimgタグの画像を表示
</picture>

{% schema %}
  {
    "name": "画像切り替え",
    "settings": [
   	{
          "type": "image_picker",
          "id": "image_pc",
          "label": "画像(PC)" //pc画像用のセクション定義
        }, 
        {
          "type": "image_picker",
          "id": "image_sp",
          "label": "画像(SP)"　//sp画像用のセクション定義
        }
   ]
  }
{% endschema %}

トップ画面で確認する為、index.liquidに{% section 'image'%}を追加します。

{{ content_for_index }}
{% section 'image'%}

ちなみにcontent_for_indexを入れることによってトップ画面に動的セクション(セクションの位置を変更したりセクションを削除、非表示する事ができます)を入れる事ができ、
{% section 'image'%}を入れる事で静的セクション(位置は変更できず、コメントアウトとかコードから消さないとセクションを削除できません)を入れる事ができます。

これでホームページのカスタマイズ画面に画像切り替えセクションが追加されています。

PC/SP画像登録すると画像が切り替わっているのが確認できました！

PC画像

SP画像

まとめ

<picture>タグ便利です。
セクションだけでなくブログ記事(wisywig)とかでも簡単に画像を切り替える事ができるのでおすすめです。