ShopifyのOnline Store(オンラインストア) 2.0 とは? メリットとテーマ移行と注意点

ShopifyのOnline Store(オンラインストア) 2.0 とは? メリットとテーマ移行と注意点 Shopify設定

Shopify Online Store(オンラインストア) 2.0 とは?

本記事は開発者向けの専門的な話はできるだけ抜きにしてストア店舗目線で、Shopify のOnline Store(オンラインストア) 2.0がどのように便利になったか、使用しておいた方が良い理由などをわかりやすくまとめていきたいと思います

まず Shopify の歴史を簡単に

2006年 カナダ Shopify誕生
2017年 Shopify Japan 日本法人設立
2020年 コロナ禍でShopify導入急増
2021年8月 Shopify Online Store(オンラインストア) 2.0 リリース

というように Shopify はめきめきと利用者を伸ばしており、それに伴い機能改善を行いどんどん便利に専門知識がなくても使いやすいように日々アップデートを重ねてきています

本題のShopify Online Store(オンラインストア) 2.0 とは2021年8月にリリースされた Shopify の新機能たちのことを指します
難しく捉えがちですが、Shopifyがさらに使いやすく便利になったバージョンアップだよーと覚えるとよいと思います

例えるなら、お手持ちのスマホのバージョンをアップする感覚に近いです
スマホのバージョンアップの利点は、最新の機能に対応することができたり、セキュリティや使用速度も上がったりします(ただし、アップデートをすることで注意点も潜んでいますね)
逆にバージョンアップをせずにそのまま放置してしまうと、時間経過により互換性がなくなり最新のアプリ導入ができない! だとか今まで使用してきたアプリが使用できなくなったりします
スマホの例はあくまでも一例ですが、本記事はOnline Store(オンラインストア) 2.0の利点とともにアップデートの仕方と注意点をまとめます

Online Store(オンラインストア) 2.0 の利点

Online Store(オンラインストア) 2.0 の恩恵

実はお手元に導入されているShopifyはすでにOnline Store(オンラインストア) 2.0 となっています
その機能を発動するにはOnline Store(オンラインストア) 2.0 に対応したテーマを導入することです

Online Store(オンラインストア) 2.0 対応のテーマを導入することで以下のようなメリットが得られます

  • テーマの編集が容易になる
  • テーマのアップデートが容易になる
  • 新機能のアプリ(定期購買やShopify Flow)にテーマが適応
  • ページの速度が速くなる
テーマの編集が容易になる

より直感的に編集ができるようになり、セクションの複製などで作業時間の短縮が見込めます
また、テンプレートの作成やメタフィールドという新機能を使用することができるのでそれぞれの店舗特性を活かしたページ構造やページデザインを実現しやすくまりました

テーマのアップデートが容易になる

これまでは制作会社にアップデートを依頼しなければならないリスクが高かったが、Online Store(オンラインストア) 2.0 対応のテーマを使用することで比較的容易に自分自身でアップデートしやすくなりました

新機能のアプリ(定期購買やShopify Flow)にテーマが適応

Online Store(オンラインストア) 2.0 対応のテーマにすると設定からアプリの組み込みが容易になります
新たに追加されるアプリ(例:定期購買やShopify Flow)もテーマに適用することで機能を使用することができます

ページの速度が速くなる

Online Store(オンラインストア) 2.0 対応のテーマを使用することにより、ページ速度があがりお客様のストレス軽減! 速度が上がることでSEOにも有利になります

Online Store(オンラインストア) 2.0 対応のテーマ

2024年9月現在では、Shopify の公式テーマストアのテーマはすべて対応しているものとなっております
以下のリンクで確認できます(無料テーマ)

ECサイトのテンプレート - オンラインストア向けの無料およびプレミアムのテーマ
オンラインストアを公開するための無料のShopifyテーマを...

Online Store(オンラインストア) 2.0 以前のテーマ

以下、古いShopifyテーマの名前です

  • Debut
  • Brooklyn
  • Narrative
  • Minimal
  • Boundless
  • Simple
  • Venture
Shopify のレガシィテーマ「Debut」
Shopify のレガシィテーマ「Boundless」

過去のテーマ

上記は一部ですが、Online Store(オンラインストア) 2.0 対応外となるテーマです

Online Store(オンラインストア) 2.0 対応テーマに移行するときの注意点

以下のことに注意しましょう

  • HTML/CSS/Liquid などのコード編集を行っていないか
  • 使用しているアプリの確認
HTML/CSS/Liquid などのコード編集を行っていないか

Shopify のストア構築をご自身で行われている場合、「コード編集」と聞いてピンときていない場合はおそらくコード編集はしてないものと想像しますが、万が一のこともありますので下図を確認ください

Shopifyテーマのコード編集ができる画面(レガシィ)
ShopifyテーマのLiquidファイルのコード編集ができる画面(レガシィ)

過去のテーマライブラリー編集箇所

このような画面で編集した場合、
アプリの読み込みやGoogle Analyticsなどのタグ、広告タグなどを入れ込んでいる可能性もありますので注意が必要です

ストアの初期構築をご自身で行っておらず、制作会社などに依頼をしたケースもあると思います
その際はどのような変更を行ったかわからない場合もあると思いますので可能であれば制作会社に問い合わせるか次に依頼予定の会社にその旨を相談するのも良いと思います

使用しているアプリの確認

先程も述べましたが、アプリを使用している場合コード編集の可能性が出てきます
また、アプリの種類によってはOnline Store(オンラインストア) 2.0に対応していない場合もありますので一度確認が必要です
アプリ名で検索などし、最新のバージョンがあるかどうか更新しても問題ないかの確認を取りましょう

Online Store(オンラインストア) 2.0 対応テーマへの移行手順

  1. 懸念点を洗い出す
  2. Shopify 公式のテーマストアから好きなデザインのテーマをダウンロードする(14個の無料テーマはこちら
  3. オンラインストア > テーマから手順2のテーマでデザインをカスタマイズする
  4. 現在公開中ものと表示した内容やできること(機能)が問題ないかプレビューで確認する
  5. 手順4に問題がなければテーマを公開する(メインテーマとして設定)

1. 懸念点を洗い出す

Online Store(オンラインストア) 2.0 対応テーマに移行するときの注意点でまとめていることを確認します
ここで工程が抜けると今まで使用できていたものが使えなくなったりする事態になりますので慎重に行うようにしましょう

Shopifyの現在導入しているアプリを確認できる方法

現在導入アプリは上図の方法で確認ができます

Shopify の管理画面左メニューの「アプリ」から「アプリと販売チャネルの設定」をクリックします
そうすると現在そのストアにインストール済みのアプリと販売チャネルの一覧が並ぶページに遷移します
一概にすべてのアプリを使用しているわけではないと思いますので、使用しているアプリ(今後も使い続けたいアプリ)を選別しましょう

2. Shopify 公式のテーマストアから好きなデザインのテーマをダウンロードする

(14個の無料テーマはこちら

Shopify公式テーマストア

Shopify の公式テーマストアもとても見やすく情報もすぐにわかりやすくなっています

口コミの良いものも一覧で確認することができ、各テーマの更新日もわかるのでそのあたりも判断材料にしつつ選ぶのもよいですね

決まったら「テーマを試す」をします

3. オンラインストア > テーマから手順2のテーマでデザインをカスタマイズする

オンラインストア > テーマの「テーマライブラリ」に手順2でインストールしたテーマが表示されていると思います

Shopify新しいテーマをインストールした後の画面

「カスタマイズ」を押してデザインの調整を行います
以下はDawnのテーマですがデザインを構成するうえでのセクションの詳細をまとめた記事です

テーマの設定も忘れず行ってください

現在公開中の設定と見比べながら行うと比較的簡単にいきそうです

アプリの適用もこちらから行うものもあります(アプリにより設定が異なります)

4. 現在公開中ものと表示した内容やできること(機能)が問題ないかプレビューで確認する

手順3を一通り終えたら下図のところから「プレビュー」で実際のお客様から見える画面で動きを確認します

上にある公開中のテーマと異なるところがないかチェックします
ここがいちばん重要な工程です

Shopifyテーマライブラリーのプレビュー画面

5. 手順4に問題がなければテーマを公開する(メインテーマとして設定)

手順4で問題がない場合いよいよテーマを公開します

Shopifyのメインテーマとして設定しテーマを公開する方法

公開したいテーマにある「メインテーマとして設定」ボタンをクリックして「公開」しましょう

古い方のテーマも残りますのでわかりやすい名前に置き換えておくと未来の自分が助かります

最後に

テーマ移行は慎重に行わないと今のサイトの状況に影響を及ぼす可能性があります

不安や疑問を感じたらお気軽にご相談ください
不明な箇所などありましたらコメントください

Shopify もより便利に快適に変化していっています
お買い物に利用するお客様もそうですが、お店側も快適になるべくストレスなく作業できるとよいですね

タイトルとURLをコピーしました