まずはじめに
Shopifyで独自のデザインを使いたかったけど、日本語のリソースが全然なくて辛かった。後に続く人の為に蓄積した知見を書き綴ります。（早くShopifyJapan作って！）
まずカスタマイズについてですが、文字サイズや色を変えたいとか、ヘッダの画像やロゴを独自のに変えたいレベルであれば、Shopify themes（https://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.ymlをconfig.ymlにリネームして、中のpassword theme_id storeを埋めます。
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