Checkout Toolbox

Flex Theme Sections

Linear Shopping Experiences


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 do a walk through of the laser quick website. This is a new store that we built on Shopify. They didn't have a online store before and what it is is they're selling toner cartridges for printers and other consumables for printers ribbons and things like that. And they have over 3000 products in their catalog. It's a very large catalog and a lot of what they're looking at doing or already doing in their business is selling B2B. So we wanted a consumer facing site and also allow for a wholesale and a B to B experience. We're using the turbo theme in this store, which we do for most of our stores. And you'll see here the color scheme that we picked is based off of the colors that you see up here in the logo, which is the cyan, magenta, yellow, black which is common colors for, for toner cartridges. Tried to do a clean really white, you know, background with black text and using the colors. Just to highlight some of the content and links that we have. On the site. And on the homepage, there's two main ways that we have you finding your toner cartridge. The first one is just by doing a search for your toner cartridge number. So we actually added a search module right at the top of the homepage. You know, there's also one in the header across all the pages on the site, but this one's right on the homepage. It says, Hey, if you know your, you know, toner cartridge number, put it in right now and I'm gonna put one in here. I'm going to sneak over here and get a number, five nine four nine, a Q five nine four nine a and you see that we've got the turbo theme doing the auto suggestions there. And if I just click on the search button, it will take me actually to the search results page. And this shows you all the products with that, that part number. So that's one way that customers can start searching for the toner cartridge they're looking for. And that's by the toner cartridge number. But the other way that customers want to find their products is by putting in their printer. You know, I have a certain printer, whatever number that is from the manufacturer. And then I want to see the cartridges that are applicable for that printer because you know, you'll see here in a moment there'll be more than one cartridge that'll work with certain printers. So we built out this section here, which is a [inaudible], you know, tell us what printer you have and we'll tell you the cartridges that are in our store that are compatible with it. So obviously for each of the toner cartridges products, we put a tags in for what printers it works on. So the way you start off is you select your printer manufacturer. I'm just gonna pick the first one from the list here. And then it'll take you to a results page that it's actually a collections page filtered by the tags for manufacturer and the printer name. And it'll take you to that collection page that shows you all the compatible products for that printer. So on this printer, we only have one compatible product. If we go back to the homepage and try that again, you also notice, let me see if I can show you that and give me this little loading graphic here. I refresh the page. She's a little graphic. We got spinning a little animated GIF as it loads up because this is actually a CSV file with three columns for brand category and unit. And it's a file. It's gotta be parsed and uploaded into Shopify and rendered for the customers to use. So it takes a second there to load up, which is why I do that animated GIF. Well let's go back to another printer example. I'm just going to pick the second one on the list and see if there's more than one product. Yeah. So on this printer there's more than one compatible product for it. So the customer gets to see, Oh, I have three choices for cartridges for my printer and pick the one that's right for them. So then another thing we have I'm quite happy with is, you know, product level reviews didn't make sense for this store because there's so many products and they change so rapidly. But we wanted store level reviews. So what we've got is a page with reviews and I'm gonna click on the customized link down here cause I'm already logged into the Shopify admin on the backend. I click on that customized link. And what you'll see here is that the product reviews page is a section, the reviews are a section and each review is an individual block. And this way the store staff can go in and add their own reviews in this, you know, format, you know, highly formatted structure. So if you see over here, I'm gonna click on store reviews, open that section up and we have an option to show review stars or not, so I can turn them on or off if we want to. And then also each review is a block. And you can see here, you know, you can put in a logo, the number of reviews, a title, and the full testimonial, the names of the person in the company. If I change, for example, the number of stars, the stars, graphics over here, updates for that. So this is a way for the store admin, you know, the staff to go in and add new review without having to do code and HTML in the formatting. They just didn't have to have a new review that comes in. They'll just add the image here and it'll, it'll enter a new block for another review. We just put three on this page as, as we're launching the store right now. So let's go back to the homepage after I get out of the back end, go back to the homepage here. And now one of the things I want to show you is right now I'm, I'm not logged in, so I'm a consumer and I've already added a product to my cart for $12 and 33 cents. But what you'll see here is if I log in, we're using the a bold app for, for customer pricing and I'm going to log in now and go back to that cart and you'll see that that price is now changed to 10 48. So what we do on the account page is we tell the customer and once they're logged in, Hey, you have a wholesale account, here's your wholesale program. So they know what their benefit is. And then you know, that price is reflected throughout the store on a product page, collection page, and in the car they see their wholesale pricing throughout that experience. And another thing we also did is by go back to the homepage. Once they've logged in and we see that they are a wholesale accounts and they're tagged wholesale, we added this section here, this wasn't on this page a minute ago and this is called the quick order form. And the thought here is for a certain business, you know, they're going to have a set number of printers and that's not going to change very often. And certain cartridges that they purchased for those printers. So instead of them coming into the site and selecting their printer every time and having to, you know, put in the, you know, the search and find, you know, what the cartridges are that they want to buy. We've made this concept of a quick order form. So I click on the quick order form and what you'll see is this is a collection and we have a custom template made for this collection. And what it does, it shows all the products in that collection and you can put in a quantity right now and then add them. So I'm gonna put in one, Two, three, four, And five. I'm going to add that to cart. And because it's doing unified five light and it's going to take a second, but now they're, they all are in the cart. So this is a way, the quick order form is a way for the wholesale customer who's logged in to easily, you know, see without having to search and find all the time what their cartridges are in order, the number they need add to the cart and checkout. It's a really quick way for them to do that. And you'll see if we edit this collection, we're just making a collection for each customer. And this is the test customer collection, but we'd have the customer name up there. I've got some Laura Mitson texts in there right now, but we could have some texts. It's applicable to each one of the customers. And then we can just add and remove products from this list quite easily for them. So if they get rid of whatever printer uses this cartridge here, we can just, you know, take that out of that list. And when we go back to there, so now there's four products there. So when we go back to their collection page, hit refresh, Oh maybe I didn't save my collection. Well I did, let's try that again. So now the four cartridges so up, so I can remove cartridges from the quick order form pretty easily. And I can also add cartridges. If they get a new printer in, we'll figure out what cartridges are applicable for them and add that in also. And then the rest of it's, you know, pretty standard Shopify, you know, once you, you know, go to the cart. Yeah. The customer then can then check out, you know, when their account and you know, they have their addresses saved and all that good stuff. So that is the laser quick a Shopify store that we built a quick little walkthrough for you. If you have any questions please let me know and thanks for watching. Bye.

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.