Badgezilla

Flex Theme Sections

Checkout Toolbox

Linear Shopping Experiences

Cobalt Sport

See Cobalt Sport 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 through the store build that I did for cobal. Cobalt. Sports is a company out of Carlsbad that is launching a new line of snorkel gear. So I built a Shopify store for them, so they can market to their customers. So here you can see on our homepage, they had, um, an established brand already with a color scheme and that color scheme was then applied throughout the store with the two blues and, and the gloss black, as you can see here, you know, most of the pages are a lot of blue in them to support the branding. And then for lifestyle imagery, you know, we, we went with the concept of, and they had this little tagline down here, 71% of the year surface is water get in. So supporting that, get in concept all of the photography we have for banner image and just stuff like that. Our people in the water, um, we had, we also had assets of people, you know, standing on the beach, putting the gear on, you know, families walking, you know, through resort and that kind of stuff. And we, we went with the thematic get in. So you'll see all, all of the, uh, the lifestyle imagery is about people in the water, right. And as we go through different pages, let's just go through a couple of them, like, uh, the contact us, you know, or if we go to some of the about pages, you know, it's all photography of people in the water. It's kind of fun. So yeah, in this, they're selling a massive historical P sets, mass NorCal and fin sets, fins alone and some accessories, and then see all. So let's just go to see all, and you can see the name of the variety of different styles of snorkels and fins that they have. And that might be confusing to people who don't know, you know, which one of these styles is best for them. So one of the things we did is we built a buyer's guide. You go to the buyer's guide, it walks you through each of the models and explains a little bit about them and why you would pick that one, right? This one, right? This is, it's not optimal for large noses, which is kind of a funny comment, but you know, it's true that this mask, if you have a large nose is not going to be the right fit for you. So we're trying to explain to people in this one, do you know those with smaller faces? Um, so, and there's kids ones and stuff like that. So explaining to people why they would pick different masks and try to educate them, instead of just showing an assortment of products. Um, we're trying to make them educated about the differences between these products. They can pick the right one for them. So they pick you out, say they want the Tuvalu. Um, they click on it and here, you know, we allow them, we got swatches for the different color schemes, and you can see we toggle between the colors there. They can pick their size. And in this, we're using the flex theme by out of the sandbox. And we're using the product sections template, which is really nice because not only did we get a product carousel with all the different photos in it, right. And then they've got a lot of their photos in there. Um, and we've got, you know, the add to cart, the page, the product form and all that good information, but then we've also could build out modules. So this one shows the different color options for this one. Side-by-side. So instead of toggling between this, which you can totally do, you can also just say, Oh, here's the two different colors this one's available. And some of the other masks for example, are available in a more, more than two colors. Let's look at the Moro here. Um, so that one, there, we show all four colors side by side, and then we've got a little infographic that shows the features of this model, you know, pointing out all the different components of the, uh, the products. And we've also got this accordion function for what I think is essential information to include on product pages, the shipping policy and the return policy. So using that sections template and with the fluoxetine, you have to make a unique template for each. One of your products has that this content gets stored at the template level. It's bringing a new template for each product and assign that unique template to the product. But once you do it, it gives you the ability to build much richer, um, pages than just a product carousel and a product description. And the other thing we added to the product pages was the product seals. And this one is anti-fogging. And for this one, this is the first store that I did with this really cool thing that I figured out how to do. I'm kind of proud of it. So I'm going to show it off here for a second. So here I am, I'm in the Shopify admin on customized theme and I added, which I'll show you in the theme settings. I added a Jade Puma element section. So this is all the custom elements that I put in that they can adjust, um, for different promotions and things like that. And down here, the last one is product seals. So you notice there's five colors selected, you know, primary colors, the first one. So these colors are driven by these theme settings. So this is an SVG file and all of the products seals in the store SVG files. And all you have to do is go here and change the colors and it'll change the SVGs colors across the whole site. So if, instead I wanted the primary color to be a really bright red, and I'm going to save that good back to the front end and refresh this page and the color, the primary colors now updated. So the store staff can update the color schemes and change it out, or try different ones really quickly and easily without having to recreate all the product seal assets, because they're, SBGs, we can use CSS to style them. She's really fun. Um, let's do see back to the black car. The red kind of looks ridiculous. So now, if I refresh the page, we were back to black. Now, if I add this to the cart, you'll see in the cart, we're promoting our, our cross selling products. So, you know, here I can add the mess drawstring bag. I want to add that to the order. You know, I say, yes, I can on it, add it to the order. And we're off to the races there. And now the checkout experience, we branded that heavily. Also, we went with the, uh, the white logo on, cause it's a darker background. So, you know, the inverse logo instead of the color logo, um, to provide the contrast, we needed the imagery and we're taking that same image from the homepage. Um, we've got the blue color scheme in here also. So that's, um, this one here, we were using privy for popups, but they don't, we, I already have, you know, had displayed on this this morning. So it won't show again. So let's take you a couple of pages. You know, we used a, the product or the page details template to make some of this content here. Um, this is a brand new store, so they're still working on some of the imagery. Um, and we've got a contact us page, you know, color the elements here also to match our color scheme for the brand. And then my little sizing chart and this information on any one of the product pages also shows up. If you click on the sizing guide, it pops it up there for you. And we actually made these unique to each one of the products. So that is the, uh, cobalt, a new Shopify store using the flex Nene by add the sandbox. Thanks for watching.

Responsive Views of the Homepage


JadePuma is a certified Shopify Expert. If you need any help with your Shopify store, we can help.


Search