Shopify のサイト構築・運用に Google Chrome 拡張機能 Koala Inspector をインストールしてみる


こんにちは、 Gaji-Labo 横田です。
今回は、Eコマース用のプラットフォーム Shopify でのサイト構築・運用時に活用できるGoogle Chrome拡張機能 Koala Inspector – Inspect Shopify Shops を紹介します。

Koala Inspector とは

Koala Inspector は Google Chromeの拡張機能で、Shopify で構築したストアの使用しているテーマや独自ドメイン、商品情報などをひと目で追跡することができます。

chromeウェブストアから拡張機能を追加するだけでインストール完了です。

「拡張機能を追加」ボタンを押せばインストール完了

Koala Inspector を使ってみる

Shopify にメガネのアイコン

使い方も簡単で、Shopify を使用しているサイトにアクセスし、Koala Inspector アイコンをクリックすれば、インスペクターが起動して詳細を確認することができます。無料で使用できる機能は以下があります。

メニューの Structure では、

  • そのサイトの独自ドメイン
  • 使用しているテーマ
  • 使用しているアプリ

が分かります。「使用しているテーマ」では、Shopify の公式テーマはリンク付きで追跡ができ、独自カスタマイズしているテーマの場合もテーマ名を確認することが出来ます。すごい。

このキャプチャの参考サイトでは Debut テーマを使用していることが分かりますね

メニューの Products では、

  • 最初に商品が公開された日
  • 最後に商品が公開された日
  • 商品数
  • 一番価格の高い商品価格
  • 一番価格の安い商品価格
  • 平均の商品価格

を見ることができます。さらに、Products 内の NEW PRODUCTS タブでは新商品の概要、BEST SELLERS タブでは人気商品の概要までチェックすることができ、CSVでダウンロードも出来ます。

画面右下に「Export CSV」リンクがあります

商品名・価格・商品が公開された日、タグ付けがひと目で分かるので、サイト運用のお手伝いをさせていただく際の簡単な分析や競合サイトのチェック、UI改善につながる提案などにも役立ちそうです。

まとめ

Google Chrome の拡張機能 Koala Inspector – Inspect Shopify Shops のような便利な機能拡張を使って、効率的に必要な情報を収集して開発に役立てたり、サイト運用時のお手伝いの一助になればと思います。

開発のお悩み、フロントエンドから解決しませんか?

あなたのチームのお悩みはなんですか?

「バックエンドエンジニアにフロントエンドまで任せてしまっている」
「デザイナーに主業務以外も任せてしまっている」
「すべての手が足りず細かいことまで手が回らない」

役割や領域を適切に捉えてカバーし、チーム全体の生産性と品質をアップするお手伝いをします。
フロントエンド開発に関わるお困りごとがあれば、まずは一度お気軽に Gaji-Labo にお声がけください。

オンラインでのヒアリングとフルリモートでのプロセス支援に対応しています。

リモートワーク対応のパートナーをお探しの場合もぜひ弊社にお問い合わせください!

お悩み相談はこちらから!

投稿者 Yokota Tomoko

運用やアクセシビリティに配慮したHTML/CSSの設計やコンポーネント作成、スタイルガイドの構築、コードレビュー、組み込み、要件の整理、社内進行管理、顧客とのコミュニケーションまで、ジョインしたチームを前に進めるためにあれこれ担当しています。子育てと仕事のバランスを楽しめるよう、日々模索しています。