Episode 020 - Building a Better Slideshow and the Branding API Liquid Weekly Podcast: Shopify Developers Talking Shopify Development

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/