商品ページカスタマイズ①独自セクションの作成

プレビュー用の商品が登録できたら、商品ページをカスタマイズしてきましょう。 商品の説明とメタフィールドを、商品イメージや購入ボタンの下に表示できるようにテーマを変更します。

制作のイメージ

Shopifyテーマ“Dawn”に用意されている商品情報セクション（main-product.liquid）は、商品イメージ+ユーザーが設定可能なブロック、という2ブロックの構成です。

この構成で１つのセクションの中で「指定した項目（ブロック）だけ、２カラムレイアウトの外に出す」という設定を行うのは大変です。

ですので、セクションごと新しく作ってしまいましょう。 新しいセクションを今ある２カラムの“商品情報”セクションの下に配置して、商品説明など広く表示させたいものを選択するイメージです。

1.新規セクション/ブロックを作成

1-1.新規セクションファイル作成

新しく、商品説明用のセクションを作っていきます。

コード編集画面 > 新しいセクションを追加する をクリック。 「main-product-custom.liquid」を作成してください。

まずは、schema内で下記の3つを設定しましょう。

1.nameの値を「商品説明」に打ち替えて、セクション名を変更する 2.テーマのカスタマイズ画面で使えるよう、presets属性を追加する 3.商品ページでのみ使えるよう、templates属性を追加する

main-product-custom.liquid

{% schema %}
  {
    "name": "商品説明",
    "settings": [],
    "presets" : [
      {
        "name" : "商品説明"
      }
    ],
    "templates" : [
      "product"
    ]
  }
{% endschema %}

コードを上書き保存し、テーマのカスタマイズ画面を開いてください。 「セクションを追加」から、作ったセクションを選択可能か確認します。

商品説明セクションが表示されていればOKです。 コード編集画面に戻って、セクションファイルの中身を書いていきましょう。

1-2.基本のブロック設定

テーマカスタマイズ画面で、ブロックとして商品説明やメタフィールドを追加・削除できるように設定します。下記2箇所を追加し、ブロックを作りましょう。

• ブロックを取り出すためのfor文と、分岐を作るcase文
• schema内にblocksプロパティを追加

main-product-custom.liquid

{%- for block in section.blocks -%}
  {%- case block.type -%}

  {%- endcase -%}
{%- endfor -%}

{% schema %}
  {
    "name": "商品説明",
    "blocks": [

        ],
    "presets...以下略

1-3.商品説明のブロックを追加

商品の“説明”を呼び出すブロックは、既存の商品情報セクション（main-product.liquid）にもあります。イチから書くのは面倒なので、使えるコードをもらいましょう。

shopify.devでproductオブジェクトのプロパティ一覧を見ると、商品の説明はdescriptionもしくはcontentプロパティで呼び出せることがわかります。

出典：https://shopify.dev/api/liquid/objects/product

main-product.liquidを開きます。 以下のショートカットキーで、検索機能を立ち上げください。

• Win:Ctrl + F
• Mac:command + F

main-product.liquid内で「description」を検索してみましょう。 ファイル内で、いくつかヒットする箇所があるはずです。

まず、商品の説明を表示する部分。 {%- when 'description' -%} ~ {%- endif -%} までをコピーしてください。

コピーしたコードをmain-product-custom.liquidの、case文の中に貼り付けます。

再び、main-product.liquidの方で「description」を検索します。 Nextボタンで進めていくと、1261行目あたりにブロックの設定があります。 { から } までをコピーしてください。

コピーしたコードをmain-product-custom.liquidの、 blocks: [ ]の中に貼り付けます。

上書き保存してください。

1-4.メタフィールド表示用のブロック作成

次に、メタフィールドで設定した原材料名などを表示するブロックを作ります。

ダイレクトにLiquidに書くことも出来ますが、今回はカスタマイズ画面の「動的ソースを挿入」からメタフィールドを呼び出す形にします。これは、ストア運営者が必要に応じてメタフィールドを増減した際、カスタマイズ画面から自分で設定できるようにするためです。

では、main-product-custom.liquidのschema内で、2つ目のブロックを設定しましょう。 タイトル、メタフィールドに登録した情報の２つを呼び出せるようにします。

main-product-custom.liquid

{% schema %}
  {
    "name": "商品説明",
    "settings": [],
    "blocks": [
      {
        "type": "description",
        "name": "t:sections.main-product.blocks.description.name",
        "limit": 1
      },
      {
        "type" : "textblock",
        "name" : "商品の追加情報",
        "settings" : [
          {
            "type": "text",
            "id": "heading",
            "label": "見出し"
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "テキスト"
          }
        ]
      }
    ],
    "presets...以下略

case文の中で、作成したブロックを表示できるよう記述します。

main-product-custom.liquid

{%- case block.type -%}
  {%- when 'description' -%}
    {%- if product.description != blank -%}
      <div class="product__description rte quick-add-hidden">
        {{ product.description }}
      </div>
    {%- endif -%}

  {%- when 'textblock' -%}
    <p>{{ block.settings.heading }}</p>
    <div>{{ block.settings.text }}</div>
{%- endcase -%}

コードを上書き保存してください。

2.カスタマイズ画面から設定

カスタマイズ画面から、表示するセクションとブロックを設定していきます。

2-1.商品説明セクションを設定

アイコンを押して、テーマをカスタマイズを選択。

上部のテンプレート選択で 商品 > デフォルトの商品 を開きます。 左サイドバーの「セクションを追加」から、自作した商品説明セクションを追加。

商品説明セクションを、商品情報の下に配置してください。

商品説明セクションの「ブロック追加」を使います。 まずは、商品説明を追加。

次に、商品の追加情報ブロックを追加します。 見出しには、原材料名と入力してください。 テキストの部分は、動的ソースを挿入 > 原材料名を選びます。

再び、ブロックを追加 > 商品の追加情報 を選択。 この繰り返して、他のメタフィールドの情報も表示させていきましょう。

概要は“商品情報”の方で表示するので、ここでは追加しないでください。

見た目は後ほど調整します。そのまま進めてください。

2-2.商品情報セクションの調整

次に、既存の商品情報セクションを調整しましょう。 商品説明～Care Instructionsまでは必要ないので、非表示化します。

商品情報セクションのブロックを追加 > カスタムLiquid を選びます。 メタフィールド“概要”をLiquidで呼び出しましょう。

<!-- 概要を表示 -->
{{product.metafields.custom.description}}

2-3.使わないセクションは非表示に

テキスト付き画像、マルチカラムのセクションは使いません。 セクションごと非表示に設定しましょう。

なお、おすすめ商品は、売上に繋がりそうなので残しました。