Shopify

【1から解説】Shopifyでテーマを更新する方法をご紹介

この記事は約 6 分で読めます。

こんな方におすすめ

  • Shopifyのテーマを更新したいけど方法が分からない人
  • Shopifyでなぜテーマをバージョンアップした方が良いのか知りたい人

最近利用者数がどんどん増えているECサイト「Shopify」。 Shopifyも他のECサイトに負けないよう、どんどんバージョンが上がっていき便利になっています。 それに合わせて、私たちが利用しているテーマも更新していく必要があるので、今回はその方法を紹介します。

Shopifyでテーマを更新した方が良い理由

テーマを更新した方が良い理由として、次のものが挙げられます。

  • テーマ更新は基本的には簡単
  • Shopifyの最新の機能を使用できる
  • エラーが少なくなる

2021年8月にShopifyはShopify Online Store 2.0 にバージョンアップされ、たくさんの新機能が追加されました。 テーマのバージョンを上げないと、便利な機能を使うことができないままです...

Shopifyのテーマのバージョン確認方法

ここで1つ疑問が出てくると思います。 それは「自分のテーマはバージョンをあげる必要があるのか?」ということです。 今のテーマの最新版と自分のテーマのバージョンを比べて、同じならバージョンアップの必要はありません。

自分のテーマのバージョンを確認する方法

Shopifyの管理画面からオンラインストア▶︎カスタマイズをクリックします カスタマイズ画面にて、テーマの名前の横の「・・・」を押すと現在のバージョンが出てきます。

最新版テーマの確認方法

続いて、そのテーマの最新版の確認方法です。 テーマストアに移動して自分のテーマを検索します。

その後、下の画像の部分にある「Read the documentation」をクリックします。 theme changelog をクリックします。 テーマの更新履歴が表示されるので、その1番上のものが最新バージョンです。 この数字と自分の数字が大きく違ったら更新を行いましょう!

テーマを更新する方法

それではテーマの更新方法をご紹介します。 テーマは自動更新手動更新の2種類あります。

自動更新

テーマのコードを触っていない方(テーマをインストールしてからのままのもの)は自動で更新されます

手動更新

手動更新の手順は次の通りです。

  1. テーマのバックアップを取る
  2. 最新版テーマをインストールする
  3. 元のテーマとの差分を追加していく

順に解説していきます

テーマのバックアップを取る

テーマの更新に限らず、テーマに変更を加える際はバックアップを必ず取りましょう。 といってもすごく簡単で、管理画面のオンラインストア▶︎アクション▶︎複製 でバックアップを作成することができます。

最新版をダウンロードする

Shopifyのテーマストアに行き、自分のテーマを検索すると「Add latest theme version」というボタンが出てきますので、こちらをクリックしましょう。

ダウンロードすると下記のように追加されますので、バージョン名と追加日付を名前に設定しましょう。

アプリの導入

テーマを変更するにあたって、再度アプリとの接続をする必要があります。

それぞれのアプリのテーマへのインストールを行ってください。

テーマのコード編集

続いてコードを編集します。

元のテーマから編集していた部分(テキストの追加やCSSの追加)を新しいテーマにも導入します。
その際、下記のように修正箇所をコメントで囲っておくと次回の修正の際に探す手間が省けます!

 html
<!-- 修正2021/11/29 開始-->hogehoge<!-- 修正2021/11/29 終了-->

テーマのカスタマイズ

最後にテーマのカスタマイズを行いましょう。
テーマを新しくすると、再度それぞれのページのカスタマイズが必要となります。

しかし共通部分(ページのカラーやヘッダー、フッターの部分)はこちらのアプリで引き継ぎ可能です!

ぜひ導入してみてください!

 

テスト

最後に確認・テストを行います。

購入がしっかりできるかなど、Shopify Paymentのテストモードなどを用いて確認しましょう!

まとめ&サービス

以上でテーマの更新方法の解説を終了します。

今回の記事に関して、質問やご意見ございましたら下記問い合わせフォームよりご連絡ください。

自分で更新するの難しいからお願いすることもできる...?

はい!テーマの更新サービスも行っていますので、お気軽にお問い合わせください!

それ以外にも、AGATA CODEではShopifyを用いたECサイトの構築やECサイトの運用保守を行っています。 お見積もりは無料ですのでお気軽にお問い合わせください!

お問い合わせ

-Shopify

© 2022 Agata Code Powered by AFFINGER5