2022.12.02

Shopifyを導入したECサイトのテーマ開発

はじめまして、quip Design相川です。quip DesignではGYO-TEN様のECサイト作成にShopifyを導入しテーマ開発を行いました。今回はフロントエンドの実装を行って行く際に気をつけた点や、学んだことなどをご紹介したいと思います。

Shopifyは世界中で使われているグローバルシェアNo.1のECプラットフォームです。 Amazonや楽天といった大手のECプラットフォームよりも手数料などが低く、多言語に対応している点や利用できる決済方法の多さ、デザインのカスタマイズの自由度などが利便性としてあげられています。

1.ベースとなるテーマ選び

quip DesignでECサイトリニューアルを担当した冷凍餃子の販売を行うGYO-TENの事例をもとにご紹介します。まず、ECの要であるASPはShopifyを選びました。

今回はサイト制作の振り返りもかねて、Shopifyの導入について主にフロントエンドの観点から解説していきたいと思います。

使用したテーマ

ShopifyはBASEや他のCMSと同様にベースとなるテーマを選択しカスタマイズしていくことで、オリジナルのECサイトが制作できます。今回は一からデザインを制作していったので、テンプレートとなるテーマは極力シンプルなものが良かったため、必要最低限のシンプルな作りでできているテーマ「Dawn」を選択しました。

ディレクトリの階層

Dawnのテーマのディレクトリ階層は以下のようになっており、各ディレクトリごとに必要なファイルが分けられています。

assetsディレクトリは、CSS、JavaScript、画像などのファイルを格納しています。

layoutディレクトリには、各ページの骨格となるようなtheme.liquidや会員向けのパスワードなどを入力するpassword.liquidがあります。この拡張子.liquidとは、Shopify独自のテンプレート言語で、htmlのなかで {{ }} や {% %} などを使って変数を書くことができます。

<h2>{{ product.title }}</h2>

スタイルシートを直接liquidに書くときにもこの構文を使います。

{%- style -%}
.header {
width: 100vw;
}
{%- endstyle -%}

templatesディレクトリには.json形式のテンプレートが入っています。以前まではこちらもliquidのテンプレートが使われていたようですが、2021年のアップデートにともないjson形式のテンプレートが一般的となりました。トップページであればindex.json、下層ページであればpage.xxx.json、商品のコレクションであればproduct.jsonなどといったかたちで使われます。

sectionsディレクトリには主に各ページ共通となるようなheaderやfooterのliquid、また個別ページ作成時に使われるテンプレートとなるpage.liquid、そのほかECサイト用の商品一覧やカート、お問い合わせフォームに関するものなど、各ページで使われるパーツがこのsectionsに入っています。templates内のjsonからこのセクションデータを読み込むことができます。

sectionsにあるliquidに {% schema %} タグを使うと管理画面から編集することができます。おもに商品の管理やブログ記事など、画像やテキストの編集、チェックボックスの選択、商品のコレクション表示などの更新に使われます。

snippetsはセクションとも似ているのですが、セクションよりもさらいに小さい単位のパーツをliquidとして格納しています。例えば各ページ共通で使われるリンクボタンやアイコンなど。今回のGYO-TENのサイトでは、トップページで表示するおすすめ商品などは、商品一覧のテンプレートとは別の見せ方をしたかったため、この商品のモジュール（写真や商品名、金額など）をスニペットとして管理できるようにいたしました。

2.テーマ作成

今回は主にフロントエンドのコーディングに関わる説明ですので、テーマのなかでフロントエンドに関わってくるディレクトリを中心に書いてきます。主にはページを生成するjsonファイルなどが入ったtemplates、共通要素のheader,footerや各ページの内容が書かれたsections、snippets、cssやjavascriptを管理するassetsです。

JSON テンプレート

Shopifyでは各ページのテンプレートをJSON形式のファイルで作成しています。 headerやfooterは共通のパーツを使っているため、layoutディレクトリにあるtheme.liquidで読み込んでいます。なので、templates内のjsonでは主にページのメインコンテンツ部分を読み込むようにしています。

例えば商品を紹介するプロダクトページで、メインの商品コンテンツがあり、その下におすすめのレコメンド商品がくる場合のjsonファイルです。

/* product.json */
{
"sections": {
  "main":{
  "type": "product",
  },
  "recommend": {
  "type": "product-recommend",
  }
},
"order": [
  "main",
  "recommend"
  ]
}

“sections” で記述している”main”と”reccomend”は、それぞれsectionsから読み込んでいるテンプレートです。名前は自由に決めています。”type”はテンプレートのliquidの {% schema %}で定義されているtypeです。 ”sections”でページに必要な中身を読み込んでいき、最後に”order”で表示していく順番を指定しています。この場合、生成されたページでは”main”が最初に表示され、次に”recommend”が読み込まれて表示されていきます。

例えば下層ページをつくる際、そのページ固有のテンプレートと、各ページ共通で使えるテンプレート（SNSのリンクやバナーなど）など、いくつかパーツが増えていくと思いますので、その分、”sections”で定義しているセクションのIDが増えていく流れになります。