Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Shifter Online Meetup_200805

Shifter Online Meetup_200805

8/5(水)Shifter Online Meetup の登壇資料です。

hiroramos

August 05, 2020
Tweet

More Decks by hiroramos

Other Decks in Technology

Transcript

  1. Shifter Online Meetup
    Shifter Static で
    Shopify “ BuyButton.js ” を
    活用してみよう!
    Customer Marketing Manager
    Hiromi Ito
    2020.08.05
    #JP_GetShifter

    View full-size slide

  2. WHO I AM ?
    #JP_GetShifter
    HIROMI ITO
    DigitalCube Co.Ltd.
    Customer Marketing Manager
    ● 入社歴より Shifter ユーザ歴が長い
    ● Community Passionate Contributor
    ● 半分中の人、半分ユーザ
    ● AWS Community Hero に選ばれました!
    TW : @hiro_baila
    FB : https://www.facebook.com/hirobailaora
    #Shopify

    View full-size slide

  3. はじめに‥
    Shifter の活用を提案
    https://www.getshifter.io/ja/blog #JP_GetShifter #Shopify

    View full-size slide

  4. Shopify ももちろん!
    https://www.getshifter.io/ja/blog/shifter-static-shopify
    #JP_GetShifter #Shopify

    View full-size slide

  5. 手軽に誰でも簡単にできるモダンな Eコマースを実現したい!
    Shifter Static
    #JP_GetShifter #Shopify

    View full-size slide

  6. なぜ Shifter Static と Shopify なの?
    ● エンドユーザーは使い慣れた WordPress ダッシュボードでコンテンツの
    運用(投稿・編集)が可能
    ● Web 開発者は WordPress のナレッジやプラグインエコシステムを利用
    可能
    ● サーバ管理者はフルマネージドの SaaS でメンテナンス、セキュリティ、ス
    ケーリングなどの対応が不要
    ● Web 担当者は容易に Web パフォーマンスの向上や SEO への恩恵が
    得られる
    ● サイト利用者(訪問者)は快適 / 快速な閲覧体験( UX )を得られる
    Shifter Static の特徴
    #JP_GetShifter #Shopify

    View full-size slide

  7. なぜ Shifter Static と Shopify なの?
    ● JavaScript をいつもの WordPress コンテンツに埋め込むだけの簡単設

    ● Shopify 単体サイトはもちろん独自のサイトに好きな場所に自由自在に設
    定可能
    ● ブランディングを損なわずにオリジナルオンラインショップを楽々開設
    ● 静的サイトでオンラインショップを実現
    ● Shopify は世界で導入数 No.1 の ECサイト構築 システム
    Shopify の特徴
    #JP_GetShifter #Shopify

    View full-size slide

  8. 顧客は最高の購入体験(体験価値)を得て、欲しい商材 GET!!
    Shifter
    Static
    最高の
    ユーザー体験




    #JP_GetShifter #Shopify

    View full-size slide

  9. やってみてわかったこと
    今すぐにでもネットショップを立ち上げれる!!
    でも肝心の商材とコンテンツが……ない!!

    #JP_GetShifter #Shopify

    View full-size slide

  10. 実際の設定をみてみましょう
    1. Shopify の初期設定
    2. Shopify の管理画面で必要な情報を登録
    Shopify テーマがデフォルトでも商品登録を行い、販売に必要な設定だけでもすぐに始めることができま
    す。
    3. 掲載したい登録商品の JavaScript を取得
    4. Shifter Static にログイン
    Shifter にログインして WordPress ダッシュボードを起動します。
    新規作成の方は、Static を選択していることを確かめてください。「Create new site」で 新規作成をし、
    WordPress を起動してログインします。
    5. 起動した WordPress で新規投稿を作成
    6. 新規投稿で HTML ブロックを開き、取得した登録商品の JavaScript を貼り付ける
    7. 記事を完成させ、パブリッシュ
    8. Shifter を Generate #JP_GetShifter #Shopify

    View full-size slide

  11. 困ったときのサポートドキュメントもあります
    https://support.getshifter.io/en/articles/3933558
    #JP_GetShifter #Shopify

    View full-size slide

  12. Shopify を初期設定
    #JP_GetShifter #Shopify

    View full-size slide

  13. Shopify をテストモードにしておく
    #JP_GetShifter #Shopify

    View full-size slide

  14. Shopify で商品登録など設定
    #JP_GetShifter #Shopify

    View full-size slide

  15. Shopify で Web サイトに埋め込むボタンを作る
    #JP_GetShifter #Shopify

    View full-size slide

  16. Shopify で 取得した埋め込みコードを Shifter で設定
    #JP_GetShifter #Shopify

    View full-size slide

  17. Generate / Publish で完成!
    #JP_GetShifter #Shopify

    View full-size slide

  18. 設定は簡単!重要なビジネスモデル、コンテンツに注力可能
    ● 今すぐ、誰もが始められるオリジナルのオンラインショップに!
    ● コミュニケーション設計をベースに SaaS を組み合わせて、顧客中心型のオンライ
    ンショップに!
    ● 新時代のネットショップ体験を!
    #JP_GetShifter #Shopify

    View full-size slide

  19. さぁ!今すぐ始めてみましょう。
    フィードバックお待ちしてます。
    ご清聴ありがとうございました。

    View full-size slide