.png)
・
「Shopifyに新商品を追加するたびに、Webflowでつくったサイトにも手作業で情報をコピーしている…」
「商品情報の更新が多くて、Webサイトへの反映が追いつかないし、ミスも発生しがち…」
このように、ECプラットフォームとWebサイト間で発生する二重のデータ入力作業に、時間と労力を奪われていませんか？
もし、<span class="mark-yellow">Shopifyで商品情報が作成されたら、その内容が自動的にWebflowのサイトにも反映される仕組み</span>があれば便利ですよね。
こうした手作業による非効率やヒューマンエラーといった悩みから解放され、本来注力すべき商品企画やマーケティング活動により多くの時間を費やすことができます！
今回ご紹介する自動化は、プログラミングの知識がなくても簡単に設定できるので、ぜひこの機会に導入して、日々の更新業務をもっと楽にしましょう！
Yoomには<span class="mark-yellow">ShopifyとWebflowを連携するためのテンプレート</span>が用意されているので、今すぐ試したい方は以下よりバナーをクリックしてスタートしましょう！
ShopifyとWebflowのAPIを連携させることで、Shopifyに商品情報が作成された際に、WebflowのCMSコレクションにアイテムを自動で追加することが可能になります。
これにより、これまで手作業で行っていた情報反映の工数を削減し、転記ミスや更新漏れを防ぐことができます。
以下で具体的な自動化の例をご紹介しますので、気になる内容があれば、ぜひクリックしてみてください！
Shopifyに新しい商品が登録されると、その商品名や価格などの情報が自動でWebflowのCMSコレクションにもアイテムとして追加されます。
これにより<span class="mark-yellow">Webサイトへの商品情報掲載にかかる手作業をなくし、反映のタイムラグや転記ミスを防げます。</span>
Shopifyで追加された商品のうち、特定のタグがついた商品や特定のコレクションに属する商品など、<span class="mark-yellow">条件に合致する商品情報のみを絞り込んでWebflowのコレクションに自動で追加</span>する連携です。
これにより、セール対象商品や特定カテゴリの商品だけをサイトに掲載するといった、より柔軟な連携が可能になります。
それでは、さっそく実際にShopifyとWebflowを連携したフローを作成してみましょう！
今回はYoomを使用して、ノーコードでShopifyとWebflowの連携を進めていきますので、もしまだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。
[Yoomとは]
今回はShopifyで商品情報が作成されたら、Webflowのコレクションにアイテムを追加するフローを作成していきます！
作成の流れは大きく分けて以下です。
ここでは、Yoomとそれぞれのアプリを連携して、操作が行えるようにしていきます。
まずは基本的な設定方法を解説しているナビをご覧ください！
それではここから今回のフローで使用するアプリのマイアプリ登録方法を解説します。
Yoomにログインし、画面左側の「マイアプリ」をクリックします。
続いて、画面右側の「新規接続」をクリックし、検索窓にShopifyと入力しましょう。
※Shopifyは、チームプラン・サクセスプランをご利用の方向けのアプリです。フリープランやミニプランで使うと、フローボットのオペレーションやデータコネクトがエラーになってしまうのでご注意ください。
有料プラン（チームプラン・サクセスプラン）には2週間の無料トライアルがあります。トライアル期間中なら、普段は制限されているShopifyも問題なくお試しいただけます。ぜひこの機会にいろいろと体験してみてくださいね。
以下のような画面が表示されるので、内容に従って入力します。
※詳しい登録方法はこちらをご確認ください。
「追加」をクリックすると、マイアプリにShopifyが表示されます。
Yoomの画面左側にある「マイアプリ」→「新規接続」をクリックしましょう。
「アプリ名で検索」でWebflowを探すか、アプリ一覧から探してください。
以下の画面が表示されるので、Webflowでアクセストークンを確認し入力しましょう。
入力後、「追加」をクリックし、マイアプリにWebflowが表示されていれば連携の完了です。
続いてYoomのテンプレートをコピーします。
以下バナーの「試してみる」のアイコンをクリックします。
以下の画像のような画面が表示されたらテンプレートのコピーは完了です。
Shopifyで商品情報が作成されたことを自動化のトリガーにするための設定を行います。
以下の赤枠をクリックしましょう。
連携アカウントとアクションを選択する画面が表示されるので、今回連携するShopifyのアカウントを確認し「次へ」をクリックします。
Webhookの設定画面が表示されるため、URLをコピーしたら、注意事項を参考にしてShopifyに設定しましょう。
設定ができたら実際に商品作成を行うか、Webhookの画面で以下の「テストを送信」をクリックします。
なお、「テストを送信」により、Yoomでテストを行う場合、ステップ4のテストがエラーになるのでご注意ください。（テストがエラーになっても設定を行うことはでき、フローを起動することで問題なく連携は可能です）
「テスト」をクリックし、取得した値にShopifyから取得した情報が表示されているか確認しましょう。
この後、この取得した値の内容を入力に使用することができます。
※取得した値に関して、詳しくはこちらをご確認ください。
テスト成功後「保存する」をクリックしましょう。
商品情報を取得するための設定を行いましょう。
以下の赤枠をクリックします。
連携アカウントとアクションを選択する画面が表示されるので、ステップ3と同じアカウントであることを確認し「次へ」をクリックします。
商品IDには以下のようにShopifyから取得した値より「商品ID」を設定しましょう。
取得フィールドを入力します。
Webflowに設定したいフィールド名を設定しましょう。
今回は例を参考にフィールドをカンマで区切って入力しました。
設定ができたら「テスト」をクリックし、実際にShopifyから取得した値が表示されているか確認しましょう。
確認ができたら「保存する」をクリックします。
Shopifyの情報を用いてWebflowでアイテムを作成するための設定を行います。
以下の赤枠をクリックしましょう。
連携アカウントとアクションを選択する画面が表示されるので、今回連携するWebflowのアカウントを確認し「次へ」をクリックします。
サイトID、コレクションIDは以下のように表示される候補から選択しましょう。
フィールド情報を入力していきます。
フィールドは以下のように表示される候補から選択しましょう。
値には、Shopifyから取得した値から各フィールドに該当する項目を設定します。固定値を登録する場合は、直接入力してください。
設定ができたら「テスト」をクリックし、実際にアイテムIDなど取得できているか確認しましょう。
また、Webflowでもアイテムの作成が確認できたら「保存する」をクリックし、設定を完了させます。
以下の画面の赤枠部分「トリガーをON」をクリックすることで、フローボットが自動で起動します。
設定お疲れ様でした！
ShopifyやWebflowのAPIを使用することで、さまざまな業務を自動化することができます。
ここでは、複数のテンプレートをご紹介するので、気になるものがあればぜひ試してみてくださいね！
他のアプリをトリガーとして利用したテンプレートを使うことで、Shopifyへの商品登録を自動化できます。
テンプレートを設定するだけで、手動での商品登録が削減されるため、人為的ミスを防ぎ、業務の効率化を図りたいときにおすすめです。
フォームアプリと連携することで、送信された回答をもとにWebflowにアイテムを自動で作成できます。
手作業による入力業務を削減し、人為的ミスを削減できる便利なテンプレートのため、ぜひ試してみてください！
ShopifyとWebflowの連携を自動化することで、<span class="mark-yellow">これまでECサイトとWebサイトで個別に行っていた商品情報の登録作業を削減し、手作業によるミスを防ぐことができます。</span>
これにより、担当者は情報更新のたびに発生する定型業務から解放され、より付加価値の高いマーケティング施策やコンテンツ企画に集中できる環境が整うはずです！
今回ご紹介したような業務自動化を実現できるノーコードツール「Yoom」を使えば、プログラミングの知識がない方でも、直感的な操作で簡単に業務フローを構築できます。
もし自動化に少しでも興味を持っていただけたなら、ぜひこちらの登録フォームから無料登録して、Yoomによる業務効率化を体験してみてください！
Q：連携が失敗した場合、通知はどうなりますか？
A：自動化が失敗した場合、Yoomに登録したメールアドレスに通知が届きます。
また、エラー時の対応方法については、こちらをご覧ください。
Q：連携はリアルタイムで行われますか？
A：解説したテンプレートは、Webhookを利用しているため、商品情報をリアルタイムでWebflowに連携できます。
そのため、異なるツール間で、最新の情報をタイムラグなしで確認できます。
Webhookを使ったトリガーの詳細については、こちらをご確認ください。
Q：Shopifyで「下書き」の商品も連携されてしまいますか？
A：今回紹介したフローでは下書きの商品を登録した際もWebflowでアイテムが作成されます。
解決策として、トリガーアクションの「商品情報が作成されたら（Webhook）」の後に「分岐」機能を設定し、ステータスが「アクティブ」の時にのみWebflowのアイテム作成を行うようにすることができます。
「分岐」についてはこちらをご確認ください。
.jpg){kind=small}
.avif)
.png)
.webp)
.webp)
