Shopifyの無料テーマを少しだけカスタマイズしたい時の備忘録

カナダ発、世界No1のECカート「Shopify（ショッピファイ）」
あちこちのショップサイトを管理運営されているなら、大体CSS（スタイルシート）や簡単なHTMLを書くことができる方も多いと思います。

今回は「有料テーマを買うほどでもないけど、無料テーマ（テンプレート）を少しだけカスタマイズしたい」
そんな方に向けて、カスタマイズのポイントをご紹介していきます。

がっつり触ることになりそうなら、有料テーマの購入／カスタマイズ深掘りして勉強／必要な部分だけ依頼するなど、検討してくださいね。

テーマのカスタマイズを始めるには

Shopify管理画面から、テーマを選択します。
基本的なカスタマイズは「カスタマイズ」、カスタマイズでは触れない部分を「コードを編集する」になります。

CSS（style.css）で編集がしたい場合

コードの編集を開くと、選択しているテーマのファイル一覧が表示されています。
そこの「Assets」フォルダにある「新しいassetを追加する」を選択します。

空のファイルを作成するを選び、好きな名前（ここではstyle）を入力して、拡張子に「.css」を選択します。

次に「Layout」フォルダの中にある「theme.liquid」の中に

  {{ 'style.css' | asset_url | stylesheet_tag }}

と、入れてあげることで（できれば他のCSSと一緒においてあげてください）先ほど作ったstyle.cssが反映されます。

商品詳細ページをカスタマイズする場合

「Templates」→「product.liquid」：商品掲載エリアの前後

「Sections」→「product-template.liquid」：商品掲載エリア

商品詳細ページの下にちょっと配置するなら、product.liquidの方が見やすく管理しやすいものの、もう少し深掘りして触るのであればproduct-template.liquidがいいかなと思います。

ヘッダー、フッター、コレクションなど、その他のページをカスタマイズするには

ここまで来ると、大体の構造がおぼろげにわかってくると思いますが

という構成になっているため、触る目的が決まっているのであれば、すぐに該当するファイルが見つかると思います。
（Wordpressのテーマ編集をしていた方なら、少しすれば近い雰囲気なので、触りやすいかと）

慣れればカスタマイズしやすいShopify

最初は見慣れない管理画面に、右往左往してしまうと思いますが、思うように管理運営をしていくためには、ある程度のカスタマイズが必要になってきます。
せっかくなら高性能なShopifyを生かしていけるように、ぜひチャレンジしてみてください。

無料テーマの「カスタマイズ」の方を使った編集は「Shopifyヘルプセンター」に掲載されているので（まだ日本語化されていないですが）合わせてカスタマイズしてみてください。