前提条件
- VS Code をインストールしてある
- GitHub アカウントを持っている
- Git 操作ができる
この記事ではMacのみの開発方法を紹介しています。
Shopify CLI をインストール
Shopify CLI をインストールします。公式に書いてあるとおりインストールしますが、私はインストール系のものは Homebrew で一元管理しているので、今回は Homebrew でのインストール方法をご紹介します。
Homebrewでインストール。
brew tap shopify/shopify
brew install shopify-clihttps://shopify.dev/apps/tools/cli/installation
バージョン確認。
shopify version
# 2.15.2Sshopify は Ruby で動いています。
ruby -v
# 2.15.2ベースとなる Theme Dawn を落として git リポジトリと連携しておく
Dawn は Shopify の基本の Theme です。
今回はこの Dawn をもとにThemeを作成していきます。
shopify theme init new-shopテーマのインストールされたディレクトリに移動します。
new-shopGitHub でリポジトリを作って、リモートリポジトリと連携しておきます。
echo "# new-shop" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/アカウント/new-shop.git
git push -u origin main対象のストアにログインします。
shopify login --store xxxxx.myshopify.com
shopify theme pullで設定した先程セットしたテーマ名を選びます。
shopify theme pull開発環境を起動。
shopify theme serve
開発環境でサイトが確認できるようになりました。
サイトは開発モードなのでURLを踏んだ直後、パスワードを促される可能性があります。
パスワードはオンラインストア、各種設定、パスワード保護から確認できます。
Shopfy の基本のディレクトリ構造
| ディレクトリ | 内容 |
|---|---|
| assets | CSSやJAS画像など |
| config | テーマ全体や管理画面で設定を保存するjsonデータを格納 |
| layout | レイアウトに関するhtmlなど |
| locales | 言語に関する設定 |
| sections | 各ページの大きめの共通パーツ |
| snippets | 各ページの小さめの共通パーツ |
| templates | 各ページのテンプレート |
shopify theme serve が動かないとかあったみたいですが問題なく動きました。
私の記事はだいたい公開備忘録です。案件で過去やったことを守秘義務内でまとめてます。
かみーゆ/フロントエンドエンジニア
資金ゼロからフィリピンで起業した海外ノマドエンジニア。IT業界10年以上でテクニカルディレクター（技術責任者）・エンジニア講師・ブリッジSEを経てLenzTechnologies Inc.を設立し、代表を務める。CMS concreteCMSエバンジェリスト。テックブログ以外も「磨耗しない人生」や「海外ノマド」のライフスタイルについて発信。好きなものは肉とハイボール。
