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

ishigaki

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

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

Shopify とは?

Shopify のトップページ

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

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

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

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

登録からサイト公開まで

登録

まずは Shopify に登録します。

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と連携する方向性を今後深堀りしていきたいです。

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

Gaji-Laboでは、JavaScriptフレームワーク経験が豊富なパートナーさんを募集しています

Gaji-Laboでは、開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。

現在は特にJavaScriptフレームワーク実践と業務経験が豊富なWebフロントエンドエンジニアを必要としています。React + TypeScript、Vue.js、Next.js、Nuxt.js など、あなたの得意なフレームワークを教えて下さい!

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

お問い合わせしてみる!


ishigaki

投稿者 石垣 祥太郎

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。