Shopify

【Shopify】テーマテンプレートを使ってTOP以外のページも綺麗なページに編集する方法

みなさんこんにちは。
ShopifyのECサイト構築や運営サポートを行なっているささいちです。

今回はTOPページ以外の下層ページの編集方法をご説明します。

ささいち

デザインの幅が広がっているのでぜひ覚えてください!

下層ページの編集はOS2.0から

OS2.0は簡単に言えばShopifyテーマの最新バージョンと思っておいてくれたら良いです。
厳密に言えば、各テーマにもバージョンは存在しますが、OS2.0というのはShopifyのテーマ全体のバージョンになります。

OS2.0は2021年の6月ごろに発表され、2021年8月に実装されたものです。
今まではTOPページのみセクションを追加したりすることができたのですが、それだとTOPページ以外の下層ページは作り込むことが難しく、専用のアプリに頼ることで解決していました。

しかしOS2.0の登場でTOPページ以外のページも細かく編集することが可能になりました。

ささいち

OS2.0に対応していないテーマは下層ページの編集ができないので注意しましょう!!

TOPページ以外の編集方法

ズバリ、テンプレートを使う!というものです。

例えば、僕の運営しているSASSAというブランドのページでは「お問い合わせページ」がこのような表示になっています。
これの表示方法を解説します!

これは特別なコードを入力して表示させているものではなく、TOPページと同じ方法でテーマのパーツを利用して表示させています。

テーマテンプレートとは

上記画像の右下に「オンラインストア」の「テーマテンプレート」という項目があると思います。僕は現在「contact」というテーマテンプレートを使用するような設定をしています。

このテーマテンプレートは自分で作成して設定することが可能となっています。

テーマテンプレートの作成方法

テーマのカスタマイズから編集ページを開いてください。
編集画面の上部に「ホームページ▼」というタブが確認できると思います。ここをクリックするといろんなページ一覧が出てくるので、編集したいページを選択します。今回は「ページ」を選択

そうするとこのように「ページ」のテンプレート一覧が表示されます。僕はすでに6つのテンプレートを作成しているのでこの数が出ていますが、初めて触る方は「デフォルトのページ」だけ表示されていると思います。

ここの「テンプレートを作成する」をクリックします。

名前には該当する英数字を入れてください。
ここに日本語にすると不具合が発生する可能性もあるので、英語を推奨します。

そうするとそのテンプレートを編集できるので、TOPページと同じように表示したいパーツを配置して保存してあげてください。

テーマテンプレートの設定方法

上記の内容でも出てきましたが、画面右下にある「オンラインストア」「テーマテンプレート」からあなたが作成したテンプレートを設定することが可能になっています。

テーマテンプレートを使用すると何が良いのか

この機能は「ページ」だけでなく以下に設定が可能です。

テーマテンプレートが設定できるページ

・商品ページ
・コレクションページ
・ページ
・ブログ記事ページ
・ブログ一覧ページ

例えば「商品ページ」のテーマテンプレートを作成して登録すると、商品毎にLPを作れることになります。

商品数が多いストアの場合は商品毎に作るのは管理が大変なのでお勧めはしませんが、ジャンルやシリーズ毎にテーマテンプレートを作成して設定してあげることで管理もしやすくなります。

最後に

テーマテンプレートの存在を知らない方もいらっしゃると思います。
今までShopifyではTOPページしか自由に編集できない仕様でしたがアップデートによってOS2.0のテーマは編集の幅が広がりました。

これによって幅は広がって訴求力も強くなりましたが、それと同時にそこまで知らない人や時間がなくてできない人も多いと思います。

ささいち

もし悩んだらお気軽にご相談ください!