custom shopify design
Published on: February 7 2023 by pipiads
Table of Contents About custom shopify design
- Customize your Shopify Theme FAST | How to Design Shopify Store 2021
- Shopify Tutorial for Beginners 2022 (FULL Store Setup Guide)
- How To Design A Shopify Store In 10 Minutes (Step-By-Step)
- Designing A Clothing Store With Dawn Theme OS 2 0
- Shopify Debut Theme Customization | Debut Theme Design Tutorial
- How To Design A Shopify Store Like a PRO (& Sell More!)
Customize your Shopify Theme FAST | How to Design Shopify Store 2021
let's be honest, your store design matters, and if you have a really ugly site, people are just going to leave and they're not going to purchase from you. so in this video, i'm going to show you exactly how to customize your shopify store design. as soon as someone comes to your site, they only have about seven seconds before they decide if they want to look longer on your site or leave. so those seven seconds really matter and design matters when it comes to that. you want to make sure that your site is eye-catching and it really speaks to your ideal customer. so how do you do this? you really need to pick out your shopify theme and make sure that it works based on what kind of imagery you have. if you have a lot of really great big images, then pick a theme that's going to highlight those. but if you don't have a lot of great product shots, then you want to make sure that you pick a theme that's not going to be heavily reliant on that. once you've chosen your shopify theme, then it's time to customize it, and this is where it's important to create different assets, choose your fonts and colors to make sure that it's appealing for your ideal customer. so this is super important, but a lot of times people kind of overlook the design step. so i'm going to show you really quickly how to actually customize your design in the back end of shopify for both your home page, collection page and product page. so to get here, you're going to click on online store and then you'll see themes there from the list. so now that we are on the themes page, you can see your live theme here. this is what your customers are actually seeing whenever they come to your site, as well as your online store speed. we've done another video on how to speed up your site, so i will link that in the description below and in the info cards above as well. and you can also see the theme library so you can upload your theme if you've purchased it somewhere else, or you can explore the different theme options available. so, for example, if you click on explore free themes, you'll actually see a pop-up of all of the different free themes that are available here. the one problem with this is, if you click into it, you can't really see how the site overall looks, as well as how it looks on mobile. you can just kind of see the different styling aspects. so what i do recommend that you do is actually visit the theme store. so if we just click on this here, you can see the full theme store, and this is both free and paid themes. so what i like to do whenever i'm trying to decide on a theme for a shopify store is i'll actually go to all themes up here at the top and then you can see the sidebar here of sorting options so you can actually sort through and you can see. you know, based on you just want to see themes that are just for single products. so if you click on that, then it shows you just that product or specifications on the right hand side so you can better narrow down what kind of theme that it is that you are looking for. so if we unclick this, let's just go ahead and go with a free theme and we can click on free here and now we can see all of the different free themes. that, again, we did see in that pop-up already. but the difference is now we can actually click on the theme, we can again see the different styles that it includes as well as we can view the demo. so if we click on this here, we can now actually view the demo of the theme, see exactly how it looks, as well as a really important feature, which is seeing how it looks on mobile. so if we click on this mobile phone device, we can then see how it looks on mobile devices. so we also just posted a video about how important it is for mobile devices and stylizing your site. so i'll also link that below if you want to get a little bit more information on how to make sure that your site is really performing well on mobile devices. so if you decided that you wanted to go with this theme, you would just hit add theme here. let's go back to our shopify store backend and we're just going to go ahead and use the default brooklyn theme that we already have set up. so you have a couple options. you can click on actions. you can rename the theme, duplicate it so that that way you have a copy of the original. you can also download the theme file and edit the code. so this would be if you knew exactly. you know specific things that you could edit in. or if you were a developer, you could go in and edit the code. you just want to be careful here because you don't want to make any changes that you're not going to be able to fix, and then it's going to edit your site and you're going to have issues. you can also change the languages of how things appear on your site, so this would be more tiknical terminology. so you can go in and do these different options. but what we're going to be doing in this video is we're going to be customizing this theme. so i'm just going to go ahead and click customize here and now we can see here we've got some default things added in on the left hand side that we can customize as well, as this is the default setting. so we're going to start going through and doing these different options. i do want to mention real quickly that this is just a test site that i'm using for this video. so all of the images and products that i'm using are from a company called rifle paper company. if you like any of the products or images that are featured here, definitely go check out their site at riflepapercodecom. so back to our site here. let's just start off first with the header area. so you can see, here this header area is going to be default and standard throughout our entire site and that's right here, with the logo that we will change out, as well as our navigation. also, if we scroll down to the bottom, you can see here there is a footer area that's going to be the same throughout our site as well, and then all of these areas in between are specific to this home page design. so we'll go ahead and do the header and the footer first, and then we can come back to the home page design. so let's click on header and then we can see all of the options that are specific to this header. so first off, we can add in an image here so we can hit select image, and i've already got a few added in. but you could just click upload and upload that from your computer as well. but i'm just going to add our logo in, click on it and hit select. we can then see that we can change the width of this so we can make it bigger if we wanted, or we could make it smaller. all the themes are going to have different options based on the theme that you choose, so you're not going to see exactly what i'm seeing in terms of the options here, so you'll just want to go in and play around a little bit. we can also change the color for links and icons and have a transparent header. so right now we have- this is our big slideshow image and we have our logo and stuff laying on top of it. if we didn't want to do that and we wanted it to be a white bar behind it or another color, we could just click on this here and now we can see that's a little bit more prominent. so let's go ahead and leave it like that. if you were going to have your logo over the homepage slideshow, this theme does have additional options, like you can add a white version of your logo or change the header, links and icons, just to make sure that it shows up a little bit more. we can also see here we have different types for navigation. if we wanted it to how we wanted the navigation to display, we will just keep that as it is. we can also see we could change the menu out, so we just have one menu for the main menu area here, but we could go in if you had multiple different types of menus and you could change that out. and there is a secondary sidebar menu which would, i'm guessing, show on mobile devices. so we'll just keep that at the footer menu for now. and lastly, we have different things here for the announcement bar. so that's this up here at the top, so we can choose to only show this on the home page. change out the text.
Shopify Tutorial for Beginners 2022 (FULL Store Setup Guide)
in this shopify tutorial, i'm going to take you through, step by step, how to build a professional shopify store from start to finish. we're going to cover every single step, from signing up to shopify to launching your finished store, ready to sell your products. that includes choosing a theme, customizing your store website, adding products to your store and also important things like setting up your legal pages, your payment providers and your shipping information. i'm also not going to waste your time rambling about things that aren't important and then try to sell you a drop shipping course for 9.97. this video will simply help you getting your shopify store up and running as efficiently as possible, while also learning how to use shopify. so let's get started. so the first step is to go to medicsmediacom forward slash shopify or simply click on the link down below in the video description. this will get you a 14 day free trial for shopify. so do that now and we'll go from there. great. so once we're here, we can simply type in our email address right here and then click on start free trial, and then we also gonna have to set a password for our new shopify account, and down here you can also see the current url of your new shopify store now. you can change that if you want to, but eventually you're going to want to get your own branded domain, something like medicswatchescom anyway, so i wouldn't worry about that too much. and then you can click on create your store. now they want to ask us a couple of questions about our business, which we can actually simply skip right here, and then they ask us for our name and business address, which is actually required in order for us to create a new shopify account. so fill that out right here and then click on enter my store. awesome, so that will take us inside of the shopify dashboard, which is what you're gonna learn how to use in this video. however, we're not gonna cover every single thing here in the shopify dashboard, because a lot of it is self-explanatory and i think the best way to learn everything is to actually start building out your store and then learning by doing learning the features when you actually need them. so i want to dive right into the fun stuff and start building out our store. alright, so the first step is to go ahead and choose a theme for our new online store. so we're going to go to online store here on the left side, then we're going to go to themes, and then we can see that the current theme that is already installed on our online store is the dawn theme. this is the default theme that comes with every new shopify store. now, choosing a theme, you want to make sure that the theme already is kind of the design that you're looking for, the structure of the of the website that you're looking for. so you have a minimal amount of work you have to do until you are ready to launch your store. so what you can do is you can go to actions, click on preview and then you can see how this current theme is actually built up, and then you can decide on if this is actually the right theme for you or if you want to choose a different theme. now, if you want to choose a different theme, you have a couple of different options. so here, when we scroll down, we can see that there are some free themes that we can use that come with the shopify plan, or it can also go to the shopify theme store right here and then also check out paid themes, which you're gonna have to pay for. so what you can do right now is to go through some of these options. i would recommend to first click on explore free themes right here and see if any theme here really fits your brand, your, your kind of store or the products that you want to sell. so eventually, all we have to do then is to add our products, add our branding and add all of our content, and then our store will be ready to go. what i'm gonna do in this video is simply choose one of the free themes right here. so i'm gonna click on explore free themes and i'm actually going to go for the brooklyn theme right here, so i'm going to click on the brooklyn theme. they also have a couple of different styles for each theme, so you can click on different styles and decide on which one you like the most. i'm gonna simply stik to the classic style right here and then i'm gonna click on add to theme library here on the bottom, and then, once the theme has been added, we can see it right here, and in order to actually change from the default theme to the new one we have just added, we need to go to actions right here and then click on publish, then again confirm right here, and now our theme will change to the new theme that we have just added and now we want to start building out our store. so we're going to scroll up again and then we're going to right click on customize and click on add link in a new tab. this way, we still have our shopify dashboard open in the background and we can work on our shopify store in the shopify editor right here at the same time. so now we are in the editor of shopify, which we can use to build out our online store website. so i'm going to give you a quick overview over how this works and then we're going to start to build out our website. so here on the top you can switch from different pages. so right now we are on the home page. you can also switch to your product pages, to your collection pages, blog pages and so on. but most of the work we're gonna do here on the home page and you're gonna see that all the other pages- like product pages, checkout pages- they're already built up for you, so there's not much design that we have to do on these pages. then you can also change from desktop view to mobile view or full screen view. so eventually you want to make sure that your store looks very good on mobile as well, because a lot of the traffic nowadays online comes actually from mobile phones. but however, we're going to build out everything here on the desktop view. then the site is built up in different sections, so it always starts with a header section here on the top and then on all the way in the bottom there's the footer section where you're going to have a couple of links and your legal pages and so on, and in between the header and the footer there are the sections which you can decide what you want to put in here. so by default we have a slideshow section here on the top where you can feature your store or your products, and we also have a menu here on the top which is part of the header. then we have another section, the rich text section. right here we have collection list, we have feature collection and so on. these are all sections that you can add manually and also remove. so, for example, if you want to remove the which, the rich text section, we could simply click on it and then we can click on remove section right here on the bottom. now, depending on what screen size you have, this menu might also display here on the right side for you, but for me it's here on the left side- then you can click on remove section right here and, just like this, this section is now gone from our website. you can also add new sections by clicking on add section here on the bottom left, and then you can decide on what kind of section you want to add. so let's say, we want to add this rich text section. again, we can simply click on which text section, then it will add it here on the bottom and now we can also drag it to another position. so we can drag it here up to maybe below the slideshow, and there we go. we have this section now on our home page again. so let's actually start building, and the way we're going to do it is we're going to simply go from top to bottom and we're going to start with the header. so we're going to click on the header here on the left side and the first thing we're going to do is to add our logo to our store. so i'm going to click on select image right here and then we're going to choose the logo that i have prepared for this specific store. so i'm going to click on upload an image and then i'm going to choose this image right here, which is:
More:shopify buy button example
How To Design A Shopify Store In 10 Minutes (Step-By-Step)
having a bad website will kill your chances of success on shopify, even if you have the best products and ads. it's so much harder to see results with a low quality store. so in this video, i'll be sharing the exact store template that i'm using right now to generate over a hundred thousand dollars a month, and i'll be showing you, step by step, exactly how to easily build one for yourself. if you're new here, my name is jordan and i'm currently documenting the entire process of growing my ecommerce brand with as much transparency as possible. so if you're interested in starting your own online business, make sure to subscribe for new videos every single friday. also just want to say thank you guys so much for 50 000 subscribers. so to give back to you guys, i'm gonna do something that i usually don't do. i'm gonna give away a free one-on-one coaching call to one of you. to enter the giveaway, just drop a comment down below, follow me on instagram and dm me. when you're done, i'll be announcing the winner for this next friday. anyways, let's get started with the video. first things first. here are some live results that i'm getting with this exact template. so, as you can see halfway through the day, i've already done over 2500 in sales and if we look at yesterday's stats, you can see that this store is averaging around five thousand dollars a day. everybody is always asking about profit, so let's take a look. yesterday i did around fifteen hundred dollars in profit and today, so far, halfway through the day, i'm at around in profit, which is close to 30 daily margin. i'm not showing this to brag, but just to prove that this layout is working. today, i figured the best way to explain this would be to make a sample store that follows this exact template, so that's what i did. let's have a look at that sample store. so this is a store that i created in the home and garden niche- the type of stores that i like to build to test products look just like this. basically, we're building a nice, clean, branded store with good logo, good images, multiple collections inside of that niche, high quality products and images and, overall, a trustworthy and legitimate feel. i get dms every single day of people asking me: why am i struggling to see results? and then i look at their store and it looks like this: if you take the time to make a nice, clean, branded website, seeing success with ecommerce is going to be so much easier. this kind of store is perfect for testing products because it is branded, it has a trustworthy feel, but it's also broad enough that you can test a variety of products without being too constrained. i like to call this kind of store a hybrid store. it basically bridges the gap between a general and niche store. building a store like this is really not that difficult, so i'm gonna break down how to do it right now. the first thing that you're gonna need to come up with is a clean name and logo. to come up with names, i highly recommend you guys check out this tool called lean domain search. basically, you can take any word or phrase that you like and plug it into here and they're gonna show you websites that are ready to go that have this word inside of it. so in my case, i used the word flora because it fit perfectly for the home and garden space, and i scrolled and scrolled until i found the name flora flow, which i really like. all of the names on this website are available to purchase for the com domain right away, so i would take some time and try to come up with at least five phrases that would fit with your branding. so now that you've come up with a name, you need to create a logo now. i know graphic design might be intimidating to a lot of you, but nowadays there are a ton of tools that make it incredibly simple. one of my favorite tools to do this is actually called canva. canva has a bunch of these logo templates already built into the app, and it's actually what i use to build the flora flow logo. you can literally scroll through their library and find a clean logo for your brand in seconds and know this video is not sponsored by them. i just really like their product. so, as you can see, the template that i use for the floraflow logo is right here. i literally typed in flower. i looked at the options, i found this one and i just simply typed in the logo name and then i made it a little bigger, centered it in the middle and i deleted the bottom and i made a logo for the brand in 10 seconds. now, look, it's going to take you longer than 10 seconds and you shouldn't rush the process, but i would highly advise you guys. use that tool to build your logo. i'm also a big fan of photoshop. for my brand that i'm running right now, i designed my logo in photoshop, but it's a lot more advanced and not very beginner friendly. once you've got a name and a logo, the next step is to build out a nice home page for your store. now, when you're running ads to this store, typically you're going to send people to the product pages. yeah, you might have a cool product, you might have a cool product page, but if your customer starts browsing around your website and they get a weird vibe, they're not going to spend money with you and even if they do, the chances of them remembering your brand and buying again are so slim. so this is the exact layout that i use for all of my home pages. let's break it down. there are a ton of themes to use on shopify and it can kind of be overwhelming. this store is actually built on the impulse theme, which is by far one of my favorite paid themes, and if you're looking for a good free theme, i recommend that you guys check out debutify. i've used both of them and personally i like impulse a little better, but if you're on a low budget, debutify is an amazing option. first things first. we need a nice and clean header. try to come up with something creative that introduces the people to your brand in a very inviting way. now i could have easily wrote the best products for your home and garden, but i think it's much better to put something that has a little bit more flair and life to it. so in this example, i put stylus essentials for the modern home designed to elevate your lifestyle. if you're struggling with copywriting, just go look at some of the biggest brands out there. in terms of this image and all the images on the site, shopify actually provides a bunch of really sick free images and a lot of people don't know about this. so if you go down to image and you click on change and you go to free images, you can search up almost anything. so in my case, i searched up flower and you'll see that shopify has a bunch of these really nice high quality images that they're constantly updating almost every single week, and they're really fire. the next thing i do is typically put one of our collections on display. in this case it's the best sellers, because those are my favorite products on the store, so i wanted to put those front and center and when they click on it, you're gonna see that these are our top selling products and a nice, clean, organized page. we also give them an offer with up to fifty 50 off on the select products, and it's just something that gives them some incentive to click and start shopping. the next thing that i really like to do is show some type of mission statement for the brand. i think that this really helps your customers connect with you and feel like they're a part of something greater than just buying a product. so you can see, what i put here is that we want to help over 10 000 people create their dream environment through providing our own unique products worldwide. now, this is going to be different for everybody, so make sure that you come with something unique for your brand. and once again, i just took the image directly from shopify. now, the next thing that i threw in here: it was just a promotion. you don't need to have this, but i included it because i thought it looked nice, so you can just see it's 50 off of our spring and summer collection. and then i just put a little blurb about stay at home and stay at peace with these essentials t.
More:Would you rather have $7,000 per month OR ONE Million Cash?
Designing A Clothing Store With Dawn Theme OS 2 0
hello everyone, christian, here and today we're designing a clothing store from scratch and we'll be using shopify's newest theme, dawn, you know, the one with all the fancy new juicy features from os 2.0. yeah, let's get started now. if you didn't know, dawn is the first free os 2.0 theme released by stopper5. now, if you really don't know, online store 2.0- it's the future. i made a video about this so you can check it out right here. dawn is a flexible theme that includes an adaptable layout, site-wide cross-selling sections and media optimized product pages. with this new theme, you can add sections to every single page, which is pretty awesome. now in this video, we're going to go over the home page. so we're going to design the home page from scratch for a new boutique called shibby's boutique- completely fictional, but yeah, step number one: install the theme. so now that we're here in our totally nineties kid shop, what we're gonna do? we're gonna use totally nine. it's good, but we're gonna still make shippies inside of toilet 90s kid just for the purpose of um convenience. we're gonna go to online store under themes. we already have it installed already, but we're gonna go through the process. so you know, we're gonna click on explore free themes and then should be probably one of the first ones. so you'll see, dawn, it's free and it's from os 2.0, so that means they have some of the newest and greatest features that shopify has released. now you'll see, like some of these old other ones don't have the os 2.0 um badge, so you want to make sure that you get that one. that's the one that we're going to be designing on and moving forward, and i would i highly recommend to start using some of these os 2.0 themes and if you have an older one that you paid for, you might want to check with the back end of your website because you might have the opportunity to upgrade to the new os 2.0. so everyone's going to be upgrading these and i believe by the end of this year everyone should have os 2.0 themes on their store. we click on try theme and this will automatikally download the theme to our store. that way we can manipulate it and start using it. you can have a bunch of different themes installed on your actual backend and dashboard, and that's what we're doing. so right now we have this live theme, which act. it's actually totally nice kid, but what we're gonna do is we have this theme live library down here, and these are all the themes that we have installed right here on on this totally united skit website, and what you can do is you can customize these themes and you can make them your own, and once you're ready to publish that, then you go to actions and then you publish and that will bring this partikular theme all the way to the top and put this one right here down here at the theme library. so just keep that in mind when you're creating new websites. all right, so since that one's still installing, i'm gonna go and manipulate this one. oh, never mind, it just added. so we're gonna actually click on customize and this is where we'll start designing our website. now, when you start designing on shopify, you'll see here that on the left hand side you'll have all the sections broken down and in here you'll have a preview of what your store looks like right now. up here you can actually change it to the mobile version or full screen to see how that really looks, and then here at the very top you can change between all the pages or templates that you have that you can manipulate. for this partikular tutorial, we're going to go over the homepage: how to design it and how to make it look good for a clothing store, all right, so we're going to start from the top and go all the way through the bottom. right now, every time you install a new theme, it will show you sort of a different sections, right, all with just dummy content. some of your content will actually show up in here, but for the most part it's going to be sort of this black and white, very wireframe looking, just so you have an idea of some of the sections that this theme actually has. right, so you're not starting completely from scratch. you at least have something to look at in here. but we can actually get rid of all that and start from scratch or manipulate some of these, because we'll probably end up using some of these, all right, so, like i said, we're gonna start from the top and we're gonna go with the announcement bar. so in the announcement bar- uh, keep in mind that all these sections now are broken down into- um, these care looking things, so that you can actually break it down a little bit further, right, so there's an announcement bar. when you click on announcement bar, it doesn't have any other customizable settings, but some of these sections actually do, so you want to keep that into consideration. for example, this announcement bar has this right here, which i believe- yeah, it's just a text block, essentially- so that says welcome to our store. for this partikular store, we're going to be offering free shipping. so i'm going to actually add that to the very top. but some of our recommendations is: don't do just free shipping for all orders, do free shipping starting at some kind of price point. so we're gonna do free shipping on orders over 95 dollars. all right, so now, color scheme for this partikular section. we have different options in here. i will show you actually where to change the color scheme. um, because for this partikular theme, it only allows you to change it between these, and the color scheme is somewhere else right here within the the editor. so right now, let's just leave it like this, just to see how it might look. i actually let's go. i think this one, yes, a little grayed out, so let's do that. um, you could also add a link if you wanted to, but we're just going to leave it like that. this is more of an announcement, as you can see here. what i was toking about earlier is that you can actually add more blocks, more content to these sections and you can manipulate them a little bit better, where you might be able to now move things around. so this button: if we go right here, you can actually move that button on top of the actual heading. you don't really want to do that, but, um, just kind of let you know that you have more flexibility, more freedom with these new os 2.0 themes and, depending on how the thin theme builders build these themes, you might be able to do even more things. so this is sort of the tip of the iceberg when it comes to designing stores. all right, so now that we have that, let's go into the header. header typically holds the navigation and the logo and some of the search and cart options here. so for this one, we are going to leave background one, which is the white, and then we're gonna select an image, and i've already uploaded a few things in here. so you have the logo right there. now that logo looks very, very small. so right here we have the option to make it bigger. i think i want to do 220.. yeah, that looks good, and then we can also manipulate where the logo goes. um, for this partikular store, because we're not going to change this um, i'm going to leave it right here on the left-hand side, but if we start to get a lot more navigation items right here on the top, then it might be a good idea to move that logo to the top, and i believe i can do that. yeah, top center. so that gives a little bit more room right for more navigation items to um be right here underneath the logo. so it's less about aesthetiks and more about, um, what's more functional right for your website. but as a maybe another recommendation would be on your navigation, i would highly suggest maybe not having your home link, like it's like, right here, and then collections and chop. if they're going to your shopify store. more than likely all they want to do is shop right. so i would encourage you to just add some of your categories so you should have something like new arrivals, dresses, tops, shoes, bottoms. so all of your navigation at the very top should be products that you're selling, not necessarily the about or contact or home, home.
Shopify Debut Theme Customization | Debut Theme Design Tutorial
all right, guys. so in this video i'm going to be showing you how you can go ahead and customize your debut theme within shopify. so debut theme is the theme that all shopify stores start out with by default when you go ahead and start a shopify store and if you haven't already opened your shopify store yet, you can start your 14 day free trial by clicking the first link in the description. so i figured i'd make this video because debut theme is one of the most commonly used themes, because it's the one that all stores start out with, and the view theme actually looks really good. so right here we can see that this is what debut theme looks like when it's first installed, with absolutely nothing filled out. so we can see that we have where our logo should be. we have a big header right here with some text. we have an image here, we have three images with text. below here we have a uh empty collection and we have another um header type image. right here, another wallpaper image. we have some testimonials and we have three images down here. and then we have the footer. so right now we have a nice little template, but it's blank. so if you're looking to go ahead and fill out your um store using debut theme. the first thing you're going to want to make sure you have is a few key things. so i'm going to bring up a notepad and just make sure, because before you go ahead and start the design process, you're going to need a couple things. so the first one is going to be a logo. so i assume you already have a logo at this point if you're ready to start your store design. but if not, then make sure you get a logo first, because everything else is going to be based around the logo. and then we're going to have a color scheme selected and normally this color scheme is going to be derived from colors from your logo and typically you're going to use one to two colors to base your entire store around. and, like i said, these colors will be derived from the logo. and the next thing we're going to need is a couple wallpaper photos so we can see. we're going to need some photos to go ahead and put back here in this header. we need some photos to put back here and this header as well. so if you have any large photos related to your business, go ahead and upload them to your computer or put them all in one folder so we can go ahead and use them as backgrounds here, and, if you don't, you can use different sites such as pixabay to find free stok images that you can go ahead and use. so let's just type in something like fishing, so if you had a store related to fishing, you could go ahead and just look for different stok photos here. or maybe you have something related to yoga or fitness. you can type in a lot of different niches, depending on what your store is based around, and you can use some of these wallpapers to go ahead and put back here. now, obviously, i do think it's better if you have your own custom photos, but uh, you know, not everyone's gonna have that starting out. so if you don't, you can go ahead and use pixabay to get some related photos so we can see that, based on the template here, we're gonna need at least one and two bigger photos, and then we're going to need about five smaller photos to go ahead and put in here, in here and down here. now, one thing to keep in mind is we don't have to go ahead and utilize every one of these sections, and i'm going to show you how you can add and delete sections. but you just want to go into the design process with all of these different things in place already, because it's going to make things a lot easier. so make sure you have a logo, select your color scheme based on the logo, have a couple of wallpaper photos, have about five, you know. maybe, maybe in five to ten smaller photos, they can be in your product, they could be something related to your business. but just make sure you have five to ten smaller photos and then make sure you just have, like, business details, so like slogans, taglines, selling points, uh, just different type of details that we can use to go ahead and fill out this uh page with. so, that said, i'm gonna go ahead and get started with customizing this. so, in order to customize the theme, all we have to do is come over here to online store themes and then click customize. now i already have, um, all of the stuff that i'm going to put in to the design, all the details that i'm going to put into design, prepared ahead of time, which is, like i said, what i would recommend you do as well, because getting all of this is pretty much the first half of the work done. it's just getting what you're going to fill in the store with, and then, once you have this, it's literally just about filling in and then customizing different sections and getting rid of certain sections. so where we pretty much start things off is with the header. so if we open up header right here, the first thing we need to do is upload our logo, which we can do right here by selecting an image. so all we have to do is click upload and i'm going to go ahead and upload a logo right here and i'm going to go ahead and click select and then we can go ahead and customize our logo width right here. so i'm going to go ahead and make it big and we can choose whether we want this centered or to the left, and i'm going to keep it to the left right here. and the next thing we can do is change the menu we have here. we're going to just keep this as the main menu and then we can come down here to announcement bar, and a lot of the time you'll just go ahead and show an announcement mark so we can kind of put an announcement up here. so this is where you can put something that's relevant to your business, whether that's, you know, like a discount, you're running a promotion, you're running free shipping or just any type of details really that have to do with your business. so in this case- uh, the example design i'm going to be going for is a local cookie business, so i'll go ahead and put something like this and then down here we can go ahead and paste a link if we want this to link to anything. so if you are promoting, like a specific sale, then you could have this link to a specific sale. in this case, i'm going to go ahead and not link to anything. and this is where the second part- right here, the color scheme- is going to come into play. so we want to make sure that our store looks fluid and looks like it kind of blends together. we want to make sure that it actually looks good. so in order to do that, we need to have a set color scheme. we can't just have random colors wherever we want so we can see how if our logo is brown, then we probably want to stik to this type of color scheme. we wouldn't want to come down here and make this any color like this, because that just doesn't fit in at all. so what we want to do is find the exact color from our logo. take one of the colors from our logo and there's one of two ways you can do that. one is with a photo editor like photoshop, which i'm going to do right here. i'm going to just use the color picker and in this case, the most prominent color in the logo is this darker brown. so i'm going to use that and then i'm going to take this six digit code right here and use this to match the exact color. now, if you don't have photoshop or photo editor, you can just go on google and search up hex color finder and actually, if i go really quick, if we go to hex color, if we go, actually i believe it's hex color finder. uh, yeah, it's this site right here. so, html- color codesinfo. you can come here, you can upload, uh, your logo like this, and then you can just click and you get the same exact color code right there and we're going to be using this code for the rest of our designs. we're going to go ahead and put in that color and now the brown goes ahead and matches our logo right here. and as far as the text for what's going to go up here, normally you're just going to decide what looks better on the background color between white or black. so if we go to black, i personally think that white looks better, so i'm going to go back to white. and now we're done.
How To Design A Shopify Store Like a PRO (& Sell More!)
if you don't spend the time and effort on crafting a nicely designed Shopify store, you can forget about making sales with that store, because your store design is something practikally everyone sees before they purchase your product and it's also what they use to navigate to that important checkout page. so in this video i'll go over the exact store design, layout and design essentials you need to know about, with examples, so you're able to skyrocket your shopify sales. so the best way to show you the must-have shopify design essentials to implement in your own store is to just simply show you on screen. so the first store we'll deep dive into is a store called aloe yoga. so getting stuck into it on screen, here i'm gonna go through uh, why the store is great, and a few more examples other than this store. but before we get started, let's quickly check using this wapalyzer tool here that it's actually a shopify store. so you can see here that it is indeed indeed a shopify store and this tool, by the way, highly recommend that you use it and grab it. it's completely free and you can install it as a chrome extension. it gives you a whole load of back-end data on basically any website. so to get started, as you can see, the home page is very clean. it's product centered and below here you can immediately see that they have the instagram social proof and then the best seller alerts. so really simple and clean store. it's a large product catalog so it needs to be as clean as possible, simply because there's so much display here. but i want to show you what they do so well. if you look at their product catalog right here, which is just the yoga mat, you can see that there's a consistency with their product imagery, so they don't have, you know, like, um, like a whole load of different product shots, but it's all the same product shot, but just with different variations in color. so this is something to be really wary of. if you have multiples of products or if you have variants or you have a large product catalog, it's really important that you display these items as clean as possible, and this can be achieved really simply through product imagery. and if we jump into one of these products as an example, the product page is even better in my opinion. so you don't see any product description on the side here, right, you just see the product imagery, the name, the price, the variations and simply add to bag. but if you do need more information about the product, like most of us do, we're likely going to scroll down below, above the fold. so this is where you get the description, the fit, etc. etc. but this is a really, really nice and clean setup of the product page. and what i really like about this store as well is that they include videos within their product images. so you know, this is not a requirement, but as you grow, i think this is something that most stores should look into and it's really easy to implement. on your own shopify store, you can easily upload just a video into the image catalog. i think one of the things that you'll notike really quickly with the examples i'm giving you today is that the product images is a core element of all stores. now i understand like it can be really expensive to take images, get a photographer and get really professional photos. so i want to show you a quick hack, and i've recommended playset many times, but it is so essential for a lot of the stores that i run and the businesses that i run. this is a such a simple way to grab images and mockups and designs without needing to hire out, you know, a studio and a photographer and get it professionally edited, etc. etc. like you can immediately mock up a yoga mat as an example, um, and upload that immediately and it looks superb. so i've just uploaded this logo here as an example. this is our logo and i'm just going to click crop and you can see that it immediately adds onto this yoga mat and you can change the background to be transparent. you can change background to be, you know, green teal, whatever it might be, and this in itself is going to save you so so much time. so place. it is a huge integral part to really quick mock-ups, um, and it doesn't need to be a yoga mat. obviously. they have a whole load of different products that you can mock up. if this is a tool that you're interested in, i'll drop a 15 off code down in the description box below for you to check out. moving on to the next store: now this is chaos. it is an advanced print on demand store. it's pretty straightforward, ridiculously simple and clean. one element that i really appreciate is that they have a floating transparent header on top. so if we scroll down, you see the section up here with their logo and the hamburger menu here. if we scroll down, it's stiky, it follows you, it shows you, you know where you're at: the brand, the cart, the quick search button and the hamburger menu- incredibly simple but important. these things all add up to how to create a really enjoyable uh store experience. the ugc here, which is the user generate generated content, is a big, big part of this store. so under here you can see that they have a almost instagram like feed of different products and also user generated content in this section. it depends on the type of product that you're planning to sell, but ugc is so incredibly important, really easy way to show off your product and create that social proof. big part of this is personalization. it's having your initials on these phone cases. so, um, let's jump into this product here. this is such a simple product page. uh, it's a step, step-by-step process because it is all about customization and print on demand. you select your case size, whether it's a 12 pro max or whatever it might be, your case color, your initials, you type it in and i should update on the fly. i think, yeah. so having a preview and having a mock-up of your product is again so important. i just mentioned this, but it is so, so important. and if you're wondering: how do you get this step-by-step customization process? well, there's a lot of different approaches you can take when it comes to that, but one of the options that i recommend is infinite options, which is a very easy solution where you just install this app and you get a whole bunch of different options that you can customize. there's actually a free way to achieve this if you're a bit adventurous and you want to learn how to code. so this is an example store that i found where they use liquid coding to get all these custom attributes and features in. so if you are experienced with coding, or liquid coding specifically, and you want to save a few dollars every month, then this is a great approach too. i'll probably leave a link on how to achieve that. going back to the store now, you can see it is step-by-step process up the top and really there's nothing distracting you here. it is again just focused on adding to bag. that is it. if you want to read more, there is a waterfall function here where you can see the different details and delivery, returns and whatnot. contrary to popular belief, you don't need a long essay about your product, especially if it's a very simple product like a phone case. there's not all too much to say about it. you don't need to sell it too hard and you know tok about how fancy the materials are and what not. like chances are it's not going to be like. you need to rely on other things like customization, user generate content, marketing off the store. all that good stuff, and really the product page, is to be focused on simply just getting the sale, getting people to add to bag and enjoying that seamless transition from adding to bag to check out and that is it. so moving on to the next option here: nerd wax. this is a great example that i want to show you because we're moving on to a one product store, the one product store.