Checkout Toolbox

Flex Theme Sections

Linear Shopping Experiences


See Macarooz website

Video Walkthrough of the Site

Transcript of the walk-through video
Hey, Scott Austin here from Jade Puma. This video, I'm gonna walk you through macarons, which is a Shopify store that we built for macarons. They previously had a WordPress and w commerce site. We migrated all the data orders, products, all that good stuff into a Shopify store, and then built them out a shopping experience for their products. So what they sell is these macaroons, which is what you see here on the cover image. And then also they sell a product called Mac pops, which they, they designed. So let's walk through that shopping experience. And the first one is we're trying to get the customers multiple ways to buy the products that they're looking for. So in their previous store, they only had to build a box function, which I'll show you here in a minute. So we came with the concept of, well, some people probably want to build a box and pick every single flavor individually. Other people just probably want to grab, you know, a, a preset box and, you know, quickly check out from that. So we created these collections there's a fruit collection, a chocolate lovers, a classic bestsellers. There's even more of them below there, but that allows customers to just say, you know, I'm looking for a gift or I need something for a party. Let me just grab one and go. And now that, you know, the store has been up and running for quite a few months, now we actually see that, you know, both of these methods are popular. The build a box is still popular and the preset collections are also popular. So giving more people, giving people more choices in this case, looked like a good decision. And on the macaroons, you know, let's just look at one of the product pages here. They can select the number of macaroons they want. I like these, you know, highly contrasting illnesses. So you're really qu which one you're picking and notice as they change the quantity, we're actually changing the product image to map to that. So when they add that to the cart, you know, it's very clear to them. They're getting six macaroons when they, the image and the cart and their checkout process and their confirmation emails, we try to make it easy for the customers. And then we also allow them, let's say they want to, you know, search by flavors. Also, they get to look at all the different flavors that they have that are available today. And they can also look at past flavors, go. That one looks really interesting and, and that kind of stuff, you know, if we look at one of the existing flavors, birthday cake you'll see that this is actually a product page up in the URL, but we've got a unique template for the flavor. So you can't purchase them, but you can see what collections they're in. So this one happens to be in the build a box. You can click off the, build a box and, and, you know, add your birthday a cake Macaro there. We've got the product seals with the, the consistent theming that Mac Rouge came with. They, the colors that you see on their site, most of them were there in their previous store on, I really like their, their color choices. So it's fun to use those colors throughout the experience. And you also see we have nutrition panels, and then we also have ingredients, you know, the details and the ingredients, the little morning labels contains almonds, contains peanuts and those kind of things. So lots of information on this flavor page and actually gives them a way, if we look at the flavors of the month, for example, they, they do this program every month where they have new flavors and for December the flavor of the month, pepper, pepper, bark, and sugar cookie, and gingerbread obvious holiday themes. But having these product pages for each one of the flavors allows them in all their marketing materials, whether that's going out through email or on the internet, you know, on their social networks, it gives them a place to point people to so that people can come to these flavor pages and, and read more about the flavors and then see what products they can pick to get those flavors presented for them. So let's go into the birthday, want it from here, we're gonna go to build a box. And as I, I mentioned before, build a box is a very popular way to buy today. And that's why it's in the top nav of its own level. So you'll see at the top nav, we're, we're all, all these, you know, links are leading to the same places of, you know, ordering a collection of macros or building a box, but there's multiple ways you, you can get there, you can start with macrons, you can start with build a box. You can start with flavors and they all, they all end up in the same destinations and getting you, looking at the products, the way that you want to look at them and make your purchase decision. So let's go into the build a box, cuz this is fantastic functionality. So this is all built out in liquid and JavaScript. There was no app that we added. We just, you know, did the code and added it to the theme directly. And you see here, you know, what we're doing is we're pulling up and this is a product in, in the Shopify theme. And it's looking at all those flavor products and looking at which ones are active and adding them. So we in adding into this experience, so we developed a process with the store. Staff can easily add and remove flavors from the store and they just show up inside the build box automatically. So here, the customer can say, you know, I want 6, 12, 24, 48, whatever number they want. And when we first launch the store, the previous quantities I think were six, 12 and 24. And I said, well, why don't we go larger? And the second we added a 48 people started ordering the 48. So when we started ordering the 48, we added the 72. So not that many people were buying the 70 twos, but if, if that became heavily purchased, then we would add a, you know, a 1 44, something like that. But it was based on, you know, customers were actually buying 20 fours. So let's add a 48 option also. And then customers started buying the 48. So then we added the 72. So let's right now let's go back and pick six and you'll notice here at a, I'm gonna add 1, 2, 3, 4, and five, and you'll notice at the bottom, it says, please make sure you have six, you've selected five, one more to go. And one night click on that last one. Right? I have that hover effect over the ad button there. Now it says, you've picked your six items. There's zero more to complete your box. And the add to cart button appears at the bottom and also at the top. And I can reset my quantities here. I can change from six to 12 and then the, the add to cart button would go away. And so I got up to that 12 number and also notice that all my ad buttons are now inactive. So we, you know, we've locked it down. So we hit your six. So you want to change your quantity or do you want to add this to your cart? Right? Most people are gonna add it to the cart and also notice as we select that, we're trying to make it really, really clear to people what they're doing. So we, you know, have this yellow background for all the flavors until you add one. And then it turns into a green background. So it's easier to visually which of the flavors are the ones that you've selected. And if you've got questions about a flavor, you can just click on the little info panel and you can see the warning label. So, you know, you know what ingredients are in there and tells you a little bit about the flavors. And if you click learn more, it'll take you to that flavor page that we looked at before. So once again, lots of content, and we're just allowing people to get to it from multiple directions based on however they're shopping that day. So then when I add it to the cart, I'm gonna go into my cart. Now it just changed the quantity up here, gonna go into my cart and share what that looks like. So I, I added earlier a chocolate lover's collection and I just add, build your box and you can see we added line items for every one of the flavors. So as I'm checking out as the customer, I know exactly what it is that I purchased. And then the fulfillment team on the store side knows exactly how to fill this order, cuz it's very clear what's going on. Now, if we look checkout experience here, you'll also notice that it is highly branded and highly color. You know, we got, you know, full color backgrounds on both sides and, and all that good stuff. So we have these collections you can buy, we've got the flavors is one another way to shop. We've also got shop by holiday. So let's go down to, I think it's in the gift section here and here we list out these different holidays and life events. So right now, as I'm filming this, it's just a couple days before Christmas. So they actually stopped promoting selling these for Christmas, cuz it's too late now to, to ship for Christmas time. But what they had on the homepage beforehand was they had a third button here that said, you know, holiday and the holiday, when you clicked on that would take you to this landing page experience we built for different life events and for different holidays. So this helps them with their calendar throughout the year. You know, in late January, they'll start promoting Valentine's day and they'll push to the, the Valentine's day landing page. You can see all the different landing pages they've got for the different holidays and events that they're promoting throughout their, their marketing calendar in the year. So on the holiday landing page, right? We've got that themed with graphics that are more appropriate holiday. They've got actual specific products for holiday. You see they've actually stopped making them. So we say currently not available. And then you know, more information that they can read. Let me actually see what happens by going to one of the not available ones. Yeah. So we've got the CLA back in stock notification form here, which is really so, you know, if someone comes in, let's say they haven't opened up their holiday sales yet next October, someone may find this page and go, I notify me when they're back in stock, they can just put their, their information in here. And then when the store staff goes and turns this product on again for holiday next year, CLAL automatically, we send out an email to everybody who signed up for a back in stock notification. So we're hoping that that will be something that will be really useful for their holiday promotions. We haven't done a full year since we launched a store. So we haven't seen it, you know, fully work yet. But we want to see how many people actually sign up for these notifications. And they then when the emails go out, does that actually convert and generate sales for them, a couple other shopping experiences for them at the top here there's corporate gifting. So they have, you know, a lot of corporate gifts they can give for holiday presents or welcome a board and all that kind of stuff. So they talk about that and a little contact form for, and of course they've also got gift certificates. These things make, you know, great gifts, but it's better to, you know, let the customer, let the gift recipient, build their own box with the flavors they want. So many people actually give them as gift certificates. And let's go back to the cart and show you a couple merchandising pieces we put there. So right here, we've got this little message which is really important for these guys, cuz they actually only ship two days a week, Monday and Tuesday because they have to ship all their products as they're they're fresh made. They have to ship them two day shipping. So they don't wanna ship it out on a Friday and have it sit on a truck over the weekend. So they're really clear. We ship Monday through Wednesday, each week, orders placed after 10:00 AM on Wednesday, won't be processed till the, a following Monday. And they've also got a holiday messaging in here. So this little custom code we put in to their theme to allow them to easily show and edit that message. And then another li liquid code I put in here was a little upsell at the bottom for, you know, a little cross sell for products. This automatically looks at, does this product have variance or not? If this variance, it adds, if it does not have variance, it adds that product to the cart. If the product has variance, it takes you to that product. So the case of their gift cards, you actually have multiple variants for dollar amounts. So it takes them to that page. They can click the dollar amount they want and then they can add it to the cart. And then when that product that's being cross-sold and the cart is already in their cart, we don't show the promotion. So let's look at some of their evergreen pages. We showed you some of the gift pages. Let's just click on another one like graduation, for example, and you, you can see each one of these are themed and they do come up with unique products for each of these events throughout the year. So right now it's not graduation season. So they're they're outta stock. But once graduation, each season comes, they'll turn these on and things will go live from there. They're about us. Paige is great. They, they tell their stories, the husband and wife team outside of Houston, Texas they've been doing this for years and they, they walk through their whole story really nicely. It's kind of fun. They gotta cute little video of them. And then they also talk about, you know, why they're so good, you know, from a quality standpoint and, you know, ingredient standpoint. I like putting videos in whenever we can, they didn't have a ton of videos, but they did have, they did have some that were quite interesting. Right? And you can see those here. You can see like they're making these products by hand kind of thing. And, and to me that's really in, so I put that information in there got a little history of macaroons people, people that myself got very confused between Macon and macarons with two O's, they're very different type of cookies I found out. So because I learned a lot about them in the process, we, we made it about pages for the, the history of macarons for people learned just in that. They've started doing a blog this year and building out content for EO purposes and that's working out really well, creating, you know, consistent content. And then we put their policy pages in, in nice looking branded elements like this that you can see. We've also got a wholesale page. They do a lot of wholesale business. So this is for people that are interested in wholesale, they can learn about it. They can sign up, get more information. And then, then those that are wholesale, they can log in and we've actually got some quick order forms for them that make it easy for the wholesale customers to purchase in bulk instructions in care. This page is one that she goes out in a lot of the emails, like the second you place in order. And we, we notify you about fulfillment. We send you to the instructions page so you can learn about, you know, how do you, you know, care for your macaroons when they, they come to your house, how long they last in the fridge, how long they last in the freezer and that good information, nice to FAQ with the the flex in the reason here as that accordion functionality that I like so much. And then we've also got a contact us page and their map shows up there. Yeah. And we also have a reviews, page reason, judge me for reviews. And they started building that out, getting new reviews now. So that is their site. Let's look at the homepage. This is a custom banner we built on top of what comes in the flex theme. And that was because we have the, like I mentioned have these buttons. I think there's the ability to have up to five of them show up on the page, depending on what promotions and what seasonal events they've got going on, they can add and remove those and then pick from their color palette, which colors they want for the different buttons. We got some more trust badges up here using that same color scheme we're using on the product seals some nice testimonials, you know, the as seen type content to, you know, build trust and credibility. And you should absolutely look at their Facebook or sorry, their Instagram feed the photography they take is just absolutely adorable. They do a really good job of consistently pumping out cute fun photos all the time with all the different seasonal promotions and different flavors they have going on. So it's always fun to look at their Instagram. So that is Mac store a store migration we did from w commerce and WordPress put into Shopify built on the flex theme and a lot of custom liquid and JavaScript on top, especially for that build a box function that is so important for their business model. So thanks for watching.

Responsive Views of the Homepage

Pinterest Board of the Project

JadePuma is a certified Shopify Expert. If you need any help with your Shopify store, we can help.