【Shopify】online store 1.0 → 2.0 への改修 JSON形式のtemplateを調整する!

手順1.liquidファイルをもとにjsonファイル作成

まずは肩慣らしに「Product」のproduct.json

まず、これが、とあるテーマのproduct.liquid

【「カスタマイズ」画面】

【liquidファイル】

{% comment %}
  The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

{% section 'product--product-template' %}
<div class="max-w-6xl mb-8 md:mb-14 mx-auto px-6">
  <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
</div>

<style>
  .spr-container {
    padding: 0;
  }
  .spr-header {
    width: 100%;
  }
  .spr-header-title {
    text-align: left;
    font-size: 16px;
    font-weight: 700;
    padding-bottom: 12px;
    border-bottom: 2px solid #707070;
  }
  .spr-summary {
    display: flex;
    font-size: 14px;
    width: 100%;
  }
  .spr-summary > .spr-starrating {
    display: none;
  }
  .spr-summary-caption {
    flex-grow: 1;
    text-align: left;
  }
  .spr-headerspr-review-header-title {
    font-size: 14px;
  }
  .spr-review-header-byline {
    font-style: normal;
    width: 100%;
  }
  .spr-review-content {
    padding-top: 10px;
    border-top: 1px solid #EEEEEE; 
  }
  .spr-button {
    background-color: #333;
    font-size: 14px;
  }
  @media (min-width: 768px) {
    .spr-header {
      display: flex;
      width: 100%;
      padding-bottom: 12px;
      border-bottom: 2px solid #707070;
    }
    .spr-header-title {
      width: 120px;
      margin: 0 15px 0 0;
      padding-bottom: 0;
      border-bottom: 0px solid #707070;
    }
  }
</style>

{% section 'top--heading' %}
{% section 'product-recommendations' %}

①不要なhtmlコードをよける(どっか別のテキストエディタにコピーしておく)

{% section 'product--product-template' %}
{{ product.metafields.spr.reviews }}
{% section 'top--heading' %}
{% section 'product-recommendations' %}

JSONにhtmlコードは記述できないので、ここでよけたhtmlコードは、呼び出しているsectionファイルに移動するか、新たにsectionファイルとして作成する必要がある。

{{ product.metafields.spr.reviews }}

これだけはセクションを呼び出しておらず、このテンプレート内でproductの登録情報を呼び出している箇所であった。これもJSON変換時にセクションとして追加することにする。

②sectionを呼び出している要素をJSONに書き換える。

上記3つのsectionを呼び出している要素をJSONに書き換える。

構造化ルールは、こちらの参考資料を一読すると、理解できる。

【Shopify公式devページ】JSON templates

JSON templates
Learn how to use JSON templates to build pages with sections that can be customized in the theme editor.

Shopify Uniteで刷新されたLiquidのJSON templatesを理解する

Shopify Uniteで刷新されたLiquidのJSON templatesを理解する
{
  "sections": {
    "main": {
      "type": "product--product-template",
      "settings": {}
    },
    "top-heading": {
      "type": "top--heading",
      "settings": {}
    },
    "metafields-spr-reviews": {
      "type": "metafields-spr-reviews",
      "settings": {}
    },
    "product-recommendations": {
      "type": "product-recommendations",
      "settings": {}
    }
  },
  "order": [
    "main",
    "top-heading",
    "metafields-spr-reviews",
    "product-recommendations"
  ]
}

もともとあったproduct.liquidは消せば、新規で作成したproduct.jsonに完全に置き換わる。

【「カスタマイズ」画面】は以下のようになった。

metafields-spr-reviewsが、セクションの一部として明確に追加される形になった。

強敵「ホームページ」のindex.json

まずは「ホームページ」をつかさどるテンプレート、

index.liquidの形は、ほぼどのテーマでも

{{ content_for_index }}

である!以上!

これを↓のように書き換える必要があーーる!

index.jsonの形(Dawnの例)

{
  "sections": {
    "image_banner": {
      "type": "image-banner",
      "blocks": {
        "heading": {
          "type": "heading",
          "settings": {
            "heading": "Talk about your brand"
          }
        },
        "button": {
          "type": "buttons",
          "settings": {
            "button_label_1": "Shop all",
            "button_link_1": "shopify:\/\/collections\/all",
            "button_label_2": ""
          }
        }
      },
      "block_order": [
        "heading",
        "button"
      ],
      "settings": {
        "desktop_text_box_position": "flex-end"
      }
    },
    "featured_products": {
      "type": "featured-collection",
      "settings": {
        "title": "Featured products"
      }
    },
    "image_text": {
      "type": "image-with-text",
      "blocks": {
        "heading": {
          "type": "heading",
          "settings": {}
        },
        "text": {
          "type": "text",
          "settings": {}
        },
        "button": {
          "type": "button",
          "settings": {}
        }
      },
      "block_order": [
        "heading",
        "text",
        "button"
      ],
      "settings": {}
    }
  },
  "order": [
    "image_banner",
    "featured_products",
    "image_text"
  ]
}

index.jsonにおいては、書き換えるというか別物やがなあんさんこれ、、これしかしこれ。。

そもそも、JSONの記述は { } の入れ子構造を間違うとエラーを起こすので、直にコードを書いているとかなり繊細な作業になる。

そこで、以下のようなJSONを簡単に生成できるWebツールを使用するとコード記述にエネルギーを使わなくてよいので簡単だ。

JSON Editor

JSON Editor Online: edit JSON, format JSON, query JSON
JSON Editor Online is the original and most copied JSON Editor on the web. Use it to view, edit, format, repair, compare, query, transform, validate, and share ...

左にJSON、右にその構造をツリー形式で表現してくれており、どちらをいじっても一方に同期される。

本来割くべき構造の部分だけにエネルギーを使って、生成されたJSON自体はコピペして終わりだ。

さて話を戻して、

index.liquidのときのすっきりしていた情報、あれをいったいどうしたらJSON形式にできるのか!

僕はこうした。

上記、管理画面「カズタマイズ」で見たときの、JSON形式にする前の(1.0のときの)、index.liquidで作成したセクションの構造である。

1.0ではセクションはあくまで「ホームページ」用に作成されるべきものであり、「カスタマイズ」で追加、並び替え、登録を行った情報は、ShopifyのストアのDBに保管される。

今回、JSONになることで、「ホームページ」に使用できるセクションをJSONで明示しておく必要があるため、「カスタマイズ」で確認できるセクションをすべてJSONに記述する。

{
  "sections": {
    "top-mainvis": {
      "type": "top-mainvis",
      "settings": {}
    },
    "top-heading": {
      "type": "top-heading",
      "settings": {}
    },
    "top-brand-pickup": {
      "type": "top-brand-pickup",
      "settings": {}
    },
    "top-column": {
      "type": "top-column",
      "settings": {}
    },
    "top-hero-slideshow": {
      "type": "top-hero-slideshow",
      "settings": {}
    },
    "top-collection": {
      "type": "top-collection",
      "settings": {}
    },
    "top-news": {
      "type": "top-news",
      "settings": {}
    },
    "top-original-button": {
      "type": "top-original-button",
      "settings": {}
    },
    "top-pickup-collection": {
      "type": "top-pickup-collection",
      "settings": {}
    },
    "top-ranking-collection": {
      "type": "top-ranking-collection",
      "settings": {}
    },
    "top-youtube": {
      "type": "top-youtube",
      "settings": {}
    }
  },
  "order": [
    "top-mainvis",
    "top-collection",
    "top-original-button",
    "top-heading",
    "top-news",
    "top-column",
    "top-pickup-collection",
    "top-ranking-collection",
    "top-hero-slideshow",
    "top-brand-pickup",
    "top-youtube"
  ]
}

この時点では、セクションの表示/非表示をつかさどるJSON情報はない。

また、セクションのブロック最大数情報もない。

ひとまずindex.jsonを設置するための、最低限の記述のみ。

JSON生成ツールで見ても、sectionとorderの数が一致しているので、これでShopifyにテンプレートファイルとして認識はしてもらえる。

骨は折れるが、わりと単調な作業なので、消費するのは集中力と時間のみ。

この作業中に、突発で別の作業が入ってこないことを祈って、集中力を保ってこれのみの作業をしましょう。

のちに「カスタマイズ」画面でページごとにセクションの複製や並び替えをする

のちに「カスタマイズ」画面でページごとにセクションの複製や並び替えをすることにして、注意が必要です。

「カスタマイズ」画面でそうした作業を行った際に、バックエンドでJSONファイルのorder情報(並び順情報)が動的に変更されてしまうのです。

なので、管理画面で視覚的作業でこうした変更をおこなったあとは、必ずテーマファイルをローカルにダウンロードして、templateディレクトリを最新の状態に更新するようにしましょう。

GithubをShopifyに接続している場合は、Shopifyの「カスタマイズ」でセクションの編集をすると、Github側で以下のように表示されます。

なので、当然Github側からプッシュをしようとすると、

! [rejected]        [ブランチ名] -> [ブランチ名] (fetch first)
error: failed to push some refs to 'https://github.com/[Githubアカウント]'

とエラーを返されます。

「リモートのファイルにローカルのファイルより最新版があるら、そのファイルにpushできないですよ」ということみたいです。

なのでこの場合、一度

git fetch
git pull

を行って、ローカルに最新のJSONファイルをプルしてからプッシュすればエラーなくアップロードできます。

ナナイロ

ECサイト制作に強いフロントエンドエンジニア。Web関連のお役立ち技術情報を発信しています。 2025年の最新のAI生成コーディングのコースをUdemyに公開いたしました。爆速でコードを書きたい方は必見です!! さらに、今年(2025年)からVoicyのパーソナリティに挑戦し始めました!ラジオでWebエンジニアの生の声をお届けしています。

Share
Published by
ナナイロ