How to build an ecommerce website from scratch in 90 minutes and start selling

Every step helps establish an element of your first store. You’ll be asked a few simple questions: the name of your store, a password, your favourite color, the type of products you sell, and more. 

No need to panic! If you haven’t yet decided on the name of your store or if you’re not sure about what you’re going to be selling, the color, or the layout, you can change it later on. 

Once you’ve completed these steps, you’ll be led through to the administration area (also called the “back office” or “dashboard”).

This is where you’ll manage your store and the layout of your website. 

By this stage, your store is already 80% configured by our team! 

The hosting and technical structure are already in place. 

Lots of different features and marketing tools (more than 400!) are already installed. 

You’ll soon be ready to sell your first product in a flash!

Note: Besides having this guide, you can book a call with our Business Coaches or ask them any questions you have. Don’t hesitate to get in touch, as they’re here to assist you with your project, offer technical support, and help you with your marketing strategy!

To contact them, just click on the blue bubble in your administration area (you’ll need to have created your account in order to do so!).

2. Customize your design

Estimated time: 20 minutes

Using the questions that you answered when creating your account, we’ll provide your website with a design. It’s adapted to all kinds of screens (it’s what we call a “responsive design”). Most importantly, though, it’s been created to help you SELL. 

Every detail has been created to improve your sales. 

Of course, you’ll be able to customize it to your taste, or rather to your brand and your target audience. 

Make sure that you always keep your target audience in mind, whatever your personal taste may be.

To see the current look of your website, click on the “View my website” button. 

Adding a logo

Now we’re going to customize your online store! Let’s begin with your logo. 

Get your logo ready in a .jpeg or .png format, and then go to your General Preferences (the cog icon).

Once you’re there, you’ll see two main choices: on the left “Customize the Design” (the place to go to change the appearance of your store) and on the right “Add my logo.”

First, we’re going to upload your logo. 

Click on Add my logo > Add a logo or the store’s banner. Upload your logo by following the instructions on your screen.

Note: Don’t already have a logo? Fiverr.com has a whole range of freelance graphic designers that can make a unique and personalized logo for your brand. If you want to craft your own logo, you can use other tools such as Canva, BrandMark, or Looka.

When you’re uploading your logo, pay attention to the pixels. Make sure your logo is less than 150 pixels in height to avoid distorting the header of your website. 

You can, of course, edit or change the logo for your business at any moment.

If you like, you can also display the name of your store while you wait for your logo to be created. 

Simply enter the name of your website and a slogan and hit “save.” That’s it!

Congratulations! Your website now has a name. 

Now, let’s get to the customization of your store so you can make it UNIQUE. 

Creating your homepage 

We’re going to use WiziBlocks.

You might be wondering, what are WiziBlocks? This is a unique system that WiziShop created for page layouts.

Thanks to our WiziBlocks, you can completely customize your homepage and use the structure that you like. You’ll be able to give free rein to your creativity! 

Go to Content > Homepage content to get started!

With this interface, you can build your store’s homepage. It’s super simple and quick. 

You need to follow three steps (make sure you have the images you want to use ready): 

1. Provide the title and meta description. This is the information that’ll show up for your store in Google searches. So try to be clear in explaining what your store offers and its target audience. You only have a few words to address your potential customers and convince them to visit your store.
2. Your store is now 80% ready! We’ve already created a design and block layout for you. At this point, you have two options from which to choose:
3. Keep the layout and replace the blocks with your products, images, etc., without forgetting to customize the text.
4. Construct your own homepage by editing the blocks with a new arrangement.
5. Open the WiziBlocks control panel to begin customizing!

What you can see in the screenshots is the store that I’m creating at the moment with our WiziBlocks. I went for the option to customize my own homepage for my store. This means that I deleted all the other blocks by default before I started. 

If you want to see the end result of the store creation process, take a look at an example of a French store here. 

In this example, the homepage is made up of 14 blocks, including a slideshow, countdown, product zoom, simple text boxes with images, and testimonials. 

Now I’m going to show you how to configure the blocks. 

Let’s first examine what a WiziBlock looks like and all its different capabilities:

You have lots of different types of blocks that enable you to create a one-of-a-kind store. Furthermore, they allow you to emphasize the information that you consider to be the most important for your target audience and your customers.

Can you sense the total design freedom that you’ll have at your fingertips?

Let’s get started with the customization of your homepage! 

SLIDESHOW

At the beginning, you’ll already have a slideshow pre-configured for your store. You can replace the current images with your own. 

These images can serve to do the following: 

• set the scene for your store and your brand’s universe 
• highlight any new features or promotions
• emphasize what makes you unique, especially compared to your competitors 
• liven up the site according to the seasons or events

A little reminder that you need to have your images ready to go. Pick high-quality images because the slideshow, just like all the other image blocks, takes up the entire width of the page, and it’s the first thing your visitors will see.

It’s super important to keep this in mind! 

Keep it simple. A high-resolution image and some short text. 

To ensure that the slideshow is perfect, regardless of the screen, include images with dimensions that are based on what’s recommended in the blocks:

Note: There’s software that’s very easy to use and that can assist you with generating these types of visuals. I’m thinking about Canva in particular. You can craft professional layouts very quickly. Also remember to take a look at our training videos (they’re free!) in your administration area. 

To edit the content of a WiziBlock, click on the element and you’ll be able to edit it directly. It couldn’t be simpler.

If you want to delete a WiziBlock, click on the little trash can icon, just like in the image below.

To create a new block, simply select one from the list of WiziBlocks. Click on your choice and you’ll see it appear at the bottom of the page. Then, you can start customizing it. 

COUNTDOWN

If you’d like to feature a countdown to highlight a sale or promotion and create a sense of urgency, go to the list of WiziBlocks and select “Countdown.” At the moment, you have a choice of 5 different types of countdowns.

I chose an airport-style countdown. Once you’ve created the block, editing it is simple. All you need to do is pick the date and hour that the sale finishes. That’s it!

PRODUCT ZOOM 

For my store, I wanted to highlight my most popular item, so I chose a Zoom block for it. 

To do this, you go once again to the list of WiziBlocks. Click on “Product zoom.” You have a few different choices. I chose “Product zoom with info.” 

The block then appears at the bottom of the page. It’ll ask you to fill in the name of the item or the product reference. At this point, we haven’t yet added any products to your store (we’ll get to it shortly), so you can just type “1” and choose a demo product. This then gives you an idea of what the block looks like on your homepage. 

When you’ve added your product, you can go back and change the content of the block with a photo and the key bits of information. 

To edit the product itself, click on “Element configuration.” In the search bar, type the name of the item or the reference.

All the different blocks that have text can be edited and formatted by selecting the text itself. You can change the size of the font and the colors or use customizable variables. 

Here’s what I did for my store. I used different customizable variables: 

1. I used the city variable (let’s say that I’m based in Chicago, for example.)
2. I also added text to reassure my customers. 
3. I added text to help describe the product in use so that readers can imagine themselves using it.

SIMPLE TEXT WITH IMAGES

This block is very useful when you want to communicate an important message to your visitors and to ensure its impact with an illustrative image. 

Take a look at the list of WiziBlocks and select the “Image and text” block.

To edit the content, click on the element and you’ll see a menu with various possibilities to change the image and edit the text.

If you want to add a link to the image or edit the call-to-action button, you need to click on “Element configuration.”

TESTIMONIALS

Social proof is a really important feature of an online store. 

Think about when you’re on vacation and you’re looking for a place to eat and relax. You’re stuck between two different restaurants…the one on the right is full of customers, and the one on your left is empty. Without a doubt, you opt for the one on the right, correct? 

It’s the same for your store! Show your visitors that you have regular customers that are satisfied with their purchases. 

To do this, you can select the block “Testimonials.” 

Returning to the list, I chose “3 testimonials.” 

I edited the background color and formatted the text. It’s also possible to add photos for your customers providing testimonials (with their authorization of course). Note that these testimonials in my example here aren’t real and are just for demonstration purposes, but it goes without saying that any customer testimonials you add for your store should be from actual customers of yours! 0

Here’s what my example looks like:

Now that you know how WiziBlocks work, you can let your imagination run wild. 

Let me remind you that if you want to get going quickly, you can simply use the automatic layout of your store and just replace the images and text and add your products. 

If you want to see the initial results of your work with your WiziBlocks, you can click on “Preview.” 

If your homepage is ready and you want to have it appear online, all you need to do is click “Save.” 

Now, let’s finalize the customization of your store. I’m going to show you how you can edit the color and font of your texts. 

Let’s head back to General Preferences (the cog icon) and click on the “Customize the Design” button.

In this section, you can apply changes in the column on the left and see the results on the right. 

You can: 

• See how your website appears on different devices: computer, smartphone, and tablet. 

• Change the width of the website. However, I advise you to keep the maximum width. This allows your screen to adapt to very large screens.

• Most importantly, you can pick the dominant colors of your website. We offer several color sets, but you can select your own with the last button that has the cog icon. You’ll see, it’s magic: the titles, buttons, and text adapt automatically to create harmony across your website and a strong contrast.

• Change the size and font of your text.

• Choose a background for your website. You can opt for one from those offered or you can upload your own image. Of course, your background isn't visible if you leave your website width at maximum. However, if you’ve chosen a small width, the background will add a unique touch to your website.

Make sure you save all your edits before you leave this section. Just hit “Save.” 

Well done! You’ve finished the first part of the customization of your website. You’ve added a logo, created your homepage with your WiziBlocks, and edited the color and text of your store. 

To get your store ready, there are still two more essential elements you need to configure: 

SOCIAL MEDIA

Still in the “Design” area, you’ll find a space that allows you to display the buttons of your social networks, again with just a few clicks.

Copy and paste the URLs of your social channels into each of the dedicated sections.

Save your changes by clicking on the “Save Social Networks” button. You’ll see that the buttons automatically come up on your website! 

If these buttons aren’t something that you want on your website, you only need to deactivate this option.

REASSURANCE

Elements of reassurance are essential. 

Even though it’s possible to remove them, I don’t recommend it. 

Why? Quite simply because these elements give confidence to new potential customers. 

By default, your store shows four elements of reassurance. 

You can edit them, move them, and customize them. 

Think about all the different elements that could reassure your customers. For example: 

• Secure payments
• Quick delivery
• Customer service
• Product return deadlines
• A “satisfied or refund” option 
• Where your goods are made 
• If a major media has talked about you or your products 
• The number of customers and orders that you’ve achieved so far

Change the icons as well as the text and save your changes. Your reassurance elements for customers will be automatically updated on your website! 

If you prefer, you can also create them with your WiziBlocks. If you decide to go this route, make sure to deactivate the reassurance elements in your administration area and return to your WiziBlocks.  

Note: If you have any previous technical or IT knowledge or if you’re working with a web designer or agency, you can go even further with the customization of your WiziShop store. You can include CSS files and edit the HTML code of your website by going to General Preferences and clicking on the “Add CSS” or “Customize the HTML” sections. You’ll have total freedom. 

What’s more, your Business Coaches are at your disposal if you’re looking for an agency, partnered with WiziShop, to create a customized and unique layout.

3. Establish your delivery options

Estimated time: 20 minutes

This part only concerns those who offer physical goods. If this isn’t the case for you, I recommend that you deactivate the stock management section.

To set up delivery, you should go to General Preferences, scroll down to the “Store configuration” section, and click the “Add a delivery button.”

As you’ve seen, WiziShop provides a whole range of options to meet all kinds of different needs. 

You’ll be able to offer multiple delivery methods to ship your products: for example, a standard option, an express option, and a click-and-collect option. 

To get started, you need to define how long it’ll take you to prepare your orders. We’ll combine this with the delivery time so that customers can see an estimated date of delivery.

Then, you can establish your delivery options.

Note: For your delivery prices, I advise you to not round your prices up (e.g., $3.90 or $4). Go for more precise prices and less “marketed,” like $4.33 for example. In the mind of the consumer, this price is to the penny, which will reassure them and increase your conversion rate! 

Another tip, you can define a spending point after which delivery is free. I would recommend from $50, as a number of studies have shown that it’s the ideal level to increase the value of your average cart. 

Now you’re ready to display your first product on your site!

4. Add your first product 

Estimated time: 30 minutes

I’m going to continue based on the idea that you already know what your store is going to offer. However, if that's not the case, you can read this article to aid you in deciding what to sell online and how to find best-selling products.

To get your first product on your site, let’s head to the "Products" tab and then click on "Add a product."

All you need to do is complete the product information form in four stages: Details, Price & Stock, Delivery, and Photos.

DETAILS

This part is especially crucial. The product page is the only way you can convince visitors to buy your goods. Put yourself in their shoes. They can’t see or touch the item, so they’ll be asking themselves lots of questions. 

It’s up to you to answer all of their questions, but above all, it’s up to you to make what you sell ATTRACTIVE. How do you go about doing this? It’s no secret. Put yourself in their shoes and explain how this item can make their life better. What problems does it resolve? 

It’s super important to keep this in mind. I often see far too many product pages with little text or just a list of characteristics. This can work if your customer already absolutely wants what you have for sale but not for those who are only discovering it now. 

And these are the people you should be targeting so that you can maximize your sales!

It’s better to include fewer products with interesting descriptions rather than hundreds of items with short and useless descriptions (or even worse, the descriptions taken directly from your supplier or competitors). 

The first steps in adding your product are the following: provide the name of your item, a reference, and a category (if you want to, this page allows you to establish a category directly).  

As a reminder, this will be the information you’ll use in building product blocks for your home page!

Then supply a short (but enticing) description to describe your item in a few words. 

Finally, provide the complete description for the item. You can format your text to make it more readable (bold, titles, bullet points…).

Note: I recommend that you write product descriptions that are at least 300 words long. This is essential to explain to your customers why they need this item but also to impress Google and improve your SEO.

To take it to the next level, I would recommend you read our article on how to create the perfect product page.

PRICE & STOCK

Here you’ll be able to input the price of your product and organize special offers for your store. You can easily feature promotions, host sales, have a flash sale (with a countdown), or even offer decreasing prices depending on the quantity ordered by the client. 

You should also indicate the stock that you have for the product.

DELIVERY

A few minutes ago, you configured your delivery methods. 

Now all you need to do is indicate the weight of the product, and WiziShop will automatically calculate the shipping costs.

PHOTOS

To finish your product page, simply supply photos of the item. Go for large photos of 2,000 x 2,000 pixels if possible. This way, your visitors can zoom in and discover the little details of each item you have for sale.

Note: The quality of your photos is an important factor in the success of your store. Make sure that you use great photos that really show off your products and their features. To illustrate my point, here are a few mistakes you should be sure to avoid: 

• A t-shirt on a hanger (try to use a photo where you can see someone wearing it and you can see its shape clearly) 
• Spices in a pile on the table (you’re likely offering your spices in a jar or another packet, so show your packaging, as this is also what your customers will be ordering) 
• A blurry photo 
• A photo that’s too small 

To learn how to take high-quality product photos, be sure to check out our guide on product photography.

Congratulations, you’ve finished your product page and are ready to launch your store!

Note: Make use of the different selections to go even further with your product offerings. You can: 

• Create different varieties of your product (size, color, etc.) 
• Add customizable options (engravings, photo prints…) 
• Adjust your ranking on search engines or buying guides 
• Add various advanced options such as cross-selling

5. Configure your payment settings

Estimated time: 10 minutes

WiziShop offers around 50 different payment solutions. They are already pre-installed, and you just need to activate them in a couple of clicks! 

To get started, I recommend that you include at least one credit card method. If you don't already have a distance selling contract with your bank, choose a method like Stripe or PayPal, with no installation or subscription cost.

You can create your account directly on these pages: 

https://dashboard.stripe.com/register

https://www.paypal.com/ca/for-you/account/create-account?

For example, say that you want to allow Stripe payments on your website. Once you’ve created your account, add Stripe. Follow the prompts to retrieve the correct information and configure Stripe.

After this, I suggest you run a test on your store. Put an item in your shopping cart and simulate an order. 

If you land on the payment page, you’re good to go! Stripe has been set up correctly!

Now all you need to do is change the visibility status of Stripe to “Active (visible to all).”

In addition, you can also offer another way to pay: bank transfer. 

Head to General Preferences > Manage my payment options. Find and click on the “Bank transfer” button at the bottom of the page. A very simple form will appear for you to fill out. To complete the fields, use your bank account information.

If you want to put yourself in the shoes of a customer and test the ordering process from start to finish, add the payment method by check and use that method to order from your store. This allows you to see the shopping experience from your customers’ point of view. 

So now you’ve customized the look of your store, added a product, and established delivery and payment methods. You’re nearly there! 

One last important step and you can launch your store! 

6. Order your domain name  

Estimated time: 10 minutes

The domain name is the URL address of your store (for example: www.myonlinestore.com).

So let’s get to it. First of all, you need to purchase your domain name. To do this, click on General Preferences > Domain Names > Order a domain name.

In the search bar, type in the domain name that you’d like to buy then hit “Search.” 

You’ll find yourself in one of two situations: 

1. The domain name isn’t available. Repeat the search, trying some variations: myonlinestore.com | my-online-store.com | my-shop-online.com 
2. The domain name is available. All you need to do is click the Order button. 

Finally, order your domain name by entering your payment details. The system will guide you through the process.

Note: It’s usually a good idea to buy at least two domain names, each with a different extension. For example, www.myonlinestore.com and www.myonlinestore.fr. This will allow you to protect and manage your brand efficiently. 

Consider the different extensions “.shop” and “.store.” 

Once you’ve ordered your domain name, it’ll be connected to your WiziShop store automatically in just a few minutes with the SSL security certificate. You now have a guaranteed online presence! 

If you already have a domain name and you want to connect it to your WiziShop store, the process is super simple and quick. Everything is explained in the Help Center.

7. You’re ready! But before you get going… 

I can feel your excitement. You’re so close! You’ve just created your online store from scratch. 

Remember my advice from the beginning. Avoid aiming for perfection from the get-go. Launch your store quickly and improve your website as you go along. 

Before clicking on the button to launch and officially open your online store, I recommend that you double-check a few things. 

• Complete your legal notices and general terms and conditions 
• Customize your homepage 
• Complete a test order on your store  

Return to the homepage of your WiziShop administration area. Now, all you need to do is click on the “Launch your store” button, and you’re ready to go! 

There you have it, you’re officially now an online retailer. 

Let the adventure begin…