Back

StudioでECサイトを構築！ShopifyとのAPI連携方法

Maaya

2023.11.17

Updated:2024.12.24

Studioガイド

StudioでShopifyストアをAPI連携させ、自由なデザインでECサイトを構築しよう！

こんにちは、STUDIOのMaayaです！

この記事では、STUDIOでネットショップを作成できるサービスShopifyをAPI連携してECサイトを作成する方法を解説します。

STUDIOは、ノーコードでWebサイトを自由自在にデザインできます。幅幅広いユーザーに支持されており、コーポレート、ポートフォリオ、飲食など様々なジャンルのサイトが多数公開されています。
しかし、STUDIOでは決済機能などを現状提供しておらず、ECサイトなどを構築する際には、外部サービスを併用する必要があります。

この記事ではその一例として、Shopifyの決済機能を活用したECサイトの構築手順をご紹介します。

今回ご紹介する方法の構成としては、Shopifyで商品の管理と決済処理をし、STUDIOでは商品の表示をさせます。そして、購入ボタンをクリックするとShopifyの決済画面に遷移する仕組みになります。

STUDIOとShopifyの設定が初めての方には難しく感じられるかもしれませんが、この記事のステップに従って進めれば、API連携で繋げることができ、ECサイト作成が実現できます。ぜひ、お試しいただければと思います。

※カスタムコード機能を利用するため、有料プランのご契約が必要です。
※ご紹介する手順内でAPI をリクエストする際のボディーを JSON 形式で指定します。記事内では一例をご紹介しますが、コードのカスタマイズに関しては、Shopifyのサービス（Shopify API GraphiQL explorer ）がご利用いただけます。なお、このサービスの詳しい操作方法についてはShopifyヘルプセンターへお問い合わせください。
※この記事で取り上げる内容は、STUDIO以外のサービスを用いた応用的な設定になります。提供する情報に関してSTUDIOのチャットサポートでは対応しかねますので、ご理解ください。STUDIO Community Japan での質問投稿などをご検討ください。

1. ShopifyでのAPI設定
2. STUDIOでShopifyのAPIを連携する
3. STUDIOのデザインデータとAPIデータを紐付ける
4. Shopifyの「購入ボタン」を作成する
5. STUDIOで「購入ボタン」を表示させる
最後に

1. ShopifyでのAPI設定

STUDIOで連携をする前に、Shopify側での設定を行います。

Shopifyのホーム画面に→「設定」→「アプリと販売チャネル」→「アプリを開発」をクリックします。

「ストアでアプリの開発を開始する」→「カスタムアプリ開発を許可」をクリックします。

「アプリを作成」をクリックします。

「アプリ名」を入力し、「アプリ開発者」を選択して、「アプリを作成」をクリックします。

「API資格情報」→アクセストークン内の「ストアフロントAPIを設定する」を選択します。
※既にアプリ開発済の場合は、１の「アプリ作成」→ 自身のアプリを選択 →「API資格情報」にてストアフロントAPIのアクセストークンが確認できます。

ストアフロントAPIアクセスコープ内にある「unauthenticatedreadproduct_listings」を選択し保存します。

右上にある「アプリをインストール」をクリックし、インストールを行います。

最後に「APIの資格情報」セクションで「ストアフロントAPIアクセストークン」をコピーします。
※このトークンは、次のステップでAPI連携時に必要となります。

2. STUDIOでShopifyのAPIを連携する

STUDIOのエディタ上でShopifyのAPI連携します。

STUDIOでデザインエディタを開き、エディタの左パネルから「追加」をクリックし、「API」を選択します。

API連携内の「新規追加」をクリックします。

URL入力欄横のメソッドタイプを「GET」から「POST」へ変更し、以下の情報を入力します :
a. URL欄にShopifyストアドメインを入れた以下のURLを入力します。
　https://（Shopifyストアのドメイン）/api/2023-07/graphql.json
　※Shopifyの設定画面左上にShopifyストアのドメインが表示されています。
b. 「ヘッダー」内の「＋Add Header」をクリックし、以下を入力します：
　name： Content-Type
　value： application/json
　name： X-Shopify-Storefront-Access-Token
　value：（ステップ1でコピーしたストアフロントAPIアクセストークンを貼り付けます）
c.「ボディー」に以下のJSONコードを貼り付けます。

{
"query": "{products(first: 3) {edges {node {id title description priceRange {maxVariantPrice {amount} minVariantPrice {amount}} images(first: 3) {edges {node {url id src}}}}}}}"
}

※このJSONコードは一例となります。Shopify API GraphiQL explorerを利用し、取得しています。 Shopify API GraphiQL explorerの詳しい操作方法はShopifyヘルプセンターへお問い合わせください。

「APIの確認」ボタンをクリックします。

連携が完了すると「API」タブに連携したAPIリクエストが表示されます。APIリクエストをクリックし、STUDIOエディタの好きな場所にドラッグ＆ドロップ、またはクリックして配置します。

3. STUDIOのデザインデータとAPIデータを紐付ける

STUDIOエディタで作成されたデザインデータとShopifyのAPIデータを紐付けします。

STUDIOエディタ上にある商品のボックスを選択し、左パネルの「レイヤー」をタブを選択します。
「List Component」にあるAPI連携のデータを、エディタにあるボックスにドラッグして組み込みます。
設定例：
「tittle」: 商品名を表示させたいボックスに繋げます。
「princeRange」: 価格を表示させたいボックスに繋げます。
画像のサイズやテキストの配置など自由にエディタ上でカスタマイズします。 API連携されているのでShopifyで管理する商品情報が自動でエディタ上に反映されます。
例：Shopifyで商品画像を変更 → STUDIOでも変更後の画像が反映
※商品金額には小数点以下も表示（例：5000.00）されます。必要に応じてSTUDIOエディタ上で金額の管理・表示をご検討ください。

4. Shopifyの「購入ボタン」を作成する

STUDIOに埋め込む商品ボタンをShopifyで作成します。

Shopifyのホーム画面から→「アプリを追加」→「Buy Button channel」がおすすめに出てこない場合は、「Shopify App Store」をクリックし、App Storeに移動します。
検索エンジンで「Buy Button channel」を検索し、インストールします。
Buy Button channelアプリ内で、「販売チャンネルを追加する」をクリックします。
「購入ボタンを作成する」をクリックします。
購入ボタンのタイプを選択します。今回は商品購入ボタンを作成したいので、「商品購入ボタン」を選択します。
商品を選択し、「選択」をクリックします。
ボタンをお好みでカスタマイズし、「次へ」をクリックします。
「コードをコピーする」をクリックし、提供されたコードをコピーします。

5. STUDIOで「購入ボタン」を表示させる

STUDIOエディタで購入ボタンをデザインし、ShopifyのAPI連携を設定して商品購入ボタンを作成します。

STUDIOのエディタ上で透明のボックスをAPIリスト外に配置します。作成したボックスを選択した状態で右パネルを開きます。
※STUDIO上でボタンの色を変更したり、テキストを追加することはできません。
ボックスの「ID」に、手順で４で取得したShopify Buy Buttonのコード内にあるIDを貼り付けます。例："product-component-?????????" ※商品毎にIDの設定を設定する必要があります