Abandoned Cart in Shopify

Posted on 07. Nov, 2016 in About Shopify, Advanced Tricks, Uncategorized

I’m going to go over something very interesting today. I’m going to go over abandoned carts within Shopify. Abandoned carts are something that happens quite often, especially now that mobile has taken over such a huge part of ecommerce. The reason for that is, people will go on their mobile phone and do their shopping, and then they’ll get to the checkout procedure, they’ll think about it, and then they’ll come home and on their desktops they’ll complete the process. There’s a couple of reasons for that. Number one, it’s easier to actually complete the process at their house, because they have all of their payment information and their shipping information already stored in their browser. The other thing is too, there’s a lot more security comfort with your desktop computer. This is changing with Apple Pay and then fingerprint sign outs, but at the moment, this is where people are completing most of their purchases.

4:00 – One of the things that you can do to increase your sales is setting up abandoned cart reminders, so that when someone does go and put something into their cart, it stays in their cart, and then twenty-fours later, if they haven’t completed their purchase, say they got distracted or they’ve forgotten about it, it will send them an email saying, “Hey, just a reminder, this is still in your cart. You should maybe go and click on the checkout button.” When they’re back at their computer.

1:30 – Let’s jump over to the screen right now and we’ll go over exactly how to set everything up. One of the things that is quite prevalent in online ecommerce is abandoned carts. I think we’ve all been there, when we’ve been online shopping, we’ve been finding a product that we like, so I’ve been shopping around, I’ve had a look at this umbrella, it has everything that I want, and then I add it to my cart, and I go through to the checkout procedure. I get through the checkout procedure and I usually go and do this in order to see what the total price is going to be. I want to see what the calculated shipping’s going to be cost, I’m going to see what the taxes are. Everybody wants to know what the final amount that they’re going to pay is, especially when they’re browsing around.

02:30 – One of the things that can really hinder this is, I know for me personally, one of the things that I do quite often is, I’ll be browsing on my mobile device and I will come across a store and I will come across a product that I like, and I’ll add it to the cart, and then what I will plan on doing is coming back later when I’m at my computer and then going through the checkout procedure when I’m at the computer. The reason I do that is because my payment information is stored in my computer, which is not stored in my phone. This is where abandoned checkout recovery is really important.

03:00 – Now, if ever you’re in Shopify, it’s super easy to find. You simply go to the dashboard and you click on ‘Orders’ and you click on ‘Abandoned checkouts’. What you’ll see is you’ll see abandoned checkouts. The way Shopify works is, if a customer has logged in at any point. I put my customer email address in here and I could continue to shipping method. As soon as I have done that, it grabs that information and it creates an abandoned checkout that it holds onto. Now, if I close this browser window and I go back to my abandoned checkouts and I refresh this page, you’ll see that my checkout has shown up on the abandoned orders checkout. I can click on the link and it will actually take me to the order and you can see exactly what I’ve put in there, I can email the order to the client, I can send a recovery email. All sorts of things. You can see exactly what they were looking at.

04:00 – Now that you know what abandoned carts are, we need to set them up within your Shopify dashboard. One thing to keep in mind is, abandoned cart recovery is only available on the medium and up plan with Shopify, it’s not available on the basic plain. The idea is, is that when you start getting into the medium in the more advanced features and you’re starting to optimize your store a little bit more, that’s when abandoned cart becomes more useful to you. It’s not something that you’re really going to worry about right off the bat, although probably should.

04:30 – To get there, you want to go to ‘Settings’ and then you want to go to ‘Notifications’. Under ‘Notifications’, if you’re on the correct plan you will get the correct order notifications showing up, called ‘Abandoned cart’. We can click on ‘Abandoned checkout’ and we can see the HTML that we can set up here for abandoned checkouts. This notification is a little bit different than the one that you have in your standard notifications, it’s HTML only, because it has to contain links for people to complete their purchases, they don’t have a plain text version.

05:00 – You can see, this is my order that has been set up. You can customize, you can add your logo in that. The other thing you need to do is, you need to set it up so that it actually sends it. To do that, what we’re going to do is, if we go back to ‘Notifications’, there’s a link here that says ‘Checkout settings’ and when you go to the checkout settings, what it’s going to do is it’s going to take you over to your checkout settings where you can set up. If the customer abandons your checkout, send them an email reminder to complete their order. Right now I have it set to never, so they’re never going to get that order. You can do one hour later, which is typically recommended, six hour later, not recommended, ten hours later, which is recommended, or twenty-four hours later. The idea is that you’re trying to catch them when they’re most likely back at their machines.

Thanks for watching. Don’t forget to subscribe and like this video if it was helpful. Remember, you can always book a call with me in the provided down below. I’m hoping you guys have yourself a wonderful week. Talk to you next time.

Book a Call with Jody – http://www.sunbowl.ca/dc

Good Copy Writing Counts

Posted on 06. Sep, 2016 in Uncategorized


What’s up guys. Typically on this channel I like to talk about the technical side of things. How to make you a Shopify store and do what you wanted to do. Today I want to talk about something a little bit different. This has to do with copywriting.

I was walking back from the coffee shop this morning with my new set of beans and I was reading the back of the packaging and I was blown away by how great this copywriting was. What it did is it made a connection between the beans and a lovable pet. I’m going to read that to you right now. “The coffee in this bag will give you so much and ask for so little in return. Treat it nice. Do not freeze it or leave it in your hot car with the windows rolled up. It wants to get right to work, so take it out, grind it well and give it a hot bath. It will be the time of your life.”

I read that, it put a little smile on my face and it made me really appreciate the time and the energy that went in to the small things, on these guys’ products and especially just the packaging. That’s something you should keep in mind. Copywriting is worth it’s weight in gold. It’s that little detail that when people get very familiar with your product and they find these extra morsels in there, they can talk to your friends about it and then they can really push your brand and push your product out there.

It’s something to keep in mind when building your stories. It’s not all just technical stuff, there is a lot of little heart that goes into everything.

Get out there and keep on building and get some good copywriters.

Using Bulk Editor Tool in Shopify

Posted on 05. Sep, 2016 in About Shopify, Advanced Tricks, Getting Started

What’s up guys? I got a quick one for you today. We’re going to over the bulk editor tool, and I’m also going to tell you about a workshop I’ve got coming up in September. All that next.

You’ve imported all your products in to Shopify, and now you need to go and make some changes. An example of that is you want to put a bunch of stuff on sale, for example. Now, you could go in one at a time and make those changes, but that can be very tedious, and it’s very time-consuming. You can also go and export the products, so you can click on export, select your export, export it to a CSV file, make your changes in the spreadsheet, and then re-import it back in, but sometimes that might not be something you want to do, say on an iPad.

Anyway, Shopify offers a bulk editing tool, which allows you to edit all your products in one super clean interface. I’m going to show you how to do that. I want to go and I’m going to edit a number of these items, so I’m going to go and I’m going to click on the button over here and it’s going to select all the products. It’s only going to select the products that are shown in my current search result. If I have more than 32 products or more than 100 products on one page, it’s going to show on the next page, so you’re going to get an option here that says “select all products.”

Then, what I can do is I can do two things. One, I can go into bulk actions. I can either hide all the products in my store, delete the selected products and republish them, I can add tags and remove tags, or I can add them or remove them from collections, but what we’re going to do is we’re going to actually click on the edit products button, and what this will do is allow us to edit multiple products in this really cool spreadsheet format.

Now, the most important thing when you’re in the spreadsheet format is understanding that this is pretty much exactly the same as Excel. The only difference is you can’t drag and drop the columns, so you can’t move them around here. The way the columns are lined up is title is fixed. Title always has to be there, but then the order that you add these current fields in at the top is the order that they’re going to show up down here.

Let’s say I’m going to remove inventory tracking and charging taxes, because those aren’t important for me for the sake of what I’m going to be doing. I’m also going to remove compare at price. We’re going to get right down to the basics here, so we have SKU and price. If I want to add another field in, I can click on the add field, and then anything that is not in this light color, anything that’s in the dark color, is a field that I can then add, so I actually do want to add in compare price. The order that I add these things in here is the order that they’re going to show up down below, so it keeps things very, very clean.

Next, I’m going to go in, and I’m actually going to make some changes, so the Commander umbrellas, we had them on sale, and now we’re going to change them so they’re back at regular price, so we’re going to go 105, 99, and we’re going to hit save all changes. What you’ll see happens here is it’s going to iterate through each one of those products and make those changes. The way it shows it is it shows it by the name, and then if it’s indented in the green color, that means it’s a variant. If we have a look down here, we have the lookout hat night sky, it actually has a variant for night sky, and it will show the individual variant underneath it. The master product will then no longer have a way for you to edit it because it has multiple variants underneath it.

That’s everything you need to know about the bulk editor tool. As always, if you have any questions, you can leave me a comment down below. Just a reminder that on September 25th, I have a workshop coming up in Vancouver, British Columbia. This is going to be held at Brain Station. I left you guys a link down below so you can see the event as well as a nice discount code in order to get you 10% off of the price. That’s all for this week. If you would like, please like and subscribe to this video, and we will see you guys next week.

 

Customize the Checkout Page on Shopify Plus

Posted on 23. Aug, 2016 in Development, Shopify Plus, Uncategorized

What’s up guys? Jody here. Today I’m going to go over Shopify Plus’s checkout.liquid. This is the liquid template on how you customize your checkout page. If you have Shopify Regular you’ll notice that all of those checkout situations look a little bit similar, but if you’re a higher level merchant you might want to customize your checkout page so that you get a different user experience. It’s similar across your entire brand. Super powerful features. I’m going to show you how to do that next.

Okay, so you’ve upgraded to Plus, and you want to customize your checkout, and you’re not totally sure how to do it, because when you log into your Shopify dashboard really the only thing you’re seeing that’s different that shows that you’re on Plus versus Shopify Regular is this little logo in the top right-hand corner. I’m going to show you how you do a customized checkout once you’ve gone through the process of upgrading to Plus. The way that this works is it’s like everything else, it’s theme-based. If you go to online store, and then you go to themes. Then you go into your edit HTML/CSS. You’re going to come to your editor.

Now one of the things that’s a little bit tricky for first timers is how do I get to the themed template for the checkout? I don’t see it in this page. Typically, people think they’re going to go to edit template, or look for a template in there and that sort of stuff, but actually where you want to find it is add new layout. When you click add new layout you’ll now have the access to this drop-down menu which allows you to select a checkout layout. Now, because there’s only one type of checkout, you can’t set up multiple ones. What we’re going to do is we’re going to go create layout, and it’s only going to give us this option. Create the layout and then it’s going to generate us out some liquid code.

There’s a couple things in here to keep in mind, and I’m going to go over which each individual one are. The first one is page title, obviously, and content for header. Those are the things that gets pulled from Shopify when building in the checkout page. Same with your checkout [inaudible 00:02:07] suite, and your checkout script, so these are when you click on customize theme and you are under the checkout button at the bottom, here is where these things are being pulled from. This is those built in settings for checkout. Basically it gives you this look and feel. Which is a pretty standardized Shopify layout.

What I’m actually going to do is I’m going to go back to edit HTML. We are going to go and add some quick HTML code in there so you can see how we can start to modify and change out that checkout process. Each one of these little liquid tags that are in the [ulipses 00:02:48], they’re only to be included. You can remove some of them like cont., logo, and order summary and stuff like that. It is recommended that you keep all of them in here, and each one has its own different thing which I will go over in future videos when we start really drilling into Shopify Plus features.

What I’m going to do is, I’m going to show you a quick demo of how to change some of the content on that page. What I’m going to do is I’m going to add a little heading on the right-hand side that says order details on the sidebar. I’m going to go down, and I’m going to find where the sideboard content is [sipped 00:03:20]. I’m going to add in a [div 00:03:21] here. I’m going to give it a nickname H1. I’m going to go order details. Close that off, and close off the div. Then when I save it, and I come back over to my checkout, and I refresh it, because I’m in the active theme what I should see is a rendered version now that I have order details. This kind of customization, and this kind of flexibility when you’re on Plus is super, super powerful. You can create full branded checkout experiences, so that your customers never know that you’ve actually switched over to a Shopify type store. There’s a lot of great things you can do for that.

There’s also checkout scripts which allow you to modify different shipping options and payment options and you can really get granular with that kind of stuff. That’s basically a quick demo of what happens when you’re on Shopify. Shopify Plus that is. Then we can go in and [inaudible 00:04:16] center and modify things around. Thanks guys for watching the video. It was just a little toe dip into the pool of what is Shopify Plus. Remember, if you need any help you can click on the links down below and book a call with me. I’d be happy to walk you through any of the features that you might need to know, or do any custom work for you. Other than that you guys have a great week, and we’ll talk to you next week.

Automatically Apply a Discount Code in Shopify

Posted on 09. Aug, 2016 in Advanced Tricks, Development, Tweaks

How’s it going? I’ve got a lot of things to cover today. I’ve got the Shopify documentary on how they went about going and creating the presentation for when they went public. I’ve got a great demo on how to do discount codes, and there’s been a few slight changes to the app on the Shopify dashboard. That’s all next.

Yesterday, Shopify put on their YouTube channel a short documentary about how they went about for their investors for when they went public. I highly recommend you check it out. I put a link to it right here. I watched this, and this speaks exactly to why all of the partners love Shopify so much, just the way they think about problems and the way they go about this. Next up, we’ve got a quick demo that I’m going to show you on discount codes, and then I’m going to show you how they’ve changed the app page. Let’s jump into it.

Offering discount codes is a great way to encourage shoppers in order to buy additional stuff from your store. One of the great user experiences is if you can automatically apply the discount code when the customer clicks a button or adds a certain number of things to their cart, and there’s a way to do this in Shopify. It’s one of those hidden features that once you find out about it, you can’t believe that you lived without it. What I’m going to do is I’m going to show you how to set that up. The first thing we want to do is we want to go to our dashboard, and we want to actually set up a discount code.

Let’s go to discount codes, and we’re going to add in … I’ve already added in a discount code called cyber deals, but I’m going to add in another one here, and we’re going to call this fall deals, or actually we’re going to call this free shipping. Free shipping. A free shipping discount code, and it’s going to offer free shipping for any shipping rate that’s less than or equal to say $10. It’s going to apply to all countries because that’s all I have set up. For right now, it’s going to be unlimited because it’s going to be auto applied. We’re going to hit save on that, and free shipping is what we’re going to use as our discount code.

The next thing we need to do is we need to actually go in to do some liquid changes. In order to make the discount code automatically apply to someone’s checkout, we need an action in order to do that. I’m going to use a page as a demo just because it’s easier for me to code it, and I don’t have to go into the templates, but this technique is always usable within side your template code. Every individual theme template that you have has different codes so you’re changing might be different in there, but the theory still applies. What we want to do is I’ve gone and created a page here with a free shipping button is what we’re going to put in here. Free shipping.

Then, in the code, what we’re going to do is first we’re going to highlight this. The link that we need to create is a URL stream that will automatically apply this discount code. This URL can be used on any type of button, so if you have a button that you’ve put on your WordPress site, this graphic goes to your Shopify cart or your Shopify store and you want it to apply a discount code because they came through a specific mailing list, you can use this link anyway. It’s just a matter of typing it in correctly. The first thing we want to do is we want to type in checkout because that is where we want the item to go to.

Then we want to have a question mark, which means we’re going to be adding a variable, and the variable we’re going to add in there is called discount. Then we’re going to add the discount code, free shipping, and this is the name of the code that we wanted. We’re going to hit insert link, and we’re going to save that. Then we’re going to jump over and we’re going to view it. We’re going to view the page. Once we’re on the page, we’re going to click on the free shipping link and we’ll see what happens. It now takes us to the checkout page, and we can see that the discount has automatically been applied to this product.

I can remove that and show you that it’s now been earned and we can refresh it. Sorry. Let’s remove that one there because discount is up in here in the URL. We are going to just refresh that there, and then what we can do is we can go back to this here and we can hit it again and we can see that it contains it in there. Anytime that you add the variable discount equals free shipping or discount equals discount code, it will then add it to your checkout, so it really allows you to expand your creativity when it comes to how you apply your discount.

That pretty much does it for this week. Don’t forget to like and subscribe to this video, and if you have any questions, you can always hit me up in the comments down below, or if you have a custom project that you need done, you can always book a call with me and I’d love to talk to you about it. That’s all for this week.

What does handleize mean ?

Posted on 02. Aug, 2016 in Advanced Tricks, Development, Uncategorized

What’s up, guys? Today we’re going to talk about a thing called handleization. Handleization is something that’s in Shopify that takes your file names and puts them in a web safe format. What do I mean by that?

Most servers on the internet run Linux, and Linux has a very unique file system where if you have a file name that looks like this, and then you also have a file name that looks like this, Linux will actually read them as 2 different file names, whereas Windows will see them as a single file name. What does that do? Well, that causes some confusion when you’re trying to look up a file. If we come to what handleization does, handleization basically if you think of it as like a water filter for your file names. It basically takes all the impurities and all the weird stuff that are in your file names, strips them out, and replaces them with really good standards for making your file name.

That’s what Shopify does for you automatically. It takes some of our bad habits and some of the stuff that we’ve gotten used to with using word processors and such in order to put in commas and spaces in our file names, and it strips all that stuff out and it shows you a very clean file name. This can be used in a number of really cool ways. I’m going to hop over to my screen now and show you some of those cool ways, and how handleization within Shopify is actually a very useful tool, and not an annoyance that some people think it is.

Okay, let’s start off with using pages and how Shopify handleizes page titles and so on and so forth, for handles and URL handles. If I’m going to go to my online store, and I’ll go to “Pages”, and I’m going to go and create a new page. I’m going to create a new page, and this page is going to be called “Jody’s Sizing Chart F1I”. What we can see is if we go under “Edit SEO”, we can see that Shopify has automatically handleized the page name. Since this has to be a web safe name, we need to have all of our commas replaced, and all of our spaces replaced, as well as everything needs to be put into lower case. If you look here, we can see that it’s gone and done that for us, so we can go and hit the “Save Page” there.

This is the unique identifier that Shopify uses in order to pull up a specific page from your site. With pages, each page has a handle, and this is the handle that’s generated. If the handle was generated with a quotation mark in it, it would mess up the code and wouldn’t render properly. What would end up happening is the web browser would actually replace the comma with something else. It would probably replace it with a %40, or percent %30 I believe is the correct Unicode for that. We want to make it super easy and readable, and that’s what this handleization does. It doesn’t just do it for pages. It does it for all of your collection. It does it for all your blog posts, and it will also do it for files that you upload to the system. Let’s go over and check that out.

If we go to “Settings”, and we’re going to save this page first, and then when we’re on “Settings”, we’re going to go to “Files”, and I can upload files to Shopify, and it will handleize them automatically for me. Let me go grab a file here.

I’ve now uploaded this file of Sarah the Dog, and you can see it’s gone, and it has replaced all of the spaces in the file names with underscores. That way, when I cut and paste this location that’s given to me by Shopify and pull it up, we will now see a proper URL string, and it pulls up the image like we wanted it to.

That’s showing how it works with inside Shopify when you upload [inaudible 00:04:05]. What if you want to take a stream value and you want to handleize it yourself? That is where we’re going to go on “Liquid Code”. Let’s go to our theme, and we are going to go, and we are going to edit a theme here, and we are going to take the page template. One of the things that we are going to do is we are going to handleize the page title. Say, for example, you wanted to use page titles in order to link them to another collection that has the same title, you wouldn’t be able to do that by title because you might have a problem with the spacing or the way that’s format, but you would be able to do that by handle. What we’re able to do is we’re able to produce a handle by putting in some liquid code. Let’s go and do an example of that.

Let’s take the page title here, “page title”, and then what we’re going to do is we’re going to do a command called “piping”. Piping basically takes whatever your item is and then passes it through a filter. Remember that water filter thing that we had talked about before? We’re going to use that right now. We’re going to pass that through the pipe, and then we’re going to go “Handleize”. You can now see that it pops out the page title properly handleized.

That pretty much covers everything for handleization. There’s a lot of intricate Liquid stuff that you can get into with filters and stuff like that, which we’ll cover in another video, but for now, that kind of wraps up this video. Remember, you can always get ahold of me by leaving a comment down below in the comments, or you can book a call with me, and I’d be happy to walk you through the customization of your Shopify store and what we can maybe do for you. Anyways, that’s everything for today. See you next week.

 

Shopify Dropdowns Part Deux

Posted on 26. Jul, 2016 in Development, Getting Started

What’s up, guys? I’m going to go and show you part 2 of how to make dropdowns with inside Shopify. Part 1 which you can watch right here will go over the basic ideas on how to make dropdown menus, but some themes support mega menus, so those big wide menus where you have a category header and then you have subcategories underneath them across the way, that’s what I’m going to go ahead and show you how to add in today. I’ll put a link down below to the pipeline theme, which is the theme that I’m using to do these mega menus. Great theme. Lots of, lots of options. This is the one that I use for most of my demos. Let’s hop over to the screen now, and we’ll go over how to do that.

Okay, so how to make multiple dropdown menus. If you have a look at this theme, you’ve got the option to have a regular dropdown, but you also have the option to have a mega dropdown. Not all themes support this, but I’m going to show you in this video on how to enable it if you are on a theme that does support it.

The first thing you want to do is you want to go over to your dashboard, and we want to go to Navigations. Now, as in my previous video, I showed you how to do regular dropdown menus, where we created this welcome, and then we created the dropdowns underneath it. I am now going to create additional dropdowns that go underneath those. The way the navigation works on another level is anything that’s inside any one of these handles, so if you create any menu that has the same handle as the title above it, then it will show up down below. I’m going to add a menu here, and I’m going to add a menu called T-shirts. You can see the handle here. This is going to match the previous one on the other page. The first thing I’m going to do is short-sleeve and long-sleeve. I’ll set this to a different product here, and we’re going to go to the long-sleeve. Save that menu.

What we can see now is if we go over here and we refresh it, when we go over top of the welcome, you see we now get a mega menu, and it breaks it up into t-shirts and shorts, and short-sleeves and long-sleeves. If we wanted to add more to this, we could do that. We can simply go to navigations, and let’s add Edit Menu Here, and add another item. We’ll call this pjs, and we’re going to go Sport Shirts. Now, when we go over here and refresh it, we’ll see that we have T-shirts that are pjs that are [short shirts 00:02:44] and then they’re shorts. Depending on how your theme is set up, it’s going to lay it out slightly differently, but basically how this works is it works for your handle, iterates through the items that go below it, and then goes on to the next one, so you can have cascading lists farther and farther down in your theme.

That’s pretty much it for double navigations. Let me know if you have any questions in the comments, and I’d be happy to help you.

Thanks, guys. Like always, you can click up here to subscribe. If you have any questions, you can always hit me up in the comments, or you can book a call with me, and I’d be happy to talk to you about your project.

How to Create Dropdowns in Shopify

Posted on 22. Jul, 2016 in Development, Getting Started

I’m going to go over how to add drop-down menus to your Shopify store. This is something that comes up quite often on desktop machines, for a good user experience, where you hover over top of an item, and then scroll down, and you can go to the different items on it. I’m also going to show you how this affects it on a mobile site, as well. I’m going to hop over right now to the demo store, and we will look how to do that.

Okay, I’m going to walk you through how to make a drop-down menu in Shopify. This is a standard way of doing it for all of the Shopify branded themes. If you’ve gotten your theme through Shopify dot com, then this will work for you. If you’ve gotten your theme through someone like Theme Forest, or you had it custom built by a developer, they might not have used this technique. For 99% of all themes that I’ve run into, this is how you add a drop-down menu.

I’m using the launch pad theme, it’s a very simple theme, and I want to add a drop-down underneath “catalog”. What I’m going to do, is I’m going to go to my dash board, and I’m going to go to “online store”, and then I’m going go to “navigations”. The way drop-downs work, is basically … Shopify goes through and first looks through the main menu, and then it goes and looks at all the other menus that are created in your dash board. It looks for any one that have the same name as an item in main menu.

Here’s an example. If you have a menu created called “catalog”, and you also have one underneath main menu as “catalog”, it’s going to list it underneath. For this example, I’m going to go and create a submmenu of “catalog”. First thing I’m going to do, is I’m going to go “add menu”. Then I want to put in “catalog”. Then, I’m going to put my first item underneath here. We’re going to “about us” first. We’re going to go to “page”, we’re going to select a page, and then we want to put another item underneath that, so “add menu item”. We’re going to go put “t-shirt” underneath here. Then we’re going to select a product. Then we’re going to save this. I added two in there, just so that you could see how it acts when you go into mobile, and that sort of thing.

If we go back over to our store, and we refresh our store, we can see this little arrow has come up, and now you have two items underneath your drop-down menu. If you have a mobily-responsive set theme, which you should have in this day and age, we can go in, and we can turn on the mobile responsive view port. Then, when we click on “menu”, we can see “catalog” shows up, and we can click on the plus sign, and will show us the items underneath it as well.

That’s basically how you set up a drop-down menu in Shopify. Don’t forget to like and subscribe to this video. In the comments, if you have any questions that are specific on drop-downs, you can leave them there, and I would love to get back to you. Have a nice day.

Responsive Redesign of Shopify.com and MTV.com

Posted on 21. Apr, 2015 in About Shopify, Ecommerce

One of the regular podcasts that I listen too did an interview with Monica, a lead frontend designer from Shopify, about converting shopify.com to full responsive design. Responsive design is an elegant way to make sure your site works on all devices regardless of screen resolution or size. However, it can be a very tricky undertaking if not done right from the beginning. These two podcasts personally struck home with me because of the contrast between shopify’s approach to design and getting real user feedback vs. MTV’s approach of building out the entire site first and then launching it. They both had a similar situation of a giant traffic site that needed to make the switch; however the fundamental thinking was completely different. Shopify took it in bite size pieces which let them iterate and perfect the design. This has always been their approach.  Where MTV tried to roll out the whole thing at once on a smaller less important site.

Now in all fairness, I do believe its an unfair comparison because MTV has 20 years of legacy development they need to address first; and I was very impressed about how they are planning on future proofing their images. However, the thing that I took away from these two podcast is shopify’s thought pattern about how you must continually be building your site.  Websites grow and evolve, you are never compete. Its this fundamental approach to design which has made shopify the largest and easiest to use ecommerce software in the world.

Love to hear your comments.

Enjoy

Screen Shot 2015-04-14 at 1.22.33 PM

Episode #33

A Responsive Web Design Podcast

Listen to Episode with shopify
Listen to Episode with MTV

Using Shopify as a Wholesale Tool

Posted on 14. Apr, 2015 in About Shopify, Clients Websites, Development, Tweaks

What Leah had to say about the project

When I decided to build a new wholesale site, I didn’t know where to start. I’m so glad I found the guys at Sunbowl. They did a great job of planning the project with me so that we could create a great user experience. I like to learn how to edit things on my own, so I really appreciated the video tutorials they sent me. They were super helpful with figuring out the technical aspects of the project and were really timely with their delivery. I would highly recommend them to anyone!

The site was a huge success – we generated over 40K in sales in the first month.

Leah Emmott, CEO, Inner Fire Apparel

 

Everybody knows that Shopify is really great for doing your online e-commerce when you’re selling from business to customer. What I’m going to show you is if when you want to use Shopify in order to use it in a business to business situation. For example, I’m going to show you how it works really, really well and powerfully with a wholesale opportunity.

[00:02:00] With my Inner Fire, they already had a Shopify store and they wanted to add a wholesale component to that store. What we were able to do was use a second Shopify store in order to set that up for them. When you’re on the regular shop, just to compare. If we were a regular shopper and we wanted to buy some leggings we would pick the leggings that we wanted, then we would read through the descriptions and then we would add them to the cart and then we would get to check out.
We can change our quantities. We could see what we were purchasing and check out in a normal fashion. That works very well for buying single products. However, when you’re buying multiple products and if you’re doing a group buy, it’s not the best system to use because it’s very cumbersome and it’s hard to make sure that you got your orders correct. We did a little bit of a different approach to how to do it for a wholesale side of things.
Two things, one, the first thing we did is we wanted to make sure the wholesale side was password protected. There’s a lot of reasons for doing this. We wanted to be able to approve accounts for people to get there because they have to go through a certain credit check first. They have to be authorized dealers. There’s a lot of extra stuff that happens when you’re dealing with just wholesale clients.
When you go to the wholesale in your Fire account, it will take you to a login where the customer would then be able to log in and get to their site. Once they’ve logged in, they come to a nicely designed site just like you would normally have. If we were to go to the homepage it would come up wholesale site, very similar to their other site.

You can look up all different information. They have their polices, they have their FAQs, they have their look book, they have their catalogs. A lot of this stuff is new lines that are coming out that are not available to the public so it’s a different inventory.

When you go and actually select a t-shirt, which I have a sample here, you can see that the layout is slightly different than it was on their online store. The reason we built it this way was because we were finding it was very cumbersome to be adding one product to each cart by just copying over your existing store. There’s a lot of tweaks that need to happen when you’re opening up a second wholesale store.

The first thing with these guys is that you’re able to pick the graphics. I’m going to pick believe in yourself and I’m going to pick with a gray tanktop. We come down here and we get this great chart that tells us which products are in stock, which ones were out of stock and which ones we’re able to order. Theoretically, I can order 15 smalls, I can order four mediums, and I can order two larges. Say I wanted also to get the try coffee ones, I could order 20 here as well, maybe 10 here. Maybe they’re a little bit more popular and it will add them up on the right hand side.

These are just sample pricing that I’ve put in here for the purpose of this video but you can see that each item gets added together and it gives you a line item so you know how much each one of them is going to cost. If you’ve only got a specific budget, say you wanted to put a couple numbers in here and you knew that you only have $170 to spend on these particular items it’ll allow you to add it all up.
When you’re finished you can hit the Add to Cart icon. It will process everything and it will add it to the cart. It will add all your items to the cart. You could see your total number of items that are going to be checked out is 156. That only took me a couple seconds to put into the system, but if I was to do that one by one it would be a very cumbersome style of adding stuff over.

[00:04:00] If I go over to the cart, I can then see a preview of everything that I’m going to order. I can see the colors of my shirts. I can click on and see the graphic that I want to be able to be printed on the shirt. I could update my quantities and then I can also check my additional options. Do you need your items priced and is back ordering okay or are substitutions okay? It might be okay for you.

I can then go to my checkout and I can proceed through my checkout like I normally would. The cool thing about when you do the checkout is you’re able to go to checkout and you have to do a $300 minimum order so that you’re not dealing with these small order. Obviously if you’re a wholesale person and then you know you have the minimum order you need to make and you can make these type of check, it’s a user-friendly interface for buyers.
The buyers can sit down. They can really visually see what you’re looking at. They’re not looking through a catalog or filling out an Excel spreadsheet. Everything is accurately itemized and you can see the graphics of things that are going on and it works out very, very well. I’m going to update some of these here too a little bit more. I’m going to say I’m going to get 300 of them.

Refresh it there and now I’m above my minimum order so now I can check out. I can choose my payment method. I can either go by credit card, pay for it right now. I can go buy PayPal or I could go by bank deposit. There are multiple payment options that you could set up, especially when using a wholesale site. The great thing about it is you can have, because it’s password protected you could have them put the order in and you could do net 30 or you can do net 60 and then that can be imported directly into the accounting system that you’re using.

[00:06:00] Because it’s Shopify it has an API in it where we can actually connect it with your accounting system so it can go straight into if it accepts external inputs. Or you can change or you can run your business where they have to pay for the whole thing upfront based on credit cards. That’s really great to do if you’re doing closeout stuff or you’re doing sample sales or you’re doing that sort of thing where you’re trying to relieve  some of the other products.

That is overview of what we can do with a wholesale environment through Shopify. It’s a great place to expand your business and a really, really nice easy user interface to get away from those Excel spreadsheets and those fax forms we’re so used to.