Component Architecture & 3rd Parties on Shopify Storefront

How did our component & custom element architecture allow us to highly customize and extend 3rd party apps, Gift Reggie & Algolia?

Client Example:  Snuggle Bugz

What are the customizations?

• Gift Reggie

  • Integrating site UI design into app templates

  • Async add to cart from app templates. Same UI and mini-cart interaction as on PDP

  • BOPUS. Same UI and functionality as PDP

  • Starter registry content section

• Algolia

  • Overall UI and UX design

  • Content embedded in product grid

  • Reuse of complex components via async & template alternates

    • Responsive image logic

    • Badging logic and UI

    • Swatch logic and UI

    • Internationalization logic
      
      

What makes customizations like these difficult?

• Gift reggie templates live outside of the theme, which make reuse of theme snippets difficult, if not impossible

• Algolia app implements its UI through a reactive FE framework, which makes it difficult to plug custom functionality, or reuse existing functionality, into an unknown re-render lifecycle

How does Wyatt’s framework solve those difficulties?

• Disciplined component framework, where component styling only cares about itself allows them to be used in many different contexts.

• Having minimal build tooling, and keeping source code the same as final theme code, makes it easy to include exactly the code needed for contexts outside of the theme

• Use of native custom element API makes it easy to plug any JS functionality into a 3rd party framework/UI. Regardless of what that framework does, our code “just works”