最近「shopify」というサービスでECサイトを作る機会があったので、その時に調べたことや使ったテクニックを備忘録として記事にします。
何回かに分けて書いていきますので、気長に付き合ってください〜。
今回はやろうとしてできなかったこと、テーマファイルの構造などを書いていきたいと思います。
その他shopify関連記事はこちら
shopifyの簡単な説明
カナダ発のECサービスで、世界175カ国で利用されている世界最大のECサービスです。詳しい説明は公式サイトをご確認ください
shopifyで制作されている国内サイト例
国内ECサービスと違って自由なデザインで制作されているように感じます。
テーマファイルの構造
shopifyを宣伝したいわけでないので、shopifyの説明はこれぐらいにしときます。笑
ここからは技術的な備忘録です。
「shopify」はFTPを使って、サーバーにファイルをアップしたり、ダウンロードしたりはできません。
ですが、管理画面からテーマファイルをダウンロードしたり、アップロードしたりすることはできます。
テーマファイルのディレクトリ構造は以下のようになっています。
- theme
- ├assets
- ├config
- ├layout
- ├locales
- ├sections
- ├snippets
- └templates
今回、ECサイトを制作するときに修正などをしたのは「assets」「layout」「sections」「snippets」「templates」のファルダ内のファイルです。これらが主にフロントの表示に関係するファイルが入っていました。
「shopify」のテーマファイルはほとんど「.liquid」という拡張子のファイルで、「Liquid」というテンプレート言語が使われていました。
Liquidについてはこちら
この「Liquid」についてのリファレンス的な記事も今後、書いていこうとも思っています。
ファイルの読み込みイメージ
制作してみた感じたshopifyのフロントへの表示時のファイルの読み込みのイメージは次のような感じです。
layout/theme.liquid
↓
templates/該当するliquidファイル
↓(あれば・・)
sections/該当するliquidファイル
ちょっと分かりづらくてすみません。。。
shopifyは、おそらくどのページでも「layout/theme.liquid」が表示されるようになっていて、ページの属性（TOPページや、商品一覧ページ、商品詳細ページ）によって、「templates/〇〇.liquid」が読み込まれ、場合によっては「sections/△△.liquid」を更に読み込むようになっているように感じました。
templates以下には、「404.liquid」や「index.liquid」、「page.liquid」があるので、wordpressを使ったことがある人はなんとなく想像がつきやすいと思います。
shopifyで制作できるページ
最初、shopifyを使う前はどんなページでも結構自由に作れるようなイメージでしたが、そんなわけないですね。笑
制作できるページの基本は以下のようなものです。ダウンロードしたテーマファイルの「templates」ディレクトリを参考に書きました。
- TOPページ
- カテゴリ一覧ページ（コレクションリスト）
- 商品一覧ページ（コレクション）
- 商品詳細ページ
- ブログ一覧ページ
- ブログページ
- カートページ
- 404ページ
- 検索結果ページ
- その他ページ（フリーページ）
- 会員ページ
- 会員有効化ページ
- 住所一覧ページ
- 会員ログインページ
- 注文履歴ページ
- 会員登録ページ
- パスワードリセットページ
- ギフトカードページ（shoifyプラン以上）
- チェックアウトページ（shopify plus以上）
テーマディレクトリの簡単な解説
ここではそれぞれのディレクトリにどんな関連のファイルが入ってるかを解説をしたいと思います。
あくまで使ってみての感想に近いものなので、間違っているかもしれませんが、ご容赦ください。
「assets」ディレクトリ
普段からコーディングされている方はご存知かと思いますが、cssやjsが入ってるディレクトリです。
〇〇.scss.liquidがありますが、これは表示時にはコンパイルされます。
ここで気をつけたいのが、〇〇.scss.liquidの中に日本語でコメントを書くとコンパイルエラーが起こり、スタイルが適用されません。
最初はなんで、コンパイルエラーが起こっているのか理解できず、非常に困りました。。。。
「config」ディレクトリ
サイトの設定のためのjsonが入っているディレクトリです。
「locales」ディレクトリ
英語やフランス語などの様々な言語のjsonが入っているディレクトリです。
「layout」ディレクトリ
ほとんどのページで使用される「theme.liquid」が入っています。
htmlの大枠はここに書くというイメージでしょうか。
「templates」ディレクトリ
ページ属性によって読み込まれるliquidファイルが入っているディレクトリです。
「product.liquid」は商品詳細ページ、「article.liquid」はその他ページのテンプレートといった感じで分かれています。
「product.shirt.liquid」といった感じファイルを制作すればそれぞれのページのテンプレートを増やすこともできます。
「sections」ディレクトリ
各ページ共通のパーツのliquidファイルが入っているディレクトリです。
例えば各ページ共通のヘッダーが「header.liquid」として保存されてありました。liquidファイルに{% section 'header' %}と書けば、「sections」ディレクトリ内の「header.liquid」が読み込まれるようになっていました。
phpのインクルードみたいな書き方ですね。
「snippets」ディレクトリ
{% include '〇〇' %}と書いたときに読み込まれる〇〇.liquidがあるディレクトリです。
例えばデフォルトであったのは「icon-close.liquid」があり、そのliquidファイルにはsvgの記述がありました。
上記の「sections」よりはもっと細かいアイテム単位での共通ファイルのような感じでした。
これもphpのインクルードに似たものですね。
使用したアプリ
shopifyでは多くのアプリが用意されています。wordpressでいうとこのプラグインですね。有料のものが多いかなってイメージですが、使えるものがたくさんあるので積極的に使っていきたいです。
今回使ったアプリを下記にまとめました。
- langify
サイトの多言語化のためのアプリ。タイトルや、記事コンテンツ、seoのディスクリプションごとに翻訳することができます。 - Ship&co
配送料を地域ごとに設定できるアプリ。もちろん日本だけではなく、国外配送も個別に配送料の設定ができます。 - MetaFields Editor
metafieldsを編集できるアプリ。wordpressでいうところのカスタムフィールドを設定できるアプリです。 - MailChimp for Shopify
DM作成ができるアプリ。メーリングリストの管理もできるので、便利です。
やろうとしてできなかったこと
- 管理画面のカスタマイズ
管理画面にカスタムフィールドを追加はできませんでした。代わりに「MetaFields Editor」を使ってデフォルトにはない、商品情報を持たせました。 - 決済画面のカスタマイズ
決済画面のカスタマイズは「shopify plus」以上しかできず、今回の「Advanced Shopify」プランではカスタマイズできませんでした。
「shopify plus」は大企業や取引量の多いストア向けで、料金は公開されていないようです。
まだまだ備忘録として、shopifyについて書いていきたいと思うので、次回をお待ちくださいませ〜。
その他shopify関連記事はこちら