<p><a href="https://www.shopify.com/jp" target="_blank" rel="noopener noreferrer nofollow"><u>Shopify</u></a>で作ったストアとfammuuを連携することで以下からShopifyで取り扱う商品を販売することができます。</p><p>Shopifyとfammuuの連携の方法については<a href="https://fammuu.com/helps/zp41urtc8t4" target="_blank" rel="noopener noreferrer nofollow"><u>こちら</u></a>から</p><h3 id="h8d5d453a75"><br>1.ホームタブの編集から商品リストのセクションを追加し、Shopifyの商品をfammuu上で表示</h3><p>（メモ）追加されるモジュールの画像も合わせた方がいいので画像は後ほど差し替える</p><p>＊画像大きすぎ？</p><p></p><p>デザイン編集から「商品リスト」を選択することができます。</p><h3 id="hb7a8fcc5dd"><br>2.サイトメニューにお使いのShopifyストアへのリンクを作成</h3><p></p>

<p><a href="https://www.shopify.com/jp" target="_blank" rel="noopener noreferrer">Shopify</a>で作ったストアとfammuuを連携することで以下からShopifyで取り扱う商品を販売することができます。<br>Shopifyとfammuuの連携の方法については<a href="https://fammuu.com/helps/zp41urtc8t4" target="_blank" rel="noopener noreferrer">こちら</a>から<br><br></p><h3 id="h8d5d453a75">1.ホームタブの編集から商品リストのセクションを追加し、Shopifyの商品をfammuu上で表示</h3><p><span style="color:#edad0b">（メモ）追加されるモジュールの画像も合わせた方がいいので画像は後ほど差し替える</span><br><span style="color:#edad0b">＊画像大きすぎ？</span><br><img src="https://images.microcms-assets.io/assets/687ba37b26cc46a9887b2df787322170/4d0238f26a0047daa486cdf3a032d444/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-02-07%2023.48.20.png" alt=""><br>デザイン編集から「商品リスト」を選択することができます。<br><br></p><h3 id="hb7a8fcc5dd">2.サイトメニューにお使いのShopifyストアへのリンクを作成</h3><p><img src="https://images.microcms-assets.io/assets/687ba37b26cc46a9887b2df787322170/daa6d401c6c6440a917773d531b3d65b/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-02-08%200.40.00.png" alt=""><br></p>

Shopify連携でできること

<p>Shopifyの連携には以下の手順でAdminトークンとストアフロントトークンを作成する必要があります。</p><h2 id="h2539f76d25"><br>1. アプリを作成する</h2><p>Shopifyの<a href="https://admin.shopify.com/" target="_blank" rel="noopener noreferrer nofollow"><u>管理画面</u></a>から設定 &gt; アプリ販売チャネル &gt; アプリを開発 &gt; アプリを作成を押下します。</p><p>作成画面からアプリ名を「fammuu」と入力し、アプリを作成を押下します。</p><figure><img src="https://images.microcms-assets.io/assets/687ba37b26cc46a9887b2df787322170/688c49fe609a4b949756f989fa0b753c/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-16%200.21.33.png?w=768&amp;h=475" alt="" width="768" height="475"></figure><h2 id="h79ecb60a16"><br>2. トークンの発行</h2><p>連携には管理画面API(Admin API)トークン、ストアフロントAPIのトークンの2種類が必要になります。</p><h3 id="h001a0f1d58"><br>Scopeの付与</h3><figure><img src="https://images.microcms-assets.io/assets/687ba37b26cc46a9887b2df787322170/45c02cf9da7d472ea225f8acc4311bd8/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-16%200.27.46.png?w=768&amp;h=330" alt="" width="768" height="330"></figure><p>①「Admin APIスコープを設定する」からread_productsにチェックをつけ保存をします。</p><p>②「ストアフロントAPIの統合」からunauthenticatedreadproduct_listingsチェックをつけ保存します。</p><h3 id="hb730955c0e"><br>アプリをインストールしトークンを発行する</h3><p>「アプリをインストール」ボタンを押下し、Shopifyアプリをインストールします。</p><p>インストールが完了すると管理画面API(Admin API)トークン、ストアフロントAPIが発行されるので値をメモしておきます。</p><figure><img src="https://images.microcms-assets.io/assets/687ba37b26cc46a9887b2df787322170/ea0736c228734ee1bb022854f9d3918e/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-16%200.32.48.png?w=768&amp;h=491" alt="" width="768" height="491"></figure><h2 id="h377a6a7f47"><br>3.fammuuに連携</h2><p>2.で発行したトークンをfammuuに連携します。</p><p>ストアタブからショップと正しいトークンをフォームに入力し連携するボタンを押下することで連携が完了します。</p><figure><img src="https://images.microcms-assets.io/assets/687ba37b26cc46a9887b2df787322170/b311aaddec294415af1a80404bfb3950/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-16%200.36.50.png?w=768&amp;h=375" alt="" width="768" height="375"></figure>

<p>Shopifyの連携には以下の手順でAdminトークンとストアフロントトークンを作成する必要があります。<br><br></p><h3 id="h2539f76d25">1. アプリを作成する</h3><p>Shopifyの<a href="https://admin.shopify.com/" target="_blank" rel="noopener noreferrer">管理画面</a>から設定 &gt; アプリ販売チャネル &gt; アプリを開発 &gt; アプリを作成を押下します。<br>作成画面からアプリ名を「fammuu」と入力し、アプリを作成を押下します。<br><img src="https://images.microcms-assets.io/assets/687ba37b26cc46a9887b2df787322170/688c49fe609a4b949756f989fa0b753c/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-16%200.21.33.png" alt=""><br></p><h3 id="h79ecb60a16">2. トークンの発行</h3><p>連携には管理画面API(Admin API)トークン、ストアフロントAPIのトークンの2種類が必要になります。<br><br></p><h4 id="h001a0f1d58">Scopeの付与</h4><p><img src="https://images.microcms-assets.io/assets/687ba37b26cc46a9887b2df787322170/45c02cf9da7d472ea225f8acc4311bd8/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-16%200.27.46.png" alt=""><br><span style="color:#202223">①「Admin APIスコープを設定する」からread_productsにチェックをつけ保存をします。</span><br>②「<span style="color:#202223">ストアフロントAPIの統合</span>」から<span style="color:#202223">unauthenticatedreadproduct_listingsチェックをつけ保存します。</span><br><br></p><h4 id="hb730955c0e">アプリをインストールしトークンを発行する</h4><p>「アプリをインストール」ボタンを押下し、Shopifyアプリをインストールします。<br>インストールが完了すると管理画面API(Admin API)トークン、ストアフロントAPIが発行されるので値をメモしておきます。<br><img src="https://images.microcms-assets.io/assets/687ba37b26cc46a9887b2df787322170/8539549f90d84d10b9ad83cc6b5b0a54/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-16%200.32.48.png" alt=""><br></p><h3 id="h377a6a7f47">3.fammuuに連携</h3><p>2.で発行したトークンをfammuuに連携します。<br>ストアタブからショップと正しいトークンをフォームに入力し連携するボタンを押下することで連携が完了します。<br><img src="https://images.microcms-assets.io/assets/687ba37b26cc46a9887b2df787322170/b311aaddec294415af1a80404bfb3950/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-16%200.36.50.png" alt=""><br></p>