アドオンを使ってWebサイトにShopifyのeコマースストアを追加します。

1. eコマースストアを立ち上げる

サイトにeコマースを追加するには、まずサードパーティ製ソリューションを使用してストアを作成します。このチュートリアルでは、Nomad Dreamersのファンサイト用に作成したShopifyのストアを使用します。

nomad-dreamer-widget.zipをダウンロードして、NomadDreamers-start.muファイルを開きます。デザインモードに切り替えて、ページ上の「Shopify eCommerce Widget」という見出しの下にあるセクションまでスクロールします。

注意:Ecwid、Gumroad、Sellifyなど、他にも様々なeコマースソリューションをご利用いただけます。

デザインモード

2. 無料のShopify Buttonウィジェットをインストールする

Adobe MuseウィジェットディレクトリのShopify Buttonウィジェットに移動します。「Get this Widget」ボタンをクリックして、Shopify_Button.mulibをダウンロードします。ファイルをダブルクリックすると、ライブラリパネルに自動的にインストールされます。

Shopify Buttonウィジェットをダウンロードする

3. ウィジェットをサイトに追加する

ライブラリパネルでShopify Buttonフォルダーを開き、ボタンを表示したい領域にShopify Buttonウィジェットをドラッグします。

ウィジェットを追加する

4. Shopifyコレクションをウィジェットに追加する

ウィジェットを選択し、青いオプションアイコンをクリックして、Shopifyオプションパネルを開きます。「Shopify Name」フィールドに「nomad-dreamer-fan-site」、「Shopify Collection ID/IDs」フィールドに「32815617」と入力します。 

ヒント:Shopifyストアで設定したコレクションのコレクションIDを使用できます。IDはコレクションのURLの最後の部分です(例:nomad-dreamer-fan-site.myshopify.com/admin/collections/32815617)。コレクションについて詳しくは、shopify.comを参照してください。 

Shopifyコレクションを追加する

5. ページを仕上げる

Shopify Buttonウィジェットでは、グラフィックスタイルを使用してオブジェクトをストアにリンクさせます。デフォルトのボタンを使用することも、「shopify-button」スタイルをページ上の任意のオブジェクトに適用してストアにリンクさせることもできます。 

デフォルトのボタンを使用してページを仕上げる場合は、ボタンオブジェクトだけを選択して、コピー&ペーストで複製を作成し、所定の位置にドラッグします。 

オプション:別のオブジェクトをボタンに使用してみてください。「Americanized」の横にあるアルバムの画像をクリックして、「shopify-button」グラフィックスタイルを適用してみましょう。

ページを仕上げる

 

これですべての作業が終わりました。チュートリアルをさらに役立つものにするために、アンケートにご協力ください。

 

03/15/2017

Contributors: 123Muse.com, Chris Kellet, Ali Pordeli

このページは役に立ちましたか。