- Hey designers.
Today, I wanna walk you through the build process
that I went through to make my new online store
for selling fonts.
Webflow, just recently,
I think within the last couple months introduced
a digital download option
as part of their e-commerce platform.
So that's what I've used for my store.
So if you've been looking to use Webflow e-commerce
to sell some digital products
and you wanna get like an inside scoop
on how to go about building out a sales page,
building out your store,
then you're in the right place.
Right now I do just have the one font up for sale,
but I have designed and built the store
to be future proof so that I can add new fonts
in the future.
You can check out my current form, Grayscale
at charlimarie.store.
This video is actually very fittingly sponsored
by dot store domains.
I'm a big fan of TLDs these like this.
And I think that .store is a great choice
for an online store domain
either as well as or instead of a .com.
'Cause firstly, there's gonna be
a lot more options available.
So if your brand name,
the ideal one you wanna use for your store
isn't available as a .com,
it's much more like to be open
and ready for you to use as a .store.
And secondly, it tells you what it is
right there in the name.
When someone clicks on a .store link,
they know they're heading to your online store.
It's short, it's easy to remember.
Now, because my online store
is part of my wider personal website,
I have my .store domain set up
as a redirects to the store section.
And just 'cause it's a much easier link to share.
So huge thank you to .store
for partnering with me on this video.
And with all that said, let's get into it.
And let me show you the build of my store.
(soft music)
Let me start by just showing you the page first off
and then I'll highlight a few different little things
about the build of it.
So this is my sales page for Greascale.
And this is Buy Now button at the top
that you can click and it'll scroll you right down
to like the licensing section.
Just if someone is convinced straightaway
and they wanna buy it,
I didn't wanna get in the way it all.
So I have this little intro here
that talks a bit about the font
and then I have my two different versions.
So with my font, I saw a standard license,
an extended license.
I talked about this more in the video
that I did about the font making process.
So I'll link to that on a card.
You can go check it out if you so choose.
But yeah, I have these two blocks here
that show the differences between them with this checklist.
So you're clear on what extra value
you're getting basically, with the extended license.
And that's shown also in the image here.
You can see that with the extended license
you're gonna get more stuff
as well as the opportunity
to use it for business and commercial web use.
Then I have my little press in these flags up here.
Which I think just looked really cute.
Here's where you choose the license
just from this drop down.
So if I click this,
then this price will change out as well.
I have these images down here to showing
some more examples of the font and use
and these are all a lightbox.
So I can click on this and it'll display larger
so you can get a better look.
And then for the photo,
I just used my regular photo
that I have all across my website.
If you haven't used Webflow e-commerce before
then I will just quickly say
that one of the things that I will about it personally,
and why I like using it is that
every step of the process is customizable.
And you can pick absolutely everything about the design.
I feel like a lot of Shopify stores,
especially the checkout flow looks exactly the same, right?
Like you will have seen it before on other shops.
So yeah, I think it's really cool with Webflow e-commerce
that you can completely customize
the design of all of that,
just like you do every other page on your website.
So my checkout form,
I have this little thing sticking at the side here
as you scroll down.
And I didn't actually change
the design of the checkout
and the confirmation page from my previous online store.
I should have said that at the start.
That I used to have a store where I sold prints.
I closed it down because
I just prefer to be dealing with digital products now
in terms of logistics and shipping and all that.
So anyway, a lot of the design,
especially like this menu at the top already existed
from that previous version of the store,
and this checkout did as well.
So I'll focus most of my time in this video
talking about this sales page.
'Cause that new.
And I'll leave a link to another video
where you can watch specifically
about the checkout process.
'Cause I did a whole series about the build
of my last store using Webflow e-commerce.
All right.
So I wanna start here by showing you
the custom fields that I have set up
for my online store.
The e-commerce system works just like this CMS.
You can create as many different fields
as you wanna fully customize it.
And then each product page is like a CMS item page.
Let me walk you through it.
So here in e-commerce I have my products.
Let we click on the settings here.
So there's a lot of fields that it comes with clearly,
like for shipping inventory.
All the important stuff that you need for an online store.
But then we have my custom fields
that I've set up down here.
And like I said, a lot of the setup I did
with the future in mind thinking that
in the future I wanna sell more fonts.
Maybe even more different types
of digital products as well.
So this is why I've got these fields set up this way.
So I have my category here
where I'll be able to pick if it's a font
or if it's even something else in future.
Description, the Font Name image.
Unfortunately, in the web flow CMS
you can't yet select a font in the CMS,
if that makes sense.
You can add colors in the CMS
to use on each product page, but not fonts.
So if I wanted to have the name of the font
typed in the font on the product page,
then you just use an image of it
instead of actually typing the font.
I don't know.
I hope that's something that maybe
will come to Workflow in the future.
'Cause it'd be really cool
to just have the web font on the page.
I've got my background image.
And then I've got the image for each of my licenses.
The standard license, the extended license.
There's always gonna be a bonus thing
with an extended license.
I decided that something I wanna do.
So that's there.
And then we have the price for both my demo images,
which are the ones that you saw
in the lightbox at the bottom.
So even though I'm selling
two different versions of my font,
it is just one product in my store.
It is just Grayscale.
And then the different versions of the font
come in as variants of a product.
And this part of an e-commerce tool
is usually used to sell different sizes
or different colors or something.
But in my case, I'm using it to sell different licenses.
And as you can see here,
I can choose what I call these variants.
So I have it set up to say license.
In here, in the variance is where you tell it
that it is a digital product.
So I have, this includes download here.
And then I have my file name and the file URL.
And this is how the delivery happens.
You're setting it all up right here
in the product itself.
You also add an image to each variant,
which you can see here.
This isn't actually used anywhere on my sales page, though.
This just comes into play on the checkout page.
In a little block you saw at the side.
I did a bit of a hack to have both versions
of my product displaying
'cause that is not something that happens by default.
So let me show you how I do that.
Usually what happens in workflow
is you just have like one product image
and when you select one of the variants
the product image will swap out
for the variant you pick.
But I wanted people to be able to easily directly compare
the two different versions of my font
to decide which one they wanted.
So let's get into how I've set up my page.
So I have my navigation at the top here.
Like I said, that I built in my last online store.
So that is a symbol,
which means that if I make a change to it,
it'll update everywhere that's used across the site.
This is where I have my background image.
Comes from the image field.
So I'm always gonna be able to pick
a different image to use for the font.
I want each font to kind of have its own identity
and its own feel.
And for this one I went for sort of
like a concert vibe, I guess.
Like I said, I'm future proofing this
for my future fonts where I'm gonna be able
to swap that out and give them all
their own identity and look and feel.
Then I've got my image.
And again, this is getting the image
from Products, selecting the Font Name image.
And I also made it get the alt text
from the description as well.
So that if the image doesn't load
or someone is using a screen reader
It'll save them, "A handmade sans-serif font."
This Buy Now button just to show you
how I got it to scroll down the page
if you wanted to do that too.
So it's using this little bit here
that links to a page section
which links to add to cart.
You can add an ID to any block in Webflow
up in this part up here.
And then that's what will show up in the list
of page sections to the link.
So that's what my button links do.
And it just automatically makes it scroll
like smoothly down as well not just jump to it,
which I really liked.
It's a nice little Webflow feature.
A lot of these classes I have set up,
like my Container and this gray body and stuff like that,
just comes from the rest of my website.
Because like I said, my store is part of that.
I have a full series that this video will be a part of
on the build of my website.
So again, I'll link to a playlist on that
if you wanna see some details on other parts.
But I used CSS Grid for this whole block.
I just thought it'll be handy,
especially when it came to shrinking things.
So this is just a quick look at how
it behaves on smaller devices.
So again, this is taking up the full thing.
For as long as possible I kept them side by side
to make it easy for people to compare directly.
Let me show you just a quick overview
of the setup of these blocks here.
So I called this a license card,
and gave it a style and then applied
the exact same thing to the other one.
These images are actually using the lightbox feature
so that when I'm on the page,
you could actually click on this image as well
and see it larger.
It might not be extremely obvious,
but the little hand shows up when you hover on it.
Let me open up the settings here
and I'll just show you how you get that.
So I was getting the media for the lightbox
from the standard license image.
And then obviously, this one is coming
from the extended license image.
So this box is relative and this price flag is absolute.
So that it always sits in that position at the top.
No matter how much the box shrinks
it always sits that far from the side.
I did it as a background image, did I?
Let me scroll down.
Yeah, I've got the SVG as a background image
and then the price count is on top.
And that fixture is from the Standard license price field.
And this is why I did have to set up
those custom fields for the prices
even though you put the prices in again
when you're setting up the variance,
it's so that I could bring them out
and have them both displaying on the page
at the same time.
I hope that's making sense.
So these prices here are coming from
the custom fields that I set up
'cause I knew I wanted to display them both
on the page at the same time.
This one comes from the variant itself.
So when I change the drop down, it changes the price.
So it's on me to make sure (laughs)
that I put the same number into these custom fields
as I do when it's setting up the variant,
but that's a pretty easy thing
to make sure I've done right.
So yeah, that means this book here
is my Add To Cart element
which you get from the Workflow add panel
that I just styled up to match how I want.
I put all my own classes onto my buttons
to get them to do what I want.
I want to get them to match the rest of my site.
Same with styling all the text.
You can completely customize the way all of this looks.
These images down here are also lightboxes.
And first I put in a collection list.
So to do that, I'm using this block here.
So it's fetching this list of items
from the demo images
that I made It's a custom field, remember?
In my product.
So within each specific thing
of the collection lists,
that's when I dropped in a lightbox
and made it connect to the demo images
for getting its media.
And yeah, that means that when you click on it,
it appears nice and large on the screen.
And I just had these outside of any sort of container.
So they're gonna span the whole width of the screen.
So yeah, that's a look at this sales page.
Which is actually like the extent
of my online store really, at the moment.
But when I have more fonts
I'm gonna wanna obviously make a store front page
where it lists all of the fonts on it.
And the thing with Workflow e-commerce
is it doesn't come with a pre-made template for that, right?
'Cause the point is that you can do it all yourself.
You can like get templates from a Workflow site,
but it's not gonna be a default that you get in your site.
So when I come to do that,
I'm gonna add a new page.
Let me just add one now for an example to show you.
And what I'll be doing is dragging in a collection list.
And I will be getting that list of products
from the e-commerce thing.
And then right now,
it's obviously only showing me Grayscale.
when I have multiple products.
I went into this in much more detail
in my previous e-commerce store series.
So I will leave a link to that for you to go check it out.
But my point is that physical products, digital products,
selling them on Workflow
and making a store for them is very, very similar.
The main change comes in, in the product itself
where you just check that the variant includes a download.
Yeah.
And then the other thing to be aware of
is on the order confirmation page.
You're gonna wanna make sure you add in
this downloads block somewhere on the page
so that as soon as someone has paid
and they reach this page,
they can access the file that they just purchased.
So this is what I have here,
this in my design for my order confirmation page.
It just appears at the side.
Right above the items in the order,
and they can download it right there.
So yeah, this is a little elements
that you need to drag in and add on to your page.
And then style it up however you want.
All of these blocks come in,
like with some was sort of pre styling.
And I didn't veer much from them,
'cause I was like, "Yeah, kind of like it how it is."
But yeah, you can then move everything around
within these blocks if you want to.
If you do, for some reason
want to watch me build out the whole thing,
I'm gonna upload a separate video
that's like a speed build of the design and build.
You obviously get less details on that
'cause I'm just gonna be speeding through it
and doing it all.
But you can watch that if you want
and get a feel for my purposes.
This store is part of my personal site.
It's not a site on its own.
So I did set up a .store domain
as a redirect to the store section
so that it has something shorter,
more memorable to share.
Let me just quickly show you how I did that.
And so I come into my domain
and then go to my domain forwarding settings.
And then in here,
as you can see right now.
I'll just open this up and show you.
I have the domain pointing directly
to the product page,
because this is currently the only thing in my store.
So I might as well link right to it, you know?
But it's gonna be really easy
to swap this out in the future
when I do have a proper storefront on my website.
I can just swap out the link in here
and then charlimarie.store will point to that instead.
Pretty handy and obviously just a lot nicer to link to,
to link to this rather than this big long URL, you know?
So there we go.
I hope you found it useful to hear about
the different design decisions
and ways I'm using the web flow CMS
to sell a digital product.
Go check it out for yourself at charlimarie.store.
I also heard that it was useful
for you to hear about why I'm using this domain
and might help you make a decision
of what to use yourself for your own store.
Like I said, you could actually have this domain
being your workflow store,
unlike host the store directly on this domain.
Or use it as redirect like I have.
I think as a redirect it's really helpful
especially if you're not using
a custom built site using something like Teespring
or Big Cartel or something.
You get a URL that's really long and unbranded.
Using a .store domain could help you brand that up.
So that's useful.
The .store team have actually very kindly
given me a discount code
that I can share with you as well.
So if you wanna get your own domain
for just $1.99 then you can use the code CMYT
on get.store/start-your-business
that'll be linked in the description.
And that's a saving of like $27 I think.
So a very reasonably priced domain.
Thanks for watching everyone.
If you've got any questions
about anything I covered in this video,
feel free to leave them in the comments.
I'll get back to you down there.
And I'll see you in the next video.
Bye.
(upbeat music)