Liquid Weekly Podcast: Shopify Developers Talking Shopify Development Karl Meisterheim

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/

In this episode of Liquid Weekly, Karl and Taylor welcome Marianne Ferguson, a talented Shopify designer and developer founder at Ultrafine, to explore the intricacies of using React in Shopify theme development.

Marianne discusses her personal and professional journey, delving into how her experiences shaped her expertise in creating sophisticated and dynamic user interfaces. The conversation highlights key aspects of client-side frameworks, offering insights into how React enhances the functionality and user experience of Shopify themes.

From technical considerations to implementing JavaScript libraries to actionable advice for developers looking to elevate their skills in the Shopify ecosystem, this episode covers everything you need to get started with React in Shopify themes.

*Timestamps*
00:00 - Introduction to Marianne and episode overview
01:00 - Catching up with hosts and guest
10:30 - Marianne's career journey and move into Shopify development
18:25 - Why React in Shopify20:12 - Marianne's first time using React in Shopify24:40 - Why or when to choose React30:21 - Javascript frameworks versus vanilla JS32:25 - What about Remix?36:15 - How to add React to a Shopify theme41:15 - Productivity tips with starting with React46:15 - Resources for React and Shopify
47:35 - What about AI?49:34 - Different places to work with React on Shopify51:30 - Choosing a Javascript library and considering accessibility55:37 - Shopify Changelog1:00:00 - Picks of the Week

*Guest Information*
Marianne, Shopify Designer & Developer
LinkedIn: https://www.linkedin.com/in/marianne-c-ferguson/Twitter: https://twitter.com/marianne_ciaraUltrafine: https://www.ultrafine.co/

*Resources*- React: https://react.dev/
- Shopify Partner Slack: Navigate to support in your Partner dashboard for link
- Remix: https://remix.run/docs/en/main- Hydrogen and Oxygen on Shopify: https://shopify.dev/docs/custom-storefronts/hydrogen/getting-started

*Shopify Dev Changelog*
- Deprecation of unpublished apps: https://shopify.dev/changelog/update-on-deprecation-of-unpublished-apps- Querying customer subscription contracts: https://shopify.dev/changelog/customer-apis-allow-querying-of-customer-subscription-contracts- Cart and checkout validations: https://shopify.dev/changelog/preloaded-cart-and-checkout-validation-configuration-in-admin-ui-extensions - Unification of count fields: https://shopify.dev/changelog/unification-of-count-fields

*Picks of the Week*
- LookAway app (Marianne): https://lookaway.app/ - Psycho-Cybernetics (Karl): https://www.goodreads.com/en/book/show/155981
- Basecamp (Taylor): https://basecamp.com/

*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/

Karl and Taylor sit down with Leigh Barnes, former CTO of We Are Eight, on the latest episode of the Liquid Weekly Podcast. From scaling markets with e-commerce platforms to spearheading innovative Shopify solutions, Leigh's journey is filled with valuable lessons and pioneering strategies in the Shopify ecosystem.



Leigh's experience ranges from being nearly every type of Shopify Partner possible including working in roles from Agency, Plus Agency, Tech Partner Apps ( Purpose built and public ) and most recently themes. Leigh shares his journey through the evolution of Shopify, offering invaluable insights into leveraging Shopify's internals, the role of AI in development, and the future of theme customization.



// Guest Information //

Leigh Barnes

Twitter: https://twitter.com/leighb4rnes

LinkedIn: https://www.linkedin.com/in/leigh-barnes/



// Shopify Dev Changelog //

The scheduled tab is chock full of stuff! https://shopify.dev/changelog/scheduled

Defer directive for storefront api (dev preview) - https://shopify.dev/changelog/defer-directive-for-storefront-api-is-now-available-in-developer-preview

Category page ads on the shopify store - https://shopify.dev/changelog/introducing-category-page-ads-on-the-shopify-app-store

Return sales and exchange apis - https://shopify.dev/changelog/return-sales-and-exchange-apis

App submissions now require a screencast demo - https://shopify.dev/changelog/app-submissions-now-require-a-screencast-demo



// Picks //

(Karl) KrackCorn: https://www.krackcornpopcorn.com/shop

(Taylor) Shopify Partner Slack: Access via your Shopify Partner Dashboard

(Leigh) Shopify managed installation: https://shopify.dev/docs/apps/auth/installation



// Sign Up for Liquid Weekly //

Don’t miss out on more Shopify insights—subscribe to Liquid Weekly at https://liquidweekly.com/

Taylor and Karl dive into the fascinating and confusing world of Shopify Checkout Extensions in this episode of the Liquid Weekly Podcast.

From weather updates to work experiences, they traipse through the nuances of Shopify's checkout extensibility, discussing everything from Pixels integration to the migration from Shopify Scripts.

Learn the distinctions within Checkout Extensibility, such as Checkout Extensions and Shopify Functions. Also discussed are the implications for developers and merchants.

// Resources //

Shopify Checkout: https://www.shopify.com/checkout

Customizing Shopify Checkout: https://shopify.dev/docs/apps/checkout

Checkout Extensibility Upgrade Kit: https://pages.shopify.com/rs/775-MIT-288/images/checkout-extensibility-migration-kit.pdf

Jason Godson's Shopify Script Creator: https://jgodson.github.io/shopify-script-creator/

Checkout Upgrade Technical Guide for Partners: https://cdn.shopify.com/static/partner-resources/Checkout%20Upgrade%20Technical%20Guide%20for%20Partners%20(Feb%202023)%20(2).pdf

Shopify Unite 2022 Checkout Extensibility: https://www.youtube.com/watch?v=cRYuO5JfjjM

Shopify Academy Customizing Shopify Checkout: https://academy.shopify.com/partner-education-customizing-shopify-checkout?locale=en

Shopify Academy Upgrading to Checkout Extensibility: https://academy.shopify.com/partner-education-upgrading-to-checkout-extensibility?locale=en

Shopify Dev Docs Checkout UI Extensions: https://shopify.dev/docs/api/checkout-ui-extensions

Extensions-only apps (Plus only): https://shopify.dev/docs/apps/app-extensions/extension-only-apps

Customer Account Extensibility (still in dev preview): https://shopify.dev/docs/apps/customer-accounts



// Shopify Dev Changelog //
Checkout supports header and footer customizations: https://shopify.dev/changelog/checkout-supports-header-and-footer-customizations
Checkout branding supports container styles: https://shopify.dev/changelog/checkout-branding-supports-container-styles
[Scheduled April 1, 2024] Deprecation of checkout APIs: https://shopify.dev/changelog/deprecation-of-checkout-apis

// Picks //
(Karl) Interactive eclipse map: https://eclipse2024.org/eclipse_cities/statemap.html
(Taylor) Raycast app: https://www.raycast.com/

In this episode, hosts Taylor and Karl are joined by special guest Henry Johnson from iziGift. The hosts provide personal updates and delve into Henry's remarkable journey from being a non-Shopify developer to becoming a proficient expert in the field.

Henry candidly shares his experiences of purchasing and developing Shopify apps, overcoming challenges, and mastering coding skills while juggling a full-time job. He also discusses his strategies for success, including leveraging Shopify Flow and actively engaging with the Shopify community.



// Guest Information //

Twitter (X): https://twitter.com/TalktoHenryJ

LinkedIn: https://www.linkedin.com/in/talktohenryj/

iziGift: https://apps.shopify.com/easy-gift-cards



// Shopify Resources //

Flow app: https://apps.shopify.com/flow

Add Flow to your app: https://shopify.dev/docs/apps/flow

Send HTTP request with Flow: https://help.shopify.com/en/manual/shopify-flow/reference/actions/send-http-request

Shopify Editions updates on Flow: https://www.shopify.com/editions/winter2024#shopify-flow-updates

https://help.shopify.com/en/manual/shopify-flow/reference/actions/run-code

https://changelog.shopify.com/posts/shopify-flow-improved-ux-for-browsing-and-searching-tasks

https://changelog.shopify.com/posts/shopify-flow-get-notified-when-errors-happen

Flow workshop: https://workshops.shopify.dev/workshops/metafields-render-automate#0

Product reviews gone after May 6: https://help.shopify.com/en/manual/products/product-reviews/migrate

Theme block / Reference theme discussion - https://github.com/Shopify/reference-theme/discussions

Shopify Community (forums): https://community.shopify.com/c/shopify-community/



// Other Resources //

My First Million Podcast: https://www.mfmpod.com/

30x500 Training: https://30x500.com/academy/

Limited Supply Slack: https://slack.limitedsupplypod.com/


// Shopify Changelog //

Store Credit Primitive and API in dev preview: https://shopify.dev/changelog/store-credit-primitive-and-api-now-available-in-developer-preview

// Picks //

(Taylor) Garmin Epix Gen 2: https://www.garmin.com/en-US/p/760778

(Henry) KTool.io (https://ktool.io/) + Suits (TV Show)

(Karl) Spaceman of Bohemia by Jaroslav Kalfař: https://amzn.to/3II5evX



// Sign Up for Liquid Weekly //Don’t miss out on more Shopify insights—subscribe to Liquid Weekly at https://liquidweekly.com/

In this special release episode, Karl and Taylor have the unique opportunity to sit down with Michael Gooding and Kimberly Oleiro from Shopify to uncover the secrets behind the creation of the new and improved Web Performance Dashboard in the Shopify admin.

Announced during Shopify Winter Editions '24, the new web performance dashboard is an enhancement from the previous Lighthouse score in the dashboard. The team talks about the history of the performance score, the reasons behind this new implementation, and what it means for future performance planning on shops.

Discover how Shopify is combatting bad actors gaming performance metrics and prioritizing mobile performance to enhance the user experience. Get an exclusive sneak peek into upcoming features and learn how community feedback shapes the evolution of the dashboard.

Whether you're a merchant looking to boost your online store's performance or a developer seeking insights into e-commerce optimization, the team breaks down what performance is and how it benefits one's shop - not just from the technical point of view. Learn more about how where the data comes from and how it speaks to both speed and user experience for customers.

// Resources //
Shopify performance blog post on new dashboard: https://performance.shopify.com/en-ca/blogs/blog/web-performance-dashboard
Shopify docs on new dashboard: https://help.shopify.com/en/manual/online-store/web-performance
Google docs on web performance: https://developers.google.com/search/docs/appearance/core-web-vitals
Case studies on focusing on Core Web Vitals: https://wpostats.com

For feedback on the web performance dashboard, reach out through the Shopify Partner Slack (https://app.slack.com/client/T4BB7S7HP), your Partner Dashboard via Chat, or Michael on Twitter (https://twitter.com/Michael_G_81)