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が反映されます。

※レスポンシブの記載が必要な場合は、開発者ツールなどでメディアクエリをチェックする、theme.liquidの中の記載をチェックしてみてください。
無料テーマ「Minimal」の場合、max-width: 768px/min-width:769pxでした。

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

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


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

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

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

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

Layoutほとんどのページに使用される「theme.liquid」がある
Templates各ページのテンプレート
Sections共通パーツ、各ページの詳細ファイル
SnippetsSectionsよりもっと細かいファイル(検索など)
Assetscssやjsなどのファイル
Configサイトの設定(json)ファイル
Locales言語ファイル(json)

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

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

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

無料テーマの「カスタマイズ」の方を使った編集は「Shopifyヘルプセンター」に掲載されているので(まだ日本語化されていないですが)合わせてカスタマイズしてみてください。
この記事を書いている人
Picture of WEBデザイナー 小谷 優歌
WEBデザイナー 小谷 優歌
WEBデザイナーとして20年、中小企業を中心に年間80件近くのサイト制作・改善を行う。サイト制作にとどまらず、商工会でのセミナー講師や、中小企業へIT顧問・専門家として技術アドバイスを提供。 デザイン制作だけでなく「WEBやITを使って問題を解決したい」「結果を重視して取り組みたい方」へのウェブ活用のサポートを専門としている。