Shopifyテスト環境はどう作る? わかりやすく解説!

こんにちは。中川瞬(@shun01224)です。

中川
Shopify上で作成したサイトのテスト環境ついて知りたい
という方のために、用意するものや手順について解説をします。

この記事を読むことで、

  1. テスト環境の構築方法がわかる
  2. テストに向けての手順が理解できる
  3. 運営に向けて足りない部分を分析できる

この記事を書かせて頂いている私は、現在、

輸出・輸入・国内の転売のノウハウをお伝えしています。

時間がない会社員の方や子育てをしている主婦の方に、指導や転売システムの提供をして、

忙しくても副業で収入を得てもらっています。

それではShopifyテスト環境の作り方について解説していきます。

 

Shopifyテスト環境の構築の選び方

Shopifyはワードプレスと違い、

ローカルサーバーを持たないためテストを行わなければいけません。

テストを行う上で重要となるのが

• Shopify Theme Kitをインストールしている
• Shopifyの管理画面にアクセス可能
• Shopify Partnersのアカウントを所持している

以上の3点を前提として話を進めていきます。

テスト環境を行う方法は3つあり

• 本番ストアのテーマをコピーし、テスト環境の準備
• 本番ストアのデータを新規ストアにインポート
• コピーとインポートのあわせ技

の流れで説明します。

本番ストアのテーマをコピーし、テスト環境の準備

Shopifyで使用しているテーマをコピーし、テスト環境の準備をします。

さきほどお話した「Theme Kit」と連動することで、複製テーマの変更ができます。

変更内容をプレビューで確認し、異常がなければ本番テーマに反映することが可能です。

テーマは、管理画面の右上にあるカスタマイズボタンをクリックすると、

「複製する」が表示されるので、そのボタンをクリックします。

テーマのレイアウトの変更だけであれば、

この方法だけでテスト環境の準備がスムーズに済みます。

ただし、データ変更が伴う場合は事前確認が難しく、

アプリを導入する場合は別環境での事前検証ができないので注意しましょう。

本番ストアのデータを新規ストアにインポート

開発用のShopifyストアを新しく作成し、

本番ストアのデータを新規作成したストアにインポートをすることで

テスト環境を整えるやり方があります。

アプリを含む複雑な調整や、本番ストアとは別に分けて行いたいと考えている方や

本番ストアとURLが異なるため、他の関係者とも表示共有ができるので複数人で

確認したい方にはこの方法がおすすめです。

ただし、構築に手間がかかるのと調整した内容の完全なコピーや同期が難しい部分があるため、

どこまでコピーするかの判断が難しいので、注意しましょう。

コピーとインポートのあわせ技

上記で説明した「本番ストアのテーマをコピー」と

「本番ストアのデータを新規ストアにインポート」の2つを掛け合わせることで、

それぞれできることやできないことを補い合ってテスト環境を構築する方法も可能です。

具体的なやり方として、開発と確認は開発用ストアで行い、

本番ストアはコピーテーマに反映し、問題がなければ本番テーマに再度反映する方法です。

言葉では簡単に記載していますが、コピーとインポートのやり方をそれぞれ理解し、

お互いのメリットとデメリットを理解していないとできない方法でもあります。

Shopify Theme Kitを活用すれば、異なるストア間でも簡単に反映することが可能です。

コピーとインポートをそれぞれ扱えるようになったときにあわせ技を

試してみてはいかがでしょうか。

開発用ストアに本番ストアのデータをインポートする方法

開発用ストアは、Shopify Partnersのアカウントを所持していればいくつでも作成でき、

プライベートアプリも最大10個作成することもできます。

ここでは、開発用ストアを作成後本番ストアをインポートする方法を以下の2つを紹介します。

• Shopifyの標準機能を使用
• ShopifyアプリのExlmを使用

それぞれのやり方を行うことで、一連のインポートが完了しますが、

注意事項についても触れて説明していきましょう。

また、Shopifyストア間でインポートできないときの対処方法、

その後に行う再インストールの方法についても触れていきます。

Shopifyの標準機能を用いたインポート方法

Shopifyの標準機能でインポート・エクスポート機能があり、

ストアの各商品のコピーが可能です。

Shopify管理画面上のエクスポート設定を行うにあたり

1. Shopify管理画面
2. 商品管理
3. エクスポート

以上の流れでCSV出力の設定が完了します。

エクスポートされたCSVを、開発用ストアにインポートをすることで、

商品の移行が完了します。

このときに注意するのは、商品のCSVは15MBを超えるとインポートが失敗に終わるので、

インポートする商品の容量が15MBを超えていないことを必ず確認しましょう。

その他にも注文一覧や顧客一覧も上記のやり方で移行ができるので、

Shopifyの標準機能を使ってインポートを試してみてください。

アプリExlmを使用したインポート方法

ShopifyアプリExlmを使用したインポートでは固定ページ、ブログ記事、

テーマ設定の3つの移行が可能です。

インポート方法は、Theme Settingsから現在公開しているテーマ名を選択し、

エクスポートを行います。

エクスポートボタンのすぐ下にインポートボタンがあります。

そこに新しいテーマ名を選択し、先程エクスポートしたデータ(zip)を追加することで

インポート終了です。

Shopifyにはインポートとエクスポートに対応したアプリがありますが、

ShopifyアプリExlmは上記のようにワンクリックでエクスポートや

インポートが簡単にできます。

固定ページ、ブログ記事、テーマ設定の3つの移行を行う際は、

ShopifyアプリExlmを使用しましょう。

Shopifyストア間でインポートができないときの対処方法

Shopifyストア間でインポートできない項目があります。

• ナビゲーションメニュー
• テーマエディタを介してアップロードした画像
• ストア全体の設定

が主に移行ができません。

そのときの対処方法として、手動でコピーを行い上記の項目のインポートを行います。

Shopifyストアでも、ShopifyのAPIの制限により、アプリでのインポートができないため、

手動でのアップロードを推奨しています。

テーマの反映、およびアプリの再インストール

必要な項目の移行が完了したら、本番ストアで使用しているテーマのアップロードを行います。

アップロード完了後はライブテーマに切り替えを行ってください。

切り替え後、テーマの反映ができているかを確認します。

Theme Kitを利用できる場合、本番ストアと同じようにプライベートアプリと

APIキーを再度作成を行います。

作成後、開発ストアの情報とconfig.ymlに紐付けができれば、

テーマ上で開発を進めることが可能です。

ただし、テーマレイアウトに関するアプリを使用している方は、

開発用ストアへ再インストールを行う必要があります。

Shopifyテスト環境の作成方法を理解して実際にやってみましょう

初心者の方には、テストを行う過程を見て、

慣れないことだらけで困惑すると思います。

コピーテーマで行うのか、開発用テーマで行うのか、

はたまた併用して行うのかでストアにより異なることでしょう。

ストアにあわせて行うテストも異なるため、最初は試行錯誤の連続だと思います。

しかし、このテストを行わければ、訪れるお客様も困惑するかもしれません。

そうならないためにも、しっかりとテストを行い、

お客様に見やすく買い物がしやすいサイトをテストを通じて作成してみませんか。

物販を実践して結果を出されている方で、丁寧に教えてくれる方をご紹介していますので、

下の記事ぜひ読んでください。