how to design a shopify website in adobe

Hey friends, Andrew here hope you're well.  In today's video, I'm going to show you  ,one of my favorite Shopify apps to completely  customize and transform your store in only about  ,10 to 15 minutes from scratch so without wasting  time let's jump straight onto my laptop here and  ,i'll show you step by step how to build a  beautifully custom shopify store with this  ,no code page builder app incredibly important  considering that your store represents your brand  ,and your vision and by the way i'll be giving  away this exact store i've built in this video  ,to a subscriber more details at the end of  this video so to build out a custom shopify  ,store today the very first thing you want to  do is go on to the shopify app store actual  ,first step is to get shopify if you haven't yet  already and if you haven't yet already i'll drop  ,a link to an extended free trial down below if  you want to follow along with this video now  ,once you have your shopify store go on to the app  store and then this is where we're going to get a  ,crucial tool and this app is going to allow us  to build and design a shopify store without all  ,the custom coding and it's called gem pages right  here so gem pages they're known as this no code  ,page builder on shopify and it's really useful  in building a high converting store without code  ,it's essentially a drag and drop builder that  myself and the team have used to design custom  ,shopify sales pages and the plan of attack today  is to create a custom one product store simply by  ,using the gem pages drag and drop tools right  here i've spent some time before this video  ,creating the brand and all the assets like product  renders brand name and whatnot i'm calling it to  ,charge because we all need to charge our devices  that's terrible i know i have all the assets to  ,go in my folder right here as you can see and so  what we're going to do now is build out our page  ,with gem pages using all the files that i've  created here so head on to the dashboard and then  ,click create new from here is click more types and  you can see that you're able to create a bunch of  ,different pages based on what you want to go for  so a landing page a home page a product page etc  ,and so let's just click for example home page so  there's a whole bunch of home page templates here  ,there's also a whole bunch of landing pages the  theory here is i'm going to build a one product  ,store so i'm going to use a landing page  only and i found the one that i want to use  ,and it's bluetooth headphones you can click  preview to preview the template first or  ,you can just click start editing so i'm going  to click start editing i'm going to give the  ,the page name a name and then click header and  footer i want this off only because we're creating  ,a one product store and we don't want a header and  footer at the bottom really quickly though you can  ,use a completely blank canvas but if you want to  get up and running really fast like in 15 minutes  ,then it's good to use a foundation such as  a template on the left hand panel you have  ,all your tools and drag and drop widgets you can  see that literally anything can be customized you  ,can literally drag and drop and select an image  new images you can go through the widgets here and  ,literally customize every single component of  the page unlike the typical shopify builder now  ,i'm going to continue building what i've built  off this video so after spending about 15 to 20  ,minutes on this page here is exactly what i've  come up with so far there are still a few things  ,i want to add to this page to clean it all up  so let's do it together while i walk you through  ,the design process and the thinking behind  it the beauty of gem pages is you're able to  ,drag and drop absolutely anything in so let's say  i want to add a logo so what i'm going to do is  ,drag and drop the image tile then click images and  click replace image then i'll find the transparent  ,logo that i have and then we're going to slightly  resize it because it's probably going to be too  ,big so we're going to resize this i'll go with  20 and so now we have a logo up there so we're  ,just going to leave it as it is the copy that  i have up here the fastest portable charger you  ,know just assuming it probably is and then we  have this really cool animated cta button here  ,something that you typically don't see or get the  option to add in shopify but with gem pages we're  ,able to do that and we also have a countdown  timer these are all widgets that we can drag  ,and drop into this page here also have this really  cool sort of uh animated counter that comes up and  ,then of course we have the product itself i'm  also going to change the button color here so  ,going down to bottom color under background color  what we're going to do is change it to this font  ,color here you want to take the hex code this  little hashtag code here i'm going to click copy  ,scroll back down to the background color drop  the hex code into here and it should update  ,automatically and there we go it's looking  much nicer already here is the product itself  ,and of course we have that same cta button here  and so we can easily remove some of these images  ,we can remove some of these logos as well if  you click icon list you can see the items here  ,you know for example i don't want the authentic  product over here i don't really know what that  ,means so over here i'm gonna click the rubbish  bin icon delete this and if i really wanted to  ,the we've got this nice purple theme going on here  i'm going to add some purple into the background  ,here so by doing clicking the background box here  click design going down to background we can again  ,use that hex code right and then bring  down that transparency just slightly  ,just like so and that is looking much nicer i  also have a bunch of usps here unique selling  ,points as little boxes we have a carousel with  images here the tech specifications are drop down  ,boxes essentially all of these elements including  even this comparison box here is all added just  ,through widgets there are so many powerful widgets  here that we can use including even crazier things  ,so let's say for example share buttons we can add  element here where we can get people to literally  ,share all of this and share this page on their  socials and we also have other crazy elements like  ,we've got video pop-ups we have video integrations  countdown timers like we said i believe there's  ,a before and after module here so this before and  after module is super powerful for those who have  ,a product that demonstrates a before and after if  you did not have gem pages something like this to  ,implement would take a lot of time it would take  a lot of coding as well you can start to see  ,just how easy it is to change all of this up so  yeah this is what i've come up with and this is  ,so much more custom than what's available on the  shopify template pages unless you want to hire  ,you know a developer a shopify liquid coder to  build out something for you separately and i've  ,done this in literally 15 to 20 minutes and it's  a whole bunch of fun too it's also pre-optimized  ,for a whole bunch of different platforms such as  mobile and tablet etc you want to go through each  ,device and make sure that it's correctly optimized  for each device here we want to change out the  ,font color we want to reposition the buttons  etc so we want to build for desktop and mobile  ,so we've gone from essentially this don't get  me wrong it looks great as it is already but we  ,very quickly freshened it up and integrated into  a single home page a single page a1 product store  ,and we also have this really neat looking unique  selling point section here where we call out all  ,the features and the benefits and we have text  specifications you know advanced drop down boxes  ,here we have comparison boxes here we have an  faq accordion here as well and all those trust  ,badges and unique selling points down here too  super quick to set up it is extremely powerful  ,if you want to give it more time which you  really obviously should who knows what you can  ,come up with my advice here is to take your time  designing a custom shopify store and probably most  ,importantly enjoy the process the look and feel  and design of your ecommerce store is so important  ,in attracting the right customers a big thanks  again to jem pages for sponsoring today's video  ,when they reached out it was an absolute  no-brainer because we've previously used  ,gem pages to create custom shopify landing pages  for our e-commerce business and it's the best  ,no code page builder app i've used on shopify  when it comes to a hundred percent of flexible  ,customization and quickly building converting  pages beyond the stock standard shopify tools  ,spending the time to build out a beautiful  store that reflects your brand and vision is  ,so so important in creating a long lasting  successful online business so i'd recommend  ,playing around with gem pages and shopify so you  end up crafting the look of your brand before you  ,even press publish and begin selling you'll thank  yourself later i think the easiest way to do this  ,is to take advantage of the gem pages free trial  to test out the app and see if it actually suits  ,you before you get deep into it i'll leave a  link below to the free trial also i want to  ,ask you a curious question if you have a chance  or if you had the chance to sell whatever you like  ,yoga products tech accessories like to charge  or a custom product and make a living from it  ,what would you want to ideally sell drop  that comment down below and let me know  ,and we'll be picking a subscriber to give  away this store built to in a month's time  ,and i'll also be consulting with that subscriber  i'll jump on a call with you and make sure that  ,you're headed for success winners announced in  our usual newsletter as usual and guys speaking  ,of which please please be careful with all  the impersonators and scammers on youtube  ,and the internet in general we've seen a lot of  investigators recently on our channel asking you  ,guys to you know contact them on telegram or  whatsapp where they'll be asking for money we  ,being myself from the team will never ask you to  transfer us money and we're not on telegram and  ,whatsapp in the first place i know you guys  are smart enough not to fall for it but i  ,just want to give you a heads up anyway have fun  building your dream shopify store with gem pages  ,and i'll leave a couple of useful shopify and  add tutorials on the screen here to help you  ,along your journey as always thank you for  watching and i'll see you in the next video

Congratulation! You bave finally finished reading how to design a shopify website in adobe and believe you bave enougb understending how to design a shopify website in adobe

Come on and read the rest of the article!