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

Theme_workshop_20190919.pdf

877f92a3597118cda2715790fa170ad4?s=47 Junichi Okamura
September 19, 2019
290

 Theme_workshop_20190919.pdf

877f92a3597118cda2715790fa170ad4?s=128

Junichi Okamura

September 19, 2019
Tweet

Transcript

  1. #shopifyjpmeetup αΠτ੍࡞ऀ޲͚ ςʔϚϫʔΫγϣοϓ

  2. • Junichi Okamura, Technical Partner Manager at Shopify • @benzookapi

    • API Lover/Midnight Developer/MANGA Creator/Beer Lover/App Hacker Who am I?
  3. • Shopifyͱ͸ʁʢ௒؆୯ʹʣ • ShopifyύʔτφʔϓϩάϥϜͱ͸ʢ௒؆୯ʹʣ • ύʔτφʔΞΧ΢ϯτͱ։ൃετΞͷηοτΞοϓʢ΍΍؆୯ʹʣ • ShopifyςʔϚͱ͸ʢ؆୯ʹʣ • ςʔϚͷΧελϚΠζํ๏͋Ε͜Εʢ΍΍ஸೡʹʣ

    • ੍ޚݴޠliquidʹ͍ͭͯʢؤுΓ·͢ʣ • ωΫετΞΫγϣϯɺࢀߟࢿྉʢؤு͍ͬͯͩ͘͞ʂʣ • Q&AɺΞϯέʔτɺަྲྀձ ʢWith Beer!ʣ ຊ೔ͷ಺༰ʢॳ৺ऀ޲͚Ͱ͢ʣ ϋογϡλά͸ #shopifyjpmeetup !
  4. Make Commerce Better For Everyone

  5. Shopify͸Ϋϥ΢υϕʔεͷΦϜχνϟωϧΛ࣮ݱͨ͠ϓϥοτϑΥʔϜͰ͢ɻ ݸਓͷํ͔Βେاۀ·Ͱ҆৺ͯ͠͝ར༻͍͚ͨͩ·͢ɻ 2006 Shopifyϩʔϯν $1,073M ೥ؒརӹֹ (աڈ12ϱ݄) 2,900+ ΞϓϦετΞʹެ։͞Ε͍ͯΔΞϓϦͷ਺ $100B

    ࣄۀऀ༷ͷ૯ྲྀ௨ֹ (ྦྷܭ) 2.1 million ϢχʔΫͷετΞΞΧ΢ϯτ਺ 820,000+ ళฮ —— ~175ϱࠃ 4,000+ ࣾһ਺ 22,000 աڈ12Χ݄ͷؒͰ1ళฮҎ্ͷShopifyετΞΛ
 ϦϦʔεͨ͠ύʔτφʔͷ਺ #shopifyjpmeetup
  6. +300% 2017೥͔Βͷళฮ਺੒௕཰ ೔ຊ #shopifyjpmeetup

  7. ShopifyύʔτφʔΤίγεςϜ Ϛʔνϟϯτ͕ αʔυύʔςΟʔ ΞϓϦΛར༻ 80%+ ύʔτφʔ͔Βͷ঺հ Ϛʔνϟϯτ 200,000+ Shopifyύʔτφʔ͕ಘͨऩӹ͸ 1,320ԯԁ

    (2018೥౓) ΞϓϦ։ൃύʔτφʔ͕ ಘͨऩӹ͸ 200ԯԁ (2018೥౓)
  8. ύʔτφʔ؅ཧը໘ΑΓετΞߏங ߏஙத͸Shopifyͷར༻ྉ0ԁɻࣾ಺༻σϞετΞ΋͝༻ҙɻ σϕϩούʔϓϨϏϡʔͰඇެ։ͷShopify࠷৽ػೳͷ͓ࢼ͕͠Մೳɻ APIͰΧελϚΠζ΍ΞϓϦɾςʔϚͷൢച ։ൃऀ޲͚υΩϡϝϯτΛ๛෋ʹ͝༻ҙɻ ShopifyΞΧσϛʔͷແྉडߨ Shopifyύʔτφʔʹఏڙ͞ΕΔΦϯϥΠϯτϨʔχϯά͓ΑͼೝఆϓϩάϥϜɻ ShopifyύʔτφʔϓϩάϥϜ

  9. ετΞߏஙύʔτφʔ ΫϥΠΞϯτͷֹ݄ར༻ྉ20%Λຖ݄ಘΔ͜ͱ͕Մೳɻ ঺հύʔτφʔ ΫϥΠΞϯτͷֹ݄ར༻ྉ͔݄̎෼ΛγϣοτͰಘΔ͜ͱ͕Մೳɻ ςʔϚσβΠϯύʔτφʔ ςʔϚετΞ্ͷച্͛ͷ࠷େ70%ΛಘΔ͜ͱ͕Մೳɻ ΞϓϦ։ൃύʔτφʔ ΞϓϦετΞ্ͷച্͛ͷ80%ΛಘΔ͜ͱ͕Մೳɻ Shopifyύʔτφ޲͚ϨϕχϡʔγΣΞ

  10. Bold Commerce - ΞϓϦ։ൃύʔτφʔ 2012೥ʹ༑ਓ4ਓͰShopifyΞϓϦͷ։ൃΛ࢝Ίɺ ࠷ॳʹެ։ͨ͠ΞϓϦʮBold Upsellʯ͕େώοτͨ͜͠ͱΛ͖͔͚ͬʹ ຊ֨తʹShopifyͷΞϓϦΛ։ൃ͠·ͨ͠ɻ ݱࡏɺ20Ҏ্ͷύϒϦοΫΞϓϦͱԿඦ΋ͷϓϥΠϕʔτΞϓϦΛ։ൃ͠ɺ ߹ܭ100,000Ҏ্ͷେखاۀؚΜͩސ٬͕ΞϓϦΛ࢖༻͓ͯ͠Γ·͢ɻ

    ࠓ͸250ਓͷैۀһΛ๊͑ɺड৆ܦݧͷ͋Δاۀʹ·Ͱ੒௕͠ɺ ஍ݩͷΧφμͷϚχτόभͰ͸࠷΋ૣ͘੒௕Λ਱͛ͨITاۀͱͳΓ·ͨ͠ɻ Shopifyύʔτφʔͷ੒ޭࣄྫ
  11. • Ϛϧννϟωϧൢച • όοΫΦϑΟεޮ཰Խػೳ •֦ுੑͷߴ͍ج൫ͱՁ֨ • σβΠϯςϯϓϨʔτͷॆ࣮ • ݎ࿚Ͱ҆৺҆શͳΠϯϑϥج൫ Shopifyͷಛ௕ͱ͸ʁ

  12. Shopify ςʔϚετΞ 100छྨҎ্ͷσβΠϯςϯϓϨʔτ https://themes.shopify.com

  13. 2,900+ ެ։͞Ε͍ͯΔAPIͰࣗ༝ʹΧελϚΠζ΍ΞϓϦͷ࡞੒͕Մೳ ച্Ξοϓ ഑ૹ ࡏݿ؅ཧ ސ٬؅ཧ ࡒ຿ɾձܭ ଟݴޠɾଟ௨՟ Ϩϙʔτ ιʔγϟϧ

    ϚʔέςΟϯά Shopify ΞϓϦετΞ https://apps.shopify.com/?locale=ja
  14. ͍ͯ͞Α͍ΑϋϯζΦϯʂ #shopifyjpmeetup ʢੵۃతʹG◦ogleઌੜͷྗΛआΓ͍͖ͯ·͢ʣ

  15. ύʔτφʔΞΧ΢ϯτͷ࡞੒ #shopifyjpmeetup Shopify ύʔτφʔ https://www.shopify.jp/partners

  16. ։ൃετΞͷ࡞੒ #shopifyjpmeetup

  17. ։ൃετΞ΁ϩάΠϯ #shopifyjpmeetup

  18. ςʔϚͱ͸ʁ #shopifyjpmeetup Shopify ΦϯϥΠϯετΞ ςʔϚ https://help.shopify.com/ja/manual/using-themes

  19. ͭ·ΓςʔϚͱ͸ʁ #shopifyjpmeetup ʹ W◦rdpressͷͦΕ

  20. ςʔϚͷΧελϚΠζํ๏ᶃɿηΫγϣϯ #shopifyjpmeetup GUIͰ෦඼Λυϥοά&υϩοϓͰฤूͰ͖Δ͓खܰΧελϚΠζํ๏ ࿅शɿ
 ηΫγϣϯΛυϥοά &υϩοϓͯ͠ΈΑ͏ʂ

  21. ςʔϚͷΧελϚΠζํ๏ᶄɿίʔυฤू #shopifyjpmeetup ςʔϚͷϑΝΠϧͷHTMLΛ௚઀͍͡ΕΔॊೈͳํ๏ ࿅शɿ
 HTMLͷཁૉΛ͍ͬͯ͡ ֎ݟΛม͑ͯΈΑ͏ʂ

  22. ςʔϚͷΧελϚΠζํ๏ᶅɿLiquid #shopifyjpmeetup HTML಺ʹ͞Βʹ੍ޚॲཧΛೖΕͯը໘Λಈతʹදࣔ͢Δํ๏ ࿅शɿ
 ݱࡏͷϖʔδͷ ςʔϚϑΝΠϧ໊Λ දࣔͯ͠ΈΑ͏

  23. Liquidʁʁʁ #shopifyjpmeetup https://help.shopify.com/en/themes/liquid/basics Shopify liquid Tags: {% %} ৚݅෼ذ΍܁Γฦ͠ͷจ Objects:

    {{}} σʔλ಺༰ͷදࣔ Filters: | σʔλͷϑΥʔϚοτ
  24. ิ଍ɿςʔϚͷϑΝΠϧߏ੒ #shopifyjpmeetup Layout > Templates > SectionsʢηΫγϣϯͷ࣮ମʣ Assets:ΠϯΫϧʔυ͢ΔϑΝΠϧ Config:ઃఆϑΝΠϧ Locales:ϩʔΧϦθʔγϣϯʢ຋༁ʣσʔλ

    ɹ※Locales͸ʮݴޠͷฤूʯ͔Β΋มߋՄೳ
  25. TIPSᶃɿܾࡁը໘ͷϝοηʔδ͸ม͑ΒΕΔͷʁ #shopifyjpmeetup ౴͑ɿʮݴޠͷฤूʯ͔Βม͑ΒΕ·͢ Checkout & System -> Offsite gateway redirect

    hint
  26. TIPSᶄɿܾࡁ׬ྃը໘ʹJavaScript͸ຒΊࠐΊΔͷʁ #shopifyjpmeetup ౴͑ɿνΣοΫΞ΢τͷઃఆͷʮ௥ՃεΫϦϓτʯͰຒΊࠐΊ·͢ ※ςʔϚͷઃఆͰ͸ͳ͍͜ͱʹ ஫ҙɻจࣈΛຒΊࠐΜͩ৔߹͸ ςΩετͱͯ͠දࣔ͞Ε·͢

  27. TIPSᶅɿςʔϚʹಠࣗͷೖྗ߲໨Λ࡞Εͳ͍ͷʁ #shopifyjpmeetup ౴͑ɿ Line Item Properties ͱ͍͏δΣωϨʔλ෇͖ͷUI߲໨͕͋Γ·͢ʂ ※ੜ੒͞ΕͨίʔυΛςʔϚʹష Γ෇͚Δͱ஋͕஫จʹ൓ө͞ΕΔ ಠ߲ࣗ໨͕࡞Ε·͢

    https://ui-elements-generator.myshopify.com/pages/line-item-property Shopify Line Item Properties
  28. TIPSᶆɿϩʔΧϧͰࣗ෼ͷΤσΟλͰฤूͰ͖ͳ͍ͷʁ #shopifyjpmeetup ౴͑ɿ Shopify Theme Kit ͱ͍͏ڧྗͳίϚϯυϥΠϯπʔϧ͕͋Γ·͢ʂ ※ίϚϯυϥΠϯͰςʔϚͷ࡞੒ͱొ࿥ɺ มߋ؂ࢹ͕ՄೳɻVS Studioʹ͸Liquidͷ

    extension΋͋Γ·͢ https://shopify.github.io/themekit/ Shopify Theme kit
  29. ωΫετΞΫγϣϯ #shopifyjpmeetup ΋ͬͱཧղΛਂΊ͍ͨํɿ => ؤுͬͯӳޠͷυΩϡϝϯτΛಡΜͰͲΜͲΜखΛಈ͔ͦ͏ʂ Կ͔࣭໰͕ग़͖ͯͨΒʁɿ => ೔ຊޠͷϑΥʔϥϜͰ೔ຊޠͰ࣭໰ͯ͠ΈΑ͏ʂ https://help.shopify.com/en/themes https://community.shopify.com/c/Shopify-Community-Japan/ct-p/jp

  30. Shopify Japan Community #shopifyjpmeetup https://www.facebook.com/groups/218016361970323/ ϢʔβʔओମͷίϛϡχςΟɿ => ଞͷ஥ؒͱͭͳ͕ͬͯ৘ใަ׵ͯ͠ΈΑ͏ʂ

  31. Q&AɺΞϯέʔτʢ౴͑ͯͶʂʣ #shopifyjpmeetup

  32. #shopifyjpmeetup Thank you!