コーディングで失敗しない！shopifyのオリジナルテーマ制作で失敗しないポイントとは？

WordPressでは、既存のテーマやオリジナルテーマを使ってサイトを作ります。
Shopifyも同じように2つの選択肢があります。
私たちはShopifyの案件ではテンプレートテーマではなく、オリジナルテーマを多く使用します。
しかし、WordPressとは異なる部分もあります。今日は、Shopifyのオリジナルテーマの制作のヒントを紹介します。

私たちがShopifyの案件を受注する時はオリジナルテーマで制作することが多いですが、
WordPressのオリジナルテーマとは仕様が異なる部分があり、
混乱しやすいポイントがいくつかあります。

そこで今回は、Shopifyを使ったオリジナルテーマの制作ポイントについて紹介します。

Shopifyは「EC(E-Commerce)サイト」と呼ばれる、電子商取引を行うWebサイトを構築するサービスです。
WordPressに親しみのある方は、ECサイトに特化したWordPressと考えると、分かりやすいです。

一方、ShopifyはPHPではなく「Liquid」というShopifyオリジナルのテンプレート言語を使って開発します。

オリジナルテーマを作る際は、新たにLiquidの使い方を学ぶ必要があります。
既存のテーマでもLiquidを使う場面はありますが、1度オリジナルテーマを制作すると理解度がかなり上がります！

ディレクトリの構成

普段はコーディングの際、CSSやJavaScriptは「css」や「js」といった名前のフォルダを作成し、読み込んでいるかと思います。

ランディングページ制作では、自由にディレクトリを構成すればOKです！
しかし、Liquidは決まった場所に決まったデータを格納しなければ、画面に反映されません。

コーディングで使用するフォルダは７種類あります。概要は以下の通りです。
実際のコーディングでは、主にassets, layouts, sections, (snippets), templatesを使います。

①assets

CSSや画像、JavaScriptなどの素材を置く場所。

②config

管理画面におけるテーマエディタでの変更内容を設定する場所。

③layouts

画面を表示するテンプレート。
ここでは画面ごとに呼び出すCSSやJavaScriptを設定したり、
ヘッダ情報、ヘッダー、コンテンツ(後述するtemplates)、フッターの呼び出しを記載します。

④locales

言語(日本語や英語)の設定箇所。

⑤sections

各ページで今日つして使用するパーツを置きます。
ここにヘッダーやフッターが含まれます。
(layoutsでは、ここにあるヘッダーやフッターを呼び出しています)

⑥snippets

sectionsをさらに細かく分けたパーツを置きます。

⑦templates

各ページを置く場所。各ページのコーディングの中に、sectionsを組み込みます。

 

次に、制作上の注意点について紹介します。

注意点その１　assetsにはフォルダを作らない

Liquidでは直接データをassetsフォルダ内に置かなければ、読み込まれません。

そのため、あらかじめコードエディタ(VSCodeなど)で並び順を設定するなど、データを整理しておく必要があります。

気付かないことが多いので、前提知識として知っておきましょう。

注意点その２　共通化できるパーツは共通化しましょう

テンプレート言語の利点の一つに、保守性の向上があります。

お問い合わせフォームやヘッダー・フッターなどを共通化部品にするのは、
どのページでも使い回す可能性があるためです。

コードをコピペすれば使い回しができますが、それだとコードが長くなり、
可読性が下ってエラーを引き起こす原因にも繋がります。

それだけでなく、修正する場合はコピペしたコード全てを修正する必要があり、
保守の観点でかなり不利になります。

コーディング中に「これは各ページで使い回すことが多いな」と感じるものがあれば、
積極的にsectionsのフォルダにパーツを作っていきましょう。

注意点その３　商品のテスト購入は必ずテストモードにして行うこと

制作したECサイトを納品する際、必ず購入のテストを行います。
不正防止のため、売買した記録はShopifyに記録として残ってしまいます。

テストモードであればその記録を避けてテストができますので、
試しに購入する際はテストモードにすることを忘れないようにしましょう。

まとめ

今回は、shopifyのオリジナルテーマ制作のポイントを解説させて頂きました。

テンプレートの型を作り、そこにパーツを当てはめて構築する、といった考え方はWordPressでも同じです。
大きな違いは、ログイン機能、カート機能や決済ページを連携させて一括で管理できる点です。

一度仕組みを理解できれば、制作は難しくありません。
コーディング環境の構築については、次回詳しくご紹介します。ぜひ、チャレンジしてみてください！

SUIMeでは、Shopifyを使ったECサイトのオリジナルテーマの受注も承っております。
ぜひ、お気軽にご相談ください。

NAKAJIMA