コードの入力なしでサイト制作ができる「STUDIO」。オリジナルデザインのサイトを簡単に作れるのがメリットですが、ECサイト運営に必要なカート機能や決済機能は実装できません。
しかし、Shopifyと連携させればSTUDIOで作成したサイトでもネットショップを運営できるようになります。本記事では、ShopifyとSTUDIOの連携について詳しく解説します。
ShopifyとSTUDIOの違い
まずは、ShopifyとSTUDIOそれぞれの特徴をみていきましょう。
Shopify
画像引用：Shopify
Shopifyは、誰でも簡単にECサイトの構築・運営できるのが特徴です。サイトの制作、カート機能や決済、商品管理機能・顧客のサポート機能などECサイトの開設・運用に必要な基本機能はすべて揃っています。テンプレートのテーマが用意されているため、コードの入力なしで簡単にサイトを製作できます。また、Shopify POSを使用すれば、対面販売にも対応可能です。
STUDIO
画像引用：STUDIO
STUDIOは、コードなしでオリジナルデザインを実装できるのが最大の魅力です。ノーコード制作ツールの多くは、テンプレートを選択して作成する仕組みです。しかし、STUDIOなら0からオリジナルデザインをドラック＆ドロップで簡単に実装可能です。書体やアニメーションなど、細かいところまでこだわることができます。
ただし、自分でソースコードの直接編集はできないため、EC機能を実装することはできません。ECサイト開設に必要なカート・決済機能を実装できない点がネックです。
ShopifyをSTUDIOに連携させるメリット
STUDIOをShopifyに連携させることで、主に以下2つのメリットが得られます。
- オリジナルデザインのサイトでネットショップを開設できる
- オフラインとオンラインを連携した施策やサービスの運営ができる
上記について、順に詳しくみていきましょう。
オリジナルデザインのサイトでネットショップを開設できる
1つ目は、STUDIOの大きな特徴であるオリジナルデザインのサイト設計をいかしつつ、ネットショップの構築ができることです。STUDIOは、ノーコードで完全オリジナルのサイトを作れるという魅力があるものの、カート・決済機能がなくネットショップを運営できないのが難点でした。
しかしShopifyを連携させれば、STUDIOで制作したサイトでもネットショップ運営が可能となります。
オフラインとオンラインを連携した施策やサービスの運営ができる
STUDIOとShopifyを連携させれば、オフラインイベントのチケット販売・予約管理まで一貫した対応も可能になります。
STUDIOは、デザイン性の高いLP・コーポレートサイトなど誰でも簡単かつスピーディーに作成できます。そのため、制作スピードが求められるイベントサイトの制作にも最適なツールです。ただし、チケット販売や予約管理システムの実装は難しいとされています。
しかし、Shopifyをあわせて活用すれば、難しいチケット販売や予約管理などもスムーズかつ安全に提供することが可能です。
ShopifyとSTUDIOのAPI連携方法
ShopifyとSTUDIOのAPI連携は、ShopifyとSTUDIOそれぞれで操作が必要です。ここでは、オリジナルデザインのサイトで商品販売するためのShopifyとSTUDIOの連携方法を紹介します。
大まかな流れは、以下の通りです。
- Shopify側でストアフロントAPIアクセストークンをコピーする
- STUDIO側でShopifyのAPIを連携させる
- STUDIOで作成したデザインデータとShopifyのAPIデータを紐づける
- 商品の購入ボタンを作る
- 商品購入ボタンをSTUDIO内に表示させる
各ステップについて、順に説明します。
1．Shopify側でストアフロントAPIアクセストークンをコピーする
まず、Shopify側でストアフロントAPIアクセストークンをコピーする必要があります。コピーまでに必要な方法は、以下の通りです。
(1)Shopifyにログインしてホーム画面にある「アプリと販売チャネル」を開く
画像出典：Shopify
(2)「アプリを開発」から「カスタムアプリ開発を許可」をタップする
(3)「アプリを作成」をタップする
(4)任意のアプリ名（例：STUDIO用 など）とアプリ開発者を入力し、「アプリを作成」をタップする
(5)「API資格情報」にあるアクセストークンの「ストアフロントAPIを設定する」を選択する
(6)ストアフロントAPIアクセススコープ内の項目にある「unauthenticated_read_product_listings」にチェックを入れて保存する
(7)右上にある「アプリをインストール」をタップする
(8)「APIの資格情報」から、「ストアフロントAPIアクセストークン」をコピーする
2．STUDIO側でShopifyのAPIを連携させる
続いて、STUDIO側でShopifyのAPIを連携させます。
(1)STUDIOにログインし、デザインエディタを開く
画像出典：STUDIO
(2)デザインエディタ内の左パネルにある「API」から「追加」をタップする
(3)「新規追加」をタップする
(4)URL入力欄の横にあるメソッドタイプを「POST」に変更する
(5)URL欄を入力する
URL欄には、「https://（Shopifyストアのドメイン）/api/2024-10/graphql.json」を記載します。
Shopifyストアのドメインは、Shopifyの管理画面で確認できます。URLの「2024-10」の部分は、ShopifyAPIのバージョンにより異なるので、最新版を確認して入力するようにしましょう。
(6)ヘッダーのname欄・value欄を入力する
name欄に「Content-Type」「X-Shopify-Storefront-Access-Token」、value欄に「application/json」とストアフロントAPIアクセストークンを以下のように入力します。
| name欄 | value欄 |
|---|---|
| Content-Type | application/json |
| X-Shopify-Storefront-Access-Token | ストアフロントAPIアクセストークン |
(7)ボディにJSONコードを入力する
JSONコードは、Shopify API GraphiQL explorerから取得できます。取得方法が詳しく知りたい人は、Shopifyのヘルプセンターをご参照ください。
(8)APIの確認をタップする
(9)「APIリクエスト」のタップ後、表示されたデータをドラッグ＆ドロップでエディタ内に配置する
3．STUDIOで作成したデザインデータとShopifyのAPIデータを紐づける
(1)STUDIOエディタ上にある商品ボックスから、左パネルの「レイヤー」を選択する
(2)「List Component」をタップ。API連携データを、エディタ内のボックスにドラッグで組み込む
(3)画像サイズ・テキストなどを自分好みにカスタマイズする
上記の手順を踏み、画像サイズやテキストなど自分好みにカスタマイズしましょう。
4．商品の購入ボタンを作る
続いて、商品の購入ボタンを作ります。作成手順は、以下の通りです。(1)Shopifyのホーム画面にて、「アプリ追加」をタップする
画像出典：Shopify
(2)「Buy Button channel」をインストールする
アプリ追加をタップしても「Buy Button channel」が出てこない場合は、Shopify App Storeで検索をかけるとよいです。
(3)「購入ボタンを作成する」をタップ。「商品購入ボタン」を選択する
(4)ボタンのスタイルや背景など好みのデザインにカスタマイズし、「次へ」をタップする
画像出典：Studio.Blog
(5)「コードをコピーする」をタップする
5．商品購入ボタンをSTUDIO内に表示させる
最後に、以下の手順で商品購入ボタンをSTUDIO内に表示させれば完了です。
(1)STUDIOのエディタに透明ボックスを配置。右パネルのボックスIDに、「Shopify Buy Button」のコードを貼り付ける
(2)左パネルの「ページ」をタップ。カスタムコード内の「<body>内の末尾」に「Shopify Buy Button」のコードを貼り付ける
(3)「<body>内の末尾」の最初の行を<script type="module">に書き換える
上記の手順が一通り完了したら、サイトを公開して商品購入ボタンの表示に問題がないか確認しましょう。デザインや動作に問題がなければ、ECサイト運営をスタートできます。
下記のブログ記事では、Buy Button channelについて詳しく解説しています。Buy Button channelの導入を検討している方はご参考にしてください。
ShopifyとSTUDIOを連携させて理想通りのECサイトを開設しよう
ShopifyとSTUDIOを連携させれば、オリジナルデザインのECサイト運営が可能です。イベントのチケット販売や予約管理も安全かつスムーズにできるようになります。
連携させるには、ShopifyとSTIDIOの両方でいくつかの操作が必要です。ただ、本記事で紹介した手順に沿って行えば問題なく連携できるでしょう。
ShopifyとSTUDIOの連携で、細部のデザインまでこだわった理想のECサイトを開設してみてください。
