Loodor

Hey, Scott Austin here in this video, I'm going to walk through the store build that I did for low door. This is a new Shopify store. It's a new site. It didn't, it wasn't on any platform before it's a new brand and a low door is a series of books called the load or tails. And the first book coming out is the land of the Pines. So the author contacted me to put together this site to get ready for the launch of the book and the book launches in August. So it's a few months away still and we put it on Shopify, even though she's not selling any products in this store right now, we put it on Shopify because there is going to be associated products to the books and the books themselves that need to be on an e-commerce platform. But right now this is a really content heavy website and a really rich design website, much more so than most traditional e-commerce stores because this site right now is about building a brand more than it is about selling products. So let me walk you through the store, cause there's, there's a lot of really good stuff here. And to start with, I use the flex scene, which is the theme that I use for almost all my new store builds these days. And this, this storage requirements went well beyond what was available in flex. So we had to do a lot of custom coding to make things work that just weren't in the box in flex. That said though, flex gave me enough flexibility, no pun intended. To allow me to do things that building this website would have been much harder in another theme. So here I am on the homepage. Let me just refresh the page. Obvious you can see, you know, we've got a video going on and that's, that's not part of flex to have a video on the homepage banner by default. And there's some custom code in there, but let me show you the page to begin with. So the nice thing about working with a children's book is they have lots of absolutely fantastic art. So throughout the store or throughout the site, we had lots of graphic assets to leverage because the artist had put together all sorts of renderings to put together this illustrated children's book. So throughout, you know, everywhere we go, just absolutely beautiful art through everything, which is just, it was so much fun to work with and have such great assets to be able to leverage, you know, one of the hardest parts about building a store is the content in here from a graphic standpoint, we had lots of great content. So here are the homepage showed you before. There's a banner which shows up, fills the full screen there and after seven seconds or so then it switches to this video in HTML five videos, what's hosted on Shopify. It is sets you auto-play and auto loop. And you know, as most of you probably know when you set up a video to auto-play, it can be blocked by the browser, or it can be blocked by the customers. You're not in complete control of that, but this video ends up blue. Auto-Playing really nicely on most devices, including max. It doesn't, auto-play on iOS devices and that's a function of iOS settings, but the video works really nicely here. And what we did also is spent a lot of time on responsiveness. So, you know, we've got this really rich engaging page for a desktop experience, but if we look at it on mobile, it's just as rich and engaging, but completely different content in different layouts, right? So we take that banner and we crop it differently, right? This is this, isn't the same image. You know, it's a copy of the image with a different cropping because we wanted to be in complete control of the layout. And here, you know, this desktop was side by side with this text and now we've got a stacks. And you know, this, this text was inside the banner. Now it's below, this is actually a different image and a quote below. And this one, you know, was, was rotated the other way before. So did a lot of work to make this a really responsive website. For example, if I switched this to the responsive human side of Chrome, you know, we just look at this book review element and it really responds really well to screen size changes. And even the font sizes, you know, there's no static font sizes set inside this element. They're all VWs font size. So they're, they're relative to the width. So as the width changes, the width of the screen changes the font size change also. So it's, it's completely dynamically changing text. So it's, it's, it's Uber responsive is the way I'd like to say it. I don't know if that's an actual term Uber responsive, but I'm going to start using it. I like it. So let's go back to our desktop view and stand out most of the time here. So the site has, you know, a lot of content pages that you see up top here. So we have about low door where they talk about the mission, you know, once again, great graphics, lots of different elements going on and really precise control. You know, the, the load or team gave me, you know, graphics and setting. We want it to look exactly like this which isn't the normal way that I do things in a Shopify store. You said, I'm like, well, here's the way the theme does it. And, you know, we could spend a whole bunch of more time and energy to get it exactly what you want it, but is that really what you want to do? And in this case, it was because they're really tightly controlling their brand in a really good way. So we spent a lot of time working on things. You know, one example of that is the font that the, the designers for the book Lucia book cover here here's the book cover? I think we might have a larger image of it here. No, oh, it's the same size image. And this, this spot here is called Nelson, but the actual Nelson font, when you get the TTF file is a weathered font. So, you know, there's like holes in, in, in Warren effect inside of the font. But, you know, they took that out when they made the book cover, but then we use that font here, right? Every time we use the book title on its own, we put it in the Nelson font so that it matches the, the book cover. But I had to go in and open up a TTF file and remove all the weathering. So I was in there manually editing the vector files for each of the the text elements inside the TTF file to remove the weathering, to get this font, looking like this font, because the fault TTF file does not look like it at all. Cause it's got that weather effect behind it. So lots of little details like that, that really, you know, spent, it took a lean on time and energy to do, but it's the kind of thing that really makes this site and the completeness of it, or the, the continuity of it much more compelling than, than a normal, you know, e-commerce store. So just, you know, I'm going to scroll through some of these elements here, like for a lot of the pages, there's a quote, each, each page has a different quote inside of it, you know, a reference or in different colors. So, you know, but a lot of the, the site is the exact same entity, right? So, you know, each, each page has a different quote here also from the book, but different background images also. And when we have, you know, the elements here, the banners let's look at this one on mobile, all right. The placement is very consistent on things. So if I go from here to the next page, you know, that the placement of those are all, all exactly precise. So let's look at this page on desktop isn't that about the book got some quotes in it. And once again, just fabulous art everywhere And an author page And Q and a with a nice accordion functionality that comes inside of flex. And then there's a foundation that's associated with the company and the book series. So that's discussed here and here's one of those cool pages, a different color background this time, A press kit, because it's a new book that's coming out. People were wanting to come in and, you know, download the media kit, different press people. And that gives them access to different graphics and files and information about the book as they write about it and do their reviews and stories is sort of like a blog, but because these pages are so rich, we actually couldn't use Shopify as blog functionality. We're just using campaigns in a page dot details, template, everything here is page dot details to have woods. And, and some of these pages said, as an example, you know, this page as a random example, you know, may have, if you opened up the page details, template file, and liquid, there might be four or five sections in there because we're doing so many different things. So every time you're on the longer the pages, the more sections we had to, to put together. So there was a lot of figuring out, all right, what section are we going to use for this page? And how many sections do we need as we did different things. But back to the the stories blog, you know, this is about the different marketing efforts that are going on for promoting the book. Here's a book signing at school. And then this one here is a nice little promotional video, You know, full page video here. And then we click to play And they said, you have to start somewhere. So I started here where I could hear the truth And, you know, getting that to center on top of that image was a little bit of work. But it, it ended up working really nicely. And then of course we had to make that work on mobile. Also Refreshing too. It looks like a movie. They said, you have to start somewhere. So I started here, Let's go back to our desktop view. And some of the footer links, another FAQ. I just love that image, the, the deer and the the rabbit drink and hanging out in the, I don't know if that's a gun store or whatever, it's just so much fun. And this has that accordion functionality, even though legal pages have nice banner images. And there's a publishing page you know, little technical details, like the ESPN number about the book. And then of course we have to have a contact us page And we also have cause the book is coming out in a few months. You can pre-order it through different sites. So several places throughout the site, we have pre-order links. There's one right here on the homepage. If we go to the land of the Pines page, there's other pre-order link right there. And that pre-order takes us to a page where we list the different pre-order opportunities. So there's Amazon Barnes and noble and indie bound on each. One of them opens up inside of a new tab so that they can go to those sites. And pre-order the book. So that is the low door site, a new Shopify store using the fluoxetine. Thanks for watching.