Shopify CLI

Category
Published
Updated

docs

注意点

  • 管理画面上のすべてのデータ・設定が反映されるわけではない
    • 以下はテストサイトには反映されない
      • テーマ / カスタマイズで設定したウィジェット

事前準備

Shopify CLIをインストール

brew tap shopify/shopify
brew install shopify-cli

テーマ構築

ストアにログイン

shopify login --store xxxxx.myshopify.com
  • 事前に Shopify 管理画面にログインする
  • xxxxx はショップドメイン
  • ログイン後にブラウザで Authenticated successfully. You may now close this page. と表示があればOK

テーマファイルを取得

  1. 事前に Shopify 管理画面から、既存テーマの複製 -> 新しいテーマ名 を命名しておく
  2. リモートリポジトリからローカルへコピー
cd テーマをコピーするディレクトリパス
shopify theme init 新しいテーマ名

テーマをプレビュー

cd テーマをコピーしたディレクトリパス
shopify theme serve

テーマファイルの取得／プレビューそれぞれカレントディレクトリが変わるので注意！

cd /Users/usr/Desktop/Shopify
shopify theme init テーマ名

cd /Users/usr/Desktop/Shopify/テーマ名
shopify theme serve

1分ほど待つとターミナルに下記が表示される

┏━━ Viewing theme… ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃ * Syncing theme #123456789012 on xxxxx.myshopify.com
┃                                                                   100%
┃ 
┃ Serving .
┃ 
┃ Please open this URL in your browser:
┃http://127.0.0.1:9292
┃ 
┃ Customize this theme in the Theme Editor, and use 'theme pull' to get the changes:
┃ https://xxxxx.myshopify.com/admin/themes/123456789012/editor
┃ 
┃ Share this theme preview:
┃ https://xxxxx.myshopify.com/?preview_theme_id=123456789012
┃ 
┃ (Use Ctrl-C to stop)
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (65.53s) ━━

  • http://127.0.0.1:9292 がローカルサイトの URL

    • サイト表示がリアルタイム更新される（ホットリロード）
    • 無料トライアル中などショップ close の状態では利用不可

  • Share this theme preview: の下段がプレビュー共有用の URL

    • ホットリロードされない

プレビューを終了

Ctrl+C

ログアウト

shopify logout

その他

サンプルデータ生成

// ダミー商品を作成（デフォルト：5点）
shopify populate products

// ダミー商品を作成（20点）
shopify populate products --count 20

// ＊このままではサイトに表示されない
// ＊「商品管理」から「利用可能なチャネルを追加」

エラーなど

css のキャッシュが消えない

  • {{ 'hoge.css' | asset_url | stylesheet_tag }} で生成される css には、バージョン情報のパラメーターが付く
  • これによって古いスタイルが消えないことがある
  • ブラウザのキャッシュをクリアしても変わらない

解決法

  1. shopify logout でログアウト → 再ログインで解決した
  2. プレビュー用 URL のパラメーター preview_theme_id が変わる点に注意

会員機能・決済など

  • ログインや決済はローカル接続 http://127.0.0.1:9292 ではできない模様
    • 本番 URL へリダイレクトされる