State of Ethos

Hey, Scott Austin here. And in this video, I'm going to walk you through the new store build that I did for state of ethos state of ethos as a new store, a new brand. We built it in Shopify using the flex theme and they're all lifestyle brands. So they are generating an audience and a following around their motocross enthusiast, which they have tons of on the site. You know, all these people are our actual motocross people are, they live in the Temecula area in Southern California. And, you know, they do a really cool thing that you saw a second ago, the guy doing a wheelie and they're doing back flips in the air and just, you know, really cool stuff. So as a lifestyle brand, what they're doing is they're building lots of content around motocross and motorcycles, and that, you know, gets them a following in an audience. And then they're, you know, the products that are selling are branded. Like you can see here, the, the hoodie and the different products up here, you know, different branded elements with their brand on it. And then did a really good job in creating content to be able to launch the store. So here in the content section, all right, so we got one link up here for shop, right? And normally for a Shopify store, all these links in the main nav will be shopping, but because they're, you know, a lifestyle brand that is heavy on content next put a lot of content up here too. So we have a TV page, which is they're, they're creating, you know, TV episodes, even though they're online, they're, they're calling them TV episodes. They also film, which is another video format that they're doing. And then galleries of photos and then journal, which is articles. You know, like a normal blog article would be. And then they've got a nice little about section here and you can see, they definitely had a brand in mind, as we're building out the story, they define their brand before we will, the stores make things really easy, right? They define the, you know, the logo, the font styles that we're going to use and the colors, and they use that throughout, you know, their imagery. And then I used it in the CSS for building out the store and having the, because they had such a strong sense of brand. It made it easy to actually implement that inside the store, the more brand documentation a brand has. It actually makes my job easier to build out the store for them. So let's, let's look at the content pages for, so this is a blog page, right? Not an article page each, each one of these is an articles. This is a top level blog page we did on this one here is we made it playable. You know, the video is playable right inside of the blog page. So this is even in the article, it's in the blog, we've got a, we got a video going on. So that's a bit of custom work there to make that happen. But it's really nice because it automatically, this is video number three, this is a TV show, number two and TV show number one. And then when they add TV show number four, it'll automatically populate up here and then three wound down on the list and all that kind of stuff. So people, when they want to see the latest TV article or the TV episode, they just go to the TV page and they don't have to click beyond here. They can, you know, right, right here, they're in there and watching it and for video, cause there's a lot of video on the site. We did a mix of YouTube hosted and HTML five posted cause it's you five video doesn't have any of the YouTube frame in it. So we have a little more control around it. But each of our five video hosted on Shopify with a 20 megabyte limit. So any, any videos we can get down to less than 20 megabytes we did through HTML five and greater than 20 megabytes, we hosted in YouTube. And if we go to an article page, you know, we still have the same, you know, that image is just incredible, right? When you have content like that, it's just absolutely amazingly fun to me to make a store when you have content like that to, to create it from. But here we have the same, you know, full, full width video, and then they go right into it and play it Yrom there. And then we're also, you know, cross promoting the other articles and that kind of stuff. So back to our top level TV page it's all, it's all laid out like we're talking about, and now you'll notice here, right? We've got, you know, for the text we're using excerpts. And then we're also, you know, cause there's two types of texts in an article. There's an excerpt in the actual article content and we are using them, you know, quite well. I think having, you know, short versions and then long versions, we're getting the article page. So let's move on to film. It's very similar, but you'll notice that got a different aspect ratio for the cover images there. Just, just to differentiate between TV and film, you know, the stylistically they're, they're doing them very differently. And that's part of their, their brand being so well-defined that they can do those kinds of things, but this page behaves very similar to the TV page. It's just a different type of content for them. Now on gallery, we actually built this as a page, not as a blog and because of reason, the flex theme, each one of these is using a its own template. We actually made it a little bit of a custom template for this one because the gallery inside of Shopify, it's got a good horizontal masonry. It's got a nice vertical masonry element, but we actually named this one gallery.lego because we did is I'm allowing the store staff to when they go and edit this, they can say, well, I want this one image, right? Cause me to do a horizontal masonry. The JavaScript is determining how many images it's going to show. Like if you say I want a total of four, sometimes it will show three. Sometimes it'll show four. Sometimes I'll show five in a row based on the math that's going on in the JavaScript. So we did here is we allow the store staff to say, well, I want this image to be one image wide, right? And I want this one to be too wide. And this one be one wide and this one to be three wide. So they, I created blocks for them and they're just called one wide, two wide and three wide. And that way they're in control, complete control of how their images layout. Now you may notice like this image here is a very portrait and you know, not the best experience on landscape, but you know, what we did here is we did optimize and do a mobile first design, right? So we really thought about the mobile experience first and, you know, made, made the desktop experience not bad, but we, we focused on the mobile experience first, which is why there's a lot of very landscape imagery going on here, which maybe even a little bit too tall for desktop, but as absolutely stunning on mobile, this is just, you know, incredible looking much better looking at this on mobile than it is on desktop, even on desktop. It's, it's quite compelling also. It's good to, Or desktop view there because she's here to review it. So each one of these galleries, you know, they have multiple of them right now. All use that same template functionality, which gives them the control they're looking for. Right. And once again, just tons and tons of great images, you know, whether they're images or they're a film, you know, lots of fantastic stuff going on here, the dirt flying in the air, it's just absolutely fabulous. And each one of these, you know, is nice because if we click on them and we get the gallery full view and we can scroll through all the images that way. So let's go back to the next section here of content, which is the journal. And these are more traditional blogs where they've got, you know, texts, you know, copy and photos. So we're alternating between those and using the normal article layout to make that all happen. So lots of really good content, it's all built such a way that they can continue to add more content and it just displays, you know, dynamically and all that. So let's go to the shop page, cause this, I call this a very bold collection page when they first showed it to me, their mock up, I was like no way. But I really love it. And it's just so bold because there's no product name, there's no product price. And what they did was a really good job in building hype about around the brand and excitement. So, you know, when they launched the store, customers were, were much more excited than I thought they were going to be. And then just, you know, diving in and, and, and buying products kind of thing. And because, you know, this is such a simple or bold or audacious collection page. It's just to me just supports the brand they're going after. And then the simplicity of it all is really beautiful. Now, some people would look at this and go, Oh, you're using transparent PNGs with this colored background. And, you know, I actually don't do that. So what I do here is I know the color of the background of the page, right? So then I take the transparent PNGs for these images and actually put a same colored background as the background, the page into it and save it as a JPEG. So the file sizes are much, much smaller than if I had transparent PNGs on here. So even though it's got that transparent P and G effect, I'm actually using JPEGs where the color background, we just show you what, Where is An imaging new tab. So there's that image with the color background in it. And let's go into a products. Okay. And, you know, you notice the strong colors that they've got going on here. Their colors of their products are also the colors of the brand on the gut Hunter kind of like a, a 1970s feel of color palette. And a lot of their content has a 1970s feel to it also, but we, we, we took that coloring and were really strong with it everywhere. Right? So even the share buttons, you know, I changed the SPG, a styling behind them to match the brand instead of the blue Twitter and blue Facebook and, and red Pinterest icons that come with the theme by default. And even though, you know, the hover and click effects or active effects are, you know, the colors of the brand. And even, you know, they're, they're so strong in their coloring and they didn't use just a standard white background. This is a little bit of an off-white background which has this nice feel and finish it in my mind now on their product pages, even though this is a limited run of products for them they did a great job in creating lots of great product photography and they even did product videos. And this is HTML five video loader into the product carousel works quite well, right in the audio, the autoplays working on most browsers like iOS, it doesn't work as iOS doesn't allow autoplay but lots of, of good imagery going on here in their product, which is absolutely wonderful. And then they also have, you know, photos, this is a lifestyle photo. If we click on it, it becomes a lifestyle image video. This is HTML five videos. We've got this under 20 megs in each one, it's like 10 to 12 seconds long kind of thing, just to get more of that feel around the clothing and the brand. We got out of this out a lot of the products, which is really, really, and their product catalog is a limited catalog. So it's, you know, they limited run. So when they sell out of them, they'll do another collection, you know, coming up soon when these are all sold out. And then we also have the ability, we have this technical where, which in motorcycles means, you know, jerseys and pants that you would wear on your motorcycle, but this we password protected. So only certain people right now have access to that. And that's password protected at the collection page level and also at the product page level. So let's go to the homepage, we've got lots of things going on here on the homepage, you know, lots of good elements, cause if it's good content and, and all of it's really responsive. So here, this is a collection slider. And the interesting, you know, unique thing about this one is they wanted to use images here that are, are not in the product carousel, right? So I had to create a little custom section using, you know, some of the flex as a starting point, but these values for these photos are actually stored in metal fields Instead of in the collection carousel. So they, the store staff can go in and edit the meadow field values and, and add the images or changing images out. Now this one here is just, you know, a link to the collection. But they decided to do it with a HTML five video. And this video is auto-playing. And like I said, it auto plays on most devices except for like iOS, because I always just to support that and with auto-play you, can't your, we are not in control of whether the browser is going to auto play it or not. We can say, we want you to auto-play it. But the client settings and the browser settings are going to dictate if that actually happens. And then for each of the content types of TV, film, gallery, and journal, we have a homepage element and they, each one of them takes a little bit of a different layout for them. And, you know, look at that photo there, this, this guy's in the air, like on this cliff, it's just, that's just insane photography, right? I absolutely love working on this site because I would just get drawn in by, by the photography and, and the videos. And they also had a look book which takes them to another gallery very focused on the collection they're selling. And then here's another auto-playing video and this one is off to there a film. And then we also have an Instagram feed because of course they have a Instagram following because they have so much good content. Instagram is an absolute natural for them. And here we have Klaviyo for email signup. And in this one, we're actually collecting email addresses and phone numbers. And people were submitting phone numbers. We actually sent SMS is out when we launched the site and people were clicking on them and going to the sites, it was really good to see the strategy of collecting emails or phones, whatever customers wanted, especially cause of this audience is, is younger and much more mobile focused. Having that capability really paid off in, in building their list and having more people to send you in their list. And then we've got the standard policies. And then also here on the contact us, which got, you know, a contact us page with the branding in it and the map that shows you, Hey, we, they are actually in Southern California given that street cred. They're saying they're in Southern California, so we can show that they're actually in Southern California and that is the state of ethos, a website. It's a really fun one. I encourage you to, to check it out. Thanks for watching.