[Shopify] トップページ以外もカスタマイズして簡単に作成する方法（Debutテーマ）

Shopifyでは、トップページは動的セクションに対応しており、豊富なセクションから簡単にページを作成できますが、その他の「ページ」ではデフォルトでは現状WYSIWYGしか使えません（カスタマイズして静的セクションは追加できます）。そこで、

トップページ以外もドラッグ＆ドロップで簡単にページを作成したい
WYSIWYGだけだと少し凝ったランディングページが作成できない
簡単に画像を横並びに配置したい
ページに商品やコレクションを追加したい

そんな要望に対する解決方法をまとめます。アプリは使用しません。

Shopifyの無料体験をはじめる

Liquidコードを編集する際には、バックアップを必ず行い、テスト環境で確認を行うなど、自己責任のもとに行ってください。万が一不都合等が起きた場合でも当方は責任を負いかねますのでご注意ください。

Shopifyのトップページで使用できるカスタムコンテンツとは

今回はトップページの「高度なレイアウト」（コンテンツをカスタムする）というセクションを、そのまま他の「ページ」でも使えるようにします。

カスタムコンテンツについては以下にまとめました。

[Shopify] コンテンツのレイアウトを自由にカスタマイズする方法（Debutテーマ）Shopifyでは、トップページは動的セクションに対応しており、豊富なセクションから簡単にページを作成できます。Debutテーマではその...

Shopifyのその他のページをカスタマイズしてコンテンツビルダーを追加する方法

今回は仮に、お店の紹介をするAboutページを簡単に作れるようにするとします。

セクションを作成

まず、トップページで使用している /sections/custom-content.liquid をコピーします。今回は /sections/custom-content-about.liquid と名前をつけます。

次に、トップページは動的セクションとして使用されているため、これを静的セクションに変更します。先ほどのファイルの一番最後に、presetが入っているため、これを削除します。（カッコやカンマの消し忘れ・消しすぎでエラーになることがあるので注意）

消すのは以下の部分です。

,
  "presets": [
    {
      "name": {
        "cs": "Vlastní obsah",
        "da": "Tilpasset indhold",
        "de": "Personalisierter Content",
        "en": "Custom content",
        "es": "Contenido personalizado",
        "fi": "Mukautettu sisältö",
        "fr": "Contenu personnalisé",
        "it": "Contenuto personalizzato",
        "ja": "コンテンツをカスタムする",
        "ko": "사용자 지정 콘텐츠",
        "nb": "Tilpasset innhold",
        "nl": "Aangepaste content",
        "pl": "Zawartość niestandardowa",
        "pt-BR": "Conteúdo personalizado",
        "pt-PT": "Conteúdo personalizado",
        "sv": "Anpassat innehåll",
        "th": "เนื้อหาแบบกำหนดเอง",
        "tr": "Özel içerik",
        "vi": "Nội dung tùy chỉnh",
        "zh-CN": "自定义内容",
        "zh-TW": "自訂內容"
      },
      "category": {
        "cs": "Pokročilé rozvržení",
        "da": "Avanceret layout",
        "de": "Komplizierteres Layout",
        "en": "Advanced layout",
        "es": "Diseño avanzado",
        "fi": "Monimutkaisempi layout",
        "fr": "Mise en page avancée",
        "it": "Layout avanzato",
        "ja": "高度なレイアウト",
        "ko": "고급 레이아웃",
        "nb": "Avansert oppsett",
        "nl": "Geavanceerde opmaak",
        "pl": "Zaawansowany układ",
        "pt-BR": "Layout avançado",
        "pt-PT": "Esquema avançado",
        "sv": "Avancerad layout",
        "th": "เลย์เอาท์ขั้นสูง",
        "tr": "Gelişmiş düzen",
        "vi": "Bố cục nâng cao",
        "zh-CN": "高级布局",
        "zh-TW": "進階版面配置"
      },
      "blocks": [
        {
          "type": "text"
        },
        {
          "type": "image"
        }
      ]
    }
  ]

これで独自の静的セクションができました。