Account Pages Toolbox

Badgezilla

Brand-It! Calendar

Flex Theme Sections

Linear Shopping Experiences

Tru-Wild

Video Walkthrough of the Site

Transcript of the walk-through video

Hey Scott Austin here with Jade Puma. And in this video I'm going to walk you through the new store build that we did in Shopify for TruWild. TruWild sells nutritional supplements, energy, a food that are healthy, organic, GMO free and all that good stuff. For people that are focused on outdoor sports. So they're meant for people who are doing endurance activities or outdoors for a long period of time and want healthy food and fuel for their activities. So what we did for them was build a whole new store in Shopify using the turbo theme. And I'm going to walk you through the things we did. So first off, you can see here we're doing the wide banner image tucked underneath the menu to give that really brilliant bold photography across the sites. Even if we go to other pages like about us or contact us, you know, we've got consistent wide outdoor photography across the site.

And a TruWild has really good brand definition when I started working with them. So they had a lot of good assets, a lot of good photography lifestyle. And product photography. They already had a color scheme developed and some iconography. So there's a lot of good assets to use to build a store that comes together really well. And you can see the color scheme here with theirs, blues and greens throughout it and some oranges also. And they go together pretty well.

So let's go back up to the shop section. And they don't have a lot of products. They have a few products and that made it really easy to on the homepage, just list all the products. So instead of having categories or collections, we could just list out all the products. We've got a slider here so people can go through them and they can also see them listed and see the differences between them. What is the purpose of one product versus the other. Some of them are flavor based and then others are the way that you consume them or the before or after or during, you know, activities type of thing. So people can see the differences in them. And then pick one. So let's go into a product page for a motion.

And here you can see on the product page they've got some really good photography, you know, with, you know, the, the L are the flavors that are shown here. If you'll click on Kiwi melon, it changes out that photo based on the variant so people understand what they're getting. We've also got some good clean, consistent icons that are, you know, similar to the icons that are on the packaging. And also somebody, the icons on the homepage, which I'll show you in a minute here and lots of text. There's a really good description of you know, what this product is, who should use it, why you should use it, about how it's made, all that good stuff. And then we took all that photo assets and graphic assets that TruWild had and we were able to put those into, you know, lots of information for customers depending on what's important to them. They can click on the right tab and read lots of information and learn more. And we put an FAQ on the product page for every single product. So you know, like does this product contain soy? No, this product is soy free. So any kind of questions they have, we want to get those addressed and answered right on the product page for them.

And then if we go into the add to cart and then go into checkout, you'll see we have a highly branded checkout experience. Also, we've got the banner image at the top carrying the consistent colors that are on the Shopify store in through the checkout process.

Let's go back to the homepage and show you the rest of the content that's there. I remember I talked about the icons, we had icons for GMO-free and those types of things. And there's also icons for the types of people that this product is good for. And then we also had an Instagram feed with all their activities going on and then some customer testimonials. And we decided to do these inside of a graphic and responsively. They, they work well on the phone also. And then a newsletter signup. So let's go into the about us page. We talk about the two founders of the company Zach and Nate and how they met and their story. And all that good information. And you know, these, it gives them the street cred. And you know, these are true outdoor people. They're always traveling around the world and seeing different places.

So we wanted to bring that authenticity of theirs to life on the about page. And then we have a natural science page where they talk about all their different ingredients, you know, why are they using all this different organic types of ingredients and what are the benefits of them all? This content we also put on the appropriate product pages. So if a product has mushrooms or ocean minerals, we'll put these same elements on that product page so they don't have to come back to this about page to get that information. We put that same information in multiple locations for the customer. And then they've got an affiliate sign up page for potential retail partners. And then onto the contact us page. You know, you've got a nice outdoor photo of the two founders and some simple contact messaging. And then we also go into the FAQ

From there. And here we have the generic SAQ is about the shipping and miscellaneous stuff. And then we take those same FAQ that we had per product, the motion, the timber, it goes to the different products and we put those FAQ is in this page also. So once again we've got product that exists in one place and we expose it in multiple places. So in the theme customization section, the store owners go through on this, they only have to edit the wild greens FAQ once and it shows up here on this FAQ page and also shows up on the wild greens product page FAQ. It's the same content shown in both locations. We just do that with the theme sections.

And then also in the footer here, I had a little transparency overlay to have that blue color scheme come through. But also you can see there is a rock climber underneath and we do that same effect in a couple of different places. I think we also have that in the newsletter sign up, not there, but on the homepage. So on the homepage, we put the same color overlay here to push that content to the background and, and make the signup in the S the texture a little more prominent there with better contrast. Similarly, with these banner ads, we did, a lot of them is put a black transparent overlay over the top of it to darken that image a little bit. So that there's better contrast for the text and the logo and the content that's over the top of those images. And I think that's about it for a, this store. Thanks for watching. Let me have any questions.


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