Checkout Toolbox

Flex Theme Sections

Linear Shopping Experiences


See FraggleTribe website

Video Walkthrough of the Site

Transcript of the walk-through video
Hey, Scott Austin here from Jade Puma in this video, I'm going to walk okay. Through the store migration that I did for Fraggle tribe. A Fraggle tribe is a Austrian company that makes their own line of clothing. Yeah. And they were on open cards for a long time. And I transferred all of their products, collections, pages, orders, customers, all that data from their open cart store to their Shopify store. And it was a little bit of a challenge cause the service I use her store migrations is called cart to cart and it's software couldn't access the open cart servers for whatever reason, but I work with the cart, the cart team, and they were really good at using the backup files from open cart and, and migrating the data from that. And of course we had to do the migration twice. Right. You do the first time for all of your product information. And then you build the store and then you do it a second time, right? When you're about to do the transfer to transfer over all your order history and customer records, because it's going to take a while to build the store. So you don't want to just do one migration because you do one in the beginning, you won't have all the orders and customers that occurred after you did that first migration before you actually do the cut over to the Shopify store. So you got, you gotta do the migration twice or in two separate pieces. Now here, you can see, you know, they, they've got their they're very unique and style clothing. You know, I think a lot of the people that you can see in the photography here, you know, they, they go to, you know, events and festivals and stuff like that. And they wear this clothing to express themselves through. So, you know, very unique style of clothing. So they also have a very unique style of photography and they do all their own photography. And they had years worth of product photos here with lots of, you know, male and female models, you know, just totally living up to their brand of, I was absolutely, you know, really, really happy when they came to me was like, I would love to build a store using all the photographic assets that you have, because it's just, it's just a wonderful pallet of photos to be using instead of just flat lays of products. Right. And if you go into any one of the products, you know, not only do they have, you know, a photo for each color, of course, but they have chest, you know, tons and tons of photos. And sometimes other people, and I knew fun, little pose, like, you know, they're just having fun and expressing themselves. So it's just, it's just totally fantastic to have this many assets to use when building out a store. Right. You also notice what they did is they did very portraits aspect ratio of their product photos because it's clothing and all their models are standing up all the time. So you don't a portrait aspect. Ratio made a lot of sense. And they went through the whole project of, you know, adjusting all their sizes. So that they're all exactly the same. Everything lays out nice. I like the carousel just keeps scrolling and scrolling and scrolling through really nicely. And you know, what I love about This very portrait aspect ratio is if we look at this on a phone, let's just pick the larger screen size here. They just look beautiful, right? The, the, the, the photo fills the screen. We're in a lot of times for product photography, we've got to use a square photo and that's just, you know, the best option for most stores because some of their photos are portrait and some of their photos are landscape, but because all of their photos were portrait, we got to go to this very portrait thing. And that just fills the screen. Right. So when you're looking at this site on the phone, which of course is how most people look at it you really get this great photo viewing experience because they're so portrait in their photos. So let's go back to the desktop view. So for a color scheme I actually thought, well, they didn't have it. It just in color scheme, Oregon, over fonts that they were, you know, wed to, they were very open to changing that. So I actually found a color scheme on the web that I think it was called something like wood elves, North fall or something like that. And it just worked out really nicely because, you know, their, their products are very organic, right? And their colors are very natural except for the blue they're right. A lot of khakis, a lot of Browns, a lot of rust and stuff like that. They're not, they're not brightened flamboyant as much. So these, you know, organic color scheme, you know, the Browns and the greens worked really nice. And, and I think it worked out in this site really well. I was really happy with the way that turned out and here you can see we're using the mega menus which would their photography looks absolutely fantastic. And even if you look at those on mobile, they look really nice To where the mega menu you know, Expand it out. They've got two per row that, that looks really nice. That's, that's a really nice looking Mobile menu. You notice here, this, this banner image, we've got a portrait one. We used a completely different set of models and a complete different photo between portrait and the landscape one for the desktop, right? Because the, the flex thing that we're using here supports having two different images, not just cropping it differently, but two separate images. So this image work really well for the desktop and the other one works really well for the mobile phone. So they have products for women products from, and they'll have accessories and they'll sell bags, and then just a small assortment of kids' products. So, you know, the, the big categories are men and women. And if you go into any one of these, you know, at the top level, we have a list of collections pages. I don't just drop you into, Hey, here's all the products. If you want to see all, you can click on and see all, but I want you to make a decision, you know, as, as the customer, like, You know, what are you looking for? Are you looking for, did I click on accessories by mistake? Are you looking for jackets and hoodies? Are you looking for short sleeves? Are you looking for, you know, short, so allow the customer to make that choice. So these list of collection pages are the same elements that you see in the mega menus which actually can be a little bit confusing. Sometimes there's web at the background behind the mega menus, but the customer, you know, they, if they want, they want to see, you know, ambulances, all men's products, they can go ahead and see all, all men's. And then we have the filters off to the side. So if you want to filter by size or by color, or by the product type, or some of the designs that are on them, you have that ability. And here you can see, you know, we've got the color swatches going on and you can see how, when you hover over them, the photo changes for and that all works really nice. So let's go into a product and shoot a product page. It looks like here we have the, on the product carousel, we've got the color swatches and size options here. This is a, one of the people at the company. Th this guy here is Daniel, and we also have product seals and some of their products have a lot of seals cause there's different value, props and materials are using. So, you know, we, we built out a whole bunch of SPG files. What I really love about this is here I am in theme customization, I made a, a sec section for Jade Puma elements and down at the bottom of this, right. I can change the colors here. There's five colors for the product seals. So these products seals have five colors. And this, you know, white right here is what we call the accent color too. So let's just say we want an accent color to, to be red instead, Save that, go back to the front end, refresh. Now read. So these elements, they're not PNG files, they're SVG files and SVG files. You can edit them through CSS. So I've got CSS behind these settings here. So there's, as I changed them, it'll change across All Of the products seals on all of the product pages, which is really awesome. So if they were to, you know, go ahead and, you know, redesign, or they might want to have different colors for different seasons and stuff like that. They now have the ability to change the color scheme behind their products, heals through theme settings, and it'll just translate across the whole, the whole store. And then they've got good product descriptions. And then we, we've got lots of product content under the product accordion. So we've got size charts. We we've got a shipping information, the fair trade they manufacture out of Bali. So this is showing them in their, their Bali manufacturing facility returns, you know, social follow us information and contact us. So lots of information stacked up inside these, these nicely expanding, you know, product accordions. We've also got the size chart duplicated up here for customer. Now this, this product here is $207 and we have free shipping for orders over two 50. So when I add this to my cart, it's going to say $207, but Hey, $42 to free shipping. So we're letting the customer know, Hey, you're almost, you know, at that free shipping threshold, do you want to go back and, you know, continue shopping. We also tell them that across the whole store up here, and if they were to cross that free shipping threshold then what they would see is congratulations, you have free shipping, congratulations, you have free shipping. And that's a setting that, that con you know, the content and the threshold, those are settings inside of the theme. So they can turn on or off the free shipping promotions and adjust the dollar amount or the Euro amount cause their European store for that free shipping thread. So if we go Here now to the checkout, you'll see that we have a branded checkout experience we're showing their logo and their colors in that checkout, right? So it's a very continuous branded experience. There's nothing jarring in there. You totally, you know, expect the checkout to look like this. I think checkout branding consistency is a really important part of the store experience. And then we've also got in the cart a little upsell functionality that I added in for them. And they can edit that also in theme customization, where they can just pick what products they want and it can add up to three of them. So you notice here, it's the bottle bag an army cap and then a blanket. So if the customer wants to add this to their car, they can select their options, which for this one is size, right? So I can say, well, I want a large bottle bag, add it to the cart. And then we'll go back to the cart in the cart. And now we're promoting the second item. So we automatically to check, Hey, that first item is already in your cart. So you don't want to buy that again. So let's promote something else. So we've got that promotion going on in the cart for, for the, the checkout experience. So let's go back to our homepage. And, you know, as I said before, they do a lot of photos, right? And then every year they come out with a new line of clothing and do a photo shoot here. We're showing some best sellers. And what I want to show you is we've got all these galleries. Like every year they do a photo shoot of a different theme, and this, this is a really fun one that they did. So let's go and look at this gallery Where, you know, they just absolutely fun. And, and, and great imagery to be to be playing with it. I was really happy to put these into galleries for them. So, you know, they've got all this photo assets and we leveraged that, you know, in the product photography. And then we also leverage that in these galleries. And here, you know, we're showing, Hey, they go to different European festivals and they actually, you can see here that here's their their tent booth at the festival. So we also built out a calendar now, right now, we're still in the middle of COVID. So when we go to their festival dates, the calendar is going to be a little bit empty, but that is there, that they can add their own. And then got one, you know, planning Or may get to go to an event, but this way they can promote, Hey, we're going to be at these events in the future as COVID allows us, or the end of COVID allows us to get out in public a little bit more. So talk to me About the products and the purchase experience. Let's go into the, the evergreen pages Who we are. All right. So this is our about us page. That's totally fun photo. And here's Mika the owner of the store. And she tells a little bit of her story, how she got started, you know, making clothing and then started, you know, getting them produced in India and then why she moved to Bali and, and, you know, things moving forward in the future. So a nice little story in a really human, personal connection on, instead of trying to seem like an anonymous, big corporation, actually putting, you know, faces and names out there, which is totally awesome. And, you know, they talk about their workshop, which is in Vienna, Austria, right? We got some nice shots of, you know, what it looks like out on the street. I actually, I got this photo. I think this one I did from Google street view they didn't have an outdoor photo of their space. And I was actually able to do in Google street view on, on like my 50 inch monitor, get a photo that was wide enough to make an ice banner like this. So that was, I thought a fun use of Google street view there where this was the photo they had of the outside. They didn't have a panoramic one. And of course, as you know, if you've ever seen the Google street view cars, right there, camera is like eight feet in the air. It's, it's sticking, you know, above the car. So they've got this view that you couldn't get, you know, if you were on the street, taking a photo, the cars would be, you know, much more dominant because the Google street view cameras so much higher, there's actually a really nice, nice view. And then, you know, their tour, we talked about that page. You're ready. This page here shows all the different lookbooks, which I showed you from the home page how they have all these different lookbooks. We looked at that one, but here's just a, a list of gallery pages. So they can navigate across those. And here on customer reviews, they had no reviews before, and we just launched this store a couple of weeks ago, but I'm using judge me for re the review app in the store. And because we migrated all of their customer records and order record, or order history from their open cart store, what we did, as soon as we launched it, we went out and judge me and said, Hey, send a review, request out for customers from the past six months or whatever time frame we picked. And like overnight, we all of a sudden got a bunch of reviews in store. Cause people are really happy with the products that they're getting, even though they bought their, you know, the product five months ago or something. And we just sent out the email, they were more than happy to come in and give reviews. So in a really short period of time with a new review engine in a new store, we already have 74 reviews. And that's only going to, you know, 75 reviews. That's only going to build over time, but it was a nice way to see that content because judge me gave us the ability to query past reviews. We've also got, you know, the standard policy pages where I need to really show those. And then we've got a contact us page, you know, typical evergreen page there that you have to have. And that links to the FAQ, which has the nice accordion functionality that I really like. And they've got some information about discount codes and how to redeem them cause they use them a lot and sometimes it will get confused. Like, you know, as most of you probably know in Shopify, the discount codes are entered in the checkout experience, not in the cart and that can be confusing to people. So here we've got screenshots actually explaining that to people and showing them how to use their discount codes. And that does it for the Frankel tribes store. 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.