Account Pages Toolbox

Badgezilla

Brand-It! Calendar

Flex Theme Sections

Linear Shopping Experiences

San Diego Collection

Video Walkthrough of the Site

Transcript of the walk-through video

Hello Scott Austin here from Jade Puma. And in this video I'm going to walk through the new store build that we just launched for San Diego collection. A San Diego collection is a fashion brand. They're doing a print on demand products for now and everything that they're selling has a San Diego theme to it. So it's meant for people who love, uh, live here or have, uh, been here on vacation and all that good stuff. So the store is built on Shopify, it's in the turbo theme. And here we are looking at it on the desktop. I'll scroll to the footer to show you the color scheme. Um, this dark blue, which is also the, the blue we're using on this, uh, transparency overlay right here. The yellow and the, uh, Brown are the three main colors in our color scheme on top of a white and black.

Sorry, I have outlook starting for some reason. I don't know what happened there. Um, so those are the main colors of our color scheme. And we actually, uh, looked through a bunch of professional sports teams to San Diego and the color schemes that they had in the past and used one of those because we thought that was a really good way to indicate a San Diego tone. Um, obviously there's, you know, some sun, some emotion and some Brown from some sports teams, um, all rolled into one to really bring home a color scheme that that screams to two people. San Diego, right?

So up in the header we have our shopping links and what we're allowing is the people to shop by three different methods. One is by, you know, who is the clothing for, is it unisex men or women? Uh, what are the product categories? Is outerwear shirts are home. And then we have Don designs. We've launching the store with eight different designs. So each one of the designs you can see all the products with that design on it. And then we also allow the customers to see all, um, and then also in the header we've got a horizontal version of the logo. And in the footer we've got a vertical version of the logo and we also have a different version of the logo. It's much simplified. Um, in the mobile version we get rid of a couple bits of text and a couple of the lines of color around the image will show what that looks like by just a viewer bringing up the mobile view there. And there you can see we changed the color of the text to contrast with the top bars, Brown brand color. That's a much simplified logo so that it looks better and it's readable on a mobile device.

And then each one of these browse scenarios, uh, we are mimicking in the homepage. So this is the, who is it for, is the, the clothing, the categories is here. And then the shop by design is here. So if we click on any one of those links, each one has a drop-down menu, which takes you straight to the collection. But, um, if people don't click on the dropdown links, the top-level link takes them to a page. Uh, that also gives them the same options that are available in the dropdown. Um, cause sometimes he will just, you know, click on that without clicking on the dropdown. So we, we don't make that a dead end. We allow that to continue to have that shopping experience. Go through those. And here you can see we actually created the designs for this launch. I'm using some stock, uh, images and then modifying them quite a bit to map to this brand, um, colors and names and words and, and, and mottos and stuff like that.

So there, that is the different designs that they're launching with that allows them to see, you know, what their customers are really gonna like and what's gonna work for them moving forward. And as you can see there, they're very San Diego based. We've got the California bear and a lot of them, Palm trees, sunshine, um, all the good things that, that map to San Diego. And then we've also done is we've got the full with banners. We've got really short banners here. I think this is 1800 by 300. If not, it's 400. There's a nice short ones just to set a little bit of a tone, right? This happens to me. Mission beach, this one, here's the core Nado bridge, absolutely beautiful sky there. Um, and this one is the, um, LA Hoya, uh, scripts up here. And on the homepage we're showing the crystal period in Pacific beach.

So we try to bring that San Diego looking feel through to everything by having some nice, uh, San Diego imagery as the full with banners on pages that have banners. So let's walk into the shopping experience and let's actually just go to a, uh, collection by design. And let's look at the, uh, San Diego or the California flag collection. Here you can see we have a number of different products. The uh, printed demand, a search reason right now is Printful. They have, you know, obviously a wide variety of different products that are available. We've got some that are printed and some that are embroidery for the embroidery ones. We had to change the designs because the print ones were too complex to embroider. Well, so a lot of our designs have more than one, you know, version of the design, the embroidered version and the print version. And then we also have the swatches, uh, for each of them, all the different colors.

And we created custom P and G images, custom swatch images for each one of the color variations. So they're much more true than just having a standard black, red and green ones that are up there. Like the camouflage one here, for example, on the camouflage hat. And then we're doing on the collection pages is each product's main image is just the, what I call the Amazon version of the image, the white background, just product image. And the second product image is the one that shows up on hover, which is more of a model wearing that product or a lifestyle photo of it were available. And we're using the Printful, um, product photography right now, brand new store. They haven't even shot their own product photography yet. That's the next step. That's common. So all the images that you see right now, we're done using assets provided by Printful.

So, for example, the collection images, these are all collection images that I created using assets that were brought to us by Printful. Even the lifestyle ones were brought to us by Printful. So a customer goes in and you know, we were on the California flag, they can see all the different options there on the collection page, but they can also click on the product page and there they can pick size and color. And of course as you, you know, pick the size and color, the varied image will change to map to what it is you picked. Uh, you can add that to the cart. And then if we go to a checkout, you'll see we're carrying some heavy branding through to the checkout to provide that continuity. We're using our yellow color, our blue color from our color scheme. We've got the logo and then we're continued on with that San Diego scenery, um, background full width banner image.

So we're trying to care as much of that brand through to the checkout experience. Um, cause as most of, you know, in, in Shopify, we don't have much control over checkout from a design standpoint as we do in the rest of the site. So we're doing a good job and making that consistent. Um, we've just got a few evergreen pages right now. You know, the typical ones like contact us and about us. This is done using the turbo theme. So we get that full with banner image and this one happens to be a bird rock, uh, beach. Um, and then it allows us to have different modules like a form or, you know, texts get images and maps and all that good stuff that the turbo theme allows us in these pages. We're using the full power there. And, uh, that is, I think, a complete of view of what we're doing, uh, for this door for San Diego collection. So thanks for listening.


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