Case study: Building an e-commerce website in Webflow

Codemap expert:?Luc Meijer

Project website: https://www.wincacademy.com/

About Winc Academy

Winc Academy is an online tech educator. They teach in-demand tech skills like programming and data analytics to students from all walks of life and help them get into the technology field. Despite being a tech company that teaches people programming, Winc Academy still uses plenty of no-code in its infrastructure. Because Winc Academy is a startup, it must move fast. Using Webflow as their website builder allows them to move fast, and it also allows them to empower less technical team members to easily and quickly make changes to the website.

Article Pre-requisites

In this article, I will dive deep into a Webflow website I’ve built for a client, Winc Academy. The goal of the article is to showcase how to build a professional Webflow website promptly. I will assume some basic knowledge about HTML and CSS (and their equivalents in Webflow elements/styles).

When building software, it’s important to adhere to the current best practices as much as possible. Because Webflow is a relatively new tool, the best practices still change frequently and aren’t set in stone. In this article, I’m going to share what are - in my opinion- the best practices for building a website in Webflow. Not every expert will agree on the decisions I make about Webflow development, but I’ve made them based on years of experience as a software engineer and Webflow developer.

Pre-build

When building things, it’s rarely wise to jump immediately into your no-code tool to start development. Developing a website or an app, even with no-code, will be a complex process. It’s important to prepare a few things before development. Well begun is half done. Let’s go over some of the things to consider before starting the development process in Webflow.

Webflow as a tool vs. other website builders

First of all, take a moment to consider whether Webflow will be the right tool for your website.. You might be thinking, “I thought this was going to be a Webflow article,” I assure you, it will be. However, all no-code website builders have pros and cons and are worth considering if you are planning to build a website. For example, if you’re going to build a website that will be intimately integrated with an Airtable base, I would encourage you to look at Softr. Do you have a website in mind that requires a complicated back-end that doesn’t run in a separate tool, you might want to check out Bubble. If one or multiple of the following bullets apply to your website project, Webflow will probably be a good fit:

• Your website has lots of (complicated) animations
• The website will be maintained by someone less technical
• You need to build the website quickly
• You have basic HTML/CSS knowledge

Hopefully, you’ve determined that Webflow is going to be the tool you build your website with. Before we continue, I’d like to point out a few cons about Webflow:

• It’s not great for building websites that rely upon complex back-ends because it’s a front-end-focused tool with relatively few back-end capabilities.
• Due to the previous point, you can’t integrate Webflow very well with other tools, especially if they don’t have a native Webflow integration.
• If you’re going to write lots of custom code for your website, Webflow might not be the best option. Although you can write custom code in Webflow, the code editor is relatively poor, and code testing can take very long since custom code doesn’t run in Webflow’s preview mode and thus requires publishing of the entire site.

Designs

Before you start building your website, I highly recommend you have your designs finished. If you’re a web designer and feel very comfortable using Webflow, you can probably ‘design’ in Webflow straight away. In almost every other case, having the designs done beforehand pays off. I’m not a great designer myself, so I usually opt to work with a designer who’ll be responsible for the entire website’s design.

Nowadays, there are many different design tools that all do things a little differently. I like to work with Figma, as do the designers I work with. But there are plenty of other design tools that are great like:

• Adobe XD
• Sketch
• Framer

There are other browser-based design tools like:

• InVision
• Balsamiq

I dislike like these particular browser-based tools because they’re less friendly to work with as a developer. Slicing a design from these tools takes more work.

Other than that, you should work with whatever tool your designer feels most comfortable working with.

Tackling the design before the build enhances the build process because any potential questions that might have arisen during the development phase can be answered during the design phase. However, no design is perfect. New questions will always pop up during the development process.

The build

With the preparatory work out of the way, we can start developing in Webflow. As with most software implementation projects, I’ll start with the database structure. Starting here prompts me to think about critical architectural decisions to make. Few things are more frustrating than having to redo an entire page (or multiple pages) in Webflow because you’ve made a mistake in your database structure. By designing and implementing databases before page development, you can prevent that.

Collections

Databases are called Collections in Webflow, and database records are called collection items. Read all about collections in this intro to Webflow. There are two ways I use collections in Webflow:

1. A collection that will be used for its template pages. For example, since Winc Academy is an educator that sells multiple courses, they’ll want a separate page with a similar structure for each course. So the Courses collection makes a great candidate for this type of collection.
2. A collection that will be used just for data and doesn’t require template pages. For example, the courses that Winc Academy offers consist of various modules. The modules are shown on the Course pages but don’t necessarily require a page.

Let’s take a look at the diagram below that depicts the collections of Winc Academy’s Webflow project.

Notice how the Courses and People collections are ‘central’ collections that have many relationships to other collections. The diagram above shows connections between different collections but does not represent every single connection. In other words, some collections have multiple references to a different collection. For example, the Courses collection has two connections to the Course Categories collection. One is used to structure courses on the home page, the other is used to divide courses in the navigation bar between long and short courses.

Below, I’ve included a more descriptive overview of the collections and their connections. I’m not going to go over it in detail, because that would take too much time and wouldn’t be very informative, but feel free to read it and refer to it in case things aren’t clear.

For every collection, I’ve listed its type (template or data). I’ve used some collections as a data collection, but they could be used as template collections to provide more exciting content to the visitor or improve SEO.

Courses (Template)

• Jobs
• Modules
• Course Categories (Course Categories)
• Navbar Category (Course Categories)
• Features (Features & Learnings)
• Trial Features (Features & Learnings)

Blog posts (Template)

• Author (People)
• Blog category
• Blogpost keywords

Job postings (Template)

• Person Responsible (People)

Testimonials (Template)

• Course

Webinars (Template)

• Features (Features & Learnings)
• Relevant courses (Courses)
• Host (People)

People (Data)

• Courses

FAQs (Data)

• Course

Course Categories (Data, could be a template)

Jobs (Data, could be a template)

Modules (Data)

Features & Learnings (Data)

Blog category (Data, could be a template)

Blogpost keywords (Data)

Styling & Consistency

With our collections set up, there’s one more thing we need to do before we start building pages; styling. Of course, there’s no styling without elements, so there should be some elements on the page before styling. However, instead of plunging straight into development, we will be setting up as much styling as possible. If you’re working with a proper design, the styling of the website should be pretty consistent. Hopefully, things will be based on a particular grid (with columns and gutters), and fonts, margins, paddings, and sections will be standardized throughout the website.

Don’t Repeat Yourself (DRY)

In software development, there will often be many similarities between different objects. For example, many websites have the same navbar and footer on every page. Instead of developing the navbar from scratch each time, we should probably reuse the navbar on every page. In Webflow, we’ll use symbols for that, which I’ll get to in a minute.

This concept is called Don’t Repeat Yourself. It forces you to consider commonalities between different objects and decide whether to abstract some or all of them into a separate structure that can be reused in various locations. In Webflow, we DRY by creating symbols and using a style guide.

Style guide

A style guide is an overview of all objects/components that are often used throughout the website. A good designer will provide you with a style guide in their design tool. Style guides often include the following objects:

Colors

Typography

• Headings (H1 - H6)
• Body texts

Logo/image usage

Buttons

Forms

Links

Style guides can contain far more than the (visual) web elements included on a website. For example, a style guide may contain instructions about copy, newsletter design, tone of voice, and much more. This article has an overview of various design style guides. Here, Webflow has an overview of the style guides created in Webflow.

In Webflow, the style guide should contain web elements that are often used throughout the website. I would recommend styling the basic stuff, like colors, typography, and buttons, first. Actual elements like a footer or a navbar can come later during the actual development of the pages. This version of your style guide might look something like the image below.

Symbols

Finally, symbols will help us remain DRY during development. If an element occurs in the same way (or with different text in it) it should probably be converted to a symbol. Symbols are like variables of which every instance will be kept identical. Symbols are very powerful and should be used as much as possible, as long as elements are (nearly) identical.

A few examples of common symbols are:

• Header
• Footer
• CTA Blocks
• Newsletter subscription block

Now that you know how to keep your website DRY let’s start with developing the pages.

Building pages

Building pages is where the bulk of the development time will be spent. I recommend batching (grouping similar tasks) as much as possible. This will help with getting in the right rhythm and mindset for developing. That means I recommend not to place a few elements on the canvas, styling them, and then making them responsive. Instead, I propose to build an entire page (as opposed to a single or a few elements) in the following manner:

1. Placing elements/symbols/style guide
2. Styling elements
3. Writing custom code
4. Making elements and the page responsive
5. Creating symbols/copying to the style guide

Let’s go over these steps in detail.

Placing elements/symbols/style guide

Walk through the design of the page you’re about to develop and think about every single element that’s on the design. Having the right structure in your ‘HTML’ (aka the element tree) is crucial for styling elements and making a page responsive. Dissecting a design into properly nested HTML elements is a skill that can take some time to develop.

Let’s take a look at a hero section of one of the pages of the Winc Academy design.

Take a moment to think about the various elements that are on this screen and try to come up with the corresponding structure.

There is no single correct way to implement this design in Webflow, but the image below shows how I’ve dissected this hero section.

In the Webflow element tree, the structure should look something like this.

I’ve assumed here that we’ve already created a navbar and can simply include the navbar symbol at the top of the page. If this is the first page you’re creating, you should include the navbar in the element tree as well.

Note that 11 corresponds to the blue rectangle on the right of the page. This is set as a background image on the Section element.

Styling elements

After you’ve included every single HTML element that can be found in the design, it’s time to style these elements. If you’re doing everything right, this is where you’ll spend the most time when building pages.

When styling, once again, it’s important to keep the DRY principle in mind. Many styles may be used in different locations. Make sure to keep styles as simple and as reusable as possible. Try to use Global Classes as much as possible and only create Combo Classes in case of deviations from the common styles.

Webflow is a great website builder, but it doesn’t offer as many features, flexibility, and freedom as traditional code does. In my opinion, this is a separate process from styling elements on the base breakpoint. Since we’re batching tasks, I recommend doing the base breakpoint first, and then potentially continuing with writing custom code.

Writing custom code

Webflow is a great website builder, but it doesn’t offer as many features, flexibility, and freedom as traditional code does. If you have a complex website, chances are, you’re going to run into Webflow’s limitations. These limitations can sometimes be fixed with workarounds in Webflow itself. In other cases, you’ll have to write (or use) custom code to solve your problem. You can skip this step if your website doesn’t run into any issues regarding Webflow’s limitations.

I’m not going to go into detail about how one should write custom code specifically in Webflow, that could be an article on its own. Though I will include a few common scenarios for using custom code.

CSS that isn’t available natively in Webflow

Webflow plugins (which we’ll get into later)

Embedding objects from other websites

Libraries

• Google Tag Manager
• Cookie banner

There are essentially three places in Webflow where you can write custom code:

1. On the project level in project settings. Any code written here will be included on every page.
2. Use this level when you have a piece of code that’s relevant to most or all pages on your website. I recommend writing code on this level sparingly because this can quickly bog down the page speed of your website.
3. On the page level in page settings.
4. Using an embed block.
5. In general, I prefer writing code on the page level so that your custom code is located in a single place, and you don’t have to go looking for embed elements on your page. The one exception is when a symbol requires some custom code. In that case, include an embed block in the symbol so that you don’t have to copy the custom code every time you use the symbol.

Making elements and the page responsive

After you’ve placed elements on your page, styled them, and included any custom code that’s required to do the work, you’re going to have to make sure they look great on every screen. If you’ve thought well about your HTML structure, responsiveness should be relatively easy. From time to time, you may have to change your HTML structure because a design for a different device, say mobile, has a completely different structure than the desktop. If so, you’ll have to reconsider your HTML structure and probably do some restyling on the desktop version as well.

I recommend batching once more. In other words, try to style an entire page on one breakpoint before styling the next breakpoint. Webflow has a great lesson on the different breakpoints and how to work with them.

Creating symbols/copying to the style guide

Finally, after you’ve finished your page, it’s time to create symbols from the elements that occur on multiple pages in your design. While you’re at it, copy them to your style guide, so you’ll have a visual overview of the symbols in your Webflow project.

SEO

Search Engine Optimization is an extremely important part of almost every website. Many people don’t even type in a website’s URL in the address bar but simply Google it. When developing a website, making sure that you have the basics right on SEO is crucial. If you don’t know what SEO is or want to learn more about it, I recommend this article by Ahrefs.

Fortunately, Webflow has many helpful features when it comes to SEO. Make sure to configure the settings found in the SEO tab in Project Settings.

The next step is to configure your SEO-related settings on the page level. Every page that might be relevant to show on Google (so this isn’t relevant for your style guide page) should have settings like the Title Tag, Meta Description, Open Graph, and Site Search configured.

Part of SEO is optimizing your website for accessibility. An important part of making your website more accessible is including Alt texts for images. If you’re using images on your website, make sure to set up those alt texts. If you’re using images in a collection template page, you will have to include a separate Single Line Text field that’ll have to be configured as the alt text for that image.

Finally, there are some pages that you don’t necessarily want to show up on Google. Here, you can include a so-called no-index line in the custom code of that page inside the <head> tag: <meta name="robots" content="noindex">.

Page Speed & Website Optimization

Nobody likes using a slow website. Here are a few things to keep in mind when working on your website to prevent it from becoming slow.

Image compression

Always compress your images. Many tools will do this for you. I recommend you to find one that you like. Be critical of the compression quality when searching for an image compression tool.

Image file types

Nowadays, the gold standard for asset format is .webp, which stands for web picture. It has better compression than PNG/JPEG, so try to use webp as much as you can.

A suitable alternative is SVG. SVG’s are Scalable Vector Graphics. I recommend using these if you need to programmatically change the content of an image or if you have an image that you need to dynamically change the ratio of, but you’re worried about the image quality.

If you’d like to learn more about image file types, check out this article by MDN.

LightHouse

If you’re using Chrome, you can use Lighthouse from your web browser to run an exhaustive audit on your website. If you’re not using chrome, Google has a different audit tool that is a decent alternative. Make sure to optimize your website by processing the tips given by these audit tools. Sometimes you can’t follow every tip to the letter, but as a general guideline, optimizing your website according to these tools will make your visitors happy.

Integrations

Now that you’ve developed and optimized your website, it may be time to hook it up to some of the other tools you’re working with. There are three ways to integrate tools with Webflow:

1. Natively, usually in the Project Settings
2. By using custom code
3. By using an automation tool like Zapier or Make
4. We have a great article that showcases how I’ve built various automation for Winc Academy that are hooked up to the Webflow website.

Plugins

If Webflow’s features are lacking and you’re not going to write custom code to enhance your website, there’s always the option to use third-party Webflow plugins. For example, at Winc Academy, we’re using WeGlot to make the website multilingual. There are far too many useful plugins to go over in this article, but I’ve listed a few of the current big players below.

• FinSweet
• Jetboost
• Memberstack
• Weglot

Short on time? Hire a vetted Webflow expert on Codemap to jumpstart your project. Codemap is the world's first platform for no-code/low-code and automation. Codemap will match you with top Webflow talent quickly and free of charge.

Simply describe your project on Codemap using the smart brief and upload it to the platform. You will then get access to our network of experienced Webflow developers & designers. Our Webflow pros will be notified, and you can start receiving proposals within minutes.