Build a complete commerce storefront with BigCommerce, Tailwind UI and Uniform

we have recently announced the official partnership between big compass and uniform and in this video i want to show you how easy it is to set up a complete storefront with bigcommerce a headless cms some personalization and all running on the jam stack creating an enterprise great composable commerce platform was never this easy with uniform canvas you can connect any headless cms to bigcommerce you can compose experiences without touching the code so you don't have to be asking developers to connect things up in the front end uniform dust is for you in a simple interface for both content editors but also for developers in this demo we are using the excellent tailwind ui commerce components tailwind is loved amongst developers and their component library is really solid why reinvent the wheel when you can use ready-made components to have a super fast time to market these tailwind ui components that are living in the front end are connected to uniform canvas components that are in turn pointing to content that is coming from different headless sources so you can have headless sources from bigcommerce or from contentful as a cms you can compose with these in uniform personalize them and hit publish to get a final result alright enough talk let's actually do a demo this is uniform canvas and in here we can manage our compositions so let's add a new composition for a file 2021 campaign we make it the composition type page and we call it fall 2021 and so and in here we are now considering this to be a page it doesn't have to be a page necessarily it can also just be a collection of something a composition but in this case it's a page so what we need to do is we have to give it a slug so a part of the url and so let's call it fall 2021 and so as you can see there are a couple of slots here you can add hero or header content main content and footer content so let's start by adding a header and in this case i just want that to be the store navigation and you can see now i can select my main nav from contentful and i will do the same for the footer so in the footer we have a footer type and in there we select the default footer from contentful we could have just made a new footer navigation as well inside contentful and then connect that one so now we just have a header and a footer so let's add something for main content and i would say let's do a promo use the split image variant and these variants actually come from the tailwind ui library and from contentful let's add our kitchen promo okay so now with everything done let's hit preview and have a look what we just created and so this preview is actually your frontend code of the website and so you can see we have a hero here a promo we have a header we have a footer but this is a campaign right so generally what you want is a little banner on the top that says hey this fall we have free shipping so let's add that because there's actually another slot here and so in here we can add an announcement and so now that i look here actually i don't see the announcement that i want so let's now actually make a new one in contentful so fall free nah let's say this fall free shipping and let's publish this and so now we've created this in content tool and it's already been connected to this guy here and so let's have a preview of what just happened you can see this fall free shipping and so that's how easy we can actually work with connecting everything up and so now it's time to add some products well we have a product rail component and so let's do kitchen appliances for the fall and so you can see that you have a product selector here from big commerce and so let's find some kitchen stuff well this guy this guy let's look more this fits and this one okay let's accept and save and so let's preview what we've done and you can see now that we have kitchen promo and kitchen appliances and suddenly we are combining content to products from different headless sources but your front end feels the same and it's using these solid tailwind ui components to build you a super fast scalable website so now that we've done the basics i would suggest we have a look at personalization because that's where this becomes super strong traditionally product personalization is pretty complicated to do but now it's basically just a click away and so what i've set up already in our back end is that we have different audiences or different intents on the website for either kitchen stuff or garden stuff for the fall and so what i want to do is grab this hero or this promo and actually personalize it for people that are either more interested in kitchens or gardens and so we can say personalize this right in kitchen can add an intent deck for kitchen and so i can also add another one that is a promo section that is also a split image and let's add our garden and so now that we have the garden selected we have to also say make this for a garden and so inside the personalization we can now say this is the promo personalization and we wanted to select all the variations and only show one so let's preview this so right now we have no personalization so it will just grab the first variation so i'll be using our little developer tool here to say what if i have more garden intent let's set the score and there it is there is your garden content but when we scroll down you still see that these are kitchen appliances right so if i'm interested in garden stuff why not also personalize my products to show garden stuff well we can do that exactly the same way let's hit personalize this and so our product rail here that we currently have this is actually kitchen stuff but let's also add one for garden and so this would be gar gardening this fall and so let's add something else so these are some plants let's see what else do we have let's go for all this and then we accept and then let's add the garden tag and we also have to say okay this is the product rail so what i'm typing in here is actually going to google analytics so later on in your analytics you can see which personalizations happened and so let's publish and let's have another look again and so now we still have the garden intent score set and you will see that the products are now also gardening um if we wanted to let's say let's do only kitchen so the user is interested in kitchen stuff then we hit set scores and kitchening is happening and so this is personalization in a nutshell and you saw how easy that was i didn't need developers to help me out at all i want to show you one last thing and this is something we call patterns because what happens if you have let's say 10 campaigns running all with a different composition but you want to add the store navigation with an announcement bar everywhere you might even want to add two announcements right so let's add maybe bigcommerce is awesome well because it is and so now what we have we have two announcements and one store navigation and if you want to do that across multiple compositions it's a bunch of clicks and so what you can do now here is actually convert this to a pattern and let's call this the navigation pattern and so what we've done now is we've created a pattern that holds the navigation and those two announcement bars so it's now only one click to edit and so you can actually edit this pattern if you want in our pattern editor you can personalize it do anything you want in this pattern editor here and so now if i wanted to add this pattern to my home page for example that doesn't have a navigation at the moment i could say rather than add store navigation or header let me just add this pattern here and now done i don't have to click everything together and this just scales a lot easier so this is everything i wanted to show you today the exciting thing is everything you just saw is already available if you are a big commerce customer you can go to the marketplace and connect uniform to bicommerce and you're good to go alright cheers see you soon