Sign up to save your podcasts
Or
Share Episode 020 - Building a Better Slideshow and the Branding API
Share to email
Share to Facebook
Share to X
Share to email
Share to Facebook
Share to X
Or
Episode 020 - Building a Better Slideshow and the Branding API
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/
View all episodes
By Karl MeisterheimIn 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/