Placeholder Image

Subtitles section Play video

  • I have well over 40 hours of footage covering about 80% of this website built.

  • I want to share it with the hair in this video.

  • But real quick.

  • Let me tell you why I chose the tools that I did to build the website.

  • For first apply cough, I used Web flow for the front end shop, a five for that side of things.

  • And then this adapter software called you desperately to turn my code from Web flow into liquid to basically turn into a shop of five feet.

  • I went this route because when you recommended a web flow and I checked it out, I thought it was cool, but it just made me want to learn it.

  • I decided on Shopify Overrule Commerce for a reason.

  • I really don't remember.

  • I just remember sitting down doing research on Shopify route, commerce, handle, even square space and wicks and things like that.

  • And I came to the conclusion that shop, if I was what I wanted to do.

  • If I had a guess, it's because shop fires very plug and play.

  • There's not really much involved in on my end.

  • It does everything right out the box, like shipping labels, shipping estimates, automated e mails has amazing analytics.

  • Do you know anything about me?

  • I love looking at the numbers.

  • And I also mentioned I did check out web flows e commerce side of things, but they still have a lot to work out.

  • If they do indeed, do everything that they plan on doing, I think it's gonna be a pretty good option.

  • That's why I built it the way I did.

  • Now, let me show you how it started off when I made a video, uh, basically a mock up drawing of the website, how I wanted to look right up here next to the stylized text, you will have your navigation bar so you have home you blanket good.

  • You have about us, you have contact.

  • And then right here under the pink is going to be an image or two of the items, the products that are going to be sold.

  • And of course, right over here is gonna be the name of the product.

  • A little bit more information about the product and then a purchase button so you can click on that and go ahead and that it's a car check out right here.

  • I needed some separation between this and between this and the rest of the web page because I want this to be the focal point.

  • This is what you're coming here for.

  • Everything else is just supplemental information down here is gonna be a little bit more about the company who we are.

  • We're going to have joined the joined the What?

  • Turned on what you'll never know.

  • Well, I guess, you know, eventually and then joined now button and then your traditional foot.

  • And once I had those things figured out, I hit the ground running, made a web flow accountant started to get to work.

  • I didn't watch any Web flow videos, any tutorials, anything.

  • I just decided to hop on in and try it.

  • I got a little bit of work done in the first look of web flow.

  • I did a little bit off camera here, didn't this period as we're talking right now.

  • And then I decided, Hey, I need to be recording this.

  • I think I just forgot.

  • Once I had a better understanding of how I wanted it to look, I have gone into adobe stock.

  • I pulled out some images from there.

  • For some reason, the Adobe stock payment wasn't working.

  • I wasn't able to get through to it, so I just decided to take off the previews.

  • That's why you'll see, like Theis Toby Adobe Stock logo on there.

  • And then I was just kind of fiddling with it to make it look how I wanted to look.

  • Before you go any further, I should probably test to see if this website will convert into a Shopify theme.

  • So I went ahead and started doing that little bit of testing phase.

  • And when I realized that you definitely was a little bit harder than I first anticipated, I thought it was gonna take all the logic from Web flow and turn it into liquid into a shop five theme.

  • But there's a little bit more, you know, attributes to adhere, little bit of formatting here and there that needed to be done.

  • Before I dove into that, I decided to reevaluate some of my options.

  • In no particular order, Option One was to host my entire site on hosting her and have a shop.

  • If I buy button, that'll take you over to a Shopify store that is within Shopify.

  • Another option would be to do the same exact thing, but instead of hosting it on hosting her, hosting it on Web flow itself.

  • Like I said, I looked into the commerce side of Web flow doesn't work for me as it sits, So I'm just gonna host it to a buy button on that home page that would take you over to the shop if I page, which would be the product page where then you could check out and buy the coffee.

  • However, the only problem with this is that I believe hosting was like hell dollars a month and I could only get 25 1000 visitors per month and I wasn't really looking for that.

  • Don't wanna have a limit on how many visitors I could have.

  • I don't want to be paying $12 a month when host Singer I bought four years, which is 48 months for less than 100 bucks, and I came with a free SSL and a free domain and a few other things, so that wasn't really much of an option, but the third option was to okay, go through with this, figure it out make sure you get all the attributes and your destiny will properly convert your Web float theme into a shop.

  • If I think obviously, that third option is what I really wanted to do.

  • So I took the starter template that you definitely has to offer.

  • That is a Web flow design, so I took that.

  • I threw that in your destiny, converted properly.

  • I threw that over into Shopify.

  • It displayed just as it did over and wept Flow.

  • All they did was proved you definitely actually work, so I could then move forward with adding these attributes that you definitely needs to convert it from Web flow to shop fight within my Web design.

  • Previously, I thought I was going to be just creating the home page within Web flow, throwing that over into shop find than using the shove fight tools to create my product page.

  • But I figured if I'm going through all the trouble to convert it from Web flow into shop five, I'll just create everything in Web flow that way.

  • It just it's just one simple process.

  • Instead of having a little bit don over here and a little bit.

  • Don't over there but it is also always hosted over here.

  • So what I did is I decided to create the product beach product pages done, and we're still using that stock imagery.

  • I got the first batch of first apply coffee that you saw in the last video, and I had to take a few product photos and all these product images.

  • We did a little bit of light room work in a one of them, a little bit of photo shop work.

  • Now we have the first ever successful.

  • You desperately conversion for my design that allowed us to give a first look into Shopify with the actual designed to see how it differed from the actual Web flow design.

  • And from there, we can start adding more attributes, adjusting the attributes and doing more formatting.

  • So it looks exactly on Shopify as it does on Web flow.

  • Things were completely coming together, So what I did was I took that started theme that I previously tested in your Nestle through that over the Web flow, and I use that as a base because there I can see all the attributes I can see exactly how their home page their product page or knave bar.

  • Everything is set up, so I could basically use that as a base as a template for my own design.

  • So I took, like the add to cart from there over into my own design.

  • I just did all the attributes to fit appropriately for those that weren't 100% correct.

  • I want to be able to take the descriptions from Shopify.

  • So a lot of that went into the Web flow design for the conversion to be successful and be able to do a lot of the editing on Shop of Five they're after not towards the end was a bit of crunch time because I knew I wanted January 6 2020 to be the launch date.

  • Monday felt it was a perfect timing.

  • So finalized website made all those final little adjustments and made it live along with last weeks of video.

  • Speaking of which yells reaction to all of this.

  • The announcement of the coffee company in last week's video on the Web site itself.

  • Amazing.

  • I couldn't be more grateful and I had a lot of people, a lot of y'all testing the website.

  • I knew you were going to do that, you're gonna poke and prod it.

  • And I knew there are a few things that I may or may not have left in there for you all to find.

  • Not everything but like the knave menu.

  • I knew that the knave men, you need a little bit of adjusting because whenever you go to the product page about us in the contact was still there, however, wouldn't take you back to the home page of the about a section.

  • So what I did, thanks to y'all's input.

  • So I just remove that from the product page because he about us is on the product.

  • Basia contact is in the foot on all the pages, but I felt like was a cleaner look to just take both of those out and only left home and coffee for every page other than the homepage.

  • And they're also a handful of other tweets.

  • I didn't realize we're there that you'll let me know through, even after comments, and that's with Fire Fox with Firefox when you would go to the product page, the quantity you weren't able to see that it had to do with padding within Web flow for some reason wouldn't work properly on fire.

  • Fox and the padding kind of put the number way off, not within the view of the quantity in which you're trying to add to cart.

  • So I figured she just took off the padding there, and that way it worked the same within safari within chrome within Fire Fox.

  • And that's just one example of the handful that you'll help me identify.

  • And that is how the website for first supply coffee was created.

  • If you have any other questions, I know there's a few you know that are currently in the process of using you desperately where that is, to convert Web flow over to shop, fight like I did or Web flow over to blue commerce like you can.

  • So if there's any more specific questions, leave those down on the common section below would be all enjoyed his video.

I have well over 40 hours of footage covering about 80% of this website built.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it