More than 3 years have passed since last update.

かなり丁寧なShopifyテーマ開発手順

Last updated at 2020-10-05Posted at 2020-10-04

最近プライベートでshopifyのテーマ開発を行いました。
今までECプラットフォームに縁が無かったのですが、触れてみるととても分かりやすく、これはこれから伸びてきそうなサービスだなと感じ、忘備録も兼ねて記録しておきたいと思います。
この記事で本番デプロイまで可能になるはず。

1.ShopifyThemeKitインストール
 2.開発環境のテーマをローカルにダウンロード
 3.アクセスに必要なAPIキー（パスワード）を発行
 4.テーマIDを確認する
 5.テーマをダウンロード
 6.リアルタイムで編集する
 7.運営中のshopifyテーマを開発ストアに反映する
 8.開発ストアのテーマを本番ストアに反映させる

shopifyとは

カナダ発のECプラットフォーム。世界ではAmazonの次に使われているらしい？です。
フロントエンドの顧客体験と、バックエンドのインフラ技術が分離されたヘッドレスコマース。
Liquidと言うテンプレートエンジンを使用しています。
https://www.shopify.jp/

まず、パートナーシップに登録する

開発環境を作るにはshopifyのパートナーシップに登録します。無料です。
開発用のECサイト管理画面ですが、無料でテーマ開発が可能です。
開発用の「ストア」を新規作成してください。
https://www.shopify.jp/partners

その他にも機能はたくさんあるのですが、記事はこの辺りが詳しいです。
https://qiita.com/yonyatoza/items/75b425baf1d5cba97827

ローカル開発環境を用意する

少し長いですが、散らばっている情報まとめました。

##1. ShopifyThemeKitインストール
Homebrewを利用します。macです。
Homebrewのインストール

brew tap shopify/shopify
brew install themekit
```
```
theme --help
```

でコマンド一覧が表示されれば問題ないです。
アップグレードしてねと言われたら以下でアップデート可能です。

```
theme update --version=v1.●.●
```

## 2. 開発環境のテーマをローカルにダウンロード
開発用ストアの管理画面です。
![shopify-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310213/2433c2ca-a6c9-fec8-e6ef-f1a3c06f7f26.png)
最初は**現在のテーマ**が「Debut」というテーマになっています。
これをローカル環境にダウンロードしてカスタマイズします。
現在のテーマを複製したものも編集可能です。
その場合は**テーマライブラリー**に表示されます。

## 3. アクセスに必要なAPIキー（パスワード）を発行
開発管理画面から発行できます。

- 1. 管理画面の「アプリ管理」→「プライベートアプリを管理」→「プライベートアプリを作成する」を選択。
- 2. プライベートアプリ名「〇〇」（任意）、緊急連絡用開発者メール「〇〇」を入力。
- 3. 「ADMIN API権限」項目の「テーマ」を「読み取りおよび書き込み」に変更し保存。
- 4. 「Admin API」の「パスワード」を使いますのでコピーしてください。

![shopify-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310213/1972a943-dd02-953a-37af-96d1a5a46180.png)

## 4. テーマIDを確認する

```
theme get --list -p=●●●●●●●● -s=○○○○○○○.myshopify.com
```
●●●●●●●●に上記で発行したAPIのパスワード、○○○○○○○にストアURLの前半を入力してください。
上記、どのサイトにも
>$theme get --list -p=[your-api-password] -s=[your-store.com]

と書かれているのですが、`[]` 必要ないです。これにハマった。。
問題なければ以下が返ってきます。
`[live]` が**現在のテーマ**、それ以外が**テーマライブラリー**のテーマです。

```
Available theme versions:
  [012345678912] 管理画面に表示されているテーマライブラリーの名前
  [012345678913][live] 管理画面に表示されている現在のテーマの名前
```

## 5. テーマをダウンロード
テーマ用のディレクトリを用意。

```
mkdir "任意の名前"
cd "任意の名前"
```

テーマをダウンロード。

```
theme get -p=●●●●●●●● -s=○○○○○○○.myshopify.com -t=▲▲▲▲▲▲▲▲
```
**4**とほとんど同じですが、`--list`が不要で、 ▲▲▲▲▲▲▲▲にダウンロードしたいテーマID（例：012345678913）を入力します。


## 6. リアルタイムで編集する
### ブラウザでプレビューを確認
ブラウザで開発サイトが立ち上がります。

```
theme open
```
### 修正ファイルを反映
**現在のテーマ**を反映させるには```--allow-live```が必要です。

```
theme watch --allow-live
```

### デプロイだけしたい場合
watchはdeployを随時反映してくれています。

```
theme deploy ファイル名とか
```

## 7. 運営中のshopifyテーマを開発ストアに反映する
今運営しているショップのテーマを開発環境に持ってきたい場合もあるかと思います。
### 本番テーマをエクスポートする
![shopify-5-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310213/c6acda05-9c89-21d1-1f5a-00738df70c95.png)


#### 開発ストアにテーマをアップロードする
アップロードするとテーマライブラリーに表示されます。
あとは今まで同様開発可能です。
![shopify-6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310213/688592fd-fd5d-2fd9-5cf5-2ffaf07bc3de.png)

### 本番から持ってこれるデータ持ってこれないデータ
以下のサイトがとても分かりやすいです。
[Shopifyテスト環境の構築方法。複製テーマおよび開発用ストアへのインポート手順まで]("https://www.non-standardworld.co.jp/23325/")

#### ストアの各商品
`Shopify管理画面＞商品管理＞「エクスポート」`でデータを取得し、開発環境にインポート

#### 固定ページ、ブログ記事、テーマ設定
固定ページ、ブログ記事、テーマ設定（config/settings_data.json）の移行には、**無料アプリ（wordpressでいうプラグインのようなもの）**が必要らしいです。
まだ試してないです。

#### 手動登録が必要なもの
**「ナビゲーションメニュー」**や**「テーマエディタを介してアップロードされた画像」**、および、**「ストア全体の設定」**。
ナビゲーションは商品の**コレクション（wordpressでいうカテゴリーのようなもの）**に登録されているものを登録する必要があります。
![shopify-7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310213/4d4340d2-e4d6-a5d9-6769-2fe8bd14d382.png)

## 8. 開発ストアのテーマを本番ストアに反映させる
反映先を変更することで同じテーマをデプロイ可能です。
### config.ymlに設定する
テーマをダウンロードしたディレクトリにあるconfig.ymlを設定します。

```
# 開発環境
development:
  password: APIパスワード
  theme_id: "テーマID"
  store: ○○○○○○○.myshopify.com

# ステージング環境
staging:
  password: APIパスワード
  theme_id: "テーマID"
  store: ○○○○○○○.myshopify.com

# 本番環境
production:
  password: APIパスワード
  theme_id: "テーマID"
  store: ○○○○○○○.myshopify.com
  ignore_files:
    - config/settings_data.json
```

### コマンド
**現在のテーマ**は`--allow-live`が必要です。
例えば3つの環境に反映する場合。

```
theme deploy --env=development　--allow-live // 開発環境ストアテーマ
theme deploy --env=staging // 本番ストアの複製ライブラリテーマ
theme deploy --env=production --allow-live // 本番ストアの現在のテーマ
```

# 注意事項！！
上記の通り、かなり簡単に本番反映できてしまうので注意が必要なこともあります。
### 管理画面からのテーマ修正はマージされない
テーマダウンロード以降に管理画面からソース編集をしてしまうと、デプロイした時点で上書いてしまうので、反映前にテーマをダウンロードしておいた方良いです。
### git管理を必ずすること
これはまぁしないと自分がしんどいですね。

# Liquid言語とは（おまけ）
phpのような、jsフレームワークのような。。？もう少し勉強が必要です。

```liquid:snippetsフォルダ内のパーツ呼び出し
{% include 'parts-name' %}
```
```liquid:sectionsフォルダ内のパーツ呼び出し
{% section 'parts-name' %}
```
```liquid:メニューの呼び出し(sections/footer.liquid)
<nav role="navigation">
  {% include 'footer-nav', linklist: section.settings.main_linklist, wrapper_class: 'site-nav--centered' %}
</nav>
```
```liquid:メニューの呼び出し(snippets/footer-nav.liquid)
    <ul class="-link-list -flex" id="FooterSiteNav">
      {% for link in linklists.main-menu.links %}
        <li {% if link.active %} class="site-nav--active"{% endif %}>
          <a href="{{ link.url }}"
            class="site-nav__link site-nav__link--main{% if link.active %} site-nav__link--active{% endif %}"
            {% if link.current %} aria-current="page"{% endif %}
          >
            <span class="site-nav__label">{{ link.title | escape }}</span>
          </a>
        </li>
      {% endfor %}
    </ul>
```

以上、調べていても情報がバラバラだったのでまとめてみました。
テーマフォルダの構造などもまたタイミングが合えば記載したいと思います。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

かなり丁寧なShopifyテーマ開発手順

目次

shopifyとは

まず、パートナーシップに登録する

ローカル開発環境を用意する