Zenn
🐕

Shopify (OS2.0)テーマ開発環境を作ったときのメモ

2021/10/07に公開
Shopify
tech

勉強しながら書いてます。

前提

  • Shopify OS 2.0

  • コードはGitHubで管理

  • ブランチは

    • main ... ストアと同期するブランチ（ローカル）
    • origin/main ... ストアと同期するブランチ（リモート）
    • upstream/main ... 公式Dawnのmainブランチ

    また将来イベント等で一時的にデザインを変える場合は

    • event-hoge

    みたいなブランチを作って対応する予定。

Documents

パソコンの準備

  • Shopify CLI を入れておく。

macの場合

brew tap shopify/shopify
brew install shopify-cli

Windowsの場合は→ https://shopify.dev/themes/tools/cli/installation

GitHubにリポジトリを作る

README等の初期ファイルは作成しない。

開発用ディレクトリとの準備

# 公式のDawnをクローンする
git clone -b main --single-branch git@github.com:Shopify/dawn.git my-theme
cd my-theme
# originを自分のリポジトリに切り替える
git remote set-url origin git@github.com:<my-account>/<repository>.git
git push
# Dawnの更新を取り込めるようにしておく
git remote add upstream git@github.com:Shopify/dawn.git
git config checkout.defaultRemote origin
git fetch upstream

Lighthouse CIを一旦止める

.github/workflows/ci.yml の lhci をコメント化

name: CI
on: [push]
jobs:
  # lhci:
  #   name: Lighthouse
  #   runs-on: ubuntu-latest
  #   steps:
  #     - uses: actions/checkout@v2
  #     - name: Lighthouse
  #       uses: shopify/lighthouse-ci-action@1.0
  #       with:
  #         app_id: ${{ secrets.SHOP_APP_ID }}
  #         app_password: ${{ secrets.SHOP_APP_PASSWORD }}
  #         store: ${{ secrets.SHOP_STORE }}
  #         password: ${{ secrets.SHOP_PASSWORD }}
  #         lhci_github_token: ${{ secrets.LHCI_GITHUB_TOKEN }}
  theme-check:
    略

ストアとGitHubをつなぐ

  1. ストアの管理画面で
    Online Store > Themes > Theme library > Add theme > Connect from GitHub

  2. Add account

（初めての場合は表示にそってGitHubにShopifyをインストールする。）

  1. リポジトリとブランチmainを選んで Connect

GitHubから読み込まれたテーマがTheme library に表示される。

４. Online Store > Themes > Theme library > <repository>/main > Actions > Rename で分かりやすい名前に変える。

動作確認

shopify login --store hoge.myshopify.com
shopify theme serve

運用

  • Shopifyの管理画面でテーマを直接カスタマイズするとGitHub上のmainブランチに反映されるので、随時ローカルにpullする
  • ローカルで開発中のテーマのプレビューはshopify theme serve
    （参考：Shopify Online Store 2.0：開発者にとっての意義【2021年版】 - 開発テーマ）
  • 公式Dawnのアップデートを取り込むときは
git pull upstream main #もしくは特定のバージョンのタグを指定
  • Shopify CLIのアップデート
brew update
brew upgrade shopify-cli

Discussion