Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Theme_workshop_20190919.pdf
Junichi Okamura
September 19, 2019
0
290
Theme_workshop_20190919.pdf
Junichi Okamura
September 19, 2019
Tweet
Share
More Decks by Junichi Okamura
See All by Junichi Okamura
Shopify Storefront APIを使った PWA e-commerceの解説とデモ
benzookapi
0
94
DevRel for tech. entrepreneurs: Beyond platform partners
benzookapi
0
51
Shopifyを使ったヘッドレスコマースの 実現方法と事例
benzookapi
0
66
React + GraphQL を使ったShopify Appの作り方と そのマネタイズ方法
benzookapi
1
820
Shopifyアプリエコシステムで始める 第3のスキルマネタイズ
benzookapi
0
2.5k
Tech. Blog TIPS
benzookapi
0
150
Our new DevRel: Invention of scaling out partner ecosystem
benzookapi
0
140
WordPressとShopifyでECサイトを作ろう
benzookapi
0
790
AWS EventBridgeを活用したShopifyアプリの サーバーレス開発
benzookapi
0
1.5k
Featured
See All Featured
Clear Off the Table
cherdarchuk
79
280k
WebSockets: Embracing the real-time Web
robhawkes
57
5k
Unsuck your backbone
ammeep
659
55k
Designing the Hi-DPI Web
ddemaree
272
32k
Visualization
eitanlees
124
11k
Thoughts on Productivity
jonyablonski
43
2.2k
How to train your dragon (web standard)
notwaldorf
57
3.8k
Raft: Consensus for Rubyists
vanstee
126
5.4k
Six Lessons from altMBA
skipperchong
14
1.3k
What's new in Ruby 2.0
geeforr
336
30k
Embracing the Ebb and Flow
colly
73
3.3k
Faster Mobile Websites
deanohume
294
28k
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!