Streaming live at 10am (PST)

Ecommerce Site Done with Webflow and Foxy.io


#1

Hi guys,

This is a ecommerce store done with Foxycart from Foxy.io. You won't believe how simple this process is. I initial did this with Shopify so I tried both and I found Foxy's is way simpler. To give some context, I am no expert and i am sure i will probably be graded as 1 or 2 out of 10 by the experts...lol...but i pulled this off with my basic understanding of html to alter the code in the html embed element to get the cart button, size and color field aligned to the clients brand. All thanks to Webflow and @foxy simplicity.

http://beautyandgowns.webflow.io/

Shopify's buy button is really great when you selling few items or items without multiple variants. It is not complex but tiresome...my view point though. This is because with Shopify you will have to generate the buy button code snippet individually for the all products since you will require a product handle and product ID for each product item. You will then place these under each item in your product collection. This is not a big deal if you have few products or a single product. But when you have to repeat this process for 100 to 200 and more products it gets really tiring. Too lazy for that...lol

With foxycart, they give you two code snippets: you place one before the tag and the other you place in the Webflow HTML embed element. That's all you need. For each product parameter (ie: name, price, category, etc) replace the value "CHANGE" with corresponding dynamic field by clicking on "Add Field". That's it. Super simple and straight forward.

You will have do some styling though to align the branding.

You may check out the preview mode here:
https://preview.webflow.com/preview/beautyandgowns?preview=e96557873459df55616f1832df3041ce

Like i said i am no expert...very open to your views to make this better. I just thought i should share this so those who will want some other options apart from Shopify can see it is not difficult at all.


#2

Wow, great looking site, @jaymal
Thank you a lot for sharing this.
Best,
Blaise


#3

Great stuff, really clean!


#4

Thanks Blaise. I'm glad you like it. I hope it helps others.


#5

Thatnkyou so much! I just ran into the problem of adding product options to an eCommerce website with Foxy.io.

Thanks @jaymal !


#6

Hey @jaymal
Seems you have a very nice gradient on your Home page header.
Why not using the same gradient for your shop articles hover state ?
Just an idea...
Best,
Blaise


#7

Aaahhh yes @Blaise_Posmyouck you are right. I certainly will give that a try.


#8

@Cameron_Johnson you're welcome. I'm glad you found it useful. The whole point of the community right? Wish you are the best.


#9

@jaymal,

First of all, the product photography is stunning. Beautiful! So many sites like this have mediocre photography at best... this is tiers above most. Well done!

I'd cut the hero image height by at least a third, but most likely half. I'd want to keep the emotion of her face and as much as the dress as you can, but I don't want to push real content down below the fold. To help with this, you could also tighten up the Hspace margins on the social icons and the Hspace between the logo & menu items area to get back a bit more real estate for the hero. Other than that, the site seems vertically spaced out a bit too much, section by section... notice how big the gap is between the bottom or the hero and "Hey, Welcome..." and all the other sections have this same issue that's easily fixed. White space is good, but I'd tighten these up by half so the engagement carries over from one section to the next.

Everything else I had time to look at looks GREAT! Please give or take credit for the photography, it's very, very well done!

Just my 2¢.
~B.


#10

I agree with @itbrian40 on the white space between sections. :slight_smile:

But I wanted to say there something funky in the buy section. see the color guide text.
Im on latest chrome and safari


#11

@jaymal Great job on the site! Keep up the awesome work!


#12

Thanks @krubens for your feedback. I will look into it.


#13

Hi @itbrian40 i see what you mean with the whitespace. Thanks for sharing your 2¢...lol. But really it is worth so much more than that to me.

Thanks


#14

I test and i can't go to registration login step because not exist not implemented .

Webflow or Web any design tool ( Dreamweaver/Frontpage *.dwt template, Macaw , CMS template with style=options, artisteer bas on boostrap ....) are only for design. Convert a static html page to a dynamic ( php ) is another task .
I never see tool that do this in one click . Any Web design tool ll not create for you custom beautifull image ! Speak about beautifulll images are not relative to webflow but photograher ( photosohp artist) . Tools are for speed your work if they have their place in your worflow .

If we use Web service and webflow ( not host in the e-commerce web service) ....then webflow website are static page like thin Client ( monitor mouse keybord) using X windows . So the website e-commerce owner have to subscribe to a e-commerce API Webservice + BackEnd tool .

Does javascript AJAX request create issue relative to Domain ( jsonp) ......?
Does the page here are static ( no preprocessor like php -> html cache ) ?
I browse the foxy.io website and don't find the technical informations i search .....!
I discover webflow and foxy.io , hope I don't write wrong thing .

@jaymal your are expert in a domain i think ? perhaps not Front End ( html css javascript..webflow manage that ) but perhaps full stack developper ( javascript) , photographer, php /Asp developper ? the most consuming task in e-commerce is product database and image ( product website design ) .

for focus on desig and not on webflow tool ... the website design/photo is really great ...

Regard's


#15

Wow! That was something. What, I'm not too sure of, but... something.


#16

@lionel I'm not for sure what your question is, but please feel free to reach out if we can help with anything: hello@foxy.io

Again, great job on the site @jaymal


#17

Thanks @foxy. I should be saying thank you, really. You guys are awesome
and totally simplified stuff. Unbelievable! Thanks


#18

Thanks for the kind words @jaymal Glad we could help.


#19

Great job! The only thing I take issue with is the letter spacing... its too spread out imo makes it hard to read. I had a fiddle (couldn't help myself) to show how you can improve ledgeability and the general consistency to your typography (see screengrab below)


Notice the hierarchy is now easier to follow and the tweaks i did to spacing...also the button i got rid of the margin auto & added 30px padding to the left and right. I also changed the text inside the button to 13px semibold and reduced the letter spacing to 2.

Cheers
Sveky


#20

Hey @foxy , so the commerce platform is purely managed within Webflow?

Does that mean the client needs to use the Editor to make changes?

I have a subscription coffee business I’m working on right now and I’m not sure how managing individual accounts, shipping and the like would be possible for my client that way.

Keen to learn more :slight_smile:
Cheers