Shopify

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

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

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

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

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"
        }
      ]
    }
  ]

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

テンプレートの作成

次に、これをテンプレートから読み込みます。

今回は、/templates/page.about.liquid というファイルを作成します。
(page.{テンプレート名}.liquid →テンプレート名の部分は何でもOK)

このファイルは、先ほどの custom-content-about.liquid を読み込むだけですので、

{% section 'custom-content-about' %}

のみを記載します。

ページの作成

次に、ページを作成します。

右下に先ほど作成した「page.about.liquid」というページ用のテンプレートが追加されているため、それを選択して保存します。

ここの編集画面の「Title」「コンテンツ」は先ほどの「page.about.liquid」では何も指定していませんので、入力しても表示されません。

ページのコンテンツをカスタマイズする

最後に、オンラインストア→カスタマイズボタンを押して、そのページへ遷移します。

どこからもまだリンクを貼っていない場合は、以下のプルダウンからページを選択します。

すると、左に「コンテンツをカスタムする」が出てきますので、それを押すと、トップページと同じようにさまざまな要素を自由に配置してページを作成することができます。

 

注意点としては、設定したカスタムコンテンツの内容コンテンツは静的セクションごとに保持されているため、今回作成したカスタムコンテンツセクションは、今回作成した1ページでしか使用できません。

同じようなページをさらに増やしたい場合は、以下のようにする必要があります。

今回:Aboutというページを作成し、テンプレート /templates/page.about.liquid から、セクション /sections/custom-content-about.liquid を読み込んでいる。

追加したい場合の例:Specialというページを作成し、テンプレート /templates/page.special.liquid から、セクション /sections/custom-content-special.liquid を読み込む。

同じセクションを読み込むテンプレートを複数作成しても、編集した内容が全てのページに反映されてしまいます。

逆にいうと、全部のページ共通で同じものを読み込みたい場合は、同じセクションを読み込んだテンプレートを選択すればOKです。

 

他にも、自分で新しくセクションを作成してページやコレクションページなどに追加することも可能です。

Liquidを使用してカスタムランディングページのテンプレートを作成する方法 — Shopify開発者

 

また、PageflyShogunのようなアプリを使用すれば今回のようなテンプレートやセクションを追加しなくても、さまざまなレイアウトや要素を組み合わせてページを作成することも可能です。(有料)

ABOUT ME
toru
toru
フリーランステクニカルディレクター・UI/UXデザイナー。 Web制作会社10年・フリーランス6年の経験をもとにWebサイト・ECサイト構築・運用支援を行うかたわら、Web制作スキルを身につけたい方や、フリーランスを目指す方に向けて、自分の経験をもとに役に立つ情報をわかりやすく発信していきます。