Shopify Theme App Extensions (For Theme Developers)

Wanna go deeper into Shopify Theme Development? Join my mastermind community.
shopifythemedeveloper.com/
Or sign up for a free trial with Skillshare and take my Shopify class for free:
skl.sh/2MCrJIE
Do you run a business on Shopify and want help with your store? Get in contact
form.typeform.com/to/Zg0k4BEP
Episode Overview
-----------------------------
Theme and app development have always been two different things in Shopify.
But if apps and themes can both affect the front end, how do we know for sure what features exist on which platform?
Well, in today’s video, I’m a take a long-overdue look at Shopify Theme App Extensions and together, we’ll learn how Shopify Apps interact with the theme since Online Store 2.0.
Chapters:
00:00 Intro and theory
03:53 Creating our own theme app extension
19:26 App Blocks - insertion and code review
28:41 App Embed Blocks
37:29 Outro
Check out my stuff online...
My Skillshare.com channel:
www.skillshare.com/r/profile/...
My travel channel:
/ christhefreelancer
My website:
christhefreelancer.com
My socials:
Instagram: / christhefreelancer
Facebook: / christhefreelancer
Twitter: / chrisrdodd

Пікірлер: 72

  • @mitchellbarnow1709
    @mitchellbarnow1709 Жыл бұрын

    Good to see you again Chris!

  • @Trowa159
    @Trowa1594 ай бұрын

    dude, thank you so so much for this video. Was looking at Shopify's documentation for like a week and it made no sense with how the app embed work. Your video made it so clear to me.

  • @pawanunique500
    @pawanunique50011 ай бұрын

    Excellent work :)

  • @pocostudio697
    @pocostudio69710 ай бұрын

    Thanks for the video!

  • @chrisatlee
    @chrisatlee4 ай бұрын

    Hey Chris, great overview, thank you! Just a quick clarification: the liquid within theme app extensions is hosted within Shopify's infrastructure, not the app's backend server. So no worries about performance or anything like that. 35:20 Source: I'm one of the devs involved in creating theme app extensions.

  • @dato3218

    @dato3218

    Ай бұрын

    @chrisatlee So theme app extensions are loaded simultaneously with the theme itself? Not as some apps that are loaded afterwards and create some blinking on the site?

  • @suhassasuke7435
    @suhassasuke74353 ай бұрын

    Thanks chris it was really a great help to understand how shopify app extension really work. you helped me a lot. thanks once again.🤩🥳

  • @nri_raj
    @nri_raj Жыл бұрын

    Great video ❤

  • @strot2103
    @strot21037 ай бұрын

    Great video!

  • @jayachandrann8414
    @jayachandrann84149 ай бұрын

    Hi Chris, it was extremely extremely helpful. I would appreciate if you could do a video on hosting the app on Azure and AWS infrastructure

  • @pascal-forster-diselva
    @pascal-forster-diselva4 ай бұрын

    Thank you very much for this nice introduction into theme app extensions. Do you know if we can somehow preview our local changes without having to create a new version?

  • @stevesmith0624
    @stevesmith06248 ай бұрын

    can you make video on building a shopify app from scratch and focus on graphql API and Shopify Functions? great video thanks

  • @itsmatt82
    @itsmatt824 ай бұрын

    Great tutorial, thanks very much. Any chance you would do a video on Web PIxels App extensions? I'm trying to get one app done, but with the new version of SHopify CLI everything seems a bit different ...

  • @deepakmalik2422
    @deepakmalik2422 Жыл бұрын

    Hi Chris, I have a doubt and it's kind of urgent for my work, your help will be highly appreciated. I followed your video to add an extension for an app. The original app was created without cli way back , and as migration seemed to be complicated , I created new one and tried. I pushed extension with dev command, and I created a version and published it. Now I tried replacing entire repo code with older app version, where even the extension folder is not there, but still app is showing the extension in partner store, as well as in test store where I installed it. Will it work like that also?

  • @improvingwithfun
    @improvingwithfun6 ай бұрын

    Hi, thanks for the video! Small question, imagine I make some changes in the code locally to my extension, but how do I view it locally? Do I really have to run deploy each time?

  • @raimerencarnacion1238
    @raimerencarnacion1238 Жыл бұрын

    The best content for Shopify theme development can be found on this channel, thanks, Chris. I'm considering switching from WordPress to Shopify. Do you believe it's a wise decision? Is there ample demand for Shopify developers in the market?

  • @CodewithChristheFreelancer

    @CodewithChristheFreelancer

    Жыл бұрын

    100% I switched from Wordpress to Shopify back in 2019 and it was the best career decision of my life.

  • @JwlzStylE

    @JwlzStylE

    11 ай бұрын

    I switched from wordpress to shopify too. never regretted it.

  • @arifurrahman5993
    @arifurrahman5993 Жыл бұрын

    Thank you, for your effort and clearly describe. :) Can you guide how can i call js file inside the app block depending on the app block settings condition :)

  • @CodewithChristheFreelancer

    @CodewithChristheFreelancer

    Жыл бұрын

    Just include the JS file in the assets folder as you normally would with a theme, no?

  • @pixobe
    @pixobe5 ай бұрын

    How can I handle various plans on my extension? I mean depending on the plan the merchant is subscribed to my app , I need to enable different features. How can I do that?

  • @nihalmalik7546
    @nihalmalik75464 ай бұрын

    i have a question i have a running server and want to add theme extension to an existing app created with php, what i need to do?

  • @digitalnomadg
    @digitalnomadg7 ай бұрын

    Can you please please show how can I use third party api like doordash and implement logic to theme app extension. Pls

  • @AmruthaSoman-c3q
    @AmruthaSoman-c3q3 күн бұрын

    I just learning to make Shopify custom app using laravel. and i have some doubts. i need to inject buttons or metafields value to the theme when the app is installed. by using custom code

  • @nihalmalik7546
    @nihalmalik75464 ай бұрын

    and one more question how you going to use this app in multiple stores

  • @pedrohgdl
    @pedrohgdl5 ай бұрын

    I have noticed an issue recently, related to the app theme extension. If you want to charge by a subscription model, the user usually need to pay it before use it, but as soon as the app is installed, the user can use the app theme extension, they have a condition functionality but it doesn't check the payment status by default, at least on testing mode... Did anyone here found a better simple solution? Otherwise I would need to create an endpoint on my application to check the status of payment, which will not be that good...

  • @2an_sound
    @2an_sound Жыл бұрын

    I cannot create extensions at all. I currently have zero extensions in my apps in my partner account, yet I get the error "You have reached the limit for the number of extensions you can create." after running `npm run shopify app generate extension` Partner support is looking into this for me. Anyone else experiencing this?

  • @johnnyg2983
    @johnnyg29832 ай бұрын

    DO YOU HAVE TO DO ALL THIS FOR EVERY SINGLE LISTING ?

  • @baonguyen8421
    @baonguyen8421 Жыл бұрын

    how can I change the store to push this extension, ex: Currently, you are in shop 3, and shop 3 has this app, how can you push this app to another store of you? thank you so much I'm working with a Shopify collaborator partner (the client invited me), in Partner Overview -> Test your app -> select store: I don't see the Shopify collaborator partner, just see my store When I use npm run dev -- --reset and select the store, I just see my store, don't see the collaborator store Do you know why? thank you so much

  • @wellenzhong1440
    @wellenzhong14403 ай бұрын

    Hello bro, thanks for your video first of all. I saw your apps list which has a "shopify vue app" installed , i just want to made an app by vue, is there any tutorial?

  • @CodewithChristheFreelancer

    @CodewithChristheFreelancer

    2 ай бұрын

    kzread.info/dash/bejne/omyIx5KflLGZmMY.htmlsi=FCpUYOHtDaGh6tY6

  • @resulterror2381
    @resulterror23817 ай бұрын

    hi chris i wanna ask you, when i create theme extension, why the folder web/frontend isn't appear ? and there is no web options in workspaces at file package.json thank you

  • @George-vo1fh

    @George-vo1fh

    3 ай бұрын

    did you find the solution? i face the same problem aswell... i'd really appreciate it if you reply

  • @josegalicia327
    @josegalicia3277 ай бұрын

    Hello Chris, what should I do to add the raiting in each product in the collection pages? please advise me. thanks

  • @CodewithChristheFreelancer

    @CodewithChristheFreelancer

    7 ай бұрын

    Assuming you mean 'product reviews' here, it would depend entirely on what app you are using for that feature.

  • @josegalicia327

    @josegalicia327

    7 ай бұрын

    @@CodewithChristheFreelancer well let me explain you more, I'm creating a new app and I would like to add a special text in each product in the collection pages. I only could add it in the product pages, something similar to the product reviews in your video, but I'm not sure what I should do to achieve it

  • @user-xw2xb2uy9u
    @user-xw2xb2uy9u4 ай бұрын

    I am face this problem like Find this app in the pages where you work This app’s features are available on pages in your Admin. To learn more, visit the app’s about page. how to solve this please tell me

  • @ahmedfathy418
    @ahmedfathy418 Жыл бұрын

    hi, i need road map for shopify developer from you ,skills ?

  • @Jan-jf4th
    @Jan-jf4th5 ай бұрын

    Would you say that this is the best way to add theme customizations to clients so they can easily update their themes?

  • @CodewithChristheFreelancer

    @CodewithChristheFreelancer

    5 ай бұрын

    This is only if you are building an app for a client. If the customisation doesn't require an app, just use a regular Shopify section (customisable in the theme editor)

  • @daniel.ehrhardt
    @daniel.ehrhardt7 ай бұрын

    I would like to have a section with blocks inside a theme-extension is that possible?

  • @CodewithChristheFreelancer

    @CodewithChristheFreelancer

    7 ай бұрын

    Not in the theme editor (at present). This would be something you would program into the app.

  • @aidenferiani6965
    @aidenferiani696511 ай бұрын

    hey! I noticed that there's no web folder for me after creating the extension . I'm doing this through windows so I'm not sure if any alternative action is needed

  • @CodewithChristheFreelancer

    @CodewithChristheFreelancer

    11 ай бұрын

    The web folder should be created even before you generate the extension so that sounds kinda strange to me.

  • @justicefool3942

    @justicefool3942

    10 ай бұрын

    I have the same issue. No Web folder. I'm on Linux.

  • @lickey8919
    @lickey89193 ай бұрын

    When i try to run `node run dev` I get an error saying I dont have Ruby installed even though im working in node. What is going wrong? You didnt mention anything about a Ruby dependency and neither does the Shopify CLI Requirements Docs.

  • @jagamohan-81

    @jagamohan-81

    3 ай бұрын

    Liquid file runs in Ruby ,so you have to install Ruby .

  • @user-by4og3mp9g
    @user-by4og3mp9g Жыл бұрын

    How can we enable the app to embed in non Dawn theme?

  • @CodewithChristheFreelancer

    @CodewithChristheFreelancer

    Жыл бұрын

    Had it in my notes but missed it during recording. You can enable any section to accept an app block as one of its blocks by adding a block type object to the schema with type of @app. You can see an example of this within the dawn theme. Other than that, it should work the same way no matter what theme you are on.

  • @venkimithu
    @venkimithu6 ай бұрын

    Hi Chris, it was extremely extremely helpful. I am developing a spin game with from fill where users can form fill the email and mobile number. I have developed the game and form. Can you please help me with form data saving part and displaying it on admin? It will really help me.

  • @CodewithChristheFreelancer

    @CodewithChristheFreelancer

    6 ай бұрын

    I believe you'll need to create some sort of app for that because Shopify only accepts data from user input in a few select cases (such as submitting an order, a comment or logging in)

  • @venkimithu

    @venkimithu

    6 ай бұрын

    ​@@CodewithChristheFreelancer I am new in shopify. Can you please do a video on it. It will really help me.

  • @CodewithChristheFreelancer

    @CodewithChristheFreelancer

    6 ай бұрын

    Not exactly my expertise at the moment but I'll consider it for the future.

  • @innoxentmuaz8205
    @innoxentmuaz8205 Жыл бұрын

    How to use node APIs in theme app extension? Is there any way to use react components inside theme app extension? Kindly respond ASAP.

  • @CodewithChristheFreelancer

    @CodewithChristheFreelancer

    Жыл бұрын

    That would be within the app and not the app extension (ie. the 'web' folder)

  • @innoxentmuaz8205

    @innoxentmuaz8205

    Жыл бұрын

    @@CodewithChristheFreelancer ofcourse those APIs are in web folder and my extension folder is in main directory now looking to use those API data which I am using in my react app frontend inside web folder.

  • @marco-coding8242
    @marco-coding82429 ай бұрын

    Hello please with theme extension is it possible to make popup

  • @abdellah4888

    @abdellah4888

    9 ай бұрын

    yeah you can just create the part of the popup with html&css in the liquid file then you display and hide it using javascript

  • @user-em4cz4pp5z
    @user-em4cz4pp5z11 ай бұрын

    how can install app-theme-extension in the existing app? because this is not created in CLI

  • @CodewithChristheFreelancer

    @CodewithChristheFreelancer

    11 ай бұрын

    What do you mean 'this is not created in CLI' ?

  • @savanmukati884

    @savanmukati884

    11 ай бұрын

    @@CodewithChristheFreelancer yes exactly.

  • @savanmukati884

    @savanmukati884

    11 ай бұрын

    We need to install a theme-app-extension in our existing app

  • @CodewithChristheFreelancer

    @CodewithChristheFreelancer

    11 ай бұрын

    are you saying the CLI command is not working for you?

  • @user-em4cz4pp5z

    @user-em4cz4pp5z

    11 ай бұрын

    Hii can you suggest to me we have which type of app block to create so that our app becomes approved on shopify.

  • @digitalnomadg
    @digitalnomadg6 ай бұрын

    How to call thirdparty apis???

  • @lickey8919

    @lickey8919

    3 ай бұрын

    Use javascript?

  • @rajanlagah4529
    @rajanlagah452910 ай бұрын

    Can we have extension without the app?

  • @CodewithChristheFreelancer

    @CodewithChristheFreelancer

    10 ай бұрын

    shopify.dev/docs/apps/app-extensions/extension-only-apps

  • @groovebird812
    @groovebird81210 ай бұрын

    This is a great video. What i don't understand is why creating a metafield for the ratings? Ratings come from the customers and not a metafield :-)

  • @CodewithChristheFreelancer

    @CodewithChristheFreelancer

    10 ай бұрын

    The value needs to be stored somewhere now? The app itself would handle the user input. The metafield is just for storage.

  • @TomasMaldonado-tq7sn
    @TomasMaldonado-tq7sn4 ай бұрын

    How did you figure this out? Shopify's documentation make no sense.

  • @CodewithChristheFreelancer

    @CodewithChristheFreelancer

    4 ай бұрын

    Bit of following the documentation, bit of using trial and error.