Edited at

Shopifyのテーマを作ってみた #01

More than 1 year has passed since last update.


まずはじめに

Shopifyで独自のデザインを使いたかったけど、日本語のリソースが全然なくて辛かった。後に続く人の為に蓄積した知見を書き綴ります。(早くShopifyJapan作って!)

まずカスタマイズについてですが、文字サイズや色を変えたいとか、ヘッダの画像やロゴを独自のに変えたいレベルであれば、Shopify themeshttps://themes.shopify.com/ )に行って好きなテーマを選んで、管理画面から設定を行うで良いと思います。

そうではなくて、この記事ではショップのデザインを起こしてコーディングして、それをShopifyに乗せる的なカスタマイズの方法をまとめる予定です。


Slateについて

SlateはShopifyのテーマ開発に使えるコマンドラインツールとフロントエンドのベースになる開発環境です。(Nodeのv4以上が必要)

いままではTimber Frameworkというのが使われてきたのですが、作りがレガシーなので最近の開発環境に慣れている人には使いづらい気がします。


Slate

GitHub: https://github.com/Shopify/slate

Document: https://shopify.github.io/slate/

基本は上記のドキュメントの通り進めると出来ます。

流れとしては、Slateをインストールしてローカルにテーマを開発できる環境を作り、liquid(Shopifyのテンプレートファイル)やsassやjsなどを書いていくとオリジナルなテーマが作れるみたいな感じです。


Slateのインストールと設定

グローバルにslateをインストール。

$ npm install -g @shopify/slate

新しいテーマを作成。theme-nameのところには付けたい名前をどうぞ。

$ slate theme theme-name

しばらく待つと色々とダウンロードされます。続いて、

config-sample.ymlconfig.ymlにリネームして、中のpassword theme_id storeを埋めます。


config.yml

development:

password:
theme_id: "live"
store: your-shop.myshopify.com
ignore_files:



  • password: Shopify内で作成したPrivate Appのパスワード。ここ(https://shopify.com/admin/apps/private )から作れます。


  • theme_id: 上書きしたテーマのID。ここ(https://shopify.com/admin/themes )にいってテーマのカスタマイズを選ぶとURLに9桁ぐらいの数字のIDが付くのでそれを入れます。"live"だと現在公開されているものが置き換わるっぽい。


  • store: 作成したShopifyのURL


開発・公開

設定ファイルの入力が完了したら、あとはliquidとかsass,jsとかをいじいじすれば良いです。

$ slate watch

とすると、sassなどが勝手にコンパイルされてローカルホストで確認が出来るので便利です。

基本的にはwatchしながら開発して、出来た段階で

$ slate deploy

をする感じかなと。

それでは良いshopifyライフを!


おまけ: Slateのコマンド一覧

Global

slate theme [name] - Generate a new blank theme

slate migrate - Convert an existing theme to work with Slate
slate -h - Options available in your current directory (differs if not in a theme)
slate -v - See your currently installed version of Slate and dependencies

Theme

slate build — Concatenates JS and SCSS, optimizes SVG icons to be used as snippets, and copies over all other files and folders to a dist folder

slate deploy — Builds your dist folder and replaces the theme set in config.yml
slate watch — Listens for changes to your local source files and deploys them to your shop
slate start — Runs build, deploy, then watch to get you developing on your shop quickly
slate zip — Builds and compresses your dist to a zip file for easy manual upload