Checkout Toolbox

Flex Theme Sections

Linear Shopping Experiences

The Game Steward

See The Game Steward website

Video Walkthrough of the Site

Transcript of the walk-through video
Hey, Scott Austin here, this video, I'm going to walk through the store redesign that we did for the game steward and start off with, let's talk about the branding. Part of the redesign project was working with a graphic designer that the games to abroad in to redesign the color scheme and all the graphics throughout the site. And they did a fabulous job. So when would this blue and gold color scheme and all new graphics, like a new logo, and this was all redesigned, all the product seals were redesigned. And then throughout the store, let's see if we can let's just go to the contact page, you know, a customer, you know, piece of art there. And even if we go to a product page, there's some nice custom art for the tabs. So try to put this graphics and color theme throughout the store. And I think you did a fabulous job. You've got the scrim show effect, you know, this nautical thing going on with the octopus tentacles here. And it's really consistent throughout. So it's really nicely done. And in these products seals that we use throughout it, there's, you know, they're, they're just beautiful. There's a lot of depth to them. They feel real versus very flat, like, like normally I be flat ones and I watched them build these, have a lot more depth to them, and I really appreciated that effect. So here in the homepage, you know, this store is about selling board games that are sold through Kickstarter. And what they do is they, they buy a bulk of the Kickstarter. So if you didn't know about the game, when the Kickstarter went off, you could buy them after the fact through the game store. And they're the biggest one in the industry that does this. This is why we put game numbers throughout the store, right? So you can see here, you know, 1,578 campaigns backed, you know, that's a total number. And then for every collection and lists that we go through, we show the the number of games in that collection and we even show it here. So we're doing these these counts throughout so that their customers can realize that they have the greatest breadth and depth of games available for board games that went through the Kickstarter process. So, because they're the dominant number one in this space, and they have the best numbers, they really wanted to showcase those numbers throughout the site. And which is what we've done. And this graphic here is actually one of the most responsive elements that I've ever made which may surprise you because it looks fairly simple, but what we've got going on, if I just go into responsive here you'll see that it changes the text size and placements, you know, right now it's stacked up. And as we keep going, it'll just get more and more, you know, flexible as, as I make changes. So it's a very responsive banner image. It's not an image. It's, it's actually a HTML and CSS grid layout in there. And I was really happy with how that turned out and how responsive it was. So what we found in looking at the Google analytics when I started this project was a lot of people were using site search. So we made the store design search centric, and that ended up working out really well because now that the store has been live for a couple of months, you know, there's a lot more search traction and people are finding the products are looking forward through search. There's still, you know, a lot of who are browsing also, but a lot of people are searching and it's so search centric. So search heavy. We wanted to make sure it's just go back to a nice phone size here. We even, hard-coded the search box to always show up in the head of reason, the flex theme in this one, if you do this search centric, desktop theme, it doesn't put the search box like this. It puts a little search icon up here. And instead we went with the search box, always showing on the top of each page. And that's really helped people find what they're looking for because the search is readily available for them. And then there's lots of different ways. They sliced the games classify them. They're all Kickstarter games that some are exclusive and there's different, you know, things that their customers understand where the, well, you know, so we have filters. So you can start by looking at Kickstarter games or exclusives or news are almost gone. And then when you get into one of those collections, then you can filter into other important aspects about, about the game. The originally the store had, you know, literally a hundred different filters on it. And they were using the boost app. But what we found is customers were not using the filters. There was just a few things that we're filtering on. So reduce the complexity of the filters and use the ones that customers were actually using. So let's go to the almost gone. This is a fun little collection. So what they're doing here is they're selling us a quantity of board games and they'll buy, let's say 50 of them for a Kickstarter campaign, but once they're out of their games, they're gone, right? So, and it's hard for them to restock them. They try to, but some of these games are, you know, they only do one run and then there's no more available. So the almost gone was an important thing for us from a merchandising standpoint, to let people know, and on this page, what it is, it's everything with a quantity of three or less. And we sorted it by everything with a quantity of one in the store and then everything with a quantity of two, and then everything with a quantity of three. So if you want to see what's the most limited items in the store, you quickly go to the almost gone page. And what I love is every time I come to this page, there's different content showing. And then the count changes each time. So it actually shows that there's merchandising is important for people. And that scarcity is something that actually will motivate people to make that purchase decision. The other thing that's really important is, is new games. So we have collections for new and you can see there's a couple of different ways. You can look at it, new in-stock, new pre-order and all new games, but you can look at the newest games in the store also, and then there's the normal navigating. And let's just, let's just pick on this Mars deluxe one here and go into a product page where you can see we've got that consistent brand new at that blue and gold everywhere throughout. And these products have a lot. And if you've ever seen a Kickstarter, there's a lot of content on a Kickstarter campaign. And there's a whole process that the store staff has developed, where they scrape that information from the Kickstarter campaign and build out this very large, very robust product description, which this one, you know, is going on and on and on and on which is really awesome, right? There's lots and lots of content. There's all the content that's on the Kickstarter campaign. We're also putting up inside of the Shopify store. Now this game is called on Mars and there's different varieties of Mo on Margaret. This is deluxe edition. So I'm going to call that on Mars, a franchise for a second. And what we found is when people ordered more than one game in their order, that was usually two games from the same franchise, or it could be a game and an add on. So what we did is we really focused on this franchise concept heavily in the store. So if I go back a level here, you'll see the product title here is on Mars, colon deluxe edition. And we use that colon to signify to a lot of code that we built that, Hey, this game is a franchise. So the first thing happens is when I go to the product page, the Amara is a franchise name is in its own line. And then deluxe edition is after it. And you'll also see here, we have the shop all on Mars games and down at the bottom. We've also got, let me scroll all the way back down again, long page. We've got this on Mars, see games and collection. So here we're showing the games that are available also for purchase or they are no longer available and they're out of stock. So let's go to the out of stock. One for a second. What we did here is we're using the Cleevio back in stock notification. So people can sign up and say, Hey, if you ever get this product back in stock, let me know and send me an email. And the game store is actually using this as an indicator of which games are most important to their customers. So then they can go back to the publishers and developers of these games and see if they can get another product run made. And we also do the same thing here, where we, you know, shop all on Mars games. We can take you to a page, and this is what we call the quick order form, where I could say, Hey, I want one of these. And I want one of these and quickly add them to the cart at the same time. And you can see the out of stock ones. And if it's out of stock, you can get the restock alert and sign up for it. So there's a lot of power going on, right there, a lot of functionality at the franchise level. And let me show you a franchise with a lot of games in it. This one here has a lot, I believe, yeah, this one, it has 60 games available and then another 14 games that are out of stock. So if you wanted to purchase a bunch of these, you could just say, well, I want these three games here. Here's my card is empty right now. I add selected to cart and it's going to drop all three of those into the cart. And there, the three of them are and notice here that we've got a free shipping promotion here. We've got a free shipping promotion here, and we've also got another free shipping promotion here. Now they're free. Shipping is in the United States only. And what this store does, it's in a lot of languages and a lot of currencies. This is a Shopify plus store, which allows you to go up to 20 languages. And then here's 20 languages in here right now and tons and tons of different currencies. So if we were to pick a different language, let's just pick German and turn off that Google translate and just go to a euros, right? We get rid of the free shipping promotion, because now they're in the German language and the euros, we make the assumption. They are no longer in the United States. So we got rid of the free shipping promotion that was up here. We got rid of the free shipping promotion that was here, and we got rid of the free shipping promotion that was here. So now I'm just going to go back to English and American dollars. That list is so long. It's actually hard to get to sometimes. So now what I want to show you also is not only did we localize this for all these different languages and the app we're using here is Langa fives, game storage stores using Langa five, before we did the redesign and we kept using it, I'm going to give us a lot of control. There's a lot of work to set up all the custom code and everything to work inside a line of five. But once you do it actually worked pretty well. And it even does by directional languages. So this is Hebrew and you can see now the site is switched to be bi-directional it's, you know, the other direction now. And we've even got like this responsive element going in the opposite direction. So let's get that back to something that I can read English. Yeah. So let's go now into just going to a new game, show you an another game page. So we've got these different product tabs that are, or product seals based on the criteria, the game. And some of them are store level like full money back guarantee is a store level value prop. And then we've got this tab functionality here would this graphic behind it that I showed you before? And the first one is the content. This is the contents that they scraped from and see this Kickstarter game doesn't have as many as much content as that other one did and there's categories. So the games are classified, but your be categories, a got questions. One of things is stored is really, really well is their service is fantastic. And the reviews just say, great service fund team, you know, friendly people and all that goes up. They actually answer the phone. So we listed their phone number here, would this, their phone number up here. And I think those are huge trust builders. And especially because they actually answer the phone and give you good advice. They've got an FAQ cause a lot of people have a lot of questions about the purchase process. Some of these games aren't, you know, you buy it now, but it's not going to ship because it keeps starting or hasn't finished the whole development process. It might not ship for six months a year or whatever. So lots of questions about the process. So that's all answered in the FAQ. Even more that they talk about the same things within the shipping page. That's a lot of shipping information, but there's a lot going on there because of the delayed, pre-order a way that most things work, talk about the money back guarantee. And then because these games are usually all fulfilled before, or they're all sold out before the river fulfilled. If they do an order of 50 of them from the Kickstarter campaign, and it takes a year for them to get their games in all 50 have been sold by the time they're actually fulfilling them. That meant that doing customer reviews at the product level, really wasn't going to be useful. So what the store was doing before and continued doing was they were doing Google reviews and here you can see they've got, you know, 11, 1,161 Google reviews. Are they a 4.9 rating? And if you read through them, you know, there's some really nice, you know, there we go. They're friendly. You know, the, their, their service really shows through in, in the reviews that they get, but we're using Google reviews for that. And I actually didn't believe you could get Google reviews into the store. Cause these are Google reviews. There's two views estimates in Google, which is kind of nutty one on your mind business page one. And the other part that Google stores them in. And there's no app that actually gets them into the other ones into the Shopify store. But the store staff actually found one, I think it's called elf site. And it's under under development. So it was a beta, but really happy that we actually started pulling those reviews into the store. Cause that that's a quite a bit of work to figure out how to do that. So we'd been through the games, we went to the cart, it's just showing the card again. And then from there going to checkout. So on the cart, what we're doing is we're also showing games so that you might also love are just other games that are in the franchise. If you've got more than one, any, if you've got more than one, let's pull these off the actually I'm gonna pull 'em this game, all colors. It has so many games. You said before, it's got 60 games in it. Let's just go into some smaller games. Oh, let's pick zombie side, add that to the cart. And then I also want to add more hours to the cart. And what you'll see is in our cart, we showed that you games, we showed the free shipping and all that good stuff. And down here we show you might also love. And you'll notice all of these games are from the same franchises of games in the cart. So on Mars and zombie side, and these will all be on Mars on the sides and on besides I'm beside blah, blah, blah, blah, blah. And we do two rows of them and they're all in stock games. So you can pick any one of these and add it to your cart and add it to your order. And then we go to check out, we've got that same strong branding that we had on the website. That's strong blue going on here. And then the logo you notice there's two different logos. We have the one with the tentacles before. This is the more simple logo. And let's go back to our cart and I actually just want to do one quick check to see what we did for a mogul mobile logo. Yeah. We went with a simple logo for mobile also and not the the octopus one. So now let's look at some of our evergreen pages about us. Here's the owners, Dan and Michael here's the rest of the team. These photos ended up turning turned out really well cause they shot on a blue background with a faded thing and I ended up putting it on the same blue and I just love the way that looks. I think that came out really good. Here's their office and we actually put the game steward logo on the side of their building through Photoshop store reviews. We showed you in a tab and this is it done on a Google or just an I-frame from Google. Now here's the interesting one is past games. So these are games that they sold before, but now they're out of stock. And most of them, you know, they, they, they, they wanted to get feedback from their customers on which games were important to them. So we put in all the past games and here you can see them to guts 1700 of them. And you can get a restock alert here. You can go to the product page and get a restock sign for the restock alert there also. So that's really good that, you know, what's happened is in Clearview. We've now gotten hundreds and hundreds of people saying, you know, signing up for these restock and that's now them voting essentially for, Hey, I'd love to see this game again. And this helps the store staff decide what games they should pursue getting a new run of from the developers and publishers. So we're going through our footer elements here. Contact us page. I like showing the map to show where they are, these, you know, an American company here. So it was good to show that if they queue that message according functionality and then a feedback page and this was an anonymous feedback page if anybody wanted to give feedback. So that is the game steward store redesign. It's a Shopify plus store, why it has so many languages and we use the flex theme for this one. 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.


Search