Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Theme_workshop_20190919.pdf
Search
benzookapi
September 19, 2019
0
310
Theme_workshop_20190919.pdf
benzookapi
September 19, 2019
Tweet
Share
More Decks by benzookapi
See All by benzookapi
技術をお金と貢献に変える、Shopifyテーマとアプリの開発
benzookapi
1
2k
Shopify Storefront APIを使った PWA e-commerceの解説とデモ
benzookapi
0
450
DevRel for tech. entrepreneurs: Beyond platform partners
benzookapi
0
130
Shopifyを使ったヘッドレスコマースの 実現方法と事例
benzookapi
0
170
React + GraphQL を使ったShopify Appの作り方と そのマネタイズ方法
benzookapi
1
1.3k
Shopifyアプリエコシステムで始める 第3のスキルマネタイズ
benzookapi
0
4.2k
Tech. Blog TIPS
benzookapi
0
270
Our new DevRel: Invention of scaling out partner ecosystem
benzookapi
0
260
WordPressとShopifyでECサイトを作ろう
benzookapi
0
1k
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
570
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Speed Design
sergeychernyshev
27
810
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Statistics for Hackers
jakevdp
797
220k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
380
Agile that works and the tools we love
rasmusluckow
328
21k
Transcript
#shopifyjpmeetup αΠτ੍࡞ऀ͚ ςʔϚϫʔΫγϣοϓ
• Junichi Okamura, Technical Partner Manager at Shopify • @benzookapi
• API Lover/Midnight Developer/MANGA Creator/Beer Lover/App Hacker Who am I?
• Shopifyͱʁʢ؆୯ʹʣ • ShopifyύʔτφʔϓϩάϥϜͱʢ؆୯ʹʣ • ύʔτφʔΞΧϯτͱ։ൃετΞͷηοτΞοϓʢ؆୯ʹʣ • ShopifyςʔϚͱʢ؆୯ʹʣ • ςʔϚͷΧελϚΠζํ๏͋Ε͜Εʢஸೡʹʣ
• ੍ޚݴޠliquidʹ͍ͭͯʢؤுΓ·͢ʣ • ωΫετΞΫγϣϯɺࢀߟࢿྉʢؤு͍ͬͯͩ͘͞ʂʣ • Q&AɺΞϯέʔτɺަྲྀձ ʢWith Beer!ʣ ຊͷ༰ʢॳ৺ऀ͚Ͱ͢ʣ ϋογϡλά #shopifyjpmeetup !
Make Commerce Better For Everyone
ShopifyΫϥυϕʔεͷΦϜχνϟωϧΛ࣮ݱͨ͠ϓϥοτϑΥʔϜͰ͢ɻ ݸਓͷํ͔Βେاۀ·Ͱ҆৺ͯ͠͝ར༻͍͚ͨͩ·͢ɻ 2006 Shopifyϩʔϯν $1,073M ؒརӹֹ (աڈ12ϱ݄) 2,900+ ΞϓϦετΞʹެ։͞Ε͍ͯΔΞϓϦͷ $100B
ࣄۀऀ༷ͷ૯ྲྀ௨ֹ (ྦྷܭ) 2.1 million ϢχʔΫͷετΞΞΧϯτ 820,000+ ళฮ —— ~175ϱࠃ 4,000+ ࣾһ 22,000 աڈ12Χ݄ͷؒͰ1ళฮҎ্ͷShopifyετΞΛ ϦϦʔεͨ͠ύʔτφʔͷ #shopifyjpmeetup
+300% 2017͔Βͷళฮ ຊ #shopifyjpmeetup
ShopifyύʔτφʔΤίγεςϜ Ϛʔνϟϯτ͕ αʔυύʔςΟʔ ΞϓϦΛར༻ 80%+ ύʔτφʔ͔Βͷհ Ϛʔνϟϯτ 200,000+ Shopifyύʔτφʔ͕ಘͨऩӹ 1,320ԯԁ
(2018) ΞϓϦ։ൃύʔτφʔ͕ ಘͨऩӹ 200ԯԁ (2018)
ύʔτφʔཧը໘ΑΓετΞߏங ߏஙதShopifyͷར༻ྉ0ԁɻࣾ༻σϞετΞ͝༻ҙɻ σϕϩούʔϓϨϏϡʔͰඇެ։ͷShopify࠷৽ػೳͷ͓ࢼ͕͠Մೳɻ APIͰΧελϚΠζΞϓϦɾςʔϚͷൢച ։ൃऀ͚υΩϡϝϯτΛ๛ʹ͝༻ҙɻ ShopifyΞΧσϛʔͷແྉडߨ Shopifyύʔτφʔʹఏڙ͞ΕΔΦϯϥΠϯτϨʔχϯά͓ΑͼೝఆϓϩάϥϜɻ ShopifyύʔτφʔϓϩάϥϜ
ετΞߏஙύʔτφʔ ΫϥΠΞϯτͷֹ݄ར༻ྉ20%Λຖ݄ಘΔ͜ͱ͕Մೳɻ հύʔτφʔ ΫϥΠΞϯτͷֹ݄ར༻ྉ͔݄̎ΛγϣοτͰಘΔ͜ͱ͕Մೳɻ ςʔϚσβΠϯύʔτφʔ ςʔϚετΞ্ͷച্͛ͷ࠷େ70%ΛಘΔ͜ͱ͕Մೳɻ ΞϓϦ։ൃύʔτφʔ ΞϓϦετΞ্ͷച্͛ͷ80%ΛಘΔ͜ͱ͕Մೳɻ Shopifyύʔτφ͚ϨϕχϡʔγΣΞ
Bold Commerce - ΞϓϦ։ൃύʔτφʔ 2012ʹ༑ਓ4ਓͰShopifyΞϓϦͷ։ൃΛ࢝Ίɺ ࠷ॳʹެ։ͨ͠ΞϓϦʮBold Upsellʯ͕େώοτͨ͜͠ͱΛ͖͔͚ͬʹ ຊ֨తʹShopifyͷΞϓϦΛ։ൃ͠·ͨ͠ɻ ݱࡏɺ20Ҏ্ͷύϒϦοΫΞϓϦͱԿඦͷϓϥΠϕʔτΞϓϦΛ։ൃ͠ɺ ߹ܭ100,000Ҏ্ͷେखاۀؚΜͩސ٬͕ΞϓϦΛ༻͓ͯ͠Γ·͢ɻ
ࠓ250ਓͷैۀһΛ๊͑ɺडܦݧͷ͋Δاۀʹ·Ͱ͠ɺ ݩͷΧφμͷϚχτόभͰ࠷ૣ͘Λ͛ͨITاۀͱͳΓ·ͨ͠ɻ Shopifyύʔτφʔͷޭࣄྫ
• Ϛϧννϟωϧൢച • όοΫΦϑΟεޮԽػೳ •֦ுੑͷߴ͍ج൫ͱՁ֨ • σβΠϯςϯϓϨʔτͷॆ࣮ • ݎ࿚Ͱ҆৺҆શͳΠϯϑϥج൫ Shopifyͷಛͱʁ
Shopify ςʔϚετΞ 100छྨҎ্ͷσβΠϯςϯϓϨʔτ https://themes.shopify.com
2,900+ ެ։͞Ε͍ͯΔAPIͰࣗ༝ʹΧελϚΠζΞϓϦͷ࡞͕Մೳ ച্Ξοϓ ૹ ࡏݿཧ ސ٬ཧ ࡒɾձܭ ଟݴޠɾଟ௨՟ Ϩϙʔτ ιʔγϟϧ
ϚʔέςΟϯά Shopify ΞϓϦετΞ https://apps.shopify.com/?locale=ja
͍ͯ͞Α͍ΑϋϯζΦϯʂ #shopifyjpmeetup ʢੵۃతʹG◦ogleઌੜͷྗΛआΓ͍͖ͯ·͢ʣ
ύʔτφʔΞΧϯτͷ࡞ #shopifyjpmeetup Shopify ύʔτφʔ https://www.shopify.jp/partners
։ൃετΞͷ࡞ #shopifyjpmeetup
։ൃετΞϩάΠϯ #shopifyjpmeetup
ςʔϚͱʁ #shopifyjpmeetup Shopify ΦϯϥΠϯετΞ ςʔϚ https://help.shopify.com/ja/manual/using-themes
ͭ·ΓςʔϚͱʁ #shopifyjpmeetup ʹ W◦rdpressͷͦΕ
ςʔϚͷΧελϚΠζํ๏ᶃɿηΫγϣϯ #shopifyjpmeetup GUIͰ෦Λυϥοά&υϩοϓͰฤूͰ͖Δ͓खܰΧελϚΠζํ๏ ࿅शɿ ηΫγϣϯΛυϥοά &υϩοϓͯ͠ΈΑ͏ʂ
ςʔϚͷΧελϚΠζํ๏ᶄɿίʔυฤू #shopifyjpmeetup ςʔϚͷϑΝΠϧͷHTMLΛ͍͡ΕΔॊೈͳํ๏ ࿅शɿ HTMLͷཁૉΛ͍ͬͯ͡ ֎ݟΛม͑ͯΈΑ͏ʂ
ςʔϚͷΧελϚΠζํ๏ᶅɿLiquid #shopifyjpmeetup HTMLʹ͞Βʹ੍ޚॲཧΛೖΕͯը໘Λಈతʹදࣔ͢Δํ๏ ࿅शɿ ݱࡏͷϖʔδͷ ςʔϚϑΝΠϧ໊Λ දࣔͯ͠ΈΑ͏
Liquidʁʁʁ #shopifyjpmeetup https://help.shopify.com/en/themes/liquid/basics Shopify liquid Tags: {% %} ݅ذ܁Γฦ͠ͷจ Objects:
{{}} σʔλ༰ͷදࣔ Filters: | σʔλͷϑΥʔϚοτ
ิɿςʔϚͷϑΝΠϧߏ #shopifyjpmeetup Layout > Templates > SectionsʢηΫγϣϯͷ࣮ମʣ Assets:ΠϯΫϧʔυ͢ΔϑΝΠϧ Config:ઃఆϑΝΠϧ Locales:ϩʔΧϦθʔγϣϯʢ༁ʣσʔλ
ɹ※Localesʮݴޠͷฤूʯ͔ΒมߋՄೳ
TIPSᶃɿܾࡁը໘ͷϝοηʔδม͑ΒΕΔͷʁ #shopifyjpmeetup ͑ɿʮݴޠͷฤूʯ͔Βม͑ΒΕ·͢ Checkout & System -> Offsite gateway redirect
hint
TIPSᶄɿܾࡁྃը໘ʹJavaScriptຒΊࠐΊΔͷʁ #shopifyjpmeetup ͑ɿνΣοΫΞτͷઃఆͷʮՃεΫϦϓτʯͰຒΊࠐΊ·͢ ※ςʔϚͷઃఆͰͳ͍͜ͱʹ ҙɻจࣈΛຒΊࠐΜͩ߹ ςΩετͱͯ͠දࣔ͞Ε·͢
TIPSᶅɿςʔϚʹಠࣗͷೖྗ߲Λ࡞Εͳ͍ͷʁ #shopifyjpmeetup ͑ɿ Line Item Properties ͱ͍͏δΣωϨʔλ͖ͷUI߲͕͋Γ·͢ʂ ※ੜ͞ΕͨίʔυΛςʔϚʹష Γ͚Δͱ͕จʹө͞ΕΔ ಠ߲͕ࣗ࡞Ε·͢
https://ui-elements-generator.myshopify.com/pages/line-item-property Shopify Line Item Properties
TIPSᶆɿϩʔΧϧͰࣗͷΤσΟλͰฤूͰ͖ͳ͍ͷʁ #shopifyjpmeetup ͑ɿ Shopify Theme Kit ͱ͍͏ڧྗͳίϚϯυϥΠϯπʔϧ͕͋Γ·͢ʂ ※ίϚϯυϥΠϯͰςʔϚͷ࡞ͱొɺ มߋࢹ͕ՄೳɻVS StudioʹLiquidͷ
extension͋Γ·͢ https://shopify.github.io/themekit/ Shopify Theme kit
ωΫετΞΫγϣϯ #shopifyjpmeetup ͬͱཧղΛਂΊ͍ͨํɿ => ؤுͬͯӳޠͷυΩϡϝϯτΛಡΜͰͲΜͲΜखΛಈ͔ͦ͏ʂ Կ͔࣭͕ग़͖ͯͨΒʁɿ => ຊޠͷϑΥʔϥϜͰຊޠͰ࣭ͯ͠ΈΑ͏ʂ https://help.shopify.com/en/themes https://community.shopify.com/c/Shopify-Community-Japan/ct-p/jp
Shopify Japan Community #shopifyjpmeetup https://www.facebook.com/groups/218016361970323/ ϢʔβʔओମͷίϛϡχςΟɿ => ଞͷؒͱͭͳ͕ͬͯใަͯ͠ΈΑ͏ʂ
Q&AɺΞϯέʔτʢ͑ͯͶʂʣ #shopifyjpmeetup
#shopifyjpmeetup Thank you!