Eコマース用のプラットフォーム Shopify を触ってみる

こんにちは、 Gaji-Labo アシスタントエンジニアの石垣です。

最近、Eコマース用のプラットフォームである Shopify を試してみる機会があったため、今回は Shopify の登録からサイトを公開するまでの手順と、触ってみた感想をまとめてみたいと思います。

Shopify とは？

Shopify とは、カナダの Shopify 社が提供するEコマース用のプラットフォームです。

オンラインストアを展開する上で必要な販売情報の管理機能と決済システム、またフロントとなるサイトのテンプレートなどの機能が1つにまとまったプラットフォームとなっています。

Shopify が標準で持っている機能のほか、「アプリ」と呼ばれるサードパーティのプラグインを追加して機能を拡張していくことも出来るのが特徴です。

登録すると自動的にストアのサイトが Shopify 上に作成されるため、単体でもECサイトを運用することが出来ますが、 Gatsby などの静的サイトジェネレーターでサイトを構築し、 Shopify には情報だけを持たせて APIで連携するという運用も可能です。

登録からサイト公開まで

登録

まずは Shopify に登録します。

ストアURLに入力した文字列が foo.myshopify.com としてストアページのURLとなります。ストアページのURLは登録後に独自ドメインを使用することが可能です。

無料体験期間が14日用意されており、それ以降は必要な機能に応じてプランを選択する形となっています。

メールアドレスを認証し、アンケートと住所情報に回答した後、自動で管理画面に遷移します。

商品登録

管理画面のサイドバーから商品登録などを行うことが出来ます。

今回は商品登録を行うのみに留まりましたが、注文管理や顧客管理などECサイトに必要な機能が一通り用意されています。

商品登録ページでは、サイトに表示される商品名、メディアなどの商品情報と、在庫情報や価格情報、商品が持つバリエーション（サイズなど）の登録を行うことができます。

登録すると、サイト側では以下のように表示されます。（デフォルトのテンプレートの場合）

商品には公開日を指定できるので、決まった時間に予約して公開するということも可能です。

Webページの編集

サイドバーの販売チャネル > オンラインストアからサイトの編集を行います。

WordPress のようにテーマが公式で用意されている他、テーマ自体を作成・編集してサイトのデザインを変更することも可能です。

アクション > コードを編集する からShopify 上でテーマファイルを編集することもできますが、基本的には Shopify Theme Kit を使用し、ローカルで編集してからアップロードする形で変更するようです。

また、前述したように SSG と連携することでテーマと分離したサイトを構築することが出来ます。

公開

既にサイトは作成されているため、プランを開始している場合は 販売チャネル > オンラインストア > 各種設定からパスワードを解除することですぐにサイトを公開することが可能です。ホスティングは Spotify の持つサーバーが行っているようです。

Shopify を触ってみた感想

Shopify を触る前のイメージとして、 Shopify は管理画面のみを持ち、フロント側のWebサイトは Gatsby などのSSGやWeb アプリケーションで構築するという印象を抱いていました。

実際触ってみると Shopify 自体もストアページを持っており、WordPress のようなCMS的に商品を追加→表示がシームレスに行え、決済までが Shopify で完結し、拡張機能も豊富なため、単体でも細かいカスタマイズが不要であれば運用可能だと感じました。

ただ、サイト側の細かい編集など、 Shopify 単体で完結するのは難しい部分もあるため、 Gatsby などのSSGと連携する方向性を今後深堀りしていきたいです。

まだ初歩的なところしか触れられていないため、今後社内でももっと知見を深めてブログとして共有していけたらと思っています。

Shopifyでのサイト構築やテーマ開発に興味がある方、実践でのポイントを吸収したいと思っている方などにおすすめの内容です。