In this episode of Liquid Weekly, Karl and Taylor get into Karl's experience building out features for a Flickity slideshow in a Shopify theme and leveraging checkout branding API and its implications for customizing the checkout experience. Karl shares his recent hands-on experience and insights on using GraphQL queries, color schemes, and checkout UI extensions to tailor the checkout header, logo, and links for a more personalized customer journey. Discover the challenges faced, workarounds implemented, and the potential of leveraging the checkout branding API for unique branding opportunities. Gain valuable tips and learn about the limitations and possibilities of customizing the Shopify checkout experience using these advanced tools. *General Resources* Liquify extension - https://chromewebstore.google.com/detail/liquify-shopify-code-sear/edekihmjmpkkkaolmojnajojfgphccma Flickity - https://flickity.metafizzy.co/ Swiperjs - https://swiperjs.com/ Liquid inline comments - https://shopify.dev/docs/api/liquid/tags/comment#comment-inline-comments Octothorp - https://www.merriam-webster.com/dictionary/octothorpe Javascript CustomEvent - https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent *Checkout Resources* Checkout styling overview - https://shopify.dev/docs/apps/checkout/styling **Tutorials**https://shopify.dev/docs/apps/checkout/header-footer/customize-header?framework=react&extension=react https://shopify.dev/docs/apps/checkout/styling/update-color-settings#step-3-configure-color-schemes https://shopify.dev/docs/api/admin-graphql/2024-04/mutations/checkoutBrandingUpsert?example=Set+a+checkout+logo#examples-Reset_color_schemes_to_the_defaults https://shopify.dev/docs/themes/best-practices/design/color-systemAdd a favicon via GraphQL - https://shopify.dev/docs/apps/checkout/styling/add-favicon Upload media - https://shopify.dev/docs/apps/online-store/media/products#step-1-upload-media-to-shopify Style component for conditional styling - https://github.com/Shopify/ui-extensions/tree/124581af0dfd4a583e668a20ea034879983b9d0d/packages/ui-extensions/src/surfaces/checkout/style Checkout UI Extensions Repo - https://github.com/Shopify/ui-extensions/blob/124581af0dfd4a583e668a20ea034879983b9d0d/README.md Components inherit styles from the merchant brand settings - https://github.com/Shopify/ui-extensions/discussions/368#discussioncomment-3004008 CSS not supported - https://github.com/Shopify/ui-extensions/issues/1668 Github Gist for checkout Branding API usage - https://gist.github.com/kmeister2000/4bcf8ee0e4fbfe744455e0a5ac876c9a *Shopify Dev Changelog* Go check it! https://shopify.dev/changelog *Picks of the Week* Taylor - Bulk Product Editor by AbleStar and Code Snipptes: https://ablestar.com/bulk-product-editor/ && https://support.ablestar.com/category/223-code-snippets Karl - Timeliness: A reminder to value punctuality in all aspects of life *Sign Up for Liquid Weekly* Don't miss out on expert insights and tips—subscribe to Liquid Weekly for more content like this. https://liquidweekly.com/