shopify カスタマイズで商品ピックアップセクションを追加する方法

shopifyのテーマのカスタマイズにて、選択した商品をピックアップで表示するためのコンテンツの追加方法を紹介します。

shopify 商品ピックアップ作成の流れ

1. shopifyのコードを編集で商品ピックアップのセクションliquidファイルを新規作成
2. 作成したファイルにschema指定で商品選択ができるように指定する
3. HTML + liquidを組み込む
4. カスタマイズ画面でブロックを追加し、表示する商品を選択する

セクションliquidファイルを新規作成

以下の流れでセクションliquidファイルを新規作成します。

オンラインストア ＞ 編集したいテーマの3点リーダーからコードを編集をクリック ＞ セクションファイルの追加

shopify 商品ピックアップの出力方法

schema

作成したセクションファイルにschemaを記述していきます。商品選択ができるようにschema設定します。

{% schema %}
  {
    "name": "商品ピックアップ",
    "settings": [
      {
        "type": "url", 
        "id": "url", 
        "label": "リンク用URL"
      }
    ],
    "blocks": [
      {
        "type": "product",
        "name": "商品",
        "settings": [
          {
            "type": "product", 
            "id": "pickup_product", 
            "label": "商品を選択"
          },
          {
            "type": "image_picker", 
            "id": "image", 
            "label": "商品を選択"
          }
        ]
      }
    ]
  }
{% endschema %}

HTML + liquidの組み込み

<div class="product_pickup page-width">
  <h2>商品ピックアップ</h2>
    {% for block in section.blocks %}
        <a href="{{ block.settings.pickup_product.url }}">
          <div class="img_wrap">
          {% if block.settings.image != blank %}
            {{ block.settings.image | image_url: width: 200 | image_tag }}
          {% else %}
             {% if block.settings.pickup_product.featured_image != blank %}
                {{ block.settings.pickup_product | image_url: width: 200 | image_tag }}
             {% else %}
               {{ 'image' | placeholder_svg_tag }} 
             {% endif %}
          {% endif %}
          </div>
          <div>{{ block.settings.pickup_product.title }}</div>
          {% render 'price', product: block.settings.pickup_product, price_class: 'product_pickup_price' %}
        </a>
    {% endfor %}
  </div>
  <div class="btn_wrap"><a href="{{ section.settings.url }}">商品をもっと見る</a></div>
</div>

カスタマイズ画面でブロックを追加し、表示する商品を選択する

最後にカスタマイズ画面を開き、商品ピックアップを追加したいページのカスタマイズ画面を表示します。
ブロックを追加し、表示する商品を選択し、複数商品がある場合はブロックを増やしていき商品を選択します。