The concept of no-code is becoming more and more popular thanks to advanced website builders like Tilda. Now it is possible to create an online store on them, which will not only be complete in terms of functionality, but will also receive a non-standard design. For small and medium businesses, Tilda is not a bad option – beautiful landing pages and simple online stores are quickly made here.
How is the development of an online store on Tilda
There are not so many global differences. You still have to make a logo, think over the design of pages, colors, fill the site with content, buy a domain and rent a hosting. The only significant difference is that you do not need to write code and adapt to different platforms. Using prepared custom block templates and controls, you can create a completely unique page design.
Tilda also has a zero-block tool. It allows you to create custom templates from scratch.
Technically, an online store on Tilda can be made by a person who has not previously worked with either constructors or, especially, with code. However, in addition to the placement of blocks on the page and their settings, you need to take into account other factors. For example, it is important to arrange the elements in the correct sequence so that it is convenient for the user to interact with them. It is unlikely that you will be able to take into account all the nuances if you have not been involved in website development at all before.
Conventionally, the whole process is divided into the following stages:
- The brand of the store is being thought out: name, logo, slogan, corporate colors and style. All this is necessary in order to continue to consciously approach the design of pages.
- Purchased a domain name for the site. In Tilda, you can link a third-party domain name, but only on paid accounts.
- The main content is being prepared – descriptions and photos of goods. This must be done before design work begins.
- Develop a design concept for pages and their interaction. You can skip it, since on Tilda any changes occur in real time. However, having a ready-made design in hand, further development will go much faster.
- Rendering pages on Tilda.
- Connection of the necessary functionality. The site should allow users to place an order, add and remove goods from the basket, make payments through the online checkout, keep a history of purchases. All this can be implemented on Tilda, but only through the connection of third-party plugins.
- Filling out product cards.
- Website launch and advertising campaign.
How development on Tilda differs from layout
In general, only because the team does not need to spend time writing code and debugging it. It still won’t be possible to refuse other stages of website development, although the stage of creating a design can be simplified. However, layout saves a lot of time and money, as working with code takes up the main resources.
Even a business owner who has not been involved in development before, but has a clear idea of how his online store should look like, can make a website. However, in order for the online store to work as it should, it is still recommended to hire a specialist who specializes in design and marketing.
When you need to write code, and when you can get by with a constructor
In half of the cases, to solve business problems, it is really possible to manage only a site created on the constructor. You can create a landing page for one product or a small online store with standard functionality using the constructor. But if you need something more serious: a store with a large assortment, designed for high attendance, then it is better to resort to classical development with layout designers and programmers.
If your task is only to present and sell a small range of products, then it is not necessary to resort to writing code.
Main objections when working with Tilda
Tilda or another constructor is not serious. In fact, this is a great solution for a small business that sets the most basic tasks for the site. The constructor will allow you to quickly and cost-effectively implement your plans, make a minimum viable website and start receiving the first orders. The user does not care what the site is made on, the main thing is that there is the right product and service. Competitors also do not care what you are doing the site on. True, it is still better to remove the designer’s logo from the pages of the site. This can be done by switching to one of the paid tariffs.
Tilda does not have the required functionality. First, you need to decide what your site should do. We will consider the available options for online stores on Tilda below, but for most small projects they will be enough. And if something is missing, then often the problem is solved by installing and configuring additional plugins.
Making a cool and unique design on Tilda is unrealistic. Of course, a lot depends on your ideas, but the possibilities of the constructor allow you to implement a lot. Yes, unusual features, such as cinematic transitions, horizontal scrolling, and others, really cannot be implemented on Tilda. However, for most landing pages and online stores, such solutions are redundant. No one forces you to make a website according to the templates that are presented in the constructor itself – you can create your own unique design in Zero Block. Yes, and template solutions are edited without restrictions.
How an online store is developed on Tilda
For convenience, the development process is divided into several stages.
Stage 1: Preparation of references
When developing any site, you need to start from something. Come up with a concept and make references. Pay attention to the following important points:
- Is there any main product or category that must be emphasized on the site;
- Decisions of competitors – what design their pages have, what texts they use, what they focus on the attention of a potential buyer;
- What your target audience likes.
Be sure to look at examples of sites of your and related topics. Save any ideas you like on your moodboard. Mood boards are great for finding solutions. The more ideas you collect on them, the better.
Stage 2: Preparation of the initial prototype
Based on the prepared references and tasks of the site, create its prototype. It doesn’t have to be operational or detailed. Here it is important to arrange the blocks, important design elements, write down various notes. In theory, a prototype can be drawn even on paper, but it is better to use specialized services for this: Figma, Axure, Ninjamock and the like. The thing is, a digital prototype is much easier to work with in the later stages.
In the prototype, draw a schematic arrangement of blocks, elements inside them, write down scenarios for interaction between different pages of the site.
Stage 3: Registration on Tilda
To implement the next steps, you will have to register an account on Tilda and pay for it. At the free plan, most of the features necessary for the implementation of an online store become unavailable. To work, choose one of the tariff plans: Personal and Business. They do not have serious differences in the available functionality, but there is a difference in the maximum number of sites and available disk space on the hosting. If you want to make a large online store that will continue to expand, then it is recommended to purchase a business subscription.
The selected tariff can be tested free of charge for 2 weeks. At the end of this period, payment must be made. Otherwise, the site will be frozen.
Stage 4: Design development
You can do it directly in Tilda or in graphic editors. In the first case, it will be possible to launch the finished product faster, and in the second, there is more freedom of creativity, since you do not pay attention to the proposed templates.
Next, start selecting and/or rendering graphics: icons, pictures, other secondary images. Choose fonts and colors. They must be united by a common style.
Based on the selected colors, images, fonts, components and the previously created prototype, start creating a design. With a digital prototype, this is very easy – in fact, you simply adapt the already prepared blocks to the developed style. In the process, do not forget about the successful work that you have added to your moodboard. Take interesting ideas from them to diversify the finished design.
Stage 5: Choosing a template
You can skip this step if you decide to make an online store according to your own design. Tilda has a lot of free templates from designers. Find among them the one that best suits your concept and / or the arrangement of elements on the prototype. If there is no suitable template, then you have two options:
- Go to zeroblock and create your own template;
- Choose at least some ready-made template and already try to work with it.
The presented templates can be edited almost as you like. If necessary, nothing prevents you from completely redoing it to fit your needs. The template does not limit you in action, but provides a framework that speeds up development. Instead of setting up blocks, headers, controls from scratch, you need to edit the already finished ones.
Stage 6: Layout
It is skipped if you decide to work with a ready-made template. Layout on Tilda practically does not intersect with writing code. You work in zero-block – an empty space where the design needs to be drawn. The process is very similar to creating a page design in figurative Figma or Photoshop. You don’t need to work with HTML/CSS code, with rare exceptions. It all comes down to the fact that you create a full-fledged page design from simple shapes, curves, text, blanks for pictures and buttons, without relying on any ready-made template.
By the way, you can also use ready-made templates in zeroblock. For example, you are too lazy to draw a button – find the most suitable option in the template library and place it in the layout. In fact, you can assemble a constructor with the help of blanks, in which you can also add something of your own.
Stage 7: Filling in the content
You already have a working prototype, it remains to fill it with product photos, add description text, reviews. In general, there is nothing complicated here – Tilda has a convenient admin panel where you can quickly add information on the desired positions.
If you have several products on your site and their range will gradually expand, then third-party modules will have to be connected to the site. They are necessary for the automatic formation of a catalog, product menu, convenient assortment management. The catalog is activated in the site settings: site settings – more – plug-ins – product catalog – connect.
After that, you will automatically generate a list of products posted on the site. Adding a new product occurs through the appropriate button. Nearby is a button for managing product categories. When adding a new card, its template is automatically loaded. All you have to do is fill in the required fields and upload the image.
Step 8: Adding a Cart
In the constructor, open the “Shop” section and select the “Cart” block there. After it is added to the site, it will already be operational, but it is still recommended to configure it. To get started, choose a design option and location on the site so that the basket fits into the design. By default, the shopping cart icon is disabled for the buyer and he sees it only after he adds something to it. Visibility for the buyer is also configurable.
Additionally, pop-up windows can be attached to the shopping cart. For example, after adding a product, a potential buyer pops up a pop-up with an offer to pay. Or from time to time there is a reminder of the goods added to the cart. The appearance of the window, animations, text, frequency of appearance are configured separately.
Stage 9: Adding a payment system
In the constructor, go to “Site settings” and select “Payment systems” there. There, select the currency or currencies with which the online store will work. Below are the payment systems supported by Tilda. Also on this page, promotional codes and promotions are configured. The selected system will need to give its details, which will receive money from the buyer. Cash payment options are also available, but it is recommended to use it only if the goods are sent by courier or cash on delivery by mail.
When you complete all the settings, click the “Publish” button. From that moment on, your online store is available for visiting, and is also visible to search robots.
Opportunities of an online store on Tilda
At the end of the article, let’s look at additional features that can be configured in the Tilda online store:
- Interactive product cards. When you hover your mouse over a product image in the catalog, other images of this product will automatically be displayed.
- Custom product options. In the card, the user can select some specific parameters: size, color, texture, and so on.
- Promo codes. They are added and configured at the stage of linking payment systems to the site.
- Minimum order amount. You can specify the minimum amount that is required to arrange delivery. This is true for stores selling inexpensive goods, since it will be at a loss to send goods for $1.5 free of charge.
- Adding labels. In the product card settings, select the “Mark” line and enter the label text in it.
- Choice of delivery. If you deliver goods in several ways, then in the card settings you can enable the user to choose the most optimal option.
Conclusion
Tilda is a great choice for setting up a small online store. The result is a full-fledged website, the development of which takes less time and money. At the same time, the project will be fully operational: the user will be able to arrange delivery, select the desired kit, and you will be able to track purchases, add new products to the catalog.