Webflow is a hybrid of CMS and website builder. In contrast to conventional website builders, the application does not reduce web design to an absolute minimum, but requires you to have a basic understanding of programming processes. This makes Webflow more complex and, among other things, offers the option of creating your own online shop. How exactly this works is explained in this article.
Benefits of Webflow
It is true that there seem to be many alternatives at first. But on closer inspection, Webflow stands alone as a hybrid between a modular system and a CMS. You can take advantage of the tool here as well as in the following table:
- No programmers required: With Webflow, you can implement complex ideas yourself without a programmer.
- There is no need to work with source code as far as possible.
- You can even add extensions to Webflow pages using templates.
- no continuous updates: If you've worked with other systems before, you know that updates are the order of the day. And that can ruin a lot. Webflow takes a pluginless approach, making your website more stable and reliable.
- no error-prone plugins: It may have its advantages to install a plugin for every requirement. But too many interfaces from external sources make your site prone to errors. With Webflow, there are fewer moving parts to stabilize the website.
- No security gaps: Unlike common CMS, you don't have to close any security gaps yourself or hire someone to do them for a lot of money. Webflow monitors your website by keeping servers and systems up to date.
- fast loading times: Webflow is also at the forefront in terms of performance. The source code is efficient, clean and follows new standards, which has a positive effect on the user experience.
- short project times: With Webflow, you can create websites much faster because projects do not require a complex setup. Compatibility problems that unnecessarily consume budget and time are also eliminated.
- easy content management: Webflow's CMS is easy to use. You go into editor mode, click on a text on your website and change it. This is exactly how you proceed with images.
- Extensions: Regardless of whether it is an individual development or a purchased template. With custom code, you can integrate missing features with Webflow. For example, expand your site to include member areas or connect it to other databases.
- Inclusive hosting: With Webflow, you don't have to worry about hosting because it is optionally included. This also eliminates the hassle of installing a CMS on a server and purchasing an SSL certificate.
- easy SEO management: Meta description, title tags and other common SEO parameters are easy to use using CMS. You can integrate everything else via custom code.
The easy-to-use low-code tool
With Webflow, it is possible to independently create a website and an online shop. It only takes a few minutes to register. After that, you can get started with your first project. There are numerous templates available for this purpose and many can be solved via drag-and-drop. Hardly any other tool offers you such freedom to design the elements on a website or landing page. To really get the most out of these options, consider the option of Webflow advice from Webflow partners such as Klarkode. You can find more information about this here.
Set up the online shop
To create an online store with Webflow, you must first set up a website and open it in the editor. It is therefore useful to work with a template from the outset that includes appropriate online shop functions. If not, you can also add an online shop to a page later.
The functions relevant to the online shop can be found on the left side of the editor, where you can manage all categories, products, vouchers and orders. If you need help with that, there's also a step-by-step guide to help you set up and publish.
First of all, it is a matter of providing formal information for the online shop. For example, the business address as it appears on the customer's invoices and parcels. You can also set the currency, set the country and language, and enter the name of your shop.
If necessary, also set the unit for mass so that all sizes are calculated in centimeters and all weights are calculated in kilograms, for example. As soon as these settings are completed, the guide shows you a green checkmark. The next step is to add products to the online store, design it, and finally publish it.
The products and categories in the online shop
The most important thing about an online shop is, of course, the products. With Webflow, you manage them in a separate area. In the corresponding menu item, you can see the name and number of products that are currently in the shop. If you click on the cogwheel, you can set which information should appear about the respective product. By default, they are: name, images, prices, description, quantity, and shipping.
However, Webflow also allows you to enter individual fields. If you want to sell shoes in an online shop, this is very practical because it could also make it possible to select different shoe sizes. For general guidance, see the preview on the right.
The right option to create a new product can be found in the top right corner. Once you've defined all the parameters you need, you can publish the product or save it as a draft. The latter gives you the opportunity to edit the product again at a later date.
In addition to products, you can also create categories in which you can group the products. In this way, you build up a thematic and clear structure in the online shop. The category settings can be found in a separate area, where you in turn have to fill out certain fields. With Webflow, you can also link categories as a dynamic CMS, which allows you to add new products directly to a category. This makes it easier to manage products and categories.
The shop design
To make your online shop look attractive, it is important to focus on product presentation. Webflow provides you with a dynamic page for this purpose. It works in a similar way to CMS pages, which you fill with dynamic content.
First, create a sample product page using the Webflow editor. Settings can then be made for individual online shop elements. This includes the name, images, prices and texts.
At the top, switch between different categories and products to compare how they look in each design. Because this must match all products. As soon as you change anything about the design, Webflow applies it to every product page. It is also possible to add normal elements such as menus, footers and general information to the online shop. They don't have to be dynamic and look the same on every product page.
Under no circumstances should you forget the “add to shopping cart” button. You can edit the shopping cart itself and the payment page completely individually, meaning that the customer experience when shopping is entirely in your hands. If desired, individual emails can also be reserved in the Webflow settings. Customers receive these, for example, after a successful order in your online shop.
Marketing with vouchers
Marketing with vouchers and discounts is almost essential for every online shop today. Webflow also offers the option to create something like this. To do this, you will find a list of all created vouchers to manage in the left menu.
But to do this, you must first create a voucher. Click on the plus icon at the top right and first give the new voucher a name. You can also have the voucher code generated in this view. In the details, you finally determine whether the voucher code provides a percentage or a fixed discount and how the promotional period is defined. Of course, you can edit all vouchers retrospectively.
Payment methods Shipping and taxes
In a decent online shop, the backend plays a key role because it controls all processes running in the background. This includes payment methods, shipping, taxes, and many more things. They also access these settings on the left side.
Under Payment, you can set up various payment methods such as PayPal, credit cards or Google and Apple Pay. To do this, your PayPal or Stripe business account must be connected to the online shop. Otherwise, you won't be able to publish it. In the check-out area, activate access to the check-out page that you have previously designed. There must be at least one payment method for this.
Under Shipping, determine how you want to ship in different countries. For example, choose which shipping methods your online shop offers and how high the shipping price is. Set a name for the delivery methods and, if necessary, define individual values. This makes it possible to link the shipping price to the size or weight of a product.
In the overview, you can overview, edit and add all approved shipping countries later. In this context, you must also address taxes and determine, for example, whether they are included in the prices. There are correspondingly different tax rates for different countries. Webflow automatically calculates the right taxes. However, please note that if something goes wrong, you as the online shop operator are responsible.
Under Notifications, you should set that you want to be notified of new orders so that they can be shipped on time. In addition, you can design emails that customers receive when they place an order. Traditionally, this would be an order confirmation and an invoice.
Finally, Webflow allows you to integrate third-party providers such as Facebook, Google or Shippo into your online shop. The latter would mean, for example, that all orders would be automatically connected to shipping services.
Publishing the shop
Now that all important steps to create your online shop with Webflow have been completed, it just needs to be published. It starts with the publication of the website. This is only possible with a premium subscription to Webflow. You can choose from 3 different price plans, each with different transaction fees. Depending on what you choose, Webflow will charge different fees for every order in the online shop.
The 3 pricing plans also include a normal website plan, which you can purchase to get more features for your website. Once you have a premium plan and are ready to publish, first activate the check-out. This ensures that visitors can also buy products stored in the shopping cart. Then publish your page using the publish button at the top right.
Managing orders in the online shop
Now that your online shop has been published, there is only one aspect left. As soon as people start buying something, there is the option to manage the orders as well. To do this, go to Webflow's individual editor, where you can also manage the products and pages.
There you will find a list of all orders with the associated order number, the name of the customer and the date of the order. Based on the status, you can see where an order is currently located. Has it been shipped, returned, or has it just been received? In the upper area, you can see how many orders are open and how much revenue they have generated. That way, you'll never lose track of things.
Recommend this post