David Azoulay 1:12
Thank you so much, Sean. Well welcome everyone to this webinar, where we will be learning we will be learning how to build commerce storefronts, with next Jas and composable UI. My name is David azulay, Director of Product at Orium. We are North America’s leading composable commerce systems integrator. And I’m thrilled to guide you through this journey of creating dynamic scalable online stores. Using composable UI. So for today’s agenda, we will look at composable UI more broadly, and also get pretty technical. I will talk a little bit about composable commerce, why we built composable UI and what it is exactly. And then Danny Lake, our product architect here at Orium, will do more of a technical deep dive, walking us through composable UI’s Code documentation configuration, and how to configure it. We will also have a q&a at the end of the session, so feel free to submit your questions through the chat. And let’s get started. So this session is tailored for all kinds of professionals. Whether you are an aspiring ecommerce developer, an experienced designer and architect, eager to learn more about latest tech, you’re in the right place. Today, we will gain insights into the world of composable UI, what it is, why it’s a game changer, and how it’s used to create innovative cut commerce, storefronts. And we’ll also dive into how to build a composable architecture, discover its advantages and learn how to customize it for your business specific needs. But this webinar isn’t just about learning new concepts. It’s also about practical application, you will learn how to navigate and leverage the composable UI toolkit, ensuring that you can not only follow best practices, but also innovate and implement them in your projects. So let’s get started on this journey with composable UI, and unlocking new possibilities for your next ecommerce project. Let’s start with you know what is composable commerce, it’s crucial to understand the significant shift that’s currently transforming the e-commerce landscape. Historically, companies have depended on monolithic systems. These are large all in one platforms that help companies get their online store up and running quickly. But over time have proved to be inflexible, challenging to update. And, in response, some businesses have developed their own custom custom ecommerce solutions. But over time, even these customers ecommerce solutions have proven to be to become bloated, overly complex and slow to make changes. And that’s a problem because the market is always changing. customers expectations continue to rise, as we have seen during the pandemic. And so businesses need to become very agile and capable of making changes to their e commerce experiences very quickly in order to stay competitive. Now imagine an architecture that’s not just a single block of stone, but more like a set of building blocks. This is where composable commerce comes into play. It breaks down the e-commerce experience into modular components that can be independently integrated and replaced without disrupting the whole. This modular approach is crucial for businesses that need to pivot quickly, because it allows them to roll out changes or introduce new features at the speed of market demand. Today’s Consumers also want personalized shopping experiences that are tailored to their needs. composable commerce aligns perfectly with this trend by enabling retailers to craft unique customer journeys and touchpoints. And the real advantage here is the ability to adapt. Whether it’s incorporating user feedback or responding to new shopping behaviors. composable commerce empowers businesses to stay ahead of the curve. That’s a little bit about composable commerce. Now let’s talk a little bit about composable UI and why we launched this project. So composable UI was launched primarily as a learning opportunity. It’s an invitation for you for organizations to step into the world of composable commerce, introduced this concept, but also showcase its practical application and demonstrate how you can build a composable commerce architecture, especially from the front end perspective. And let’s not stop at theory. Let’s also put composable UI into action. It’s an accelerator. It provides you with a front end framework that encompasses all standard customer experiences right out of the box. Think of it as a toolkit as your disposal, complete with application code integrations documentation and a cohesive design system. So This is not just about getting you started. It’s about propelling you forward with speed and confidence into the world of composable commerce. Lastly, there’s innovation. That’s where your vision comes to life. composable UI isn’t a one size fits all solution. It’s a canvas for creativity. It facilitates the creation of custom ecommerce experiences and allows seamless integration with the headless services of your choice. This level of customization means that your storefront can be as unique as your brand, ensuring that your customer experiences are not just transactions, but are memorable interactions. Now what is composable UI? Exactly? composable UI is a foundation for building ecommerce store friends in a composable commerce world. It’s packed with best practices and best in class technologies that we here at podium have been perfecting over the years. For example, it uses react and chakra UI for UI components and styling. Next.js for server side rendering and static site generation. TypeScript, React query and trpc for managing service state and end to end typesafe API’s. But the true power of composable UI lies in its integration capabilities. It comes pre integrated with several services, and provides patterns to integrate with others. For example, it’s integrated with Algolia to provide powerful product search functionalities, and Stripe for secure payment processing. But it’s not just about what it comes with, it’s about what you can add to it. composable UI can integrate with any service be headless commerce, content management systems, or other mock services. This flexibility is crucial for tailoring solutions that meet the specific needs of your business and customers. Finally, the essence of composable UI is its community driven approach, always free and open. Under open source under the MIT license. We believe in the power of contributions. And this openness not only fosters innovation, but also creates a collaborative environment where developers from around the world can share improve extend the capabilities of composable UI. In fact, we’ve already received several contributions for improvements and integrations and anticipate more in the future. Now let’s dive a little bit more into composable UI. composable UI provides everything you need to build modern and performance ecommerce sites quickly. Starting with the storefront code. composable UI is a React Next.js application technologies known for their efficiency and developer friendliness. It uses a mono repo code structure, which keeps things organized but also enables a unified workflow that’s optimized for performance. And deployment is a breeze. It’s got one click checkouts and Netlify and herself and it’s Docker ready catering to a diverse range of deployment preferences. There is also a design system starter kit comes with a figma design kit that sets a solid foundation from going from design to code. It has reusable UI components and theme tokens ensuring consistency and accelerating your design process. And with Chakra UI. It promises a responsive and accessible user interface. integrations are key to any commerce platform. And composable UI offers a suite of integration options. It comes pre integrated with Algolia, Stripe, Google Tag Manager. It also it’s also integrated with mocked CMS and commerce services that can be replaced with your own and many other integrations including concea, Archer phi and Klaver. Last but not least, documentation is the backbone of any developers journey. With composable UI, you have access to complete docusaurus powered documentation, which not only guides you through the development process, but also allows for quick reference and easy deployment.

David Azoulay 14:28
Inside composable UI, you’ll find more than just code you’ll discover a cohesive, integrated and thoroughly documented ecosystem designed to empower you to build, deploy and scale ecommerce sites with efficiency and precision. Now enough talking let’s get right into it and with this technical deep dive, and I will pass it along to Danny Lake to take it over from here.

Danny Lake 15:01
Thank you so much, David. So the first thing I want to do is just a really brief introduction to this GitHub repo. And then I’ll get right into a storefront walkthrough. But before I do that, I’m Danny Lake on the product architect here at Orium, which means I get to work very closely with David. And I get to build e-commerce composable commerce accelerators. And this was one of those outputs, we wanted to share with the world. For the reasons David iterated earlier. Maybe you’re brand new to Next.js, or you’re, you know, you’re comfortable with Next.js. And you’re on a monolithic ecommerce platform right now. And you’re looking at options at different paths forward. And composable commerce is definitely the trend and where things are going for that flexibility David mentioned earlier, and scalability maintainability. And you get this headless storefront that’s put together with these UI, React components, and next Jas, and you can put together this full experience, and then take it and make it your own. So we’re really excited. And as David mentioned, we’ve gotten to work with few organizations in the space to help them integrate their offerings into composable UI, which I think reinforces the composable commerce architecture, because you can bring one of those integrations in, you can swap it for something else. And, as David mentioned earlier, we do have a couple of pre built integrations with Algolia. And Stripe. So if you’re on the readme and you want to follow along, I’m just going to scroll down to the resources section here. And table of contents. So these are the main key links here that you might want to bookmark. The first thing to do pop into the storefront, which I’ve got now here. So I really want to try to paint a picture in your head of what composable UI is, because all the theory, you know, I want to help connect all the dots. Think of this storefront as a collection of UI components and customer experiences that are put together with next Jas. And they use tRPC and react query for the data fetching and data mutation part of this. And we even have an all the way to a checkout experience, which I’ll get to, and you can actually pay with a credit card with Stripe. So this is using mock data sources. But in a sense, it’s a real working storefront, you can deploy it to Vercel or Netlify. I’ll walk through one of those deployments later on. And then you can have the storefront ready to go and start really learning and investigating. If you’re exploring working with a certain, you know, search vendor or payment processing vendor, this tool can really help you show your organization and your team or just yourself, what that might look like in a production environment. So this is the homepage of the storefront composable.com here. So let’s just walk through these components. And everything we’ve built here in composable UI is geared for mobile responsiveness. So as I shrink the screen down, which I’ll do here, and there, you can see that in action, and that really comes with shocker UI really helps your developers implement that responsiveness. It’s a really great developer experience working with Chakra UI. And it also has great components out of the box. So you can work on building this experience with chakra UIs base level UI components. So you can focus on your customer experience and your goals instead of maintaining and building a UI component library. So the first thing on the homepage, here is this header bar with some links here. And I’ll jump into these, these go to our product listing page, powered by Algolia. And then we have a couple of drawer components here. If I want to log in, or I want to view my cart, again, these components were built with the chakra UI drawer component. If I hit tab here, I can’t get out of this component, which that just comes for free with chakra, if you tried to build this component yourself, there’s a lot of things you need to think about under the hood to support screen readers, keyboard input and things like that. Once I scroll down here, and I start looking at these components, this is the main content of the page. And as I scroll down here, you’ll see quite a few components coming up. So all of these are what I call content management, system driven components. Their data is all coming from the mocked CMS that we have in place, and I’ll show you how that works a bit later on. And these components, you know, they’re ready to take input from wherever your content might come from. Be it a static json file, something like content stack, or Contentful, or even a third party custom API that you have content on right now. You know, You might even want to query your monolithic API for content. As you’re transitioning to something like using a head of storefront, you could hit that API and try these components with that data. So there’s quite a few here to check out. We have one here for product promotions, if I click on one of these will take me to the product page. And then at the very bottom, we have the footer. So let’s dive into the e-commerce part of this. So I will now start working with exploring the catalog of demo products that we have in our fake commerce engine. And then I’ll even go through to checking out with one of these. So I’ll just pop into accessories here. And see this Algolia. This is a all of these UI components are fully customizable. They live inside the composable. UI, next Jas storefront, and they’re driven by the Algolia API. So the nice part about that is we’re just we’re sending queries and filters to Algolia. And it’s just responding with telling our UI what to display. So working with Algolia is fantastic. And we decided to build this Algolia integration directly into the storefront, because it’s actually easier to use their service and to make a fake product listing page experience that we thought would provide very little value. So if you want to learn about Algolia, this is an excellent, excellent way to check that out. And I’ll pop into the woman here, because there’s the most products in this section here. So inside the product grid itself, you can see we have a four column layout right now, if I want to, I can shrink these down and change my experience, I can also change the source if I want to sort by name or price, low to high. And on the left side, this is where the power of Algolia really comes in. So even when I was changing the story, this was a new query, hitting the algo Lea API, and in response that fast. So now if I start filtering, say by brand, that was a brand new query to algo API and responded very, very quickly here. So the user experience of exploring your catalog of products is now very, very high. It feels like I’m using a native app on my phone. And that’s where composable commerce comes into play here, you can pick and choose how your search and catalog discovery process works. Maybe like one vendor over another, you can use these UI components on this product listing page and drive them by that API. So let’s pop into the product page now. And this is one thing I’ll show I’ll start scrolling this down to actually, let me go back to the part of this page here. I want to show you the responsiveness. So as soon as I switch to mobile, that facets on the left disappears. And now it’s inside this full screen modal pop up if I’m on my phone, and I want to filter by active wear. Now I’m back viewing those items. And I can also just go back to desktop, I can also apply filters, and then remove them here just to get back to the original state. Okay, so let’s start shopping. This is the product page. So this is the layout you can use. And it comes with an image carousel with the thumbnails on the left and fullscreen mode. And I can even drag this with my mouse if I shrink this down. This is what the mobile viewport looks like with more stacked experience. And then on the right side here we have the product information, the brand, the title, price. And I can even add this to my cart. As David mentioned earlier, this is a mock commerce engine. So we’re using Next.js API routes underneath the hood to kind of give us this fake cart experience. And you know, it does remember my state, I can play with this and I can refresh the page. And here’s my my cart. So in a real world scenario, you’ll be hooking this up to something like commerce tools, or Elastic Path. Or even as I said earlier, you’ll you could still use your monolithic API or even your homegrown commerce Engine API to drive this and then use this composable commerce architecture on a multi year journey to switch off all these legacy API’s and switch into the more modern composable commerce API’s.

Danny Lake 24:40
So here’s my cart in the cart drawer. composable UI comes with two carts experiences. And you’ll see this on a lot of storefronts. You’ll have the cart drawer, and also a cart page. Depending on your desired user experience and your type of products that you’re selling and in space that you’re in, you might want one or the other. Both are available for you to use here. And on the right side of this cart drawer, we have the order details and prices and promotions, there is a coupon code that I can add here. Again, this is just a showcase the UI components that are ready to use. And then once you’ve hooked this up to your commerce engine, this data would be driven by that remote data source. Okay, let’s pop into checkout. So what we have here is a three stage checkout. And if I shrink this down, you get more of like a one page vertical experience, and the cart summary is collapsed. And I’ll go back to desktop though. And I can do similar things there. All right, I will pre fill my shipping address. This is stumped something you’ll definitely want to send to a third party API for customer address shipping options, you’ll want to dynamically load those shipping methods based on the customer’s address, maybe by country, or by province or state. For now, I’m just going to use that for you fill data. If I try to click continue to payment here, you know, we have this form, validation is ready to go. So if you have things like GDP or assigned to my newsletter, you can have these things in here as well. Okay, now I’m on the second stage under Payment. And this is pay on delivery here or stripe. So pay on delivery will just push this order through to order summary. But the second real integration of composable UI in this storefront is with stripe. And we’re using the Stripe payment elements iframe. And you always want to think about when handling credit card data, my go to state is I want to put that inside an iframe, I don’t want to touch the credit card, I don’t want to go in through any of my services. So with the stripe payment element iframe, I’m putting all of that PCI payment compliance responsibility onto stripe themselves. And they should have that they’re the experts in this space, right? So I can put in my fake credit card here.

Danny Lake 27:19
And when I click Review Order, this will communicate with the stripe API, work with the payment intent API in there, and now and then I’ll be able to fully check up. So this is the third review order phase, if the customer wants to go back and edit their billing address, or change your payment option, just the last verification screen here. And I will click Place Order.

Danny Lake 27:50
Okay, I think this is what I was. Yeah, so remember how I mentioned the cart is actually marked, and we’re using serverless functions to manage the cart. So if those serverless functions turn off, I lose that state, I lose that cart state. So let me just check out really quick again. And you won’t have this issue when you’re working with a real commerce API. But we thought it was kind of neat and fun to build this semi cart management inside a serverless function, which if it turns off, we lose everything that we’re storing in it. And that’s what happened there. So let me just create another one. And since I did this quick enough, that serverless function didn’t have time to go back to sleep, right? If this is the lambda functions on AWS, or wherever you choose to host your next js application, it’ll be a serverless function that’s turned off when it’s not in use. So now I’m on the Order Summary page that went through everything was happy. And now here’s what the customer myself what I just purchased. Okay, that is it for the storefront. Now, I’m going to flip back to the get up

Danny Lake 29:17
all right. Let me let me scrap that. There we go. Okay, so that was the storefront that was under the Resources section here. And now we’re gonna get into some auxilary part of this repository. So as David mentioned, this is a mono repo. So it has several things in it. It has that storefront next js code base, has a docu source app built to power the documentation that relates to the storefront and the mono repo and figma theming. And the integrations built with other customers or other teams that have contributed to this mono repo. So let’s pop into the documentation. I’ll just be doing a quick whew, high level walkthrough here. Definitely encourage you to read a couple of these pages in here. And I’ll and I’ll point those out. So, of course, click getting started, you’ll get another introduction to what is composable commerce, what is composable UI. And then if you’re a developer, you just want to get this thing up and running your machine, definitely go into this installation here. We do use pm pm. So make sure you’ve got that installed. Make sure using a version of node higher or equal to 80. And then you can just clone this repo here, copy, paste this command, run NPM. Install, and then you can fire up this storefront. And I’ll be doing that later on as well. In the essentials, this is the bulk of the documentation, definitely recommend spending some time in here and just learning about this code base, again, what’s inside it, how things work, how you configure it, all the environment variables that make this thing, work, you know, we can set up Algolia stripe, we can even log in with Google, if you provide a Google API key, you can use a social signing on that page to sign in. And design a theme. So as mentioned earlier by David, we use figma. And composable UI comes with a figma design kit with assets that you can just copy into your figma workspace. So your design team now has the entire storefront experience inside Figma. And they can start theming it and tweaking those experiences. And then your developers would work on implementing those changes. And we have the integrations tab here. So this is a very valuable set of information here for things like search. So if you want to set up Algolia. Or this is a third party clue contribution from clue UI, this is one of the teams we got to work with. And then inside here, we also got to work with voucher fi for adding real discounts to the storefront. So they could show off the discount API through the composable UI storefront, which is fantastic because now this team has a whole entire home page to checkout experience with which to showcase and demo their product. I think that’s really cool. And we also have a CMS integration with con Sia. And then if you want to do a one, click deploy to the recell or Netlify, we can do that as well. And since I’m in here, I’m actually just going to go and deploy this to Natla phi right now.

Danny Lake 32:44
Okay, so you do have to authorize to GitHub. So that might be a step you need to do. So I’ll just call this demo April 3. And I do need to set one environment variable here for encrypting my cookies. So I’ll just go, this is my secret. You can read the documentation on all of these environment variables. But this is the one you do need to set when you do a deployment to a cloud provider. So what this will do is I’ll clone the composable UI GitHub into my personal GitHub organization, and then kick off the deploy. So it’ll start building this. So I’m going to come back to this in a couple of minutes. The next thing we’ll walk through here is sigma. And you know, what is sigma at a high level, it’s a place for your designers to work and create the desired customer experiences on whether whatever website you’re building, you know, it gives them the power of controlling the theming, your core theme tokens, and then they use those high level theming primitive values, and then implement those into your UI components. And now you have, you know, a brandable storefront, which is, which is really cool. So, this again, if you want to copy this and get a version of it, you can duplicate this to your drafts, I think, can you see that pop up or not? Yes, you can. Okay, so this will copy this entire asset of design info over to your figma. And you can now you know, this is yours, you can do whatever you like with it. So high level figma walkthrough here. The theme tokens are critical to having a cohesive design system. Your theme tokens should drive, the colors, the padding, the margins, the spacing, the borders, the fonts, every type of visual primitive, and that group should be controlled by your theme and your theme tokens. So for example, your primary color, here’s the different ranges of your primary color. And then we reference these colors in higher level theme tokens like Primary font color, text muted. So let’s go over to here. These are the color palette tokens. So now my components, my shocker UI components in my developers, they can use this token, text muted, and it will get these primitives of that color. And it’s the 400 level here, primary users primary 500. And now I have all these knobs and switches higher up in my application where if I just change my palette, it will have an impact throughout the rest of my application for all my buttons and my heading, my text, and my opacity, my borders. So this gives you that fine level control, just changing these values has a high impact on the customer experience. And that’s how you can distinguish your brand, you know, these are your brand controls. So once we start building with figma, we can get into things like never before, I’ve said CMS driven components. So that’s what we’ll be we’re seeing on the homepage here. So this is like a banner that we call the split banner. And this is with an image on the left with text on the right. And these are all the variants of the ways that content editors should be able to control this banner on the homepage or any content page. So all of these iterations are either desktop size, that image on the left image on the right, or the mobile view. As you scroll down, you can just see all the different permutations here. And we’ve implemented these into the composable UI code base already. So your content editors can take this doc and start composing entire page experiences together, which is what we’ve done already in here on the homepage. So as I zoom in here, you know, this is exactly what you see on the working Next.js storefront application, this design file was used to build that storefront experience. And if I go over here, I can see you know, this is what it should look like on a tablet with. And here’s what it looks like on mobile. Notice that the main menu disappears, and instead you get this hamburger menu. So this is a very, very valuable asset to have. And again, you can take this and make it your own as well. And then there’s the other pages that we saw here as well like the product page, the product listing page. Okay, let’s pop over to Netlify. And this was the site that we launched earlier five minutes ago, we can see that it’s finished building, you know, here’s the deployment summary. Everything looks happy. Green across the board here. So let’s open up the production deploy. And here it is, here’s the storefront. So when you clone this, or you run this locally on your machine, and you deploy it, you don’t have you know, you need, there’s some work we need to do here to set up Algolia and stripe. So if we click on this accessories, menu button, you’ll see this. So now let’s just walk through how we did for time. Okay, actually, I should switch over and off into the code base a little bit. So let’s grab my code

Danny Lake 38:37
Okay, so I want to give a spend a few minutes on the codebase here to help you orient yourself when you when you clone this, and you start diving into this. This is a mono repo again. So the composable UI storefront. This is the next js application right here. And then below that we have the document source application. And again, this documentation is living and breathing. So as you update and you create new experiences in the storefronts or new integrations, this can be updated to help your entire organization and team stay up to date with what you’ve got built and how to use it and how to customize it. And write this really helps you upskill your developers as well, and your business users as they come in, they can have all this documentation of how your composable headless storefront works and what it takes to, you know, and get those team members up to speed much more quickly. Inside the packages directory here, we have several packages here. You know, we have these generic data sources that we looked at earlier, driving our content on our homepage, driving the cart. And if I pop into this service, we can actually see this is the data that’s feeding that homepage. And for me to query this from my storefront I’ll show you that in two seconds. They have the commerce package here as well. And we have the, you know, klevu, and concea. And voucher fi, these are the contributions to composable UI that can add in new functionality for like search and promotions or orchestration of content from concea. And it’s really fantastic working with those folks. Since we’ve released this code base, inside scripts, you’ll have the one time setups of installing and integration or setting up Algolia. So that’s what I’ll walk you through right now of setting up algo. Lea. Okay, let’s talk to Okay, so we’re sorry, if you go to the algo Lea dash page, you can log in and create a free sandbox. And you’ll need to get three API keys. So once you’ve gone there, and all this is the documentation, just for the sake of time, I’m going to skip actually going to Algolia to grab those. So here is my ID, my admin key and demo products. And now once you’ve created your own sandbox, you can run this script here.

Danny Lake 41:25
And what that’ll do, oh, I don’t think I’ve saved this file. This will just push the demo products to your Algolia sandbox. And then you can have that entire product listing page experience that we saw earlier, running with your own Algolia instance, which I think is fantastic, because then you can go into the Algolia dashboard, explore the indexes and configurations that we set out of box by running this command. And that will really help I think, hammer down the value and the customization and what you can take Algolia to do for your own storefront. Okay, I think I will pause it here and hand this back over to David. And I want to make sure we have time for q&a. Thank you so much for for joining us today. I’m really excited to answer any questions that you have.

David Azoulay 42:22
Awesome. Thank you, Danny, that was great. So as we conclude today’s webinar, I want to invite each of you to not just be a spectator, but an active participant in the evolution of composable UI. This is more than just a toolkit. It’s a community, a space where innovation and collaboration come together to shape the future of E commerce. So if you’re feeling inspired, I encourage you to explore composable UI further start building, there’s no better way to learn than by just getting your hands in the code and building something tangible. And as you do consider how you might give back to the community that supports this project, whether it’s through a core contribution, or to enhance the framework itself, or through an integration contribution by adding new services. Your expertise can help composable UI grow and improve. And remember, you’re not alone in this. If you have an idea or a project that and you want to bring it to life reach out. We’re here to provide support to help navigate any challenges you may have. And to celebrate your achievements along the way, as well. So I want to thank each of you for joining us today. Your engagement and enthusiasm, make this make events like this web webinar just not possible, but also a joy to participate in. So let’s connect, continue the conversation and start building something extraordinary together with composable UI. And that said, I think we might have a few minutes to take in some questions. I’ll pass it back to Sean. Yes,

Sean C Davis 44:03
definitely. For all of you watching live, use the comment section in the app urine and and we’ll get your questions answered. I have a long list of questions. But I wanted to start with the talking about some of the services or more the common patterns that you’ve seen. So do you. I guess the place to start is what are some of the most common services that you see? Are you seeing product information typically in CMS, but then the purchase information users might be in an external database? What are some what are some of those common architectural patterns?

David Azoulay 44:50
I can I can take a stab at that at this one. So we published a composable commerce, reference architecture white paper which is really useful, you can find it on composable.com. But essentially, every business is going to be a little bit different, and their needs are going to be a little bit different. But generally speaking, you will always have a commerce engine for sure you need something as a source of truth for your carts for your for your orders. For the checkout experience, there will also almost always see a content management system, that’s where you will, you know, create your pages, your content, your marketing banners, your landing pages, all of that. And then there’s always a search service as well. I mean, there are ways to use to leverage the search functionality of the Commerce engine, or even perhaps, you know, other services out there. But traditionally, will will always look for a highly performance search service like Algolia. And then you got your payments. And you’ve got your analytics like Google Tag Manager, or if you have CDP. I think I covered the main ones there. Danny, Did I did I miss an important one?

Danny Lake 46:08
Yeah, I think the evolution of one you know, once you’ve got the API’s and services that you’re going to work with, you do need to have a orchestration of data flowing between them, especially if you’re on the monolithic removal to the composable commerce architecture, you might need to sync your, your PIN or your inventory or pricing data into the more modern commerce engine, like commerce tools, or Elastic Path or commerce layer. And depending on how those API’s work in the composable commerce space, you might need to also use your CMS to allow your content editors to manage content on your products and content across your entire site, of course, but also add content to the products themselves. Yeah, so you know, the core API’s every single team will need in this space is definitely a commerce engine for pricing and inventory, and a content management system and search. It can be any like Algolia, or clean blue, or even you could reuse your your monolithic. It’s really it’s a mixed bag it all with the answer is always It depends. You know, what’s your two year goal? What’s your five year goal? What’s the long term vision? How much are you willing to invest right now? You know, the organization’s getting into this space composable commerce aren’t traditionally large enterprises. They’re grown out of that platform box, something like Shopify. And now they need to figure out what API so I put together, who do I use? What do I even, you know, where’s my data coming from? What are my sources of truth? So I’ll stop there. Because it is there’s a lot to talk about. For sure,

Sean C Davis 47:50
for sure. And then the, you know, on that note, have, you mentioned monolithic architectures a few times, and it’s something that I I’m, I’m very familiar with the composable space, little less so with E commerce specifically in here, and I talk a lot about gradual migration, that a great way to get into the composable space is to say, you have your current architecture, it might be monolithic, it might be archaic. It might be a number of different things, but we can gradually move you over. Is there any in in the E commerce space? Do you feel like that that process is is any different? Or maybe more valuable, more approachable? Yeah, for folks who are already have an existing storefront? Oh, yeah, absolutely.

David Azoulay 48:42
There’s two things that come to mind here. One is the strangler approach. It’s based on how factories grow, and they kind of overtake one over the other. And a lot of our customers are in that are in that space right now, where they are on their monolithic, it might be an old version and might not work very well. They want to move to composable commerce, how do they do that progressively, right? Because it’s very difficult to just jump from one ecosystem to another. So we promote the strangler approach. And we’ll say, hey, maybe you’ll just switch your commerce engine, you’ll keep pieces of your old platform in play. There are ways to do that and transition one service at a time. So we definitely promote that. And that’s definitely possible. Another thing is a lot of our customers are might be on the monolithic system today. And they might not even know that they are doing composable commerce because they may have outgrown the search capabilities of their solution right now. And they’ve already purchased that say, oh go young or constructor or there’s so many different ones out there. And they’ve already integrated with with a headless service like that and They might not realize they’re already on the composable commerce journey, they just haven’t maybe switched their front end. And that’s where composable UI really has very opinionated, and highly performance, you know, toolkit to help brands with that front end piece. That’s what we specialize at Orem as well. So once brands realize they’ve got to switch the front end, I think that’s when it really kicks off. But definitely the strangler approach is possible progressively switching one service is definitely possible. And that’s the beauty of composable commerce at the end of the day, even once you’ve transitioned fully to composable commerce and you’re, you’ve started to use headless services for all the different you know functionalities on your ecommerce front ends, that it’s very easy from that point on to switch from one vendor to another, maybe your search service is not cutting it for you, you want to take advantage of some shiny new AI functionality on a different search service, it’s very easy to just swap out that service. And and keep the same front end, keep everything, everything else perfectly in place, just switch out one service. And that’s the beauty of composable commerce. And that’s something that’s not possible with monolithic or homegrown systems today.

Danny Lake 51:20
Yeah. Oh, go ahead, Danny. Alright, just to add to that, when you do switch to something like the headless storefront, for your entire front end, say, you get the huge benefit of controlling that server side rendering portion. And with composable commerce, you’re often talking to one, two, or three API’s for any given page or component on the page. And enriching that data together to create you know, personalized experiences, customer targeting certain customer segments. And those things are very hard to do or impossible on a monolithic API architecture, because they’re in charge of the services that happen on the server, you can only do certain things on there, you can’t reach out, you can’t statically build pages with external data. Or even if you can, it’s like a bolt on nasty, custom homegrown solution. And then, you know, you’re kind of just beholden to this kind of a monster after a while. And you can also move as David mentioned, you know, in steps, and we’ve seen customers move to just their checkout page, the checkout is a headless composable commerce experience. And that’s a really good way of like putting your foot in the door upskilling your internal teams to learn how to think and build and work in that. And you’re just doing, obviously, a very critical part of your storefront, but it’s much smaller than the entire storefront, CMS content record and all those user interactions, you really scoping it down to one place, and then you can even do you know, 10% of the traffic goes to that checkout. And the other 90% uses the traditional ones. So you can make sure you’re verifying metrics across the board to make sure you’re not you know, ruining your conversion rate with your your first checkout approach. And obviously, we’re here to help and chat. And there’s also services in that checkout space in composable commerce that can that can help organizations go through with something like that.

Sean C Davis 53:15
Yeah, that’s a really interesting point about it’s scoping that first project to kind of get your feet wet, so to speak, and that you can live in both of those worlds at the at the same time. I like that a lot. David, you you said you said the magic word, which was AI and that seems like it comes up in every every conversation around technology today. And I know Algolia is playing around in that space. And everybody’s tinkering with it in some way. How? How is it manifesting itself in commerce? Like, what’s the how, yeah, what role is AI playing in commerce? Specifically? composable?

David Azoulay 53:57
Yeah. I mean, I think the key thing is composable. Commerce lends itself to AI because it’s a new technology. It’s something you can integrate with. And the biggest barrier and a monolithic or homegrown system is how do you integrate with these new services that have that provide some new functionality, some new business capability, and the beauty of composable commerce is you’ve got your front end, you can start integrating right away with whatever service you want, you can start building chatbots helping customers you can leverage so there’s so many things to say I’m just start with we’re seeing AI being implemented within each of the vendors individually. So content management systems will now have aI assistants to help you write content. I know content stack as a way of helping you generate content in your brand voice you know trained with your content with your data, so that we’re seeing a manifested within each service search for sure. It’s search there’s so much to do over there at a position products when you do a search when you’re viewing a PLP so that on an individual level, it’s targeting you, and your preferences. If you search for like organic in the past, they’ll start promoting organic products, things that really AI help a lot with. So we’re seeing a manifested within each vendor in the ecosystem. But we’re also seeing a trend, where, because all of these vendors are very high on data accessibility capabilities, you’re able to extract data from all these vendors quite easily. And you can pipe them in and funnel them into, let’s say, a centralized data lake like BigQuery. And then you can use vertex AI to power chatbots that are trained on your data. So if you if you want to have a chatbot on your site that helps customers find products for an event, or answer very specific questions, you can actually pipe data from your content management system into your lake house, into BigQuery. Have a chat, let’s say Gemini running on on that’s grounded in your data, and have those interactive experiences with your customers. And the beauty is here, once again, composable commerce you have full control of the front end, you can implement this quite easily. And I’m not sure you can say the same with with the you know, the more traditional systems because of all the work that you have to put in to make sure everything’s integrated. And sometimes you kind of have to like, you know, forced things into a system that wasn’t built out. With that, with that, that in mind when it was built. So I hope I answered your question.

Sean C Davis 56:42
100% Yes, yet. Yeah, anything anything to add to that, Danny?

Danny Lake 56:49
Ah, I’m excited as a consumer, you know, when I go shop for clothes, my most, you know, composable or conversational commerce with AI is I go to the store, I want to, I’m going to go to a wedding. This is the theme. Here’s the shoes I usually wear. This is a type of shirt I dry, or this is my size. And then it’s just an assistant walking me through the entire catalog. So now the product listing page, you know, that experience I showed earlier, clean that off. And now I have a personal assistant who knows everything about the brand, the products me, and it’s, you know, it’s greatly going to improve discovery of products, you know, it’s going to allow that customer to discover the way they want to go through and, you know, you’re going to be feeding them exactly what they’re looking for based on their questions. And the more you know about the customer, the better those shopping experiences will be over time. So I’m really excited to, to start shopping in that manner. And you know, be a part of that wave of implementing that and building those conversational engines into, you know, composable, commerce, accelerators, and then helping brands get along with that journey.

Sean C Davis 58:03
Yeah, that’s, that is really interesting. It’s like having a shopping assistant, but someone who knows way more about you and in probably even more about everything that’s available. Yeah, very, very cool. Okay. I want to wrap up here in a minute. The last question, one of the the coolest things that I saw was actually not about the commerce itself. And this could be because it’s, it’s my world of it, too. But it’s the documentation. And the problem that I’ve, I’ve had, and I have attempted to solve in different ways over over time, which is essentially, we have this thing that is repeatable, or at least the core of it is repeatable, but there’s a ton of value in documenting the specific elements for your clients or, or your stakeholders or your organization, whatever that might be. And so I think that that product that you built within the experiences is very cool. And I’m I’m curious if anything that you can maybe maybe some of the harder challenges that you solve there, or things that you you learned that you didn’t expect. And in building that piece of the product.

Danny Lake 59:15
I think I think most of it was value that we discovered, you know, having your documentation live right in the same mono repo as your code just removes all barriers, or at least 95% of the barriers as a developer. writing documentation isn’t my favorite thing. You know, as you know, I want to live in the code, I want to push my code and deploy it. But now it’s so easy for me as developer to go in and update that documentation at the same time and keep your knowledge in sync with your implementation and the services that you’re using your business logic. And again, it just helps upskill any new developer coming in on your team or even a business user just to have up to date documentation because if you separate it from your storefront code base and your integrations, that thing will be forgotten over time, it’s gonna get pushed to the side, you’ll plan to update it, but most likely you never will. So having it live inside the same code base means pull requests. If I see a pull request that doesn’t have documentation updates, I will say this is not done yet. You can’t merge this code, right. So it just helps teams grow their knowledge along with their headless implementations.

Sean C Davis 1:00:29
Wonderful, wonderful. Danny, David, thank you so much for being here.