build a cool website for your clothing brand (without code)

Hello YouTube, how are you today? Hope you're having a nice day. I want to discuss exactly how to build a website for your streetwear brand, or really any e-commerce for that matter. And I'm going to show you how to design the website to be exactly as you want it to look without having the restrictions of needing to know code to make things display a certain way. But instead it's gonna be as simple as placing shapes on a screen and then telling them exactly what you want to do. There's absolutely zero code involved. And the beauty of it is you can easily add Shopify to accept payments on your website. This is something I wish I had known 3 years ago when I was starting OneOff. I know it now, and I do not want you guys to waste your time trying to figure this stuff out. This is the type of stuff that should just be knowledge that's accessible to everyone, and that's one of the goals of this channel. So I'm gonna show you exactly how to build this website. It's super simple. It allows you to have a website that's gonna stand out from every other brand that has a website built on a Shopify template, which is really limiting. So without further ado, let's get into it. So first thing I'm gonna do is go on this website called readymag.com. So Readymag is this online website builder, and it's super useful to use. So these are all of my existing projects, and for example, I can go into the one-off project and just let this load, and I'm easily able to move stuff around. Now you can see the image is displayed to the left. If I wanna center it again, I can center it again, and it'll load properly. This image will lead me to my product page where I can accept payments. I can add an item to cart, and if I go checkout, it'll automatically bring me to my Shopify checkout where we can accept payments. And this is just a hyper useful tool. Um, for very obvious reasons. So you can see it's 100% customized, and I'm gonna show you guys just a little bit of how to use Readymag. And for the most part, I'm kinda gonna let you figure it out because it's a really simple software to use, and it's really just a matter of putting in a few hours and you'll be able to have something you're really happy with. So let's start off by creating a new project. So when you create a new project, you get this blank page. First thing I like to do is create a grid and then zoom in. So now we know exactly the size of our website. So here right now it's 67% zoom and we can see the borders of our webpage. So websites are typically displayed on two key devices. It's your desktop, so any sort of computer, and then there's mobile, which is phone. For e-commerce and streetwear, chances are 90% of people are gonna be viewing your website on their phone. So you really need to make sure that your website for mobile looks great. So in order to toggle for mobile, down here is a little computer icon that warps into a phone. We're gonna wanna click on that, hit the plus button, and go to the phone logo. And now all of a sudden we have the phone display. The way ReadyMag is set up is that anything you do on the desktop version will show up on the mobile version, but anything you do on the mobile version will not show up on the desktop version. For that reason, we want to do the entire website on the desktop version first and then rearrange all of those existing elements on mobile. Because when you're rearranging them, it won't affect what's displayed on the desktop, but it will affect what's displayed on mobile. So let's start off by adding a basic shape, perhaps a rectangle. So you can see a black square pops up here, and there's these lines and grids that indicate, oh, this is centered. So now that I know this is centered, I'm gonna try having it fill the top of the page, and we can see that there's these squares here. So let's have it consume one full line of squares. So all of a sudden we have this element that's here. So now when I go into the Eye logo here, I can see that it displays at the top, but if I scroll, it's gonna disappear. Now on a lot of websites, what happens is this is a navbar, so from here you're able to pursue all of your operations. You could shop from here. You could have a little brand logo here which will lead you back to the homepage. And typically, as you scroll, that's supposed to stay in place. It's supposed to stick around. So, that's called a sticky navbar. So, what we're gonna do is we're gonna make this stick. In order to do that, we're gonna click on the rectangle. We're gonna go to this little pin icon over here, and then we're gonna go fix on screen and hit the top middle button. So now, all of a sudden, you can see that there's this little pink line here. That fixes it to a certain position on the screen. So now it's fixed here, and even if we wanted to, we can go on all pages. So if your website has multiple pages, you can have that always appear no matter which page you're on. For now, we only have one page, so let's stick to just this page. And now, as you can see, if I go into the preview and I start scrolling, that sticks around. It's not going anywhere. So I'm actively scrolling right now. And it's always there. So now what I'm gonna do is I'm gonna create a text logo and I'm gonna write shop and I'm gonna select that shop. I'm gonna go to this T icon over here. I'm gonna change the size. You can see that the proportions are locked. So let's make the proportions even for both the height and the size of the font. Then I could change my font. So let's say I decide to use 2P, and I'm also going to change the color so that it's visible when I place it over the rectangle. So what if we did like a neon green? So it's kind of like a video game-like theme. So now we have this shop icon up here on the top. We have the sticky navbar, and now Let's actually make it so that this shop logo leads you somewhere. So what we're gonna do is we're gonna create a new page for our website. So if I go here, I could see that I have the current page. Let's title this page Home, and let's have the URL be /home. So it'll be whatever the name of your website is. So for me, it's oneoff.com/home. Then, we're gonna add another page. We're gonna call this Shop. And then over here, we're gonna go oneoff.com/shop. Then, we're gonna go back to the homepage. We're gonna hover and select over this text. And we're gonna click this link icon. And we're gonna say Link Us to Shop. And now it allows you to select a, a default link style. So, let's edit that. Let's say the text color should be green, that neon green. And when you hover over the text, let's have it become more of a dark green so that it indicates you're hovering. And let's save that. So now if I go into preview, and I hover over the text, we could see it becomes darker. Then when I click on it, it now leads us to this empty page that is the shop page. As we can see up here, I want to now take this shop page and actually add a product that you can shop for on it. So in order to do that, first we need an item. So let's take a product. So I'm currently working on this hoodie for one of our upcoming collections for One Off. So let me take the mockup. I'm just going to add an artboard here and I'm going to copy this over. I'm going to take this artboard, drag it a little further, and I'm going to take a screenshot. Screenshot this product. Now I have a nice square image of the product. And now I am going to upload this image to Redimac. So I click Picture, Drop File Here. Now I can go onto my desktop, accept that, and now I have this nice large image. And this product is going to be called the Marsupial Hoodie. So let's put that in a cool font and let's put that in black. Let's bring this product a little bit to the left of the page. Let's have it stick around right here. Now you see that there's a little bit of a line created with screenshot. So let's edit that by cropping, bringing that in, and let's even it out on both sides for the sake of making things easy to align. Let's also bring this all the way up to the bottom here, all the way to the top here, and hit enter. And now we can center this, we can size it Proportion. And now all of a sudden we're ready for a product description. So let's get a little product description going. Let's say add text. Let's use a different font for this. Perhaps we'll use Courier New. We'll say 100% cotton. Um, Let's say, made in Canada, and let's say 420 GSM French terry. This might be a little typical product description, usually it's a little bit more detailed than that, but for For today's purpose, I just would like to show you how to assemble the website. So now we have our product description. Let's try sizing this down a little bit. Nice. 24. Let's bring that over here. And the goal here is to leave enough room so that we can add a little size, uh, and buy now button. So now we have our product page. We're going bring this all the way up to here, and this has no reason to be as long as it is. Now we're going to go back— sorry, rather, we're going to go back to the home page, and we are going to make this so that both these elements are pinned onto the screen. And now let's just make sure that the layers are in the right order. So this should be higher so that they both show up. And then we're gonna go to pin and we're gonna go on all pages. So now when I preview and I hit shop, I can see that the product shows up here and then I have my shop button here and I can go back. Great. So the next thing I'm gonna do now is I'm gonna make it so you can connect Shopify to this website and that'll show you exactly how you turn this into an e-commerce website, which is the very point of this video. So what I'm gonna do is go on to Shopify and log in. And now I'm on my Shopify website. So from here, I'm going to go into products. I'm going to add a product. So let's call this product the Marsupial Hoodie. And I'm going to add a price. So let's say it's $188. You can add other details if you'd like. And we're going to start adding sizes. So in order to do that, this product has options like size and color. So option values, let's go small, medium, large, extra large. Done. And this will be size. Then we're going to add quantities. Let's add one of each. and we're gonna save that. So now we're gonna add a buy button. So in order to add a buy button, sometimes it'll be displayed here on the left if you've already used it before. If you've never used this tool before, you can go into the search bar and search for buy button. This is built in with Shopify. From there, we have the option to create a buy button. I'm also gonna pin this while I'm here. So we hit create a buy button. Go to product buy button, and we see that marsupial hoodie is here. So, we're gonna select that item, and all of a sudden, we can see that we have a dropdown menu, and we can add whatever we want to cart. So, there's a few different displays. If we had an image, this would show you a few different options, but we want the most basic display, and we'll let Redimac be the one to display the images on, as opposed to doing it through Shopify and then plugging that in. It gives us more control. So here we're gonna go layout style basic. For the button style, you can choose whatever you want. Let's say in our case we'll choose a black button, and let's make the button text white. And from there, we can make it bigger or smaller as we wish. We can make it so that the button is wider. Let's go 95 pixels. I like that. Let's try making it square. Then, when we're all set and done, we're gonna hit next. Copy this code. We're gonna go into ReadyMag, and now let's go back to our product page, which is over here. We're gonna hit plus. Hit the code option. And over here— and this is the only instance of code in this entire video, and in the entire website that you're gonna build— You're going to copy that code that we just copied over from Shopify. You're gonna paste it here, and then you're gonna hit save and close. That is the extent of code that is required for this entire website. All of a sudden, we see that we have this nice little popup, so we can arrange that however we like. And then when I hit preview, all of a sudden, I can now add an item to cart. And look at that, marsupial hoodie has now popped up. It's as simple as that. From there, we can go to checkout, and you can see that just like that, we've generated a checkout for our item. It's as simple as that. And then we can publish this project. It's very easy to map a domain. In order to map the domain, you just hit here, you go to domain, And then you can simply connect your Google Analytics and your Google Tag Manager. I could show you guys how to do that in another video, and I can also leave a link in the bio that Reddy Mag explains very clearly what steps you have to follow to do that. But right now I can't map a domain because the project isn't published. So in order to map the domain, you would hit Publish Project down here, and from there you would easily be able to put your own domain name on the website. So you can write whatever your website is name.com, and there you go. People can easily start looking for you on Google or whatever other browser. Anyways, this is the video. I hope this was helpful. I know that this is a type of video that if I saw this 3 years ago would have saved me an insane amount of time. So please share this and please comment if this helped you. Let me know if you have any questions whatsoever. And I will try to answer everything in the comments. And if you need to know anything else in regards to designing, manufacturing, I'll be happy to answer all of that. Thank you guys so much for taking the time to watch. Have an unbelievable day, and until next time, I'm out. Peace.