Checkout Toolbox

Flex Theme Sections

Linear Shopping Experiences

ZEISS Canada

Here's a walkthrough of the Shopify store we created for ZEISS Canada. It's a B2B purchasing portal in English and French.

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 show you the store that re recently built for Zeiss in Canada. This is a Shopify store that is intended for their business customers. So people that are selling eyeglasses to come to an order lenses that they're reselling to consumers. So this website is very functional in that you can order lenses and cleaning solutions. There's not a lot of what I would call evergreen content around marketing. Because Zeiss Canada already has other websites for that purpose. So this one's very focused on allowing their existing customers to purchase from them. So the store is using the Zeiss branding guidelines. They've been really well documented Brendan guidelines, which helps in building out a website and on what color schemes to use and how to treat and respect the brand. So we're allowing the customer to purchase lenses and cleaning solutions. And if I click on the lenses, it'll take me to a collection page and I can see all the different lenses we built out filters for different coding, the material types. If I click on one of the products, you'll see that I get taken to the product page, but there's a warning that says, Hey, you know the customer must be logged in to be able to see this page. So non logged in customers, those who don't have a relationship yet with Zeiss Canada can't see the product page, they can't see the pricing and they can't check out. So what we have on that page there and also on the homepage and even in the header appear in the navigation is we have a registered link that takes the potential customer to a register form and they can submit that form and it kicks off the process with the Zeiss team to create a relationship with Zeiss. So let's go back to that product page and using the credentials that I already have for test purposes here to log in. Now I've logged in with an account that is authorized, so it's tagged with a special tag on the Zeiss side that shows what discount tier I have. We're using wholesale pricing, I'm using bold custom app custom pricing app. And the customer can. Now, when they pick a lens, there's two dimensions that they have to select the sphere and the cylinder size. They can also optionally put in the patient's name so that when they get the order from Zeiss, they'll know, Oh, this was for a patient Johnson or whatever name they put in there. Now for certain steer settings, the cylinder changes. So here we're using bold product options app with conditional logic. So when, if I scroll down, so you can see are the 4.5 the cylinder goes from zero to negative two and point negative two five increments. Now if I scroll down, so let's say the minus 5.75 sphere, you'll see there's only two cylinder options. So as the customer is changing the sphere settings, I'm scrolling through them here, notice how the cylinder options change according to what is appropriate for that steer. And then if the customer adds that to the cart, they'll see line item properties for the sphere and cylinder and they can go through the entire checkout process. And you know, this'll show up in the back end. This connects to Zeiss is backend fulfillment process or software and all these settings carry all the way through to that. So now if I go back to the lens again that we were just on, we can order them one at a time, but you know, this is for a business and they may want to fill their entire inventory that's been depleted. And instead of doing these one at a time, which would be kind of cumbersome, we've also built this option for a bulk order. So we've got this here. Accordion functionality opened that bulk order form up. Now you can see the grid layout with all the different sphere options and all the different cylinders. And remember how we talked about how some spheres have different cylinders. You can see that, you know, I can't order a sphere 2.0 in a cylinder of 4.5. But this allows the customer now to in one spreadsheet view. Imagine how long this would take if I was doing this one at a time on the order form going back and forth from product page to cart to product page. So this is a way for them to order large quantities at one time. And you notice we have this highlighting functionality with the gray showing what row and column you're on so it's easier to track where you're at and when you select a cell, that cell stays highlighted in purple with easy for you to know where you're at kind of thing. Unfortunately we weren't allowed to get the header to, to scroll the page because the grid actually changes the number of columns per row, which meant we couldn't have a fixed header with this. We made it as easy as possible for the customers to understand where they're at in that purchase process. And then when they have to add to cart button, each one of these is a separate line item that's going to get added into the cart and they get queued up one at a time. So we have this little graphic right here saying, Hey, we're taking some action, give us a second, it'll take a moment to get all those in. And now boom, they're in that cart. And now we've got a whole bunch of line items with different quantities in the cart. And you can see as we order all these different lens combinations, it can be a lot of stuff in the cart. So we also added was in case the customer wanted to start the process over again instead of trying to, you know, hit the minus button or highlight each one of these and put a quantity of zero in to clear out the cart. We actually just added a clear cart button to the cart. And so in one click they can clear the cart and now they have an empty shopping cart. So that's ordering the lenses. And one last way to order the lenses is what we call initial inventory. So if you're a new store, building out your inventory of Zeiss lenses, one way you could purchase them is to come here and say, you know, I want to do my initial inventory. And what this does is this grid here shows me when I click add, set to cart, I'm going to get one of each one of these combinations added to the cart. So this one's going to add a total of 50 pieces to the cart. Others of them are adding up to a hundred at one time into the cart. So this is an easy way for a new store to build out their inventory in. Zeiss is, you know, giving their expertise, saying, Hey, most new stores, this is the kind of inventory that they want to start off with. So this is what you should start with. So if I click the ad set to cart button, once again, we've got this graphic saying, Hey, wait a second is going to take them home. Remember, we're adding 50 line items at one time into the cart. So this'll take a few seconds to do because Shopify dose throttle, how many line items you can add to a cart at one time. So now that's done and we got that cart filled, that option. And we can also, once again, if we want it to clear that cart out using that clear to cart button. So the other type of products that they're selling are cleaning solutions. So the cleaning solutions are things like lens wipes. In different packaging quantity sizes and that kind of stuff. And what we do here also is you could add these one at a time, go back and forth in the car, but a store may just want to say, you know, I want one form to add these all in. So we built what we call the quick order form and that takes all the cleaning solution products, puts them onto one page and allows you to determine, you know, how many quantity of each of these that you want. Once we've also got the same highlighting functionality going on that we had in the bulk order form for some consistency for the customer. And then once I hit add to cart, all those items are going to get added to the cart. And here you can see them. Each one is a separate line item with the appropriate quantity shown there. Clear my cart one more time. And then we only have a couple of evergreen pages. I remember I said this, this site is not focused on marketing to these people. So we just have a contact us page with the basic methods to contact them. And we've also got a quick about page about the store or about the Zeiss company. They're headquartered in Germany. This is their German headquarters. And then the other thing we have, because this store is for Canada and Canada has two, two languages, English and French. So right now this is the English language version of the site. And we also have a French language version. It's the same stores, it's the same Shopify stories and the language by app. And now you can see I toggled the French and the whole site shows up in French now, and I can obviously toggle back to English. And the whole site will show up in English. So that is our Zeiss Canada store that we build out for them. Hope you enjoyed watching. Thank you.

Responsive Views of the Homepage

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