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
320
Theme_workshop_20190919.pdf
benzookapi
September 19, 2019
Tweet
Share
More Decks by benzookapi
See All by benzookapi
技術をお金と貢献に変える、Shopifyテーマとアプリの開発
benzookapi
1
2.1k
Shopify Storefront APIを使った PWA e-commerceの解説とデモ
benzookapi
0
520
DevRel for tech. entrepreneurs: Beyond platform partners
benzookapi
0
160
Shopifyを使ったヘッドレスコマースの 実現方法と事例
benzookapi
0
200
React + GraphQL を使ったShopify Appの作り方と そのマネタイズ方法
benzookapi
1
1.3k
Shopifyアプリエコシステムで始める 第3のスキルマネタイズ
benzookapi
0
4.3k
Tech. Blog TIPS
benzookapi
0
290
Our new DevRel: Invention of scaling out partner ecosystem
benzookapi
0
280
WordPressとShopifyでECサイトを作ろう
benzookapi
0
1.1k
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Unsuck your backbone
ammeep
671
58k
Music & Morning Musume
bryan
46
6.7k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Embracing the Ebb and Flow
colly
86
4.8k
Scaling GitHub
holman
461
140k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Facilitating Awesome Meetings
lara
54
6.5k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Art, The Web, and Tiny UX
lynnandtonic
301
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!