I have well over 40 hours of footage
covering about 80% of this website built
I want to share it with you here in this
video but real quick let me tell you why
chose the tools that I did to build the
website for first apply coffee I used
web flow for the front end
Shopify for that side of things and then
this adapter software called you désolée
to turn my code from web flow into
liquid to basically turn into a Shopify
theme I went this route because one of
you recommended web flow and I checked
it out I thought it was cool with it
just made me want to learn it I decided
on Shopify over WooCommerce for a reason
I really don't remember I just remember
sitting down doing research on Shopify
WooCommerce hell even Squarespace and
Wix and things like that and I came to
the conclusion that Shopify was what I
wanted to do if I had a guess it's
because Shopify is very plug-and-play
there's not really much involvement on
my end it does everything right out the
box like shipping labels shipping
estimates automated emails has amazing
analytics you know anything about me I
love looking at the numbers then I also
mentioned I did checkout web flows
ecommerce 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 going to be a pretty good
option now that's why I built it the way
I did now let me show you how I sort it
off when I made a video basically a
mock-up drawing of the web site how I
wanted to look right up here next to the
stylized text you will have your
navigation bar so you have home you have
blank you have goods 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
then of course right over here is going
to 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 add it to
cart and check-out right here
I needed some separation between this
and the between this and the rest of the
web page because I want this to be the
focal point this is what your coming
here for everything else is just
supplemental information then down here
is gonna be a little bit more about the
company who we are we're going to have
join the join the what turn the what
you'll never know well I guess you'll
know eventually and then a join Now
button and then your traditional foot
now once I had those things figured out
I hit the
runnin 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
[Music]
I got a little bit of work done on that
first look of web flow I did a little
bit off-camera here in this period as
we're talking right now and then I
decided today 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 hopped on 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 the Estonia Adobe
stock a logo on there and then I was
just kind of fiddling with it to make it
look how I wanted to look
[Music]
before I 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 a
little bit of testing phase
[Music]
and when I realized that you destiny was
a little bit harder than I first
anticipated I thought it was going to
take all the logic from webflow and turn
it into liquid into a Shopify theme but
there's a little bit more you know
attributes to add here a little bit of
formatting here and there that needed to
be done but before I dive 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 Shopify 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 or hosting it
on web flow itself like I said I looked
into the e-commerce side of web flow
doesn't work for me as it sits so I was
just going to host it do a Buy button on
that homepage that will take you over to
the Shopify page which would be the
product page where then you can check
out and buy the coffee however the only
problem with this is that I believe
hosting was like $12 a month and I could
only get 25,000 visitors per month and I
wasn't really looking for the I don't
want to have a limit on how many
visitors I can have I don't want to be
paying $12 a month when hosting her I
bought four years which is 48 months for
less than a hundred bucks and I came
with free SSL and a free domain had a
few other things so I 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 you destiny will properly
convert your web flow theme into a
Shopify theme obviously that third
option is what I really wanted to do so
I took the starter template that you
désolée has to offer that is a web flow
design so I took that I threw that in
your destiny he converted properly I
threw that over into Shopify and
displayed just as it did over in web
flow all they did was prove you
definitely actually work so I could then
move forward with adding these
attributes that you Nestle needs to
convert it from web flow to Shopify
within my web flow design previously I
thought I was going to be just creating
the homepage within web flow throwing
that over into Shopify and then using
the shell fight tools to create my
product page I figured if I go through
all the trouble to convert it from web
flow into Shopify I'll just create
everything in web flow that way just
there's just one simple process instead
of having a little bit done over here
and a little bit done over there
but it is all always hosted over here so
what a date is I decided to create the
product page
[Music]
the product page is done and we're still
using that stock imagery I got the first
batch of first supply coffee that GL saw
in the last video and I decided to take
a few product photos and all these
product images we did a little bit of
Lightroom work in a one of them a little
bit of Photoshop work
[Music]
now we have the first-ever successful
udesky conversion for from my design
that allowed us to give a first look
into Shopify with the actual design to
see how it deferred 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 start a theme that I previously
tested in you Nestle I threw that over
into web flow and I used that as a base
because there I can see all the
attributes I can see exactly how their
homepage their product page their navbar
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 add 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 Shopify thereafter now
towards a nose they've got a crunch town
because I knew I wanted January 6 2020
to be the launch date it's a Monday I
felt like it was a perfect timing
so finalize the website made all those
final little adjustments and made it
live along with last week's video
speaking of which y'all's reaction to
all of this the announcement of the
coffee company and last week's video and
the website itself amazing I couldn't be
more grateful and I had a lot of people
a lot of y'all testing the website I
know y'all are gonna do that now you're
gonna poke and prod at it and I knew
there are a few things that I may or may
not have left in there for y'all to find
not everything but like the nav menu I
knew that the nav menu need a little bit
of adjusting because whenever you go to
the product page the about Us and the
contact was still there however it
wouldn't take you back to the homepage
to the about Us section so what I did
thanks to y'all's input so I just remove
that from the product page because the
about Us is on the product page the
contact is in the footer on all the
pages but I felt like it 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 were there that y'all let me
know through EML through comments and
that was with Firefox with Firefox when
you would go to the product page the
quantity you're unable to see that it
had to do with the padding and within
web flow for some reason wouldn't work
properly on Firefox 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 effectively
just took off the padding there and that
way it worked the same within Safari
within chrome within Firefox and that's
just one example of the handful that
y'all helped me identify and that is how
the website for first supply coffee was
created if you all have any other
questions I know there's a few you all
that are currently in the process of
using udesky where that is to convert
web flow over to Shopify like I did or
web flow over to WooCommerce like you
can so if there's any more specific
questions just leave those down in the
comment section below I hope you all
enjoyed this video we're gonna have a
lot more videos coming to you here in
January and then we'll see where we go
from there
[Music]