Hey, friends, welcome to Creative X. My name is Brad Hussey. I'm a web designer and today we're going to be building an e-commerce website in Editor X with no code drag and drop. But here's the extra cool part. We're going to be using AI to augment the entire process from coming up with the idea to the content, to the product lists, to the product descriptions. Heck, even ESCO descriptions for titles and everything like that. We're going to be using, I hope, that whole process. Now I've had some comments from you saying, Hey, Chachi Beaty likes to plagiarize a little bit, so make sure you check that out. So we're going to make sure we do that. Also, we're going to be using Mid Journey to come up with some concepts. I got some cool comments from you guys on how to get the most out of mid journey to create more, better results. And then we're going to be using these ideas, these images and this content site map. We're going to be bringing it over into editor x, building out an actual e-commerce site based on this content that we collaborated with air to create. So let's do that right now. All right. So the idea I want to run with is a whiskey brand, a website that sells whiskey and whiskey products. I mean, you can choose whatever you want, but that's what I'm running with here. So I'm going to ask Jackie Beattie to create a site map for a whiskey e-commerce website. All right, so here's the site map that I came up on the first pass we've got home about shop. We've got a list of whiskeys, accessories, blog, contact my account, sign out, sign up, log in order history personal info affix shipping returns payment privacy in terms like this is it nailed it on the first pass this is great if you just need an idea of your site map like boom there it is. Now I want to refine this. What's great about trashy beauty is it's conversational. You could be like, Hey, like, take this out, I don't want this. We only do that. So I don't want to be selling Scotch, Irish, bourbon, Japanese, Canadian rye and other whiskeys. That's just a sure fire way to make a whole bunch of bad whiskey. Just pick one and run with it. So let's just tell Chatty Betty we only do Canadian rye. All right, so Chatty Betty is now spinning out and generating a site map based on what I just said. So let's see what it is. In that case, revise site map home about shop, Canadian rye whiskeys by region, distillery and age. Very cool. So it's giving us ways to organize our products. Very cool. Accessories, glassware, bar tools, books, sweet. So if you're a whiskey brand and you're selling not just your spirits that you're creating and distilling, but, you know, you also want to make income on other things like accessories. Great. I have another idea. So what's another way that we can monetize our whiskey brand? Heck, let's. What's our strategy? Betty, I have an idea, but let's see what it does. Here we go. So it's it's basically taking the ideas that I already had in my head. And we can run with the self and coming up with new ones that I didn't even think of. So selling merchandise that's obviously already in the site map offer tasting events. Yes. So you could host tasting events. So you can do that as a fee. You can prepackaged your whiskeys as taste testers and you could sell that. That's brilliant. Subscription service. Never even thought of that. The option to subscribe to a monthly delivery of your whiskey, a membership program. Very cool. Sell cocktails or mixers. Okay. I mean, sure, license your brand. This is if you wanted to do something like license it out and expand your your empire. But I was thinking more of tasting events. That was more of what I was thinking. If your local local distillery. Cool. Let's run with that. All right. So here's a revised site map. We now have tasting events. Now, what I'm going to do here, since we got the top level site map is copy this out, piece it in an e-commerce document here now quick pro-tip eventually notions coming out with its own API integration, so I won't even need to go from up to notion. I can just be straight a notion and say give me a site map for a whiskey e-commerce site. Boom, it's right here. Copy and paste eliminated. Wow. Saved us 4 seconds. All right, so here we got the top level a top level site map. Now, what I could do is I can now organize this and say we need to some create some content for this site map. Okay. So let's start off with our homepage. Let's create some really quick basic copy for the homepage. All right. So we came up with some copy on first pass. Now I wouldn't recommend just copying and pasting and just Bob's your uncle. I don't think it's as simple as that, because who knows how original this content is. Maybe it just swiped it off of something else. I'm not quite sure. But what we can do is verify. First of all, if this is even that original, probably the best first thing to do is look at it and go, is that how I would say it? You know, use this as inspiration, change things up. Maybe you go like, Hey, I never thought of using that phrase. Let's, let's rework it with just that phrase. You can also ask Chatbot to come up with variations. So I'm going to copy this for now. And actually, you know what? Before you do that, we need a name. We need a whiskey brand's name. All right. So it's got some names coming up here. We got Copper Ridge, Whiskey Peak, Rye Summit, Wildflower Whiskey. That's cool. Maple Oak Timber Trail, North Star Whiskey Mountain Top Old North Wolf Creek. I mean, these are these are pretty cool. These are pretty cool. Let's go with the you know, I'm going to call it wild rose whiskey. You know, it's not on the list, but wildflower whiskey made me think of wild rose Wildrose whiskey. I'm not sure if that's already a brand. We're going to run with it. Okay, so let's create some copy for the home page with the name Wild Rose Whiskey. All right, sweet. So we got Wild Rose Whiskey, and we've got our home page copy here. And so what I could do is I could just copy this right here and put it into our notion board. Now, what I might want to do here is you can test to see how, how I generated this really is or maybe how original it is. And that's something we want to look out for when we're building our sites and creating a copy with. I can't just copy it verbatim because it might not be totally original. So I'm going to copy that. I'm going to paste it here in a T output detector in this one. It's mostly, you know, fake I guess it's just this really air generated sounding and that's not quite what we wanted. So what you'd probably want to do here is you can just go through and just make this more original, use your own voice, switch things up, use different words. You can also use a paraphrasing tool like quill bot and paste it in there. And so it looks like we've got too many words. So maybe I will just take something out here. Let's paraphrase this and see what it comes up with. And okay, so it's generated a paraphrased version here and we can play with this, we can rephrase certain things, we can change how much or how little it paraphrases. So for example, let's just copy what we got here. Put it back in our GB to output detector and now it's 99.6% real. That was just one pass. I mean, we can even ask Chad gb t to like rephrase this with more human language and maybe even create some grammatical errors. All right. So we've got our A.I. generated summary based on the quill. By going back and forth here, I already feel like this sounds too A.I. sounding. So what I'm going to do is I'm going to say, shorten this. Always spell whiskey with an E and give it more attitude. I want more attitude again. All right. So this sounds pretty cool at first glance. Let's see what our detector says about it so that 99.38% real. That sounds good to me. I'm going to save that to our notion board with our copy. So there it is right there. I'm loving it. I like it. All right. So now what I want to do is I want to utilize A.I., artificial intelligence, specifically chatbot, to help us come up with a few product ideas for our whiskey site. So create a list of ten products to add to my ecommerce site. Brilliant. So it's got ten products here. All different takes on whiskey were aged 12 years, single barrel. We've got cask strength, we've got spiced rye, we've got liqueur, whiskey stones, whiskey glasses, cocktail mixer. Very cool. Now I want to create product descriptions for each of these products, so watch this. All right. So create some short product descriptions for those five different whiskeys that we came up with using artificial intelligence. All right. So here are the product descriptions. How about this? What if we want some article ideas for content? We need someone to we need some ideas for our content. Let's just quickly do that right now. Create a list of ten blog article ideas for the website. Now, this is great because it'll spit out some ideas and then we can use that as writing prompts. And you can have your writer, your content writer or yourself to write these pieces out. Now watch this. So we've got ten blog or blog article ideas for our whiskey site. Five Reasons Why Canadian Rye's the Best Whiskey. You're not drinking yet. That is a really cool how to taste whiskey like a pro pairing Canadian rye with food, a beginner's guide busy visiting Canada's Whiskey Trail. Is there a whiskey trail here? Maybe there is. Canadian rye versus scotch versus bourbon. What's the difference? This is good. This is good stuff. Copying this. These are great article ideas. I'm going to put that in our blog here. There are topics now what we're going to do. We've got our content, we've got our site map, we've got our blog article ideas, we've got our product ideas, we've got our descriptions. Are the product ideas. All is tested with artificial intelligence, making sure the content is original with plagiarism checkers, originality checkers, spicing it up, changing up the way that you ask chat chip to create your content. Okay, so we've got our ducks in a row now we need to do is move over into mid journey for air art. We need to create some assets, we need to create some mock up concepts. We need to we need to have some inspiration to work with. All right. So it's here in mid journey that we can start generating our designs or mockups or graphics or assets, lots of really cool things you could do with Mid Journey. It's a very creative tool and it's really only limited by your imagination and also your ability to know what prompts to write. So the way I'm going to go about this here for our Whiskey Brand is to maybe start with some inspiration of an existing whiskey website or whiskey brand or some sort of vibe that I like. And we're going to make a screenshot, we're going to take a screenshot and use that as a part of our product and that should help give us a bit of a, a starting point with mid journey to give it some direction. The more specific you are the better is what I've learned with Mid Journey. If you are vague and you are giving vague prompts, you basically leave a lot of room for randomization and maybe that gives you cool, really creative results, but it might also not be what you're looking for. So the more specific, the more detailed, the prompt, the better. So the way we're going to do this is I'm going to go to awards dot com and search for some e-commerce sites. All right. I found it. It's called Oak and Eden by Elva Agency. Very cool. I like this style. I like the mono space font. Let's open up the site itself and take a look here and see what makes this whiskey website and what makes it e-commerce and what makes this brand stand out. To me, I love the font choice, very kind of western, the color palette. Everything's kind of I don't know, it's got a caramel feel to it, creamy. It's kind of light, but it's also very sophisticated. Loving the vibe, loving the typography, love the style, color palettes. Great. We've got slight animations, buttons are nice. Ooh, nice hover interaction and the button there, that's nice in bottle finishing feature flavors. I love this. We've got the, we've got our our marquee or our ticker tape. We've covered how to do that on this channel in a in a video or two here. I really like the names. The names are something that stands out here. We've got cocktails. That's good to know. Cocktail recipes. Okay, that's content ideas. We did Bourbon meets American Honey, available for a limited time. Only shop wheat and honey. Okay, so we got, like, actor collaborations here. Okay, I love it. It's going for the real cowboy whiskey. Okay. Neat and rugged. We're. We're out in the Montana pack. Let's go up to Alberta. Let's take it Canadian. We're out just in the foothills just just with the Rockies, just beyond, you know, when you had a hard day galloping along the cowboy trail and you're thinking, you know what I need right now? I need a whiskey all-canadian finish with hard work, gratitude shop. Now I felt that I felt that. Okay, I got what I needed from this site. I infused inspiration from this site. I got what I needed. So here's what I'm going to do. I could have just skipped right to this part. I'm going to take a screenshot of this right here. Boom, took the screenshot. Now I'm going to head over to Discord, which is what connects to Mid Journey. But here's a really cool thing that you can do. You can take that screenshot, upload it to mid journey, get the image and watch this. I'm going to upload it by just adding it to the little input here. Upload to mid journey bot. Okay, it's uploading. Now what that's going to do is it's going to give me a URL so I can actually copy the link of this. Now here's how we make it work in mid journey. Here's what we got to do. We go forward slash imagine paste that URL to start off our prompts. So now it's got the screenshot that I want to use as a basis for my, for my UI, for my design. What I would do here is write out a prompt and I think a way to do it would be something like web design or a website landing page, maybe website design. That's it for Whiskey Brand. Let's say caramel color cowboy mountains would manly UI UX eCommerce. I don't know if that's going to work or not. Black Rusticated sophisticated and cowboy like an oxymoron. I'm not sure. And now we're going to add some parameters. So for our dash, dash, I learned this from a comment here on the channel. Thanks for for the commenter who let me know that you could do this. You can go dash. Dash. No. And then the keyword that you don't want it to include. So no markup. So that means like I don't want it to like give me a picture of a website inside of a picture frame on a wall next to a man drinking whiskey like I want it to be just like, give me the graphic. So no markup. Dash, dash air four aspect ratio three, colon two, which is three by two, which is kind of like how we want it to display. Let's run with that. Let's see what happens. That's kind of cool. And you can see the mountains in the back. This one's neater. It's got better lighting the silhouette in the back. We've got a cowboy on this one. Looking out is oddly wide shaped glass. And then this one here, I think my favorite is the second one. Let's create a variation on number two. So I'm going to click V two, which is variation, and number two is going to give me four variations on number two. Okay. These are pretty good. So what I'm going to do is I'm going to take number one and I'm going to upscale it. So I'm going to click you want to upscale number one. It's going to give me a higher resolution image of the first one. So I'm going to take that upscaled image and I'll bring it into Photoshop and I'll eliminate and get rid of any of the user interface elements and text that it put on the image. So I could use the image just in and of itself. The other way I like doing this is just feeding a prompt to mid journey and not asking for a UI, UX, you know, assets at all and just asking for, you know, whiskey on a table, caramel colored background, orange peel. All right, so that is looking better. And then obviously we've got this weird stuff around the outside, so we'll just crop it to only include the good parts of the image. And there it is. So we're going to save that image. Now, what I'm going to do is I'm going to move back to mid journey and I'm going to get it to create some products for us so that we have some, some items to display. And I want to use one of these products as inspiration again. So I'm going to copy the image address for this image. I'm going to say imagine there's the image and then we're going to go for realistic whiskey bottle white background, any black background, shadows, rich caramel color and then ar2 by two. I think I could do that. Oh, very nice. All right, I'm liking number four. Our number two is nice, too. Nice lighting. Let's go to number two and we're going to create variations on number two. Oh, very cool. Okay. I think that number two is very impressive and appealing. Number three is nice, too. Let's go with upscaling. Number two. So let's call this one our 12 year single barrel rye. But let's say we also want one that's like beside like a maple leaf. Let's do that. Rye whiskey. So we're going to get another one of these rosé. Imagine realistic whiskey bottle, black background shadows, rich caramel color sitting beside a maple leaf. All right, what do we got here? Oh, cool. So this one's got, like, a whisk. Like the whiskey with the maple leaf on the glass. This one's also got one hanging from it. So we're going to create actually a variation on number three. I'm going to grab an upscaled version of one of these bottles and then we'll go ahead and download that. All right. So now we go to all of our images and our assets that we're going to need. Now, I could create more with the journey I can create a decanter, I can create a beer bottle, I can create whiskey glasses, I can create whiskey stones. I can create all these ups to use for our our for our product images and any other imagery that we might need to either start with or just to use on the site. And now we're going to do we're going to move over into Editor X. That's my favorite Web creation platform that lets you build beautiful, responsive websites with no code. And we're going to be taking what we have so far from our content and our imagery all assisted with artificial intelligence. And we're going to build out an e-commerce site right now. Let's do it. All right, Ed Excite, go to Ed Export New and that's going to create a new editor. Excite, if you don't have an Ed X account, it's free. Go to editor, XCOM, sign up and then just type editor x dot new in the browser you URL bar and it just spins up a new site really quick. Now that's if you want to start fresh. That's usually what I do when I start fresh. Now if you want to use a template or if you want to use something to help give you some inspiration, I highly recommend using Ed X's template library or the Wireframe Template Library. Let me show you that. So here's the template library right here, but I'm going to go to wireframes and this is great because it doesn't give you any images or assets or copy that might muddy up your inspiration or muddy up your the vibe or the style you're going for. You just need a layout to work with now, so I'm going to do here. So there's lots of different layout options here and it's all there for you just to start working with. And I want to go with this e-commerce theme right here. You can check it out. You could sample it, check out a demo. This to me, looks like I can work with this. I think this could work quite well, so I'm going to go ahead and edit this template. It's going to fire up a new site with this template as our basis. Now, here we go. We've got everything here. We've got our layers, we've got our pages set up. So this template is all ready to go. In fact, it's already an e-commerce theme, so it's going to be even easier for us to start adding products to our site. So the way that I like to start with Editor X is with our site styles. That's our global styles, our typography, our colors, page transitions. And I like to make sure that all that's taken care of because once you do it, that first it'll apply to the whole site, any new elements, assets, compositions that you create. So that's the first thing I want to do. I want some neat typography here. So for my headers I'm going to go ahead and choose something that I think will match the brand of going for. Okay. I actually kind of like this space grotesque cool mono space font. That's what I'm going to be using now. Next is the colors. We need a color palette that's going to work for our whiskey brand. So why don't we go back to church and see if we can come up with some colors that we can use as a bit of a primary color, something that we can hinge on onto. All right. Create a color palette for this website providing hex codes and let's say a dramatic color palette and see if that works. All right. So we got rich caramel, rustic, brown black magic, dark oak whiskey, gold graphite. Okay. So copper mountain, smoky gray. So we got some options here. We'll keep it real simple, but these top three palettes, that works for me. Now, what I need to do is, well, let's start adding our imagery. So I'm going to go ahead and do that right now. All right. And I'm going to grab that hero image, change the background, and I want that height to be much taller than that. The text, we can't quite read it there. So that's going to need to be white. All right. Now we need a good headline. All right. So we've got our copy deck here. We don't actually have a headline. So let's ask Charity Beatty to give us a cool headline. And now this button can't quite see it. So we're going to change this button to use our color from our color palette. It's going to be that gold. All right. Now we're on to something. What I want to do is update this logo. I'm just going to use this text here. Maybe I'll just change the font now that is what I'm talking about. I love it. Wildrose Whiskey Co Let's even go one step further. We're going to add an element here and I'm going to go to Decorative and see if we could find ourselves some vector art. I'm going to add that here. I'm going to bring it up, attach it to the header. I'm going to stack those to make sure they're aligned nicely. All right. So now we're just shaping up our header here. It's looking pretty good. All right. We're looking pretty good here. Now we've got our header, we've got our call to action. This is looking nice. We need to add some products so that we can start populating the site to include our best sellers, to include our items. Let's do that. All right. I'm going to go to my pages here in Editor X and I'm going to go to the shop. And we have no products here. So what we need to do is manage our product. So let's go ahead and do that, manage our products here in our eCommerce content manager, I'm going to go ahead and add our products. That chat t helped us come up with. We started in our content deck here, so we've got our Canadian rye whiskeys, we've got our accessories. So I'm going to go ahead and add those in. All right. So we've added some products here. What they're pricing, the descriptions, their images, and these are just a few items, but it only takes a few minutes here. And Editor X, you can do everything from the type of product it is shipping information, the SKU, the description, any other additional info pricing? If it's on sale, you can do things like your margins so you can calculate your margin based on your sales, how much profit you're making. So it's all here. We've categorized it based on what category we think is relevant. And now I'm going to do is I'm going to go back to our site. All right, let's let's change this up and let's finish up this home page. Make it look perfect. Here it is. Unleash the wild, bold and rich, wild rose whiskey at our best sellers. Check out the entire shop. We've got our story. We've got our tasting events, maybe even our blog. We can put it in here as well. We got join our newsletter, get those blog posts. Amazing. And then when you shop, you can check out our products. You could click through open up the product page, you can add it to cart, you can buy it now. Read Return and refund policy shipping info. We've got everything that we need right here on our editor x site that we built with no code very simply, very easily with the help of AEI. All right, friends, there it is. We built the site, we have our products. And it just goes to show that these tools, these tools, they're not going away. If anything, we're just at the very beginning of what I think is possible. Let me know in the comments what you think about I what you think about Editor X, if you have any questions or comments about these videos, any suggestion for videos that you'd like me to create, let me know. Also join us in the Creative X Crew to continue the discussion and get feedback on your work and join a community of other professional, creative designers and freelancers who are making a living doing work. They love building stuff and sites for clients on the internet. Links in the description below, I'll see in the next video.
