Shopify のテーマ Dawn を使って新しいテーマを作る

投稿日:2021年4月4日

更新日:2021年7月10日

テーマ「Dawn」を編集するまえに。

WordPress のように「親テーマ」と「子テーマ」という依存関係ははありません。
Shopify テーマをカスタマイズするにはテーマ自体に直接行います。
ここで注意したいのは、もしそのベースとしたテーマが更新アップグレードされた場合、テーマに編集を加えていると自動でテーマの更新はされないということです。
手動で差分を確認し、手動でテーマを更新する必要があります。
まぁ、勝手に更新・上書きされると困るので当たり前なんですが…

なので、テーマの直接編集は極力少なくカスタマイズするべきかなと。
Shopify は、カスタマイズ画面から多くの情報を更新できますし、オリジナルのセクションもテーマを編集することなくできるようになったので、直接テーマを編集することもあまりないのかな…と楽観的に思っています。

ShopifyCLI

ShopifyCLI とは?

テーマの作成・編集・更新にかかせないコマンドラインツールになります。
ローカルで開発しながら、テーマへの変更をプレビューできる!これは嬉しい~
このツールを使うことで、Git 経由で Shopify に自動的にアップロード!
macOS、およびWindowsで使えます。
あとやっぱり自分の使い慣れたエディターを使って更新できるところもいいところですねー

やり方は公式サイトに記載があります。
Create a theme

では、この通りにやってみましょう!!

ステップ1:ShopifyCLI をインストールする

公式サイトに記載のある通り。ターミナルからダウンロードします。
私は今回はMacなので、公式サイトどおり Homebrew を使用してテーマキットをインストールします。
コマンドふたつ…楽ですね。

brew tap shopify/shopify
brew install shopify-cli

ステップ2:Dawn を使用して新しいテーマを初期化する

テーマ Dawn の複製を作成する作業ディレクトリに移動します。

shopify theme init

↑この後、テーマ名を入れるように言われるので、入れます。
ココで付けたテーマの名前と同じディレクトリにテーマが複製されます。

テーマ複製が確認できたら、テーマのディレクトリに移動します。

ステップ3:ShopifyCLI で認証する

ShopifyCLI を作業するストアに接続するために認証します。
[your-store.myshopify.com] にはご自身のショップ URL を入れてください。

shopify login --store your-store.myshopify.com

↑すると「Sharing this anonymous data helps Shopify improve this tool」
翻訳によると「この匿名データを共有すると、Shopifyはこのツールを改善するのに役立ちます」と聞かれるので~

YES を選んで待つと…ブラウザが立ち上がりログインを求められます。ビックリしたけどね…
そのままログインをすると「Authenticated successfully. You may now close this page.」

認証は成功したので、閉じていいよ。とのことなので、閉じます。

これで認証おっけー!

ステップ4:テーマをプレビューします

このプレビューは GoogleChrome でのみ利用できるようです。。思いきっとるな

次のコマンドを実行します

shopify theme serve

URL が記載されるので、 GoogleChrome で確認します!!

Shopify GitHub を連携して、ブランチをストアに接続します

Git に新しいレポジトリを作り、テーマコードをプッシュしておく。
私は GitHub のサイトで新しいレポジトリを作ってから、黒い画面からローカルのデータをエイヤーって push 。

GitHub 上でテーマのデータがセットされたのを確認して、Shopify の管理画面 [オンラインストア] > [テーマ]を開きます。

画面「テーマライブラリー」の下「テーマを追加」から「GitHub から接続」を選択します。

Shopifyストアのオンラインストアの画面、テーマライブラリー

画面横から「テーマを接続する」がスライド表示されるので、「GitHub にログインする」をクリック!

Shopifyストアのオンラインストアの画面、テーマを接続する

これ、最初は「アカウントを読み込めませんでした」とか表示されるけど、何回かやってる間につながったりしますw。
つながると、どのレポジトリに接続するか、どのブランチに接続するかを選択します。

テーマが接続されると Shopify の管理画面上でリポジトリ、ブランチ名、最後のコミットの時刻が表示されます。

ログを表示をクリックすると、失敗したとか成功したよとかが見れます。
なんで?反映されないの?ってな時に見ると、まー失敗してるね。私がなにか書き損じてて…

GitHub ブランチに接続されているテーマを公開しても、ブランチとテーマの間の接続は維持されます。
ローカルで確認した変更を GitHub ブランチにプッシュすると、公開されたテーマにすぐに反映されます。

現在のテーマにすると、こんな感じで表示されます。

Shopifyストアのオンラインストアの画面、現在のテーマ

ここまで来たらガンガン編集していきましょー!

Sass が本格的に使えなくなってる気がする…

テーマディレクトリの /assets/ の中にはカスタマイズするために入れたい画像やCSS、JSなどを入れることができます。

が!サブディレクトリはアップされませんでした。。。
/assets/scss/ として sass ファイルを設定していたのですが、「サブディレクトリは無理」みたいなエラーがでて反映されず。
ならば、直下に…と思いやったのですが、これは CLI のエラーだっけかなー「scss ファイル無理」みたいな表示が出たんですよね。。。

チャンと記録残せてなくてスイマセンなんですが、なので css を素直にポチポチ書いてます。

まだ分からない事も多いですが、分かったことはなるべく残していきます。次はセクションの記事、書き直します。。。

目次ページに戻る