Think of Webflow as a combination of Wordpress and Adobe Illustrator - a content management system married to design tool that even a fussy designer could love. We were curious if Webflow could be used to power a simple affiliate e-commerce site.
Webflow starts you off by giving you a set of templates to choose from, spanning from the classic blog & portfolio sites to full business sites. Not all seem to have the CMS (content management system) built-in, though. The Webflow CMS feature allows you to create a dynamic website, such was with blog posts, product pages, photo galleries, user profiles, etc., and it's the primary reason we’re interested in Webflow.
In this post, we’ll dive into Webflow with zero previous experience and try to rejigger a photo gallery template into a bare-bones affilate e-commerce site.
First - make sure you’re on Chrome! Otherwise you can't use the full features of Webflow.
When you begin, you'll be given the choice of "Start!ing points" and "Templates". We skipped right to templates, and filtered by "Free" and "CMS".
Specifically, the Newport theme looked like a promising template for a visual, product-centric site. Once we chose Newport, the fun begins!
We dove right into the CMS to see how the "database" of this thing works. On the top left, you'll see three round disked stacked - that's the CMS section.
The CMS had two so-called "collections": Blog Posts and Photos (Note - "collection" is a Webflow term for types of content, like posts, gallery photos, etc.) Since a blog post has most of the information we would want for a product, we decied to re-purpose blog posts instead of creating a collection from scratch.
First, we changed the name of "Blog posts" to "Products":
...and added a couple fields to the collection which we thought were necessary for a product page - a "link" field for the actual link, and a "link name" for the text of the link.
Webflow doesn't combine these into one object in the CMS, unfortunately, but they make up for it by making it easy to link them later in the designer (we'll show how in a moment).
The two new fields are created in the "collections" editor for our new "Products" collection:
Click to "save changes" (learned this the hard way" and then hit the "X" in the top right to get back to the homepage.
No changes yet - we haven't changed any actual content. But that's about to change, starting with the theme name!
Double-clicking on a text element on a page allows you to edit it. After that, go back to the CMS and update the blog post, and swap out the stock images. Click on the CMS (stacked discs) icon in the top left, choose the "Products" collection, and click the first item (originally a blog post) to edit it. Change all the pics, and make sure to add a link name (we used "Buy meat claws on Amazon" and a URL (we put the Amazon link here).
The last step is to display each product's new link & link name on the product page.
To add product names as links on product pages:
- Click to the "Product" page. The blank paper icon shows products, and we want a CMS-driven page, not a static one. "Product pages" on the bottom is what we're looking for:
- On the top-right, choose the navigator, and start expanding sections until you see the "product description" box. Click once on description...
- Then allllll the way on the top left of the screen click "add element" (the plus sign) and choose "Text link"
- Click "get URL from Products" and choose "link" (remember that field we created?) to pull this URL from the relevant Product in the CMS. Then click "Get text from Products" and choose "link name"
Tada! We now have a product page with an affiliate link!
Now create two more products in the CMS (like we did before) times and you have yourself 3 products on the homepage:
...each with their own minimalistic products pages:
Last but not least, let's test drive adding a form. Go to the "About" page, delete the photo, and add a form element to one of the columns. We put the "About" text was column 1 and the form in column 2 to get this effect:
Admittedly, we have no idea what happens when someone submits that form. But we guess that it goes to the CMS.
Some things I noticed along the way:
- You can create webhooks for form submission, with explicit integration with Zapier. That has huge implications for new workflows and ways to handle data. Imagine getting an SMS every time someone submits something?
- One-click google analytics integration
- Custom code insertion
Webflow does not offer a shopping cart, but did stumble across a couple of other products (not on the Webflow site) which claim to integrate. That will have to be for another post.
Note that with the free plan you can't publish, and Webflow has several limitations on the size of your CMS, monthly bandwidth, and form submissions which would be important to consider before putting a big bet on this as powering your product/ company.
Overall, we were impressed at how fast we could build, and that we didn't need to do a tutorial/ read docs to solve a problem. The interface was clear and familiar enough for someone who has built web products before to make cobbling together our simple site on Webflow a breeze.
Keep on Learning!