PR このサイトはアフィリエイト広告(Amazonアソシエイト含む)を掲載しています。

Shopifyでページ追加!テンプレートを作って応用可能。

shopifyではストアを作るだけでECサイトに必要なページが自動で作られます。

更にブログ機能が無料で使えるので、ページはいくらでも作る事ができるとも言えます。

そうではなくて、ワードプレスで言うところの固定ページ。

会社概要とかaboutページ、キャンペーンページなど、必要なページを新しく作る事もできます。

HTMLで作る方法と、shopifyのセクションが利用できるページのテンプレートを作るという方法がありますので、両方のやり方を書いてみたいと思います。

shopifyで作られるページ

まずはshopifyでストアを作成すると自動で出来上がるページですが、

  • トップページ
  • 商品ページ
  • コレクションページ
  • コレクションリストページ
  • お問合せページ
  • ブログページ
  • ブログ記事ページ
  • カートページ
  • チェックアウトページ

これだけのページが作られるのもshopifyのすごいところですね!

これらのページはセクションやブロックを使ってカスタマイズできるページ。こちらのページはテンプレートとしてliquidファイルの中に入っています。

(その他にも法務関連のページも設定で入力すると作成されます。)

それでは、それ以外のページを新規作成してshopifyに追加していきましょう。

HTMLで作成したページを追加する方法。

ページを新規追加する方法はいたって簡単です。

管理画面の「オンラインストア」→「ページ」へと進み、

ページを追加

をクリック。これだけでまっさらな新しいページができました。このページの編集画面で入力できる項目は、

  • タイトル: ページのタイトルが入力できます。
  • コンテンツ: ページに表示するコンテンツでHTMLで入力可能。ブログと同様にビジュアルモードでテキストや画像の入力もできます。
  • 検索結果のプレビュー: SEOの設定部分で、検索結果に表示させるページタイトル、説明文、URLを設定できます。
  • 公開/非公開: 公開か非公開で下書き保存しておくかの設定。
  • オンラインストア: 使用するテンプレートの選択。

最後の使用するテンプレートの選択ですが、最初は「デフォルトのページ」と「contact」が選択できるようになっています。

shopifyではページを作成したらテンプレートを割り当てないとページとして成立しませんが、最初の段階で割り当てできるテンプレートはデフォルトのページのみです。

contactを選択すると、お問合せページが表示されなくなりますので注意してください。

まぁでもHTMLだけでは通常、ページを作ることはありせんね。CSSも必要になるかと思います。

ShopifyにCSSを追加する方法はこちらの記事が参考になるかと思います。

https://fujikoblog0309.com/shopify_css-customize

テンプレートについては次に説明いたします。

テンプレートを作成してページを追加する方法。

で、

これじゃ1ページしか追加できないじゃん!テンプレートはどうやって作るんだよ!

という事ですが、「オンラインストア」→「カスタマイズ」でカスタマイズ画面を開いたら、画面上部のプルダウンを見てみましょう。

商品ページやコレクションページに「テンプレートを作成する」という項目がありますね。

そうなんです!商品ページやコレクションページはデフォルト以外にもテンプレートを作ってカスタマイズすることができるんです!

なのでページを選択して「テンプレートを作成する」から新たなテンプレートを作成すれば、先程のHTMLで作ったページも割り当てられますし、ここで何も入力しないでまっさらなページを追加しても、カスタマイザーでセクションやブロックを使ってカスタマイズした新しいページを作ることができます。

例えばaboutというテンプレートを作っておけば、

ページ追加でaboutページを作ってテンプレートを割り当て、

カスタマイズ画面でセクションを利用したページの作成ができるようになります。

ページ追加の手順のおさらい。

shopifyでページを追加する手順をおさらいしますと、話しが前後しますが、

  1. 先にカスタマイズ画面でテンプレートを作成する。
  2. 「オンラインストア」→「ページ」でページを追加する。
  3. テンプレートを割り当てる。

という流れになります。HTMLで作るにしろ、カスタマイザーで作るにしろ、テンプレートを作ってに割り当てる必要があるという事ですね。

僕も最初はどうなってるの?と、ちょっとわかりにくかったんですが、知ってしまえば簡単な仕組みですし、とても便利にページの追加ができます。

実案件では、特にaboutページやキャンペーンページの追加の依頼もよくあります。

そんな時でも非常にスピーディーに新しいページを作る事ができます。

さらにこのテンプレートは複数のページに割り当てられるので、再利用することで似ているページも簡単に追加していくことが可能になります。

こういった使いやすさもShopifyの魅力であり、優れている点ですね。

コメント