Shopify Web Design with AI (Midjourney)

when you think of a Shopify store you're probably imagining something like this or like this or even like this or what if your store could look like that or that or even that hey guys is the Ecom boo here and in this video I'm going to show you how to use AI to design your website and how to import these awesome designs into Shopify to create the store of your dreams first we're going to use mid journey to create the AI designs then we're gonna use Photoshop to make some very minor edits and also divide it into sections and finally we're going to use pagefly to import those designs into Shopify and get the full e-commerce capabilities oh and we're also going to add some cool transitions movements and special effects to make it more interactive and stand out from the crowd this video is going to be packed with information and I'm so excited so let's get started in three two one yeah alright so the first step will be to go to Mid Journey where we're gonna create the website designs now to access this you're just gonna go to meet journey.com and then here you can join the beta when you click on this you're gonna get an invite to the Discord server you just accept the invite and you will be directed to the Discord server now you're just gonna go to one of the newbies room they will assign you a couple rooms so you can play around and here you know everybody is just putting stuff you know designs these are all computer generated with AI so here you're gonna type slash and then imagine and then space and you're gonna give it a prompt right so the prompt for example will be website UI ux shoes e-commerce full page and then you're gonna press enter and you see right here it is going to start creating the page now there's a lot of people creating stuff so you know this is going to move up so you have to go back up find your stuff and then just you know keep it there and wait for a moment all right it already started creating something here is 31 so far it's already done so let's check it out let's open the original so we can see it a little bit bigger so look at these four options that it gave us this already looked pretty cool but of course you can always use go back and then put it again imagine and if we just run it again it's gonna create something completely different but you can also add some details for example I'm gonna say that I want it to be orange and blue for example so let's run it and here are the four new options now it's using orange and blue this is just amazing right very beautiful designs it even designs the shoes so you know this is pretty cool now let me show you something because this is extremely busy okay there's just too many people putting stuff I just put it like 20 seconds ago and look at how much stuff is already there so I actually created a Discord server for the e-combo for our community okay and you know there's nobody here yet it's only me so feel free to join and you know and I have events video requests store reviews and also I added a section with AI web design and here this is not crowded at all because there's only gonna be you guys and here you can actually put the prompts see imagine and then you can put the prompt right here without all of those other people okay it's gonna work on my Discord server and I'm going to leave the link in the description so you can access it as you can see here I was already playing around you know with some you know logo designs also some website designs for different things testing it out coming up with ideas so I can show you how to design something super cool so today we're actually going to design a milkshake store we're gonna sell milkshakes so the prompt is gonna be website UI user interface ux user experience e-commerce milkshake and full page and let's press enter to send it and the reason why I'm using UI ux full page you know it's because I tried it many ways and when you put these keywords it actually you know displays kind of like the full page almost always otherwise it's gonna generate kind of like a mock-up like a computer with the you know with the website inside and it's a a little bit harder to extract the elements from those images but let's see all right it's already starting to generate something and I can already see here this making kind of like a mock-up right there all right so that one we will probably not use but let's take a look at the other ones once this finishes all right it just finished so let's open it up and here are the four options I kind of like this one I also like this one but let's actually just run it again the same exact command okay because I wanna you know I just wanna see some more options matting I'm just gonna copy the same exact thing all right and press enter and it generated four more options let's check them out these ones also look pretty cool but I'm gonna run it a couple more times just to have more options and then we'll decide which one we are gonna use [Music] alright so I got a little bit carried away and I made so many options and if you go to the Discord server you will be able to check them out but I actually think that this one will be a really good example to create alright so what happens once we have you know an option that we like the program gives us a few options U stands for upscale and v stands for version right so right now if I press on U1 is gonna upscale you know this option U2 is going to upscale that one you three u4 and then if I want more versions of something let's say that I really like this one but I want to see other stuff related to that so I'm gonna do version one and now what it's gonna do is create four more versions similar to that one and then we can choose the one that we like and upscale it let's check out the versions that it created look at the variations for example look at the strawberry see this one compared to this one is a different perspective you know look at this one you know it has like this weird leaves right there also of course you know the main e-match is a different kind of shake all right and of course the products are also different but you know what I actually still like the original version better what we're gonna do is go back here and we're gonna upscale the option one once it's done we're gonna check it out let's open the original and you can see right now we have a much higher quality image that we can extract all the elements from so now that we have the website design ready it's time to go to step number two which would be go to photoshop and extract the elements let's right click on the image and we're gonna save the image as and now we're going to open Photoshop and we're gonna drag the image in all right now if you don't know how to use Photoshop or have very little experience don't worry because we're only gonna use a couple tools and I will explain everything looking at this image I can already determine the kind of layout that we can use for the website so of course these are gonna be the product section okay this is gonna be a product Carousel then we're gonna have the banner the main Banner with a hero image okay and then there's gonna be some text here now this is a lot of text for a home page you know so I would probably just replace all of that text and just put a call to action you know maybe a button to you know buy now or select the flavors or whatever the first tool that we're gonna use is the crop tool all right and this allows us you know just to crop the image all right so we're gonna just select only the area of the main image and this looks good let's press enter alright and of course we have to clean it up right now we have to clean up this text I will say clean up this circle thing because if we actually want to put a circle there with some text it's better to do it when we're designing the website the actual Shopify website and I'll just put a circle there with some text by now or something and then we also need to clean up these straws and this is very simple we just have to use the spot healing tool all right and we're just gonna go uh over the text just like that then sometimes you have to do it a couple more times all right that's gone then let's do the same for the straws boom boom boom that's gone I don't like this thing here I don't like that thing there all right let's just clean this up a little bit all right and now it's completely clean all right so the next step will be to save this image for that we're gonna click on file export and save for web we have the image here and right now it is a little bit heavy see 744 kilobytes that's a little bit too much so we're gonna decrease the quality to 60 we're gonna keep the same image size but we reduce the quality a little bit because we don't need that much quality it's gonna be 178 kilobytes which is perfect you know for a big image like this and you can see this is a preview of how it's gonna look the level of detail still pretty good so let's just save it now the next thing that we have to do is get the product images all right so we're just gonna drag it inside Photoshop again and let's just zoom in a little bit here so we can see so we're gonna use the crop tool one more time all right just to cut this area right here we're gonna click on the Move tool just to confirm the change and now to select you know to cut out the product it's very simple we just have to go to select and subject right and now Photoshop is just gonna cut it out but sometimes you have to fix it a little bit like you see here so this is good but this part over here is not as good so what we're gonna do is we're gonna click here on these two which is the quick selection tool we're gonna make it a little bit smaller and then we're just gonna go and help Photoshop finish the job alright so this is looking good this is looking good I want that area over there that's good all right perfect so now if you want to get an even better cutout you just click on select and mask over here and let's just zoom out a little bit so right now this is a pretty good you know cut out you could use these tools to smooth it out you know add some feather but we don't need that you know I'm just gonna smooth it out just a little bit and then just leave it like that so I'm gonna press OK and right now it is selected so I'm gonna Ctrl C or command C on Mac and Ctrl V to paste now this layer is right here I can hide the other layer and we have the product right here just gonna choose the crop tool one more time just to get a little bit closer to the edges of the product so that you know all of the products look the same way all right now these little squares behind the product that just means that it's transparent so we have to save this export save for web and this time you know instead of choosing jpeg because it needs to have transparency we have to choose PNG all right you can choose png24 or PNG 8 for a smaller size I like to choose PNG 24 you know the size is still pretty good you know 200 kilobytes is not bad and we're gonna save it now you will do the same thing that we did here but for the other products just so you have all of the products called out in PNG format now if you're liking this video so far and you're getting some value out of it give it a like so I know that this is the stock that you are interested in and also subscribe to the channel if you want to sell more if not disregard and continue watching the video and now we're going to step number three which will be get these images and actually build a Shopify store to do this we're gonna use a super a cool app called game pages that is a page editor for Shopify and it allows you to edit every single part of your website super simple with no code of course and in the description of this video I'm going to leave a link so you can download it and you get free access and they also have a paid version you also get a discount if you want to use it but right now we're just gonna use the free version and the link is in the description let's go to our Shopify backend and open game Pages app and it gives us a few options landing page homepage product page collection page what do you want to create in this case we're gonna go for home pages and here we're gonna click on create a new template from here we start designing our website and we can click on explore templates and we can select one of these templates and it will already build it up just like that and then we just edit the little things and change whatever we need and there are a lot of templates they are all really really good very easy to customize but we're not gonna do anything because we are actually going to start from scratch the first thing that we need to add is a row this is the most basic element and it allows us to separate our website into sections once you put a row you can put things inside of this row now let me add another row let me go back here and add another row so this one will be the banner okay and this one will be the actual products okay the product Carousel now we have to make this row full width so we're gonna click on the row and we're gonna click here on full width because we want the banner okay to go all the way across the page all right so another thing that we need to do is divide this row into columns because this right here is uh probably a two-thirds of the width and then the other thing is like one third of the width so basically what we're gonna do is we have one big row okay that we expanded now we need to create another row that is gonna be here inside the big one that is gonna actually Center the content because we don't want everything to expand you know the actual content of the banner to expand all the way to the corners so we need a container row and then inside of this row we're gonna make another row that is gonna be two thirds of the width and then another one that is gonna be one third all right and that's how it's gonna be contained so the way we're gonna do this so that we can add some text and some stuff is we're gonna add a background image so that then we can put some text on top because we can also add an image but then it will not allow us to put text on top we have to use a background let me just show you how this is done it's very simple so here we have the main full with row now we have to add another row all right here and you see the big row is going all across the Horizon and then we have another one that is center with 12 000 pixels of width all right just to make it a little bit simple let's actually click on the bigger row you know the the full row and we're gonna go to design and we're gonna select background because we actually need it to have this color okay the website has this blue color so we're gonna go here on the color and instead of transparent we're gonna put that blue color all right perfect let's select the inner row and we're gonna select the desktop layout we're gonna select two thirds all right perfect now we could just go and select an image and drag it here and then just replace image and use you know the main image that we just created just like that but this is gonna limit Us in the things that we want to do because we have we want to put text here and if I try to put some text let's say for example I want to add a text block you see it pushes it down so we actually need this image to be on the background so let's remove what we just did select the text block delete and also the image we're gonna delete it so what we're gonna do here inside of this row that is two thirds and one third we're gonna add two more rows okay so one for the left side one for the right side big row little row little rows all right now here we're gonna actually go to design we selected the little one here we're gonna select design and we're gonna go for background and here instead of giving it a color we're actually going to choose an image and we're gonna upload the image and it's gonna be that one perfect now the background of this row is the actual image that we created now we have to go here where it says more settings and we are going to put it towards the left and we are also going to click on contain and we're gonna remove the background repeat so it's only one and now we can just go here and expand the size of this row okay so that it looks just like that perfect and now we can add elements on top of this now the next step will be to create some text to put here and also some button or something over here so how can we do this all right so the text if it's gonna be over here and then there's gonna be like an empty space and then a button over here probably the best way to do this is by going clicking on the row and then we're gonna Choose You know to divide it into three sections all right so on the first section we're gonna add some text so let's go here to where it says text block and we're gonna drag some text in there we're gonna make the text a little bit smaller okay and we have to position it lower so we select the text block we're gonna go to design spacing and we have to add some margin and we have a little problem because it's actually pushing the image down but we can fix that very easily let's just go here let's click on the row and let's go to design and background click on the image so here on the image if we go to more settings we can put it to align to the top left if we look at them side by side I could say that it's a good positioning okay now let's add a button over here so for that let's go here to the elements and let's add a button so we're gonna put it right there all right here's a call to action button now we also have to lower this one down we will do it the same way we go to design we go to space sing let's add 350. all right that's a good spot let's change the actual text of the button okay let's just put something like strawberry and now we can change some options here here you can select the font size and here you select the type of font let's add this one for example we can select it there we go let's change the background color of the text let's put something a little bit more similar to what we had on the Moco you see this color is similar now and let's also add some hover options so when we hover let's actually change the background color to something like this so now when you hover it changes the color another thing that we can do is click on the dimensions and stretch button and then we're gonna set up a height of let's say 300 pixels oh that's too much let's just put 150 okay and now let's go to design corner and we're going to increase the radius okay let's put them all together just like that let's increase it a little bit more something like that like that and that's you so you get an idea we can also add a shadow a nice white shadow right there let's see let's do a drop shadow more settings and let's reduce the shadow blur just a little bit so it looks a little bit nicer the distance let's decrease it a little bit okay now that's you know I'm just showing you some options of the customizations and things that you can do with this app I'm actually not liking this button right here it's just too big so I'm gonna make a few changes here really quickly let's just you know reduce that a stretch button let's just keep it like that let's reduce the height of that let's just put it 50 pixels all right and we're actually just gonna put it down here over here boom right there okay it is pushed down a lot so we're gonna see what is pushing it down let's go to spacing and right here let's see the button the spacing let's leave that at zero pixels now let's actually put a little bit more if you don't want to be putting these buttons you know you can just select an element on top and let's just add some padding over there all right yeah that I think that looks better because now we're gonna have some text in this side and two buttons next to each other is not gonna look that good all right so right now what we need to do is put a big text followed by smaller text and then we're gonna put a button let's add a text block over here let's make it H1 and right now you see on the textiles you can set up Global styles for the page so every time you add something it already has the font the sizing and the colors okay but this is a quick tutorial so I'm not gonna show you how to do the global Styles I'm just gonna edit it one by one so this text over here we're gonna change the color we're going to increase the font size as well we're going to change the font let's transform the text and make it all uppercase we are gonna Center it here we're gonna align it to Center and we're gonna reduce the lying height a little bit just so it matches you know this a little bit better now we're gonna add a little bit more text so let's add another text block right here underneath that one and the only thing that we need to do on this one is probably just change the color a little bit less text because that's way too much yeah that's good let's add some padding over here just like that and now let's add a button over here so let's go back here and we're clicking on button boom I'm actually going to delete it because I don't want to customize the entire button again I'm just gonna come here and duplicate this one and just drag it over here put some padding and maybe just change the color change the text to something like make your own I don't know something like that okay perfect we have the banner ready now the next step will be to add the product Carousel okay a list of products in horizontal way all right so let's go over here and well you can see that we put so much padding and margins that this moved down a lot but we can easily remove that by just going like that all right yeah this is looking good maybe we can even you know kind of like put this over here just like that to give it some formatting and now here on the other row that we created go here to the left side and we look for the product section over here and we're gonna choose product list and we're gonna drag it over here I already added one product let me just save this and add the other products I'm not gonna add the images I'm just gonna duplicate this product a few times just to see how it's gonna look so I duplicated the product a couple times you know there's three products now with different names but the same image let's go back to gem pages and refresh the page scroll down okay there they are perfect now we're gonna make some changes here because I don't want this stuff to look of course the font and the color of this you can change it all I'm not gonna go into detail on this because I'm making another video showing you in more depth how to use gem pages and I even give you an example where I created this website using Game pages and it has a lot of moving Parts a lot of stuff so I'm gonna go in more detail later on let's go back to the milkshake store and just do a few changes here the number of products per row we're gonna change it to four we should also make this background the same color Okay as this so for that let's just go to row we're gonna have to actually put it full width okay so we can get the the background and then we have to change the background to this color all right perfect now we have to actually put another row inside of this one okay right there and we're gonna have to move the products inside of the row see I think you're getting it right and it's very intuitive once you understand the rows within rows uh very very intuitive and just for fun since we had to create a row let's actually change the layout to two columns okay like one fourth and three fourth okay and here instead of four products let's actually only put three products per row so it's a little bit bigger and here let's add for example let's add an image over here and this image is going to be this strawberry that I copied from here you can add some text over here change the size of the image and you know imagine having a strawberry a banana a kiwi whatever you know just to make it a little bit cooler than the actual you know template even though this looks pretty nice this will look exactly the same if I actually put these things now look at this background there's like a few things here on the background we can add that no problem let's go back to the Photoshop file over here and we're gonna use the crop tool one more time we're gonna choose a this area all right and we'll select this little um objects over here uh let's click on the quick selection tool and just go one by one selecting all of them once we have them selected we're gonna Ctrl C and then Ctrl V to paste you see the layers over here we're gonna remove the background and we're gonna file export let's go back to the editor and now on this row let's instead of having a color background which by the way you can have both you can have a color background and on top of that you can have an image and since it's a PNG it's gonna be transparent so you can see the background and the images so let's go to background and click here on image upload image there we have our ingredients and there we have them we just need to click on more settings let's put them a center and also remove the repeat and put it on contain okay so now we have the little ingredients flying around in the background another thing that I wanted to show you is the animations okay so when you click on something for example let's say that I want this text and then animations you can actually add some pretty cool animations so I'm gonna put scroll into view so whenever this I'm scrolling down and I see this you know something is gonna happen an animation will occur so let's select the animation let's choose a fade for example and you see how you know view animation you see how it goes so whenever we load the page this will happen and then let's say for example that on this button right here I want to add an animation when you hover it okay so we click on the button we go to design we go to animations add a new one on Mouse hover we're gonna add an animation and let's do something like a pulse okay look every time I hover it is gonna poof all right let's save it and now let's check out the preview on Shopify so there you go I don't know if you notice about this text let me actually refresh the page see that move and when I hover over this button you see how it pops all right and then here's the other stuff all right and this is how you convert an AI generated design into an actual working website I left links to all of the tools that I use in this video and I hope to see you on the Discord server now I'm working on two more videos at the time one is gonna be a full explanation in detail of how to use gem pages to make crazy crazy designs the other one is a website review where I take your website review them on a video and give you constructive feedback the link is also on the description of the video with the form where you can submit your store and the next step is to watch this video because it's also about e-commerce and I know you like that stuff thank you thank you thank you I'm out

Channel: THE ECOM BULL

Views: 77,812

Keywords: shopify, shopify dropshipping, dropshipping, ai web design, midjourney ai tutorial, midjourney, gempages, gempages tutorial, pagefly, custom shopify store, shopify store, shopify tutorial for beginners, ai web development, ai art web design, open ai web design

Id: ZFQ1WufLWwo

Length: 30min 33sec (1833 seconds)

Published: Mon Jan 02 2023