Issue 8
It was quite the week last week! Ecommerce came out of Beta and introduced itself to the world. 👏 Congratulations to the team at Webflow for getting this done. Right out of the gate it is a strong contender for what they're calling Brand Ecommerce. I have no doubts that feature parity with competitors will be surpassed especially with a dedicated internal team for Ecommerce. There are almost literally a ton of videos, articles, and guides to help get you started. Make sure to check out the Webflow University too.
Not as many showcase sites this week, but the ones that made this list are really great. Tons of visual range shown here. Proves that Webflow as a tool truly allows designers to express themselves.
We've got the usual handful of tuts shown off by WebDev For You, then Charli Marie wraps up her series detailing setting up a Webflow Ecommerce store, and also a mixed-bag of tricks from some of our other friends. Udesly put out two new widgets specifically for Webflow for animating SVGs and counters.
Rounding out our weekly digest is Nelson appearing on the Deep Dive Podcast.
Webflow
Here's some content from Webflow's official channels.
This is brand-first commerce. This is Webflow Ecommerce.
Duration - 0:1:13
Webflow Ecommerce Overview
With Webflow Ecommerce, you can build and design online stores, customize every detail of your cart and checkout experiences, manage products and orders, set up and launch a fully functional, completely custom online store without writing a line of code.
The broad strokes to setting up a Webflow Ecommerce site.
Webflow Ecommerce is now live
After three months in beta, Webflow Ecommerce is officially live. Here’s a look at what we’ve been shipping, what’s ahead, and how to shape the roadmap. Since our beta launch in November of 2018, we’ve been hard at work on the full release of Webflow Ecommerce.
The launch rundown.
The rise of brand-first commerce
The last 10 years have shown us that in order to make an impact in the crowded space of ecommerce, online stores need to create compelling, unique brand stories and experiences to stand out amongst the crowd.
It's a new kind of ecommerce.
Webflow Ecommerce first impressions — with Pablo Stanley
Duration - 0:0:38
Exactly
Ecommerce
Ecommerce settings, designing product and other Ecommerce pages, launching an online store.
There's a lot of good documentation already and this is a good place to start.
Ecommerce panel overview — Webflow UI tutorial
Duration - 0:2:38
Designing the product page — Webflow Ecommerce tutorial
Duration - 0:5:34
Customizing the cart button — Webflow Ecommerce tutorial
Duration - 0:2:39
Customizing the shopping cart — Webflow tutorial
Duration - 0:4:15
Customizing Webflow Ecommerce emails — Webflow tutorial
Duration - 0:1:47
Launching your Webflow Ecommerce store — Webflow tutorial
Duration - 0:1:18
Integrating Google Optimize
Google Optimize [↗] enables you to test variations of your websites and web pages for free. You can run tests on your content to understand what works best for your site visitors. You can use Google Optimize for A/B testing as well as running multivariate and redirect tests.
Now the ability to run A/B tests and more.
The world says hello to Webflow Ecommerce
Duration - 0:0:33
Hello Webflow Ecommerce!
Webflow Ecommerce: new features, and what's ahead
Duration - 1:36:38
Hear straight from the team that built it.
Instagram marketing for ecommerce: the essential guide
Instagram is a visual social media platform with over 1 billion active users and has become the new digital home for emerging and established brands.
Great lesson in good marketing on Instagram.
Drive ecommerce sales with dynamic ad campaigns on Facebook
Facebook launched dynamic product ads in 2015 to help ecommerce owners run targeted, optimized, and scalable ad campaigns.
How to use FB dynamic ad campaigns and connect it to your Webflow Ecommerce.
Showcases
Here's a sample of great sites built in Webflow. #MadeInWebflow
ceepo-dev - Webflow
by Eric Graventein Ontwerpbureau Keerpunt
I like this style and think if fits the brand well.
the-fabric-sales - Webflow
by Wouter Vergote
Very bold. Make sure to check out all the pages.
Strawberry Antler - Webflow
by Orange Cattle
Online food ordering and delivery service built with Webflow Ecommerce. Nice.
Real Estate - Assets - Webflow
by Ilan Harel
Lots of subtle parallax and nice illustrations.
amazonhall - Webflow
by Iñigo Corcuera Lejarreta
Very engaging design from the interactions to video elements.
EFFIXX Studio - Webflow
by Anthony Ciannamea
A visual feast
Tips, Tricks, & Tutorials
Take some time to learn something new.
Images Zoom Effect - Webflow
by Anna Sabatini
If your ecommerce product images need zoom, this is an easy way to pull it off.
Dram's Add-Remove Class - Webflow
by Alex Dram
This is really cool and there are lot's of possibilities this opens up. Just always keep user expectations in mind.
How to Disable Highlighting on a Web Page
Duration - 0:3:34
New contributor, check it out.
WebDev For You - Daily Interaction #76 - Webflow
by WebDev For You
Use hover to reveal more details for team members.
WebDev For You - Daily Interaction #77 - Webflow
by WebDev For You
Not a normal button, but I'm sure this can inspire some unique interactions.
WebDev For You - Daily Interaction #78 - Webflow
by WebDev For You
A looping edge highlight for buttons
Customizing a shopping cart | Webflow Ecommerce series - Episode 4
Duration - 0:7:14
The cart component is very flexible to design and quick get started.
Designing the checkout page! | Webflow Ecommerce series - Episode 5
Duration - 0:13:16
Most of the work is done already, it's mostly about styling the checkout to fit on brand.
Ecommerce emails & LAUNCHING THE STORE | Webflow Ecommerce series - Episode 6
Duration - 0:5:53
🚀
Daily Interaction #33 | Button Animation on Hover | WebDev For You | Made in Webflow
Duration - 0:24:59
Go from a ghost button to a filled version on hover.
Simple Table using CMS - Webflow
by Cyber Dave
See how to create a CMS driven flexbox table
WebDev For You - Daily Interaction #80 - Webflow
by WebDev For You
This feels like a good natural evolution to the hover underline animation for buttons. Me gusto.
Resources
Here are a collection of great resources that you can use on your next project.
SVG Animation Widget for Web flow | Webflow Widgets | Udesly.com
by Udesly
A very handy dandy tool
Count Up widget for Webflow | Webflow free widgets | Udesly.com
by
Count up. Count down. Customize.
001 Form — US States Dropdown Form - Webflow
by Aaron Grieve
Pre-filled and ready to go.
023 Button - Webflow
by Aaron Grieve
Toggle me this. Toggle me that.
Misc
Random things get put here because I didn't know where else to put them.
good-cheap-fast-webflow - Webflow
This responsive website has 6 views, 0 comments, and 2 likes.
Fun interaction and also very very true.
S01E02 Deep Dive Podcast - Webflow
Duration - 0:43:16
Nelson joins the Deep Dive podcast to talk about Webflow... duh.
Thanks for making it to the end. I hope these sources give you inspiration or head start on your next Webflow project. Did I miss something? Let me know about it on Twitter and you might see it in the next Webflow Weekly issue.
Until next week, happy designing!
.jpg)
T H I S V I D E O