Checkout Toolbox

Flex Theme Sections

Linear Shopping Experiences


Video Walkthrough of the Site

Transcript of the walk-through video

Hey Scott Austin here from Jade Puma and I'm going to walk you through the site redesign that we did for sand straw. They had an existing Shopify store and we did a full redesign using the turbo theme for their store. So a sand straw sells reusable stainless steel straws that you can use at home or, or out and about. And their value proposition, you know, is the reusability. So you're polluting the ocean less are they putting less straws into the garbage, you know, system or whatever you call that. And then you know, less of them are showing up in the ocean and hurting animals. It's, we've all seen, you know, the, the video clips of animals and how they, the plastic is polluting the oceans and destroying their habitats. So they want you to purchase these to reduce waste, right? And to incentivize that they have a good charitable cause that they're supporting also. And that as you can see here, 10% of their net profits support see animals and you can pick which animal you want to support as part of the shopping process. So let's walk through that. First off, they have two types of straws. They have straw packs that you can see here in the background photo and collapsible straws. So let's just click on straw packs. And now you can see, you can buy that as a pack of three straws or a bundle of three packs. And we've got the variant photos when you select one so you can actually see what you're getting. And we've also got your which animal you want to support. So, and the animal is synonymous with different colors of the straws. So if you want to support whales, you get the multicolored rainbow pack. If you want to support turtles, you get the gold straws, you want support dolphins, you get the blue straws. If you want to support fish, you get the black straws. And if you want to support sharks, you get the silver straws. And you notice the variant photos are very photos show up as we select the different ones. So people get that visual cue to tie into what they're purchasing. And you can see the, you know, in the product description, they're explaining what you're getting. And then they also go into some detail and these tabs down here about the different charities. So you can learn more about the charity that you'll be supporting with your purchase. We add that to the cart. You can see here is their, their checkout experience or their, their cart. And then we go into checkout and you'll see the branded checkout experience that we have in place. Now, if I go back to the homepage, you know, so the, the main part of the store and then top here, right? It's focused on the purchase experience, straw packs or claps, classical straws and there's a shopping link. And here's a shopping link. Further down on the homepage, we allow the customer to see the different charity partners. We also had that same content showing up inside the product page. But if they're just curious about the charities, they can see that here. And then if we look at some of their other evergreen content, you know, they've got an about us page, which talks about the two founders of the business and how they got into it. The charities to support. We already showed you press, where you're showing the different press coverage that they've received. Photo gallery, they do a really good job in marketing. So on social presence they've got a lot of good engagement cause they've got all this rich content going on and a lot of people that are supporting them. Okay, So a big gallery of photos there and they're getting started with blog a blog X. I've got quite a bit of blog content, which talks about all the value propositions and benefits of reasonable straws. Here's their contact us page. And they also sell these products to retailers. So they also have a store locator. And here you can, you know, locate products. It's just entered my zip code and I can see this. The store is local to me that are selling their products in retail. And we've also got cleaning instructions and we've got little icons that we've made for the cleaning structure to help illustrate it. So here's how the collapsible straws get cleaned and then here's how the straw packs get cleaned. And I think that's about it. Let's also talk a little bit about the color scheme. Right. So sand straw has really good brand guidelines in place. And you know, this blue obviously is meant to match the the sea, right? So we use this blue throughout the site and then the complementary color of that blue is this yellow here that we're using for the call to actions in the store. We try to be subtle about the color and let the product photography and the lifestyle photography pop more because they have such good photography. So it's a pretty basic color scheme from theme input. You'll notice here in the the main nav and top bar, we kept it all one solid color. And so instead of trying to have multiple colors and in the footer we've got that same blue and just, you know, subtle yell, subtle white line in between them to match with the white of the sand straw logo. So that is the, a sand straw store on desktop. But one of things was really important for this in this business is their mobile experience, right? And here is their mobile view. And we spent a lot of time optimizing the store for mobile because so much of their customer base is coming from Instagram and from mobile. So normally in places where we would put banners and stuff like that, we minimize those, those types of things on different to keep things a lot cleaner and a lot more simple. So the mobile experience was really elegant and, and worked well. So here you can see, I could still click on the straw packs where we looked at that product before. So let's go in and look at the collapsible straws. And here, you know, we're just, you know, allowing them to quickly and easily on their mobile phone, make their product choices and then add that to the cart and still got all that content down below. But we kept all that content below, right. And the tabs turned into accordion functionality here on mobile And then they can add it to the cart and check out pretty easily. So one of the reasons we, you know, you'll see a lot cleanness on this site and reducing of things. You know, we spent a lot of time taking things off and making things concise was a, this, this site is really well optimized for mobile. So that's it for these Jan's draw redesign. 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.