My goodness, thank you so much for this video. Shopify never does a good job explaining this kind of stuff. I've been working with the same company for years, and every time it's time to do something in Shopify that's new or different, channels like yours are always the ones to save me from their documentation which is all over the place. Much appreciated! Subbed and liked!

This is pretty straightforward. Beneficial man, thank you. keep uploading new videos like this. I am a new subscriber here.

everything is concise and clear, very well explained. Thanks

Amazing content! Thank you so much

Very well explained

i watch so many video and none of them were even close to this one , thanks

Nice video 👍

Hi this is really helpful. It would be nice to make a video about build checkout ui extensions that talk to an external backend and implement billing with the Shopify billing api.

Thanks for this video, this has been very helpful to understand the customisation on the checkout, I was looking for adding a loyalty point redemption module in the same place where you have got the variant. Do let me know if there is any other video which helps us to check the model implementation.

@stackingcontext

8 ай бұрын

Assuming your loyalty points backend has an API you can access you would just have to set `network_access = true` in your shopify.extension.toml and interact with your loyalty points API as needed using `fetch`, then update the UI accordingly based on the response you get from the API. If you need a way to identify the customer to know where to add the loyalty points to the Buyer Identity API may come useful shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/buyer-identity

Very detailed video & its very helpful , Can you please create a video for creaing a custom app and deploying it to AWS using docker , Thanks

it's a great video example of creating app, thanks! P.S. If you record your screen, please make video resolution at least 1080p!

@stackingcontext

2 ай бұрын

Thank you! The resolution has been fixed in newer videos so those are in 1080p now.

Thanks

This is really helpful - Thanks! How did you know what styling options you could use? I know you showed components that where possible but I didn't see how you knew what to use so you could apply the styling you added

@stackingcontext

8 ай бұрын

Hey there! I'm glad you found the video useful. For the styling options it was mainly going through the UI component's documentation and checking which props each one of them received. Pay special attention to the components under the Structure category in the docs and which props can be passed to them, as that's what will be primarily used for layout.

Can you show how to use metafields to control the upsell product?

Hi, please can you create a video covering setting up the Shopify billing api and how to properly add billing to a Shopify app whether it's just a checkout ui extension or otherwise?

@theadal8372

Ай бұрын

Have you found solution for this ?? please explain.

could you please make one video on how to enable the checkout ui extensions only for subscribed users. that would be really helpful or redirect me to the source explaining that.

@stackingcontext

Ай бұрын

You can tag subscribed customers, then from your extension query the customer object and if the tag is not present return null to render no checkout extension ui for unsubscribed customers.

@theadal8372

Ай бұрын

@@stackingcontext Thankyou I'll try this one for sure.

Hey, great tutorial! Is it possible to retrieve the value of customer type metafields within the checkout when user is logged in? I've attempted it, but it seems to only work with product metafields.

@stackingcontext

2 ай бұрын

Thank you! About your question, I haven't tested this, but you could try getting the customer id from the useCustomer hook and then running a query to the admin API where you request the metafield you need from the customer with that id.

Could you have just added another extension to the shopify.extension.toml file instead of deleting that previous one? Or do you have to create another .toml file?

Can u make all templates pages from scratch in a series.

Thanks for the video! I’ve followed all of the steps but when I try to preview the banner nothing shows up. I just created this dev store, is there any additional steps i need to take to get this to work with a new partner account? Does this partner account also need Shopify Plus access or something?

@gfreeman23

8 ай бұрын

Nvm I just figured it out. For anyone wondering, I had to click the “Developer Preview” checkbox when setting up a new store.

@IvoTsochev

7 ай бұрын

I had the same issue with the preview not loading after npm run dev but I initially set it as Developer Previw, but after few restarts, finally put the --reset flag like it's suggesting in the terminal and it loaded

How would I do it so the Text shows a FINAL SALE line in the cart line if it is in the collection final sale? Right now I am so close, but when I add a product to the cart with the handle "final-sale" it adds the text to all of the products instead of each product individually! You are so good at these!

@stackingcontext

3 ай бұрын

You'll need to get the cart line target to query the data for each item in the cart and render your message as needed. I did something similar here kzread.info/dash/bejne/jHeHxrd-fazHaMo.html

Thank you very much for the video, your explanation is very clear! I have a question: in some cases (customizable products), I need to modify the information displayed associated with the product's metafields. Is there any way to do this or is it impossible? Thank you very much!

@santiagomoreno-peu

Ай бұрын

I mean the metafields of the cart line item.

@stackingcontext

Ай бұрын

You should be able to use the metafieldsSet mutation to accomplish this shopify.dev/docs/api/admin-graphql/2024-04/mutations/metafieldsset

@santiagomoreno-peu

Ай бұрын

@@stackingcontext Great! thanks for your fast response!

Great video! Do you know how I can show or hide this extension through an option in my development app? I'm creating an app and I would like to add a panel to show offers in checkout view but I still idk how to enable/disable extensions from my app pages

@stackingcontext

3 ай бұрын

I haven't seen an option for it documented anywhere so I'm not sure that's possible at all right now.

Hello, thanks for the great video on Checkout UI Extension. Is it possible to present a way to customise/add shipping options -- offered through an App , hardcoded mock data . I want to creat an app that will call some APIs to get available 2 hr delivery slots , select 1st available slot , return a price for this this shipping option and update the cart total. Thank you

@stackingcontext

7 ай бұрын

Hello, it seems like that'd be done through the CarrierService API shopify.dev/docs/api/admin-rest/2023-10/resources/carrierservice. I'll consider making a video about it in the future, thanks for the suggestion!

Great content here! On the topic of post checkout offers, do you know how to check if your app is active in the Post-purchase Page admin settings (admin > checkout > Post-purchase Page)? I have seen other apps raise an alert if the app is not active (if another app is active, for example). I have read through almost every graphQL object and can't find any way to check the status of this. I will love you forever if you know this...

@stackingcontext

3 ай бұрын

Thanks! I haven't seen a graphql query from the admin api to access that information, but if you've seen that functionality in other apps maybe you can check the network tab to inspect the requests they make when they show that alert? That way you could see if they are querying the admin API to get that data or using some other mechanism.

@dan110024

3 ай бұрын

@@stackingcontext Damn. Yeah, I thought of inspecting it and the one I looked at was just hitting an endpoint of the app and for the query to be performed serverside, and was returned the status. I might try to find some of the other apps I have seen do it and see if they give away any more information in the network request.

Thank you for the tutorial. I'm trying to display variant metafield but I'm facing issues - Can you help?

@stackingcontext

8 ай бұрын

You'll need to use to useApi hook and get the query function from it, then create a ProductVariant query where you request the metafield you need. You can build the query from these docs shopify.dev/docs/api/admin-graphql/2023-10/objects/ProductVariant#field-productvariant-metafield

@nishmamaskey7636

7 ай бұрын

@@stackingcontextcould you create a video on it? Part II of this video where you can show how to display metafield? Thanks!

There's a problem here. If you add to cart the product on the list on your store and when you go to checkout the product is automatically removed in your cart because its unchecked.

Hi great video, however i stumble across an issue on our site, since we have multiple currencies available for customers, but dont know how to change the currency format in an extension like this. So my question is, how do i change the currency shown on the upsell product? My main currency could be dollars but the customer might be from europe. That makes the product have the dollar value/number/price, which is not ideal.

@stackingcontext

21 күн бұрын

Checkout UI Extensions don't seem to have a built-in way to accomplish this, but you could use a currency exchange API to convert from your main currency to your customer's currency. To get the customer's currency you can use the useCurrency hook shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/localization#useCurrency

To deploy Checkout UI extensions we need to be on the Shopify Plus plan? I followed your tutorial but I don't see the option to add it to my checkout in the "Customize Checkout" section...

@stackingcontext

Ай бұрын

Yes, as mentioned at the beginning of the video this feature is currently only for Shopify Plus.

@AntonioBrandao

Ай бұрын

@@stackingcontext thank you!

Thanks for the video! I’ve followed all of the steps but when I try to deploy the extension, i don't see add block section anywhere and it shows that checkout can’t be edited using sections. what should i do? thanks for your help

@stackingcontext

Ай бұрын

Make sure the store where you are deploying the extension is on Shopify Plus and has Checkout Extensibility enabled, if not they won't work.

@linhphankhanh6679

Ай бұрын

@@stackingcontext thanks a lot

Hi how are you, I need to ask what are your top 10 or 5 extensions for shopify development

@stackingcontext

5 ай бұрын

The only Shopify-specific extension I'm using is the official Shopify Liquid extension marketplace.visualstudio.com/items?itemName=Shopify.theme-check-vscode. The rest are just other general purpose extensions such as Prettier and Graphql Intellisense.

How do i add two/multiple product variants

Hello Sir! I hope you are well. I have a question, once the Shopify app is created, how can we deploy it, and how can we use it in stores that aren't partner stores?

@stackingcontext

4 ай бұрын

Check 29:08 where I go over how to deploy it.

Hi i need to created one custom text box mandatory field inside the checkout page. How to make prevent the submit, if user try to submit before filling that field ?

@stackingcontext

4 күн бұрын

Check this video where I go over how to block Checkout Progress depending on certain conditions kzread.info/dash/bejne/gKaBwdSdZqnKpKg.html

Hi. I am working on a Shopify account that has a lot of stores. After 'npm run dev', it only shows 6 stores, without the store that I am working on. How will I select the exact store when it does not exist in the options?

@stackingcontext

3 ай бұрын

The dev command only lets you work with development stores or Plus Sandbox stores as mentioned in the docs here shopify.dev/docs/apps/tools/cli/commands

from 30:56 my screen is not there: "App blocks available for this page" but instead it is "Customizing with app blocks is not available for this page. To customize branding, go to settings." Please, help me :3

@stackingcontext

11 күн бұрын

Make sure the store you are working with is either a development store or a Shopify Plus store. Also make sure you have Checkout Extensibility enabled.

followed the steps are you outlines and it was fine until npm run dev. Thats when I got a "Could not start Cloudflare tunnel" - its been a horrible error to chase down.

@stackingcontext

5 ай бұрын

Shopify uses Cloudflare tunnels for the development server of extensions. When an error like that appears check Cloudflare's status page in case they are having some degradation of service or are in the middle of a maintenance session.

is it possible to test it without a Plus Sandbox? and if not how to create a Plus sandbox?

@stackingcontext

5 ай бұрын

You can test it in a draft Checkout on your store if the store is on Shopify Plus. If not you can create a Development Store from the Shopify Partners dashboard and test there.

Do I need to be a super member to have effects on the store checkout page?

@stackingcontext

7 ай бұрын

The store must be on a Shopify Plus plan, otherwise you can't create custom checkout UI extensions for that store at the moment.

@chensandra3271

7 ай бұрын

Thank you!@@stackingcontext

Quick question. Is there a way to pull an app and continue development, for example on a different device?

@stackingcontext

5 ай бұрын

You can use git

@wake-digital

5 ай бұрын

@@stackingcontext so the project folder contains some API credentials which link it to the Shopify cloud where the app is stored or something like that?

@stackingcontext

5 ай бұрын

Yes, the shopify.app.toml file contains de necessary information

I was following along and coding this and after the step where you add the node(id: portion in UseEffect() My Vs code shows the code in italics and the banner will no longer load. If I don't use back tics the section shows normal but shows with errors. Any idea why? Also the conole.log doesn't work for me at any step despite being able to see the banner initially

@stackingcontext

7 ай бұрын

When the banner is not showing are there any errors in the browser's console?

@DatsunZ73

7 ай бұрын

@@stackingcontext only thing that shows is bugsnag no other errors

@DatsunZ73

7 ай бұрын

Actually now that I look again there is a uncaught error in extension error

@DatsunZ73

7 ай бұрын

As far as I know I changed nothing and all of a sudden it works and is showing the product in the checkout sorry for wasting your time.

when I run the peoject it have wrong:Failed to fetch the latest status of the development store preview, trying again in 5 seconds. why it happenrs?

@stackingcontext

7 ай бұрын

It's been happening over the past couple of days. Appears to be an issue on Shopify's end. It's inconvenient but usually restarting the development server fixes it.

Do you need a Shopify Partner account to do this, even if you're only building apps/extensions for your own personal stores? I haven't been able to find any information on this at all.

@stackingcontext

5 ай бұрын

I haven't heard of a way of doing it without a Partners account, so it looks like you need an account. Is the process of creating one causing you any trouble?

@TravisRayLive

5 ай бұрын

@@stackingcontext It's not causing me trouble, but I'm confused how I would go about deploying the apps/extensions *only* to the brands we own. We do not want our apps/extensions public. You see, I work for a company as a software engineer, and we use Shopify across our 5 brands, which total 8 or 9 stores. Before, if I wanted to tweak something, I could just go to the checkout.liquid file, make my changes and be on my way. Now there is this entirely new process with very little information on how to actually implement it into your own stores. That's where my confusion is. It seems like Partner accounts are for building apps and making money, which is not our intent. We simply want to build out custom functionality for our own stores.

@stackingcontext

5 ай бұрын

Ah I get where you're coming from. The naming might be confusing, but through a Partners account you can still deploy your extensions only to your store(s). In the Distribution tab for your extension you have two options, Public Distribution which is for distributing an app in the Shopify App Store, and then Custom Distribution which lets you install your app/extension in a particular store. It seems like your use case is covered through Custom Distribution. In the deployment section of this video you can see how that looks like in action, as I deploy the extension built here with Custom Distribution so it is only installed in the store I'm using.

@TravisRayLive

5 ай бұрын

@@stackingcontext Ahhhh. Thank goodness. That's perfect, thank you so much. I've been looking everywhere for this answer. Thank you so so much.

@TravisRayLive

5 ай бұрын

@@stackingcontextSorry to be annoying, I just had one more quick question. In the beginning, you created the extension, then moved everything out of that folder into another one, then created the app. Was that just something you chose to do for personal choice or was there some benefit to that? Again, sorry for so many questions, but our stores produce quite large sums every year and I really don't want to be the guy who broke the checkout. Hahaha.

Is that possible to customize the product image on the checkout screen?

@stackingcontext

18 күн бұрын

You can use the Update operation on the Cart Transform Shopify Function to change the image at checkout. I cover that Function in this video kzread.info/dash/bejne/X4hslMeRYsyymaQ.html

@sudharsanamtk

17 күн бұрын

@@stackingcontext First and most great appreciation for taking time to respond and preparing these great stuff for free. Kudos to you. Let me check you other video. Thank you

I connected the new store to this extension but my code is not reflected in the UI & and console , What i can do?

@stackingcontext

7 ай бұрын

Make sure you are previewing the extension and that your app is installed in the store. If after that it still doesn't show check the browser's console for any errors.

@user-wk3qb1lg1t

7 ай бұрын

@@stackingcontext Getting the cors origin error the request's mode to 'no-cors' to fetch the resource with CORS disabled

We don't need to host the checkout extension code on a server? Can you please help me? I'm trying to use Netlify to deploy my checkout extension code.

@stackingcontext

6 ай бұрын

Checkout extensions don't need to be hosted after Shopify introduced simplified deploys earlier this year. That's how the one from the video is deployed by just running npm run deploy. Here's the documentation about it shopify.dev/docs/apps/deployment/extension/deploy

@xylongracias6373

6 ай бұрын

@@stackingcontext is there a way to make any cart UI changes in checkout. When the liquid file was available, I used to run a js code to calculate the estimated delivery date of each item in the cart and show it under each item.

@stackingcontext

6 ай бұрын

You can create a UI extension that whose target is cart-line-item.render-after and render there what you need to render. In this video I do something like that kzread.info/dash/bejne/jHeHxrd-fazHaMo.html

how do you enable checkout extensibility on a development store?

@stackingcontext

2 ай бұрын

When you are creating the development store select Checkout and Customer Accounts Extensibility in the Developer Preview field.

@sohkka

2 ай бұрын

@@stackingcontext thank you! the new problem im having is that i can see the extension when i customise the checkout, i click to add it and i see it, press save, then go to the store checkout and i dont see it... am i missing some step?

How we can target "purchase.checkout.action.render[ORDER_SUMMARY4]" by using extension and display the text under the total