Shopを立ち上げるならShopify

色々な関わりがあり、最近Shopifyを使うことが増えてきました。
非エンジニアでもGUIからサイト構築ができる手軽さと、APIやLiquidコーディングと活用した作り込みとが両立できる、優れたSaaSになっています。
完全にイチから立ち上げるスタートアップにとっても、既存システムを持っている企業にとっても、非常に使い勝手のいいサービス。超便利。

僕は技術者観点からさまざまなプロジェクトに呼ばれることが増えてきました。
ただ、「これってGUIﾊﾟﾁﾊﾟﾁしたら実現できるのにな」と思うサイト修正があったり、あるいは「こんなに作り込んだら運用大変だぞ」と思う場面があったりで、このあたりをきちんと言語化しておきたいなと思い記事に起こしました。
何かの参考になればと思います！

Shopify・Base・Storesの比較はこちらのサイトが便利。

Shopifyテーマとは

Shopifyの強みの一つに、予め機能やデザインが実装されたテンプレート「Shopifyテーマ」があります。
実体はLiquid/HTML/CSSの集合体で、「テーマ全体のデザインはこういう感じ」という広い内容から、「こういう機能を持たせたこういうセクション」という小さい機能までが定義されています。
より具体的な構成はこちらのサイトが分かり良いです。

逆にいうと、ここで定義されていない機能はGUIから使えず、Liquidコーディングが必要になります。
さらに逆の逆を言うと、Liquidコーディングで追加してしまえば、オリジナルなセクションを追加することも可能なわけです。

GUIでできることが全て

以上のことから、サイト開発にせよ修正するにせよ、基本的にはまずGUIで実現可能か考えてみます。
左の「オンラインストア」＞「テーマ」から、右の「カスタマイズ」をクリック。

そうすると、こんな画面になります。今回は「ちくわぶの定期販売」のサイトを例にしています。

左側の「セクションを追加」を押すと、セクションの一覧がでてきますよね。
これが、このページにおいてこのテーマのできることの全て、になります。

なので、テーマインストール後は、とにかくセクションの理解をしていくのをオススメします。
テーマ選定時の注意点はこちらのサイトがオヌヌメ。

Liquidコーディングが必要な時

なので、「セクションで実現できないこと」を実現するためにLiquidコーディングすることになります。
そういうと、「じゃ、最初っから要件に沿って一からLiquidコーディングしてもらえばいいわ！」とか「オリジナルセクション量産してくれ！」と思うかもしれません。
個人的な狭い意見になりますが、個人的には最小限に抑えたほうが結果良いサイトができると思っています。

先述の通り、ShopifyテーマはLiquid/HTML/CSSの集合体で、テーマを開発する会社が書いたコードの集まり。
精密に設計され最適化されている状態でローンチされているわけです。
その実体は何千・何万行のコードで構成されています。カートのドロワーだけで400行ぐらいのCSSファイルでデザインされています。

ここに手を加えると、例えばトップページで文字を小さくするためにCSSを修正したときに、そのCSS修正の影響で他のページのデザインも変わってしまう可能性がゼロではありません。
Liquidをいじる際はこうしたリスクを常に考えながら修正する必要があり、結構神経を使う作業だったりするわけです。
機能実装にしても、Javascriptの読み込み順によって機能しなかったりするので、テーマの理解がかなり必要になります。

そういったリスクを最小限にするように設計され実装されているのがShopifyテーマ。
逆に一からコーディングするならばShopifyじゃなくていいし、いちいち開発工数がかかってしまいます。
もとのテーマの強みを生かし、そこからLiquid修正で少しオリジナリティを追加する、というのが良いのかも。

Custom Liquidは用法用量を守ろう

色々なテーマに「Custom Liquid」というセクションがあります。
GUIからLiquidコードを追加できるセクションです。
僕はこれを見たとき「怖ｽｷﾞｲｲｨ」と思いました。

「Custom Liquid」の強みはもちろん小回りの良さ。
Liquidを直接入れ込むので、スタイルを入れ込むことも可能、大体のことは実現可能です。
使いこなせれば超便利。

ただ、最悪の事態がこれ。

「何がなんのセクションなのか、何を参照してどういう構成なのか」が全く分かりません。
このセクションを作った人にしかわからない、あるいはLiquidを読めないと分からない状態、運用度外視のサイトになってしまいます。
こうなるとだいたい人が入れ替わったときに運用でコケます。

一時的な表示目的の時に使うなど、使い道を限定しましょう。
あるいは、よく使うのであればオリジナルでセクションを作りましょう。
セクションのつくり方はこちらのサイトがオススメ。

Sustainableなサイト運営を！

簡単さと作り込みのしやすさを兼ね備えたShopifyだからこそ、「何まで簡単か」「どこから作り込みか」を見極めることが必要になってきそうです。
是非、Sustainableなサイト運営ができるようなD2Cライフを！
どなたかの参考になれば、と思います