Shopify Theme App Extensions (For Theme Developers)

No video

Shopify Theme App Extensions (For Theme Developers)

Рет қаралды 23,543

Күн бұрын

Wanna go deeper into Shopify Theme Development? Join my mastermind community.
shopifythemede...
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....
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...
My travel channel:
/ christhefreelancer
My website:
christhefreela...
My socials:
Instagram: / christhefreelancer
Facebook: / christhefreelancer
Twitter: / chrisrdodd

Пікірлер: 73

@Trowa159 6 ай бұрын

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.

@chrisatlee 6 ай бұрын

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 3 ай бұрын

@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 5 ай бұрын

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

@AmruthaSoman-c3q Ай бұрын

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

@user-xw2xb2uy9u 5 ай бұрын

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

@itsmatt82 6 ай бұрын

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 ...

@AGhostyProduction 19 күн бұрын

Hey Chris - do you know if the ability to perform Http POST requests with App Proxies is no longer possible? I managed to develop a couple apps last year that now throw HTTP 400’s whenever attempting to perform a POST request to my external API services.

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

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?

@mitchellbarnow1709 Жыл бұрын

Good to see you again Chris!

@pixobe 7 ай бұрын

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?

@johnnyg2983 4 ай бұрын

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

@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

@digitalnomadg 8 ай бұрын

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

@nihalmalik7546 6 ай бұрын

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

@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 Жыл бұрын

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

@JwlzStylE Жыл бұрын

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

@nihalmalik7546 6 ай бұрын

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?

@pedrohgdl 7 ай бұрын

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...

@lickey8919 5 ай бұрын

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 5 ай бұрын

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

@jayachandrann8414 11 ай бұрын

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

@stevesmith0624 10 ай бұрын

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

@BF-non 7 ай бұрын

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

@CodewithChristheFreelancer 6 ай бұрын

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)

@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?

@improvingwithfun 8 ай бұрын

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?

@wellenzhong1440 5 ай бұрын

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 3 ай бұрын

kzfaq.info/get/bejne/pp6EmJOXybSXmJc.htmlsi=FCpUYOHtDaGh6tY6

@pawanunique500 Жыл бұрын

Excellent work :)

@pocostudio697 11 ай бұрын

Thanks for the video!

@josegalicia327 9 ай бұрын

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

@CodewithChristheFreelancer 9 ай бұрын

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

@josegalicia327 9 ай бұрын

@@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

@strot2103 9 ай бұрын

Great video!

@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?

@resulterror2381 9 ай бұрын

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 4 ай бұрын

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

@daniel.ehrhardt 9 ай бұрын

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

@CodewithChristheFreelancer 9 ай бұрын

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

@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 Жыл бұрын

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

@TomasMaldonado-tq7sn 5 ай бұрын

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

@CodewithChristheFreelancer 5 ай бұрын

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

@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 Жыл бұрын

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

@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.

@nri_raj Жыл бұрын

Great video ❤

@aidenferiani6965 Жыл бұрын

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 Жыл бұрын

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

@justicefool3942 Жыл бұрын

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

@digitalnomadg 8 ай бұрын

How to call thirdparty apis???

@lickey8919 5 ай бұрын

Use javascript?

@venkimithu 8 ай бұрын

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 8 ай бұрын

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 8 ай бұрын

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

@CodewithChristheFreelancer 8 ай бұрын

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

@ahmedfathy418 Жыл бұрын

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

@marco-coding8242 11 ай бұрын

Hello please with theme extension is it possible to make popup

@abdellah4888 11 ай бұрын

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-by4og3mp9g Жыл бұрын

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

@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.