Fine Linen & Bath

Hey, Scott, Austin here. In this video I'm gonna walk you through the store redesign that we did for fine linen and bath, fine linen. And bath is located in Branford, Connecticut, and they sell luxury linens for like beds, tables, and bathrooms. So towels, sheets napkins, that kind of stuff. And this, this is a very challenging story design because their product catalog is so large, they have thousands and thousands of products for, you know, for example, let's just go to the one of the complex products here, which is the abyss super pile towels. And I'll show you what I mean. So this bis super pile towel is available in like 80 different colors and then you can get different towel sizes. So there's bath towels, then there's hand towels, there's washcloths bath mats, and then they also have a free swatch program. So there's a lot of complexity in that. And, you know, we had to think along and hard about how to present this information to the customer. And we came up with this product page here in this product form especially has got a lot, a lot of functionality inside of it. And it was one of those things where we built it one step at a time and added one more feature, saw how customers responded to it, integrated another feature, saw how customers responded to it, and integrated another feature and evolved it to this, this product page that we're really proud of. So let me lemme show you some of the features here. So the first one is we've got 80 or so colors and we've got all these other different sizes and we can only have a hundred variants in a given product. So, you know, 80 colors, you know, times 1, 2, 3, 6, 7, 8, 9, 10, 11 different sizes that that far exceeds the variant limitations in a Shopify product. But instead of doing a product options app, because they needed to manage the SKUs of all these products, so a product options app, you can't manage SKUs as easily. So what we did is we broke this product into one product for each color. So this page here is the white one. You can see right here we have the white in the product name. And if I click on this Navy one here, I'm now on a different product. So each color and we have a, we have a whole taxonomy and technology we built behind managing all of that. So we're dynamically when we load up the page determining all the color versions, all the products or different color versions of this product and rendering it on this page. We even also have a custom promo in here, which is for a custom product builder app that we added in. It says, you know, use top selling colors and if you click on this, it'll open up and I'll do that in a new tab just to show you. It'll open up in a new tab, the custom product builder app that allows you to configure which colors combinations you want to try. So we could say, well I want bath sheets that are bluestone and I want four of those. And then go on to the next page and you can see there's the blue one there on the page. And then I want to pick an apple green and there's the apple green and you can see how those colors go together. So there, you know, this custom product builder, which is separate from the product page, but what we did is on the product page we included a promo to that, right in this color swatch selector ability. And one of the powerful things about this color swatch is we didn't wanna show all the color options. So now we click on this and it expands it to show all of them. And we saw as we launched that the first time when people went to a different product, it opened up the new product, but it didn't keep this color swatch thing expanded. And you could see people wanted to compare color by color by color. They wanted to go through all the reds and then go through all the yellows and things like that. So then we added in the ability, when I switched products, we remember the setting was the color swatch open or closed? And if it was open, we leave it open, but if, if it's closed, then we leave it closed. So little details like that were important. And the only way we figured those things out was by doing this iteratively and actually rolling it out and watching how customers responded to it. And we did that through tools like Hot Jar. So they have the ability to see all these different colors, pick the one they want, and then on this, we call this the spreadsheet view. They can say, well I want two bath towels and I want two, you know, Euro bath sheets and three of these. And it allows them, and you can see as they select one, we change the background colors so they know which products they've selected. And this is a really handy way for people because they're, most people when they come to the page aren't just gonna buy one towel. They wanna buy a set of towels, so they want the bath mat, the towel, the hand towel, and all those different things. So this allows them in one click, in one add to cart, click to select multiple different products and add it to their cart. And the problem with that, we rolled that out, we absolutely loved it. You can see here we have a back to product link. The problem with that was we loved it, customers loved it, but Google hated it. And the reason for that is there's no price on this page, right? There's all these multiple prices per per variant. We show the price there, but there's no one place where we say this is the price for this product. And Google actually requires that in Google Merchant. So we had to do, you can see this little toggle here. We've got the list view, which we're currently on, and we take it back and show the traditional view that, you know, you pick a variant and the price changes, right? So here you can see the price and as I click on that, that price changes. And this satisfies Google merchants needs. So we had to have this as the default product page experience for Google Merchant, right? Because that, that customer acquisition tool was so important to us. And then we allow the customers to change to the list view. And the nice thing is we persist that list view settings. If you change the list view throughout the rest of your shopping experience and across multiple shopping experiences, we keep you on list view unless you change back. And of course we put a little information icon to try to explain to people how, how to, you know, what that action does. And then another important thing, let's go back to the traditional view here, is this is a hard page to understand, you know, what are my towel options? So we added a filter to the variance that says, show me just bath towels. Show me just hand towels. And you'll notice we've got some JavaScript in there. When you change your setting to watch cloths, it automatically selects the first one, right? And it it deselects anything else. So right now, if I had selected this and go back to washcloths, the, the selection of the hand towel is no longer selected. And once again, these are little things we figured out as we watch people interact with this. We're like, they'd be on this, you know, view here and they'd be spending all their time looking at all the different options. Cause it was hard for them to figure out which ones. And that's why in the list view, we ended up bucketizing them under bath towels, hand towels and washcloths and the different types. And you can imagine we had a lot of logic we had to add to the code and add to the products to standardize the ways things were done so that we could say that, you know, all towels include anything with a variant of bath towel, euro bath sheet and bath sheet and things like that. So this product form is, I think, fairly elegant cuz it's doing a lot of things. But it required a lot of data synchronization across the back end. So lemme show you what we did for that. You know, open up in a new tab and just go to our, our, our page of documentation. We make this for every store or brand guidelines page. And we actually hide this from Google search and from site search so it doesn't show up. But this is where we document, you know, the, the color schemes that we're using, the fonts and all that good stuff. But we did in this one is, and you can see we even standardized what size imagery we wanted to use across the site. What we did for this one, let's skip past tutorials for a second. We built a ton of store management tools. So there were things that we were talking about before, like we have to have this or that type of information on the site. So for example, we want colors important when shopping for linens. So we said, let's build a tool that shows every product that's missing a color tag. Now not every product should have a color tag, but you know, every sheet product or or bath towel product should, so on this one here, it brings up any product that's missing color in the all products thing. So you can see the, the laundry detergent, well it makes sense, it those don't have color and the swatches, they don't have color cuz it's every color. But if I was to scroll through these pages and I would see a and those are gift boxes. If I was to see like a towel, you know, set or something like that, I could say, well wait a second, I need to add a color tag to that. So this this tool, like I said, we, we built many, many tools, helps them figure those things out, right? So cuz managing a taxonomy and Shopify's hard cuz Taxon doesn't have built-in or Shopify doesn't have built-in taxonomy tools. So we have to build them ourselves, which is what we did a lot in this store. So we built another one that said, all right, every product, you know, should be, or most products should be tagged with color. But what if someone mistakenly tags it twice with two different colors? So we have a, this one is for all products that have multiple color tags. So more than one color tag. Now sometimes that's okay. And you can see here we're actually showing this one has two color tags, blue and green. Cuz this, this shade is kind of blue, kind of green. So it's okay that this one is under both of those buckets. And some of these products have two colors. Like this is a beige striping on white. But we actually built a tool that shows you how many color tags it has and what those color tags are so the store staff can go, yep, that's good, that's good, that's good. And help manage their taxonomy. So like I said, tons and tons of tools and we'll show you a couple more of those in a second. So going down our product page, right, we talked about the product form. Here we have a rich page. And now this this product page, this product template is actually specific for the abyss super pile, bath towels and mats. So all of the 60 80 products that are abyss, super pile bath towels, they all use the same template. So they create this content one time and it applies for all the products under that bucket. And you can see here we've got quick nav buttons. And the nice thing is there's content elements. There's standard content blocks that we built out custom sections for in the flex theme and online storage 2.0. And if those are added to a given product template we automatically populate this content up here, the quick nav button. So if a different template didn't have specifications content in it, the specifications quick nav link would automatically not be shown. So we tried to, we did a lot of customization in this theme to make it as easy for store staff to maintain as possible because this store is so complex with thousands of products. So you can see we have a description and this one has a video in it. We have a product specifications. So this is done through meta fields. We used a lot of meta fields in this store. And you know, I'll show you again on our taxonomy tools. Let's see, for example, there's like this GSM element here. So if we go back to our taxonomy tools, there's a missing GSM tax, there's a tag or that one's done through not meta HILs, but done through tags, right? And we can see here that we're going to list any product that is missing the GSM tag. Now not every product has gsm but this allows the store staff to once again look at it and see if anything's missing that they need to fix. And this gsm, if I remember correctly, is done through tags and through meta fields. Cause we have a generic GSM tag, which is GSM 700 to 800. It's a range so that we can bucketize them in in search. But then we have a meta field for a specific tag. And we have logic as we build out these product specifications that if the specific one exists, use it. If not use the generic one. But you know, once again, long product content, lots of information going on. We've got infographics copy. Now we're onto a video more copy. We've got a accordion functionality that talks about the brand, talks more about the things about the towels and the shipping policy and the return policy. I like the shipping one, it's got this little graphic in there. And then we show related products. Now this isn't generic related products. This is custom section we built where the store staff can say, well this abyss, right, this is abyss super pile bath towels is the product name Abyss super pile bath towels. Well, abyss makes other products that go with it, right? Like the abyss double bath mat and the abyss have core bath mats and the abyss have core reversible bath rug. So we show specific products and that's a meta field. So store staff can go in and spec. Actually I don't think that's a meta field. That one is stored at the template level so they don't have to go into every single one of the products. So they can do it at the template level for this Abyss product. And it shows up across all the 60, 80 ones. And then we, you can see here we have judgment reviews. And that's, that's a product page. It's a pretty typical product page in this store. This one's got a little more content than most of 'em cause this is one of their better selling products. So it's a, it's a great way to demonstrate all the functionality we added into the product page. Now because this store has got a lot of custom elements that we built that are beyond what Shopify provides and what the flex team provides and boost, which is the app that they're using for filtering on the product pages or on the collection pages, which I'll show you in a second because there's so much custom stuff in this store. Just like we built the tools. What we also did, let's see if I still have, yeah, so there's all these different tools. We talked, you know, about a few of them, but you can see there's like 20 of them that we built for all these different things that are important. We also built out a library of video tutorials. So instead of having one a, I always do a video tutorial for my stores. But instead of having one, you know, 30 minute, hour long video for this store, cause we were doing so much work, we broke 'em down into small sub-segments. So there's, you know, a video tutorial just about our brand pages. There's a tutorial just about product stickers. There's a tutorial just about the collection skinny banner. So as we added custom functionality or if the store staff was confused by something, we would just go and create a tutorial, you know, for them. And you can see here, if I click on one of 'em, we, you know, we just have videos we make and you know, he explains it for the store staff. And then as new staff comes in, those videos are there for them forever. So they can always, you know, go back and, and refer to that information and learn from it. So that's the product page. Now the shopping experience for, you know, store, cause there's so many products can be a little bit complex also. So you can see we have the, you know, three top level categories of Bed, bath and table. There's some other ones there, but those are the big ones, right? So we go to the bath one, we don't go straight to a collection page, right? We go to a page that gives people options. Are you looking for towels? Are you looking for rugs and mats, beach towels, you know, and all these different options there. So we, we give them an understanding of the different choices of product types. We also let them shop by color and shop by brand and read information about, you know, how to make the right choices for these types of products. So there's a lot of different ways that they can shop for bath products or if they wanna see all, they can also do that in this store. We have the boost product and search filter app. It just recently changed its name, I forget what it's called now. And then you can see we've got lots of different Aspects, criteria that people can filter by on this page. And we do different elements for each of the top level ones. So bed has a different filter tree than bath, which is a different filter tree from table. And each one is bespoke for that type of shopping experience. And also what's important is, you know, shopping by brand. So we, we have a brand top level page where we show all the different brands and you can pick which one's important to you or that you wanna learn more about. You learn more about that brand and then you can drive in. Now this one is not available online, you have to call them up. So let's go to one that's a little more rich. Let's go to the abyss one. So on this one here you can see, you know, explain a little bit about the brand and then you can shop by different categories, learn more about, you know, some of the programs they have on custom rug sizes and monogramming. And then there's, you know, blog articles about Abyss products and even more information there. So, you know, giving the customer as much information as we can, giving them multiple ways to shop and find the products that they're looking for. And a couple other criteria that are important in the merchandising side of things. One is new. So we show them new products that are in the catalog and we did that by brand. So that was a bunch of custom work to build out this template. But it gives them a really nice experience. And then we also have products that are on sale. Some people like to, you know, see what deals or clearance items are available. So we allow them to shop that way also. And then if we go down to our footer and show you some of the evergreen pages that we have, you know, just to give you a couple of examples, the type we sta type of things we did, let's just look at bespoke linen options for example. So we built out a page that explains, you know, how, how to get whatever you want done. Cause one of the things they do, and I'll show to you on the home homepage, is they don't just sell their products this fine Leonard and Bath is really into the consultative approach and, and helping their customers make decisions. So that's why they have a free swatch program, which I mentioned before. Which they don't show here on the homepage. We saw a promo forward a little while ago. But they also allow people to call in and, and or book an appointment and actually get more information. So not only gener you know, general customers or consumers, but they also work with a lot of professionals who were working on. Let's see if we can get that image to show up. You know, it was just a hiccup on Shopify side. So like property managers and, and yacht managers will work with them and they allow them, you know, to give 'em a call at any time and, you know, or set an appointment through an email and those kind of things and actually have that acc you know, consultative approach. They even, you know, publish their phone number here for anybody to call them. And they're, they're always there to help you. Like, oh, you know, you have this type of, you know, coloring in your bathroom. Well, here's the towels that we think would work well, why don't we send you some swatches? So that's a really important part of their brand and some of the stuff that they're trying to do throughout. And you know, if we look at their, you know, blogs for example, let's just go to their buyer's guide one. Let's see what that looks like. You know, they, they spend a lot of time and energy creating content to help you make good decisions about what products are right for you. And you can see what we did here is, you know, we made a com custom template for this page and then we're just showing blog articles filtered by different tags to show these elements in, in and easily bucketize them for the customers so they can see resources for bedding and they can see the buyer guides for bath and the buyer guides for a table separately. Alright? So lots of content, lots of products, lots and lots of customization in this store, but this gives them a competitive advantage over the competition. Cuz there is a lot of competition in this space. And we looked at what the competition was doing, but we didn't try to match them. We just set that as our minimum bar. We had to make our shopping experience easier than theirs, right? And so, you know, that was our goal and it was nice to have that goal cause we would try something out like, no, this is still not as easy as this other store is doing it, so let's work on that some more. And that's how we got to that really evolved, you know, product form that I told you about and showed you a little bit was through that evol evolution and knowing that our goal was to be better than our competition. And now when we look at the competition's website and how, how you can, you know, purchase the same products on their site, we know that this experience is better than the competitions now. So, you know, we didn't, we didn't try to match our competition. We had to exceed the competition in this case. And there was one more thing I wanted to show you. Oh yeah. So because there's so many products on in their catalog, one of the things we did with Boost, and that's the filter app, right, is we have a lot more than 99 bath towels, but we worked with them and Boost is really good to, you know, they do custom code for you and they're responsive and they work with you. So what we did is we came up with some functionality that says, all right, we're only gonna show one abyss super pile, bath towel, right? But when I filter, then we're gonna show all of them. So for example, if I filter on blue, you'll now see that there's, you know, this abyss super pile, this abyss, these are all different abyss super piles that are tagged blue. But we hid them at the top level and now you can see there's 148 products I filtered and ended up with more products because at the top level we're only showing one version of every product, not every color version of every product. And that, like I said, that was some, some work we did with boost. They, they did some custom code on their service which we're really happy with and works really, really well. And it helps the customer find what they're looking for more easily, right? Because it was a challenge, you know, we'd see customers, they'd do a search or get to a collection page and there was just too many choices, too many options. So we had to figure out a way to make it easier and more intuitive for the customer. And that's what we came up with. There's tons to more to show you in the store, but you know, there's so much, much going on, we can take another hour on it. So I'm gonna close it out here and, and definitely recommend you check this store out. There's a link on the blog article page you're probably watching this video on. So go check out the store and play with it cuz you're gonna find some, some really good content and some really compelling shopping experiences. Thanks a lot.