SLATE
shopify

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