Webflow is a hybrid of CMS and website builder. In contrast to traditional 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 offers, among other things, the option to create your own online shop. You can find out exactly how this works in this article.
<h2 id="Vorteile von Webflow" data-headline="Vorteile von Webflow"><span class="first_id_number">1.</span> Benefits of Webflow</h2>
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. The benefits of the tool can you https://www.02100.com/ratgeber/10-fakten-ueber-webflow and from the following table:
- no programmers needed: With Webflow, you can implement complex ideas yourself without a programmer.
- Working with source code is largely omitted.
- You can even add extensions to the Webflow pages using templates.
- no constant updates: If you've already worked with other systems, you know that updates are the order of the day. And that can ruin a lot. Webflow takes a plugin-free approach, which makes 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 susceptible to errors. With Webflow, there are fewer moving parts to stabilize the website.
- no security gaps: Unlike with standard CMS, you don't have to close any security gaps yourself or hire someone to do it for a lot of money. Webflow monitors your website by keeping the server and system 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 create websites much faster because projects do not require a complex setup. There are also no compatibility issues that unnecessarily consume budget and time.
- simple content maintenance: Webflow's CMS is user-friendly. You go into editor mode, click on a text on your website and change it. You do the same with pictures.
- Extensions: Regardless of whether it is an individual development or a purchased template. You can use custom code to 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 this is optional. 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.
<h2 id="Das benutzerfreundliche Low-Code-Tool" data-headline="Das benutzerfreundliche Low-Code-Tool"><span class="first_id_number">2.</span> The easy-to-use low-code tool</h2>
With Webflow, it is possible to create a website and an online shop yourself. Registration only takes a few minutes. You can then get started with your first project. There are numerous templates available for this purpose and many things can be solved using 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 opportunities, consider the option of Webflow consulting through Webflow partners such as 02100 digital. You can find more information about this here: https://www.02100.com/ratgeber/webflow-lernen-schulung-hilfe.
<h2 id="Den Onlineshop einrichten" data-headline="Den Onlineshop einrichten"><span class="first_id_number">3.</span> Set up the online shop</h2>
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 store to a page later.
The functions relevant to the online shop can be found on the left edge of the editor, where you can manage all categories, products, vouchers and orders. If you need help with this, there is also a step-by-step guide to 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 customer 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 have been completed, the guide will show you a green check mark. The next step is to add products to the online store, design it, and finally publish it.
<h2 id="Die Produkte und Kategorien im Onlineshop" data-headline="Die Produkte und Kategorien im Onlineshop"><span class="first_id_number">4.</span> 2. The products and categories in the online shop</h2>
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 about the respective product should appear. By default, these are: name, pictures, prices, description, quantity, and shipping.
However, Webflow also allows you to enter individual fields. If you want to sell shoes in the online shop, this is very practical because it could also make it possible to select different shoe sizes. For general orientation, see the preview on the right.
The appropriate 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 allows you 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 must 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.
<h2 id="Das Shopdesign" data-headline="Das Shopdesign"><span class="first_id_number">5.</span> 3. The shop design</h2>
To make your online shop attractive, it is important to dedicate yourself to 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, pictures, prices and texts.
At the top, switch between different categories and products to compare how they look in each design. Because this must fit all products. As soon as you change something 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.
In any case, you should not forget the “add to shopping cart” button. You can edit the shopping cart itself and the payment page completely individually, so that the customer experience when shopping is completely in your hands. If desired, individual emails can also be marked in the Webflow settings. Customers receive this, for example, after a successful order in your online shop.
<h2 id="Marketing mit Gutscheinen" data-headline="Marketing mit Gutscheinen"><span class="first_id_number">6.</span> 4. Marketing with vouchers</h2>
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 in the left menu to manage.
But to do this, you must first create a voucher. Click on the plus icon at the top right and give the new voucher a name first. You can also have the voucher code generated in this view. In the details, you finally determine whether the voucher code grants a percentage or a fixed discount and how the promotional period is defined. Of course, you can edit all vouchers later.
<h2 id="Zahlungsmethoden Versand und Steuern" data-headline="Zahlungsmethoden, Versand und Steuern"><span class="first_id_number">7</span>. 5. Payment methods, shipping and taxes</h2>
In a reasonable 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 other things. You can also access these settings on the left edge.
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, define how you want to ship in different countries. For example, select which shipping options your online shop offers and what the shipping price is. Set a name for the shipping 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 view, edit and add all approved shipping countries later. In this context, you must also focus on 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 correct taxes. Please note, however, that if something goes wrong, you as the online shop operator are responsible.
Under Notifications, you should set that you would like to be informed about new orders so that they can be shipped on time. You can also design emails that customers receive when they place an order. Traditionally, this would be an order confirmation and an invoice.
Finally, with Webflow, you have the option 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.
<h2 id="Veröffentlichung des Shops" data-headline="Veröffentlichung des Shops"><span class="first_id_number">8.</span> 6. Publication of the shop</h2>
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 pricing plans, each with different transaction fees. Depending on what you choose, Webflow will charge different fees for every order placed 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, activate the check-out first. 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.
<h2 id="Verwalten der Bestellungen im Onlineshop" data-headline="Verwalten der Bestellungen im Onlineshop"><span class="first_id_number">9</span>. 7. Managing orders in the online shop</h2>
Once your online shop has been published, there is only one aspect left. As soon as people start to buy something, there is the option to manage 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 corresponding 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 pending and how much revenue they have generated. This way, you'll never lose track.
