Shopify Tutorial - Customize Your Checkout With The Checkout Branding API
HTML-код
- Опубликовано: 22 июл 2024
- In this video we'll see the Shopify Checkout Branding API, one of the APIs introduced by Shopify in their transition to Checkout Extensibility. This API enables us to customize different visual aspects of the Checkout in more depth than what's available through Shopify Admin alone.
Some of the customizations this API let us do to the checkout page include using custom fonts, changing the favicon, changing the text color, changing the padding of buttons, and more.
Resources
• Checkout Branding API Documentation - shopify.dev/docs/apps/checkou...
• Shopify Fonts - shopify.dev/docs/themes/archi...
• Install GraphiQL - shopify.dev/docs/apps/tools/g...
• checkoutBrandingUpsert mutation - shopify.dev/docs/api/admin-gr...
• Checkout Extensibility Upgrade Guide - help.shopify.com/en/manual/ch...
• Using The Checkout Branding API To Customize A Checkout - • Using The Checkout Bra...
Timestamps
00:00 - Introduction
01:14 - Setting Up A Development Store
01:59 - The Checkout Editor
05:11 - Installing GraphiQL
06:32 - Design Systems and Customizations
07:44 - Getting The Checkout Profile Id
09:08 - Changing the Heading's Typography
11:35 - Changing the Heading's Font Size
12:48 - Customizing The Buttons
14:52 - Customizing Form Controls
16:14 - Using a Custom Font in Checkout
19:40 - Customizing the Checkout Favicon
21:50 - Checkout Global Colors
24:06 - Checkout Color Schemes
27:17 - Resetting The Checkout Customizations
Wow, this video is so helpful. Thank you so much!!!
Nice job!! We are waiting for more content related to shopify apps!
Amazing thank you
thanks
Amazing work! Your teaching style and videos are definitely the best out there. Would you consider any private lessons for a fee of course? If so, how could I get in contact with you?
MAAAAANNN!!!! Thank you a lot)))
You make it clear for me, how to use this Checkout Branding API 🤘🔥🇺🇦
It' strange, because changing the size is not working for me 12:15
But I successfully change font-family on previous step, it's strange.
Why I can't change the font size?
I figured it out!
If your font-size don't changing, just change "" to "" - it works for me with .
Shopify changed headers linking.
I figured out!
If your font-size didn't change, just replace "headingLevel2" to "headingLevel1"
for me it begin to work with "2024-04" api version
I figured out!
If your font-size didn’t change, just replace headingLevel2 to headingLevel1
for me it begin to work with “2024-04” api version
I figured out!
If your font-size didn’t change, just replace "headingLevel2" to "headingLevel1"
for me it begin to work with “2024-04” version
Hey @Stacking Context is there any way to apply custom style to checkout extension component? do you have any idea on this?
Unfortunately if what you are trying to accomplish is not possible through the Checkout Branding API I'm not aware of a way to do it.
How can I change the corner radius only on the apply button. Because primaryButton affects both, I want different on each.
I haven't seen a way to target buttons independently if they are both primaryButtons.
@@stackingcontextIs there a way to change the bg color of the disabled primary button?
Hi, Can we add any fields in checkout page. like radio buttons, terms and conditions like that
Yes, you'll need a Checkout UI Extension for that. I have a video about how to create them in the channel ruclips.net/video/L-Kyx-pRoYI/видео.html
@@stackingcontext Thank you so much. And I have some doubts aslo can you please help that I want your contact details can you please share
How do I add a horizontal divider grey line between total amount and shipping?
If that's not available in Checkout Customizability you can try adding a Checkout UI Extension that just renders a divider and placing it there.
@@stackingcontext In extension targets as you can see there is no target area there to place it.
Can we add custom value for font size and border radius ?
Yes, in `designSystems` you are able to specify custom values for `cornerRadius` and typography's size.
okay thank you @@stackingcontext
Can i get some example @@stackingcontext
is it possible to add css file in Checkout Branding API?
Currently no.
@@stackingcontext Do you know any way to add CSS files using Checkout UI extensions?
No, I haven't seen it mentioned anywhere in the documentation.
I hate Shopify so much for building this shitty platform. You know what else let's you change fonts, sizes, colors, and are already a well-documented, long-standing web standard? C. S. S. Jesus, they've poorly reinvented the entire wheel. You can't even add those font configurations to the admin ui, but instead you have to waste all of your time in GraphiQL running mutations which non-developers don't want to do, or even know how to do and the entire point of this was so non-developers could edit their own Checkout without having to deal with a lot of other bullshit. I've been working with Shopify for 7 years and they are absolutely *the worst* when it comes to understanding how to build anything.
I think Shopify don't want to use CSS, because it is free, but they want to earn some money.
That is why they develop API for these changes, by using it you should pay for your Shopify plan :)
And maybe also it was made for security reasons