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.

Shopify Dashboard Update

Posted on 02. Apr, 2015 in About Shopify, Development

I’m going to do an overview of the new Shopify upgrade from Multi-Channel Support. This is a new update that they’re going to be rolling out in the next couple of weeks.
First, they’re going to roll it out to five percent of people, then to twenty-five percent of people, then to a hundred percent of people over the next month or so.

The biggest change that’s being done is they’re now making Shopify the central dashboard for all of your online sales. The way that they’re doing that is they’re adding these links on the left-hand side here to allow for each individual channel.
Right now, when you set up your Shopify store as a new store, you’re going to get online store and point of sales. That’s if you’re using the point of sales system.

If you’re going to be also using “buy now” button, which you can use to put onto a WordPress site, or you can use to put onto a Square Space site. What you’ll need to do is you’ll need to go to “settings”. Then you’ll need to go to “sales channels” in order to turn it on. It’ll give you your multiple sales channels below you and simply hit “add channel”. I want to add a Shopify Buy button and what you’ll see is on the left you’ll now have the buy button channel which will be added into your store.
The first thing I need to do to use this, is I’m going to need to go and create products. What I’m going to to do is I’m going to go through the other changes and show you were the other stuff is. Then I’ll come back and show you how the buy button new app works.

First of all, what they’ve done is they’ve shortened down the product list, or the navigation list on the left-hand side, and combined a bunch of things. Either you’re working in your home dashboard which is a whole new slew of updates as well as information pieces that come in. They all feed in from the sales channels on the left.

You have your orders page which is as similar as it always was before. When you have new orders in here they will show up in here. The order tracking and the order fulfillment is remaining the same.

[00:02:00] For the most part, not a lot is going be changing. It’s all the external services that you’re going to be working on that’ll change.

If you go into products, you can see now that this small little list slides over. Now you can see where you actually add products. This is adding an additional click to the navigation. Time will tell whether it’ll be annoying or not, but from what I can see it looks like it’s a pretty good idea. You’ve now got product list, inventory, your collections and your gift cards all underneath your same product dialogue box.

The next one is customers. This is similar to the customer dashboard before. It hasn’t changed at all.

Reports, again, also hasn’t changed. Still the similar reports.

The same with discount codes. Discount codes are being done the same way.

The biggest change is where you’re going to go in order to get access to your theme settings. If you go to “online store”, you can see this is where you’re going to get access to doing your overview, your blog post, changes to your pages, your themes, your navigation and your domains. For us as Shopify experts, this was the biggest change for us because we need to be able to go in and modify themes and so on and so forth.
Once you get into the actual pages themselves, they’re exactly the same as they were before. It’s just the navigation that you need to use to get there is an additional click now.
Point of sale, same thing. You have your overview and your locations like you would previously.

Next is the buy button. The new buy button app that I was talking about.

Finally, the settings button on the left will allow you to change all your settings. Your general, your payment, your checkout, your shipping, your taxes, your notifications, your gift cards, your files, your account. Again, your sales channels. As well as your settings for the online store and the point of sales store.

That is pretty much the major changes.

[00:04:00] If you click on this guy here, this is your “view your website” button. It used to be down at the bottom. They’ve removed those buttons down from the bottom now and they’ve moved them up here so if you’re looking for “view your website”, that’s where that one is. If you click on here this is your new log in/log out button. As well as your “hire an expert” and your community forums as well.
They’ve reduced the number of buttons they have on the navigation in order to make it a little bit cleaner for you to use as well.

If you have any comments or you would like to know where something is, leave it in the comments down below.

Good luck with the new dashboard

Resource: Shopify Blog Post

Sneak Peak at Shopify’s New Product Page

Posted on 12. Mar, 2015 in About Shopify, Getting Started

Here is a sneak peak at the changes coming to shopify’s product page. This video will help you get orientated with the new location of features.

How to find the variant id of a product

Posted on 15. Aug, 2014 in About Shopify, Advanced Tricks, Tweaks

*** Update: This only works in Firefox or Chrome. Safari doesn’t show a formated XML sheet which makes it almost impossible to find the variant id

[00:0:00] – Finding the Variant ID

I’m going to walk you through on how to find the variant ID of a product. This comes up in a couple of different situations, mostly when we want to generate a link that will take you directly to the checkout page for a client. This happens quite often when we want to say, “Okay. This is a product you want to buy, I’m going to put a link right here in your email. When you click on it, it will take you to the checkout page.”

To find that variant ID, what we want to do is we want to go to “Products”, and then we want to pick a products on and pick our “5 Hour Bucket” here.

This is our product that’s listed on our website. You can go through and buy it. But I want to create a buy now link specifically for one specific customer. When I get to a product, what I can do is I can put a .xml on the end of this product ID and what it will do is it will give us a XML sheet. This is all of the details that is put into a high arcal type of appearance so that you can see all the different pieces in a more cleaner form. When looking for a variant ID, what you want to do is you want to come down here to variants, because there you can see, this is where the variants are left in.
If you have multiple ones, there’s going to be multiple variant boxes here. If this say had different size T-shirts or there were different colors or whatever, each one is going to be a seperate variant, so the id’s will differ depending on which one you’re on. What I’m going to do now is I’m going to go grab this ID integer here. This is the variant ID. I’m actually going to copy that, put that in my clipboard. Now I’m going to show you how to compose an email on how we would actually create this buy button for the reason and why we would need this variant ID.

[00:02:00] – Sending the Email

I’m going to go over to my email. I’m going to login and I’m going to create a new email here. I’m just going to send this to myself so we can see how it all works. This is variant ID test. You need here is the link to the bucket you will need for your website. Then I go 5 hour bucket and I go buy now. Now I want to create this link. I needed that variant ID in order to do that. What I’m going to do is I’m going to select this and I’m going to go to link. Then I’m going to put in my stored URL so http://www.sunbowl.ca/cart/variantid:1

If I wanted to do multiple variant ID, so say I wanted to actually put two products into the shopping cart for them, I could to a “,” and I can do it again. I could put this one and another one and it would add.
But for right now, we’re just going to do a single one. I’m going to hit “Okay” and then I’m going to hit “Thanks”, and then I’m going to send the email.

[00:03:00] – Result

Then when the email comes in, I can check it out and then, okay, I’m ready to buy this bucket. I hit “Buy” and it takes me straight to the checkout page and you can see there is the order. Then all the has more has to do is fill in there information and a way they go.

How to setup SEO keywords and descriptions in shopify

Posted on 19. Mar, 2014 in Getting Started, Uncategorized

How to add SEO descriptions and keywords to products, collections and pages within shopify. I walk you through all the different areas on how to update your SEO in the new shopify control panel.

Shopify makes minor update to admin Dashboard

Posted on 20. Feb, 2014 in About Shopify, Tweaks

Today shopify rolled out a minor update to the administration dashboard. This video will show you how to navigate the new design. There are no new features, just a minor redesign but it looks cleaner and improves the visibility of what matters.

301 Redirects in Shopify. Fixing broken links

Posted on 13. Feb, 2014 in About Shopify, Development, Tweaks

 

How to redirect old pages that no longer exist. Typically when you move from one platform to another the URL format changes. The best way to fix this problem is by using a 301 redirect. This type of redirect will notify google that the location has changed and the change is permanent. I will show you how to setup the 301 redirects through the shopfy dashboard.