How to create an online store in the website builder

Creating an online store seems like a complex and time-consuming task that takes a lot of time. But in fact, you can open an online store with just a few clicks. This opportunity became available with the advent of special services – designers, in which the creation of a site comes down to choosing a template and setting it up.

What a website builder looks like and how to create an online store with it – I will tell you in today’s article.

Step 1: Choose a platform

There are many website builders – from simple services to popular platforms on which powerful online stores are developed. However, many of them are either difficult to learn or provide extremely poor functionality.

One of the universal solutions is the Craftum constructor . With it, you can launch a modern online store in just a couple of hours. Yes, you won’t build an Eldorado-style online hypermarket on it, but it’s perfect for small projects when you need to test a product or understand how the sale of goods online works.

A special feature of Craftum is the “Design block” function, with which you can create a unique design. It’s like working in a simple graphics editor – you can add photos, various elements, text, and even HTML code. The added elements are easily customizable and move within the block. Thus, you can create not just an online store with goods, but also make it unique, different from competitors, with your own chip.

Access to all the functions of the designer is open for only 197 rubles per month. In addition, a 10-day trial period is provided.

How to use the Craftum constructor and create an online store – we will analyze further.

Step 2: Create an online store in the constructor

Before you create an online store, I recommend that you prepare in advance all the information on the goods that you are going to sell. These are photos, cost, description, characteristics and so on. When everything is ready, you can proceed to development.

Brief excursion

To make it easier for you to work with the constructor in the future, let’s analyze the main functionality of the service.

1. We will start developing an online store by choosing a template. Let’s take the “Beauty Salon” template, in which we will make a block for the sale of cosmetic products. Hover over it with the mouse and click “Select Template”.
2. As a result, a registration window is displayed in front of us – we enter the name, mail in it and click on “Create a site”.
3. After successful registration, we get to the page for editing the template that we selected earlier.
4. Working in Craftum is extremely simple – it all comes down to creating blocks and setting them up. To create a new block, just move the mouse cursor between the blocks and click on the button in the form of a plus sign.
5. We get into the block library – here you can find both simple blocks and one special one – the design block that I mentioned above. For example, let’s add a block with benefits – to do this, go to the “Benefits” section and select any of the options presented.
6. Thus, a new block appears, which we can edit. To change the text, just click on the original and enter your own.
7. After working with each block of text, you can get the following:
8. We can also edit the design part of the block. To do this, first you need to open the block settings through the button in the upper left corner.
9. In the “Design” tab, you can edit the entire block, for example, adjust its padding and background. And also change the title and other content – adjust the color, font, size, and more.
10. In the design block, everything is completely different – in it we can not only edit the proposed version, but also create our own. In the library, this block is at the very top: 
11. As a result, a block editing window opens before us, which can be completely cleared and supplemented with unique elements: text, various objects, photographs, video files, buttons and HTML code.
12. Also in the design block, we can work with the adaptive version of the site – special buttons at the top of the block are designed for this.
13. We can delete, change and duplicate each block in Craftum, as well as hide it. You can do this using the block in the upper right corner:

This is how easy it is to work with the Craftum constructor and create unique blocks in it.

Creation of an online store

Now let’s move on to creating an online store:

1. To do this, we need 2 blocks from the “Products” tab. This is the main block with products and a pop-up block that will display additional information about the product. Let’s start with the main block – you can add it from the block library.
2. Let’s edit the block. Suppose our beauty salon sells hair dryers. To add products, go to the block settings and in the “Content” section opposite the first product, click on the button in the form of a gear.
2. Change the name of the product, its description, price, and also add your photo.
3. We will also make it so that when you click on the button, a pop-up window opens. To do this, first we will rename the button to “Details”, and in the “Link Type” we will specify “Pop-up window”.
14. Now we need to create a new block and edit it – add additional information about the hair dryer to it, and then make this block open by clicking on the “Details” button. To do this, go to the block library and select the Goods-10 block in the Goods section.
15. The block has been added, now you need to edit it – to do this, go to the settings and in the “Content” tab, click on the gear.
16. In the section that appears, we can completely change the description, add our photos, change the button and price. After making all the changes, be sure to check that the “Link Type” says “Add to Cart”. This is necessary so that the product can be bought by clicking on the button.
17. Now we need to make this pop-up block open by clicking on the “Details” button, which we assigned in one of the product cards. To do this, we return to the settings of that card and select “Window 1” at the bottom. Please note that the name may differ if you have multiple pop-ups.
18. Now let’s edit the cart. It was created automatically when we set up the button in the popup. It is located at the very bottom of the page. In the settings, we can change the input fields and the name of the button. Please note that the purchased goods cannot be paid for on the site, but we can make the user leave a request for the purchase. 
19. All requests for the purchase of goods will be sent to the mail, which must be specified in the block settings in the “Form” tab.
20. This completes the setup of the online store. In the block of products, we have created only one card with a hair dryer. Similarly, you will need to fill in all the cards and assign a popup to each of them.

This is how, step by step, an online store is created in the Craftum constructor. Pay attention to the design – it should be in the same style. Do not use many colors, as a rule, two are enough: accent and additional. For example, a button can be accent red and the font white. The background may be of a different color, but usually it is neutral: black or white.

Also keep an eye on the typography – if you used the heading with the Arial font in the first block, then it should be used in all subsequent headings. The same goes for the main content.

When all the functionality of the site is worked out, you will need to publish it.

Step 3: We place the site on the Internet

Publishing a site in Craftum is done in just a few clicks:

1. Click on the “Publish” button in the upper right corner.
2. The site is published on the technical domain co9802329397.tmweb.ru and is ready for use:
3. This is what our website looks like:

If you want your web address to be beautiful, for example beauty.ru, then you need to purchase a domain name and link it to the page. You can learn more about this from the constructor’s chat support.

This concludes my article. Today we have created a ready-made online store that is perfect for starting. On such a site, you can test sales without much investment and understand how to proceed.