Liquid Weekly Podcast: Shopify Developers Talking Shopify Development Karl Meisterheim

In this episode of Liquid Weekly, Taylor and Karl sit down with Adam, co-founder of Wrapped, to explore his experience building a successful Shopify app and his journey to achieving "Built for Shopify" status.

Adam shares his story, from launching Wrapped to overcoming challenges and ultimately achieving the coveted "Built for Shopify" badge. The conversation covers key takeaways from his experience, including the importance of following Polaris guidelines, the benefits of investing in quality app development, and tips for aspiring Shopify app developers.

From the benefits of using Polaris components to the value of perseverance in app development, this episode offers valuable insights for anyone looking to create a successful Shopify app.



Resources:


Adam on Twitter: https://x.com/releod
Wrapped: https://apps.shopify.com/wrapped
Alacart Apps: https://www.alacartapps.co
Polaris: https://polaris.shopify.com
Built for Shopify: https://shopify.dev/built-for-shopify



Shopify Dev Changelog


Image and swatch presentations for product filters API
GraphQL Admin API: Support for metafield connections in online store objects
[Scheduled] Introducing a webhook topic for customer account settings

Patrick Millegan follow-up and notes query to allow current state when merchants install their app

[Scheduled] Writing Metafield values available on the Customer Account



Picks of the Week:


(Adam) Shoe Dog: https://www.goodreads.com/book/show/27220736-shoe-dog
(Karl) Twinery: https://twinery.org/
(Taylor) Arc Internet Browser: https://arc.net/



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 dive into a conversation with Coralie, a Shopify expert, discussing her experiences and insights on various Shopify-related topics as well as different parts of the Shopify services sphere. Coralie shares her experience freelancing with Shopify, to working with Theme provider Clean Canvas, and finally a look at her new role at Shopify on the Professional Services team. She shares her thoughts on theme development, the importance of community, and the role of metafields in Shopify.

The conversation covers Coralie's approach to learning theme development, her experience with Dawn, and her recommendations for those interested in exploring Shopify theme development. The trio also touches on the importance of community events, such as the edition.dev conference, and the benefits of attending these events for Shopify developers.

*General Resources*
- Github Dawn repo: https://github.com/Shopify/dawn
- Shopify theme submission: https://shopify.dev/docs/themes/store/review-process/submit-theme- Best practices for building a Shopify theme: https://shopify.dev/docs/themes/best-practices- Clean Canvas: https://www.cleancanvas.co.uk/- Shopify Growth Services: https://growth-services.shopify.com/

*Picks of the Week*
Taylor - "Alone" TV Show
Karl - "Wicked French" Phrasebook
Coralie - Wide Event organized by Mat De Sousa

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