Update to Shopify Plus Checkout

Posted on 22. Sep, 2017 in About Shopify, Advanced Tricks, Shopify Plus

What’s up guys, I have a little update for the Plus clients. Shopify is rolling out a new version of the checkout, so any of your custom check-out scripts will need to be tested before the changes roll live on October 20th. I’m gonna quickly run through all the changes now so you know what to expect. So let’s just jump into it.

So the first thing is when you log in to your Plus dashboard you’re gonna see this learn more here, this is exactly what we’re talking about, these are the changes that are coming out for the Shopify checkout [00:00:30] when you upgrade your account. Now to preview the upgrade you can preview checkout, and then you pick the theme that you want to check it out as. So what we’re gonna do is duplicate your theme, run it through the checkout, and then try the checkout once it’s been tested, everything works, then we can hit upgrade checkout.

So let me go through a couple of the changes that are gonna be coming out. The first is Google Autocomplete, this uses the Google Autocomplete in order to speed up the checkout process. This feature comes out of the box with this checkout version, [00:01:00] so there’s no need to set it up to make this work. If you’re already an existing Google Autocomplete integration, then you can potentially have a conflict between the two behaviors, so we recommend disabling the custom integration in favor of the new checkout version.

The second is checkout with phone. Checkout with phone has been coming for a few months now. Now what this allows you to do is it allows you to put in your phone a number, verses putting it in an email when you’re checking out. It also changes the field to be a dual field, so if you put in an email [00:01:30] address and you put in a phone number, what it’s going to do is it’s going to auto-sense what’s the two that you put in, if it’s gonna be a phone number, then it’s gonna show you a flag, which shows you which country it’s coming from.

The next thing is there’s a bunch of things on the notification subscriptions. This gets a little technical, but it’s basically tied in with the checkout with the phone. It’s so that you can have, if you have notifications for people when they checkout with their phone, versus when they checkout with their email. But if you might want different stories [00:02:00] that go along with those. Small map on the thank you page has now been moved to the map box, it’s now Google Maps, so now it’s full Google Map integration with all our Shopify stuff.

The order page status, there has been a small change where you’re now gonna get a thank you page versus getting a text message just to improve the process. Couple other things, Shopify Pay is now going to work with all customer accounts, and there is now going to be a, there used [00:02:30] to be a SMS message that was first sent when a customer opts-in to Shopify Pay. But that’s been removed, and in favor of putting a thank you page up to confirm the opt-in. So no text message gets sent now.

The last thing is for taxes that are being loaded from an external service, so if you’re using a tax service that is going to bring you the external stuff or the external rates in, then there’s going to be a loading animation, which is gonna show you before the page loads, just in order so that they have time to go and put that information in.

[00:03:00] And that’s pretty much it for the upgrade checkout. If there’s any, if you have any questions you can contact your project lead, or if you want anything else you can leave a comment down below and we’d be happy to answer them. Hope you’re having yourself a great week.

Do more with Less, Shopify launches Flow

Posted on 20. Sep, 2017 in Advanced Tricks, Shopify Plus, Uncategorized

What’s up, guys? I’m super excited to tell you about a new feature that Shopify has just launched for its Plus merchants. It’s called Flow. Now as most of you know, I’m a big fan of Zapier. I typically refer to it as my secret weapon. Connect anything with anything and create complex procedures with a simple interface. Well, Shopify has just launched a new app called Flow, and this app is amazing. It basically is an e-commerce automation platform that lets you easily automate tasks so you can delight your customers. Flow helps you increase operational efficiency and gives you the ability to [inaudible 00:00:33] with new business opportunities. With Flow, you can focus on what matters most, growing your business faster. So I have a little bit of a demo, so let’s check it out.

Okay. So once you’ve gone to the app store and you’ve installed Shopify Flow and you go to your apps on the left hand side, you’ll see it shows up in your list of installed apps. Then what you want to do is you want to go actually into Shopify Flow. Now once you get into Shopify Flow it’s going to give you this splash page to tell you to create a workflow. Now, workflows are basically flowcharts that walk you through how a process is automated. So, if we go “create workflow,” what it’s going to do is it’s going to take us over to a page which looks like a flowchart. So here we go.

So now we’re in the Flow app. Now, a couple things to note. Your flow takes place here. On the top left hand corner, you have the name of the flow, you’ll be able to save it as a friendly name once we save it. We’re going to do that right now actually, so let’s go and save it, and we’re going to give it a title. So this is going to be … We’re actually going to do a fraud detection flow as our example. Fraud detection. So we’ll save that, and we’re going to start off by adding a trigger. Now a trigger is when an event occurs on the website, so if we hit add trigger, you can see on the right hand side here we get a number of triggers that are offered by Shopify. So we have customers created, we have inventory change, order created, order paid, those kind of things.

What we want to do is we want to go order risk analyzed, so when you go order risk analyzed, so when the order has come through, it’s gone through the whole payment process, Shopify will run that order through a risk analyzer, and that analyzer will come back with three variables. It’s either a low, a medium, or a high. So what we can do is we can add separate conditions based on what Shopify brings back. So first the select condition that we want, what we want to do is we want to go in here and we want to find risk level. So if we click on the risk level, now there are multiple if statements that you can put in here, there’s alerts, there’s a billing address, if it matches a certain piece, you can go in and play with these and figure out exactly which ones work the best for you, but I’m going to use risk level because it keeps it simple for the sake of this demo.
And then what I’m going to do is I’m going to say if it’s equal to or not equal to, I’m going to say if it’s equal to, and then I get another drop down, low, medium or high. So, in my business, if I have any risk analyzed that come through as low, I’m pretty much just going to process them, so I can skip over low. Where I run into some problems is when they’re in the medium to high. When they’re in the medium to high, I want to check to make sure that this customer is a real customer, so typically what I would do is I would go and send them an email, so if a medium order comes through, so we can see how the flowchart is going here. So start when the order risk is analyzed. If the order risk equals medium, then yes, then we’re going to add an action, so that action that we’re going to do, we can do a number of things.

Inside Shopify we can add tags, we can update order notes, we can archive the order, we could cancel the order, which we’ll get to in a moment, or we can do external things. We can send emails, send a Slack message or send an HTTP request. For the sake of this demo, I am going to put in an email so that we can see it working. I’m going to go and write an email to myself, and I’m going to say “Medium order received,” and I can also add template variables in there, so if I go add a template variable in here, these are unique variables that come from that order, so if I wanted to, say, put the ID in there, the order number, I could do that so that when I go back into my dashboard, I know where to look it up.

I can also do one other thing which is what I’m going to do here. I’m going to save that, so now when the order risk is analyzed and the risk level equals medium, it’s going to send an email to me telling me that there’s an order that’s been received so I don’t have to watch every single order. So things continually flow through and if they’re all really good it’s no problem. I don’t have to go through each one, but if one hits the medium level, then it goes and sends me an email. Additionally, I want to add another condition, and this is again for the risk level, and I want to add if the risk level is equal to high then I found that most of the time when it’s a high risk level, then it’s pretty accurate, so I actually want to cancel this order, so I’m going to cancel this order. I’m going to restock this item and I’m going to give it the reason of fraud.
Now, we can decide whether we want to send an email to the customer notifying them of the cancellation because sometimes they screw up their billing address or it doesn’t match up. I think this is probably a good idea. We’re going to send them an email notifying that it’s been canceled, so that anybody’s who trying to provide fraud would get the new email and they say “Nope. It doesn’t work on this store, so we’ll move on to another store.”

Once we hit save, we have the workflow saved. Now, here’s the great thing what we can do. With other services like Zapier or If This, Then That, what you have to do is you have to actually go and create orders and you have to run them through the process. The tricky thing is, if you have very small edge cases where it might be difficult to run through them, maybe you don’t want to charge your credit card with a couple thousand dollars in order to make sure that it goes through, what you can do is you can actually hit preview workflow. And what the preview workflow is going to do is it’s going to take all of the values that you have set up in your store, and it’s going to give you options to fill them out. So the first thing it’s going to do is it’s going to take my sample order that I have in my store, and it’s going to give me an ID. That ID, I can change to any ID that I want if I want to test a specific ID, and then I can set my risk level.

So, if I set my risk level to medium, what I can do is I can hit preview workflow and it’s going to go through and it’s going to show me that it triggered the risk analyzer, it’s going to go to the risk level equals medium and it’s going to send an email to [email protected] So if I hit preview, we can actually see what that message looks like. And one of the things that I’ve noticed is that it just has an order number in there, so that’s not very easy to understand, so now [inaudible 00:07:13] and I can change the email. I can actually go and put some more descriptions in here. I can go order number, so like so, and after I preview workflow again, and I put that to medium, I preview the workflow, and then I can go back in and I can preview what it looks like and I can see the update immediately. So you can create pretty complex emails that go up, also Slack messages and web hooks, so if you want to integrate with an external system, you can send off your request via web hook.

And then, if we want to go and preview it for another version, so if we want to do it for risk level high, it gives us the preview result. So it gives us the risk analyzed, and then it gives us the condition. The order risk level is medium, so it skipped over that one, and then it goes order risk high, requirements met. Okay, great. What is the action? And it cancels this order. This order will be canceled and it will give it the tag fraud or the reason fraud. And that’s a pretty quick overview of how Flow works.

So I recommend you go in, give it a try, set up your own unique flows. Once we hit save and I can now enable this and we go back to the dashboard, so I’m going to close this, we can see that the dashboard is now changed and it shows me which flows that I have up. So I can now put in as many flows as I need to put in here. There’s an integrations tab which allows you to integrate other softwares. I’ve got Slack integrated right now. There are more integrations coming. Right now, they’re the only ones that are set up to send messages, but there will be more coming in the coming months.
And that’s a basic overflow of Flow. Yeah, and then if you have any questions beyond that, let me know. I’d be happy to answer them.

Autofill Image Column on Excel

Posted on 09. Feb, 2017 in Advanced Tricks, Development

What’s up guys? Today we’re going to go over something very interesting. A lot of times when you’re transferring from another system, you’re given Excel spreadsheets. Now these spreadsheets typically are in different formats. They’re usually called CSV files. One of the problems that people run into, especially when importing into Shopify, is they’ve imported the spreadsheet, everything works fine, but the only images that seem to import are the images on the first line. Now the reason this happens is because you need to have a handle associated [00:00:30] with every image on every row of the CSV. What I’m going to do is I’m going to show you in Excel how to set up a very easy script, or a little formula, in order to auto fill the columns, so that you have your variant handle as well as the image location next to it so that when you do the import, it actually imports all of the images. This is one that I struggled over for a number of weeks, so it’s … I thought it would be a very helpful thing to show you. [00:01:00] Let’s hop over to it now, and we can go over it.

One of the things you find is, when you’re importing from another import statement, and you’re importing them into Shopify, and it’s only importing the first image, and it’s not importing the rest of it. The reason is, is because you need to have the handle associated with the image in order for it to know where to import it. What I’m going to do is I’m going to show you a quick Excel trick that you can do in order to auto fill this column. [00:01:30] If you don’t do that, what you have to do is you have to go through it and basically drag these down on each one. If you’re dealing with thousands of products, this can be very time consuming. I’m going to show you how to do it in one fill method. First thing you want to do is you want to insert a new column. This is the column that we’re going to use to take over the handle when we’re finished doing the copy and pasting.

First thing we want to do is we want to start using the if statement, because we’re going to do [00:02:00] an if statement to find out whether something is blank or not. We type if, then we open up our if statement. Now the logical test that we’re going to do is we’re going to check to see if the column that we need is blank. If is blank, is blank. Then it needs to have a value put in there. In our case, what we’re going to do is we’re going to check to see if M2 is blank, because what we want it to do is if it’s not blank, [00:02:30] we want it to fill with the item that’s in here. If it is blank, then we want to input our own field. If M2 is blank, then the next portion of it is we need to know if … Tell it what to do if it’s true.

If it’s true, what we’re going to do is we’re going to fill this column with the item that’s above it. The one above it would be M1. The one above it, and then if it’s false, [00:03:00] what we want to do is we actually want to fill it with its current value. If it’s not blank, we want to continue to keep that value. That would become M2. Then we’re going to close that. Once we’ve done that, as long as I have all the commas in the right spot, we should see it pull in the item that’s in the handle here. Now if I drag this down, we should see it auto fill. Actually, hold on. This should be N2, [00:03:30] not M2, my mistake, because we want it to grab the one above. Fills it down and then when we get to the next item, it’ll fill it in with the column down below. We can drag that along. When we get down to the next one, it’ll drag it in. Now what we can do, is we can go and auto fill the entire column with values, and then rename this to handle, and delete handle.

Now when we do the import, what it’s going to do is it’s actually going to take [00:04:00] each individual image, and attach it to a product handle. Then that way, we have all of our images imported. That’s everything you need to know about using the if blank statement in Shopify. Once we finish filling in our columns, and we’ve got all of our handles in the new column that we’ve created, what we’re going to need to do, is we’re going to need to delete out this original column. What we’re going to do, is we’ll call this handle here … Oh, actually, no. What we’re going to do is, we’re going to insert one more blank column. Let me [00:04:30] do that, insert. Then what you want to do is you want to copy all of the stuff that you’ve just generated. We’re going to copy that. Then we’re going to go to this new column that we created, and we’re going to paste values only.

Now if you’re on a PC, you can right click and go paste special, and it will give you the option to paste values only. The reason we want to do this, is because when we eventually delete this column here, so I’m going to do that now. You’ll notice that the one that we created, it’s going [00:05:00] to screw up all the formulas. We want to have a finalized version in just value format, that we can then delete out and clean up everything that’s not needed. I’m now going to delete the reference one that we had before, and we’re going to call this handle. You should be able to now import your newly generated CSV file with all your handles matching up with your images, so now all of the images for your import will show [00:05:30] up underneath your specific products.

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.