10Web AI builder tutorial: Step-by-step tutorial for beginners

10Web’s AI builder helps you build a WordPress website using AI. And with a few extra steps you can turn that AI-built website into an online store.

Curious to learn how? Read the rest of this article to find out!

I’ll teach you how to build an online store with 10Web AI website builder. I’ll include detailed instructions on setting up the store and give you helpful tips along the way to help you start strong.

First, let’s quickly get you up to speed with what 10Web is and how it works.

What is 10Web and how does it work?

10Web is a hosting solution that provides an AI-powered WordPress platform. With the help of its AI builder, you can create a WordPress website in a matter of minutes.

Here’s a high-level overview of how 10Web’s AI Builder works:

• You create an account on 10Web and answer a few questions from 10Web’s AI Builder.
• The AI generates an initial website with tailored content and images based on your answers.
• You sign up for a plan and edit the website using the 10Web drag and drop builder.
• Once your site is ready, you point your domain to your 10Web site and go live.

That’s how the basic process of building a website with AI works. If you’re building an online store, there are a few most steps, such as installing WooCommerce and setting up products, payments, shipping, taxes, etc.

Don’t worry, I’ll explain how to do all of that. Let’s get into it.

How to build an online store with 10Web: A step-by-step guide

Before you begin, make sure you have a domain name, list of products with images, and branding elements like a logo and favicon for your store. Then, follow these steps to set up your AI online store with 10Web.

1. Sign up for a 10Web account.

Click the link below to create a new 10Web account.

Create a website 10x faster with 10Web

Try 10Web for free

You don’t need to provide your credit card details to sign up. Use your Google account or enter your email address, first name, and last name and choose Get Started For Free.

Next, you will be prompted to share some details about yourself. This selection is only for their information, so choose E-commerce or any other option that suits you.

After that, you will need to choose one of the following options:

• Create a new website with AI.
• Convert a website to WordPress with AI.
• Migrate WP website to 10Web hosting.
• Optimize a WordPress website.

Select Create a new website with AI.

2. Answer questions about your website

Now, it’s time to answer questions about your online store. This will help the AI customize your store according to your specific requirements

First, select your business type from the dropdown menu. For instance, I’ve selected Fashion & Clothing store.

Choose one of the six styles available for your website template and select Next.

Based on your selection, 10Web’s AI builder will provide you with three templates to choose from. Select the one that aligns with your vision.

Then, follow 10Web’s guided AI website creation process to build your website.

First, enter your company name and describe what your business does in a few words. A detailed description will help the AI generate a more relevant website design for your business.

Next, add three features or services you provide on your online store.

For example, I’ve added “fast and convenient online shopping,” “trendsetting fashion collection,” and “personalized styling assistance.”

After that, add your company email address, phone number, and address. This is optional. You can skip it if you like. 

Finally, set a tone of voice of content, for example formal or informal. This will help 10Web’s AI to write content using the correct tone for your brand.

After that, wait for 10Web’s AI website builder to work its magic.

3. Preview and edit your website

10Web’s AI builder takes a few minutes to generate your AI website. Once it’s done, a popup will appear on your screen. Select Preview & Edit.

Congratulations! You’ve successfully created an online store using 10Web’s AI Builder!

As you can see, 10Web’s AI has created a basic online store with four pages: home, services, about, and contact.

Instead of having a separate product page, the AI has included a service page, which may or may not be useful for you. So, you’ll need to customize and edit things according to your business needs before making it live.

Now, let’s check out 10Web’s drag and drop builder that will help you edit the pages.

Select the Edit option located at the bottom right of the page to launch the 10Web editor tool.

You’ll find basic elements to edit the existing design and create new ones.

10Web’s AI builder is a collection of widgets that extend the capabilities of one of the most popular WordPress page builders, Elementor. If you’ve used Elementor before, you’ll feel right at home!

Now, this is as far as you can get without subscribing to 10Web.

When you click on any element, a pop-up from 10Web will appear, offering you a free trial of the AI Builder Pro for seven days.

At this point, you can choose to continue with a free trial or not.

If you think the AI builder has helped you speed up the process of designing a website from scratch, select Try 10Web Pro for 7 days to start editing your store.

4. Sign up for a free trial

After that, you’ll be directed to a dashboard where you’ll have the option to choose one of the following plans:

• Personal: $20 monthly or $10 yearly to host one website.
• Agency: $85 monthly or $60 yearly to host 20 websites.

Enter your credit card or PayPal details to proceed.

Don’t worry, you won’t be charged until the free trial period expires and you can cancel your plan from the 10Web dashboard yourself at any time.

Once you choose a paid plan, select Proceed. After that, 10Web will take some time to finalize your website and set up the WordPress backend.

5. Edit the AI website

Once your website is ready, you’ll see a new popup.

Select Edit Your Website on the popup to begin customizing the artificial intelligence generated website.

You’ll be redirected to your website, where you can start using 10Web’s drag and drop editor.

If you haven’t used a drag-and-drop builder before, don’t worry! Although it may seem like there are many widgets in there, they are actually ready-made “blocks” to help you create beautiful designs easily.

Here’s a breakdown of the left side menu panel:

• Layout: These are general containers or “boxes” that help you add designs and text.
• Basic: This section includes widgets such as heading, image, button, and icon.
• General: This section has more advanced widgets like icon box, gallery, progress bar, and tabs.
• Premium widgets by 10Web: This section has widgets created by 10Web like price list, countdown, testimonial carousel, and pricing table. 
• WordPress: This section offers widgets to add links to standard WordPress components like Pages and Recent Posts Tag Cloud.

Use any of these elements by simply dragging them from the left hand panel and placing them on the page. Then, click on the widgets to edit them.

6. Set up basic store pages

Now it’s time to create store pages to add content to your site.

The AI builder has already generated home, about us, and contact pages. But you should also create the following basic pages:

1. FAQs.
2. Shipping and returns policy.
3. Terms of service, privacy policy, and cookie policy.
4. Blog page.

Having these pages adds authenticity to your brand.

So, make sure to write compelling content that builds trust and connects with your audience. It’s all about making them feel comfortable and excited to shop with you!

Let’s learn how to add these store pages using 10Web’s AI builder.

To add a new page to your online store, go to the AI Builder tab in your 10Web account dashboard and choose Add Page.

You’ll see the following three options:

• AI recreation.
• Pre-made pages.
• Blank pages.

You can choose any option that you want. I like the AI recreation tool that lets you insert the URL of any website to recreate that page’s design elements.

Let’s use that to design a page for our online store.

Choose AI recreation and insert the page title and URL. After that, the AI builder will take around two to three minutes to recreate the page.

Once it completes, select Preview and Edit to view the page.

You can also watch my YouTube video showing you the step-by-step process to use the AI recreation tool:

As you can see, the results aren’t refined and have some errors like image overlap, but you can fix them using the drag and drop builder. 10Web’s AI builder has done most of the work for you!

7. Install WooCommerce

Next, you’ll need to install WooCommerce To transform your website into an online store.

From the 10Web dashboard, go to the WordPress Plugins tab and choose Add New Plugin at the top right corner.

Choose WordPress Repository and use the search box in the top right corner of the page to search for “WooCommerce”.

Select Install to add the plugin to your WordPress website.

Now, go back to the AI Builder tab in your dashboard. You’ll see the following pages in your store:

• Refund and Returns Policy.
• My account.
• Checkout.
• Cart.
• Shop.

If you click on any of these pages, you’ll notice that unlike the AI-generated pages, there are no design elements or content in them.

Don’t worry, you can add content and design them using 10Web’s AI recreation feature like I showed you before.

8. Add products to your store

Now, it’s time to bring your online store to life by adding products! To do that, we’ll need to create a product page template for our online store.

If you go to your 10Web workspace and open the AI Builder, you’ll see that there is no product page. That’s because 10Web’s AI page builder doesn’t include a product page template.

There are two ways to address this: you can design a product page template from scratch or buy Elementor Pro to access ready-made templates.

To create your own product page template, go to your WordPress dashboard, navigate to the Templates tab, and choose Add New.

Select the Single template type and name it Product page. Use the drag-and-drop builder to create your desired product page layout.

Here’s an example product page layout for your reference:

If you want to speed things up, you can also consider buying Elementor Pro. For $59/year, you’ll get access to pre-designed templates for product and other pages, besides other useful tools from Elementor.

Once you create a product page template, go to your WordPress admin.

Hover over Products in the left panel and choose Add New from the dropdown menu.

Then fill in the following details on the product creation page:

• Product title: Add a descriptive title for your product.
• Description: Write a compelling description that highlights the best features.
• Product data: Select the product type (simple, grouped, affiliate, or variable) based on your offering.You can also select downloadable (digital) or virtual (service), if applicable.
• General: Set the regular and sale price, tax status, and class.
• Inventory: Depending on the type of product you’re selling, digital or physical, set up inventory quantity, SKUs, stock management, backorders, and low stock threshold.
• Shipping: Enter shipping information such as weight, dimensions, and shipping class.
• Linked products: Add upsells and cross-sells in this section.
• Attributes: Include additional descriptive information that customers can use to search for your product, such as material or size.
• Get more options: These are recommended WooCommerce extensions that you can install to add more functionality and improve the overall shopping experience.
• Product short description: Add a short product description.
• Media: Upload high-resolution images, videos, and 3D model files of your product.

Select Preview to see how the product looks on the front end, then choose Publish to make it live on your store.

9. Add plugins to improve store functionality

WooCommerce becomes even more powerful with the help of extensions. And the best part is that there are thousands of plugins available for WooCommerce and WordPress that can do amazing things for your online store.

You can use these plugins to create contact forms, make attractive landing pages, add pricing tables, offer memberships, and much more.

Here are our top picks for must-have WooCommerce plugins for any ecommerce store.

• Store optimization: Google Analytics, Booster.
• Checkout and payment: WooCommerce Checkout Manager, Direct Checkout for WooCommerce
• Shipping: WooCommerce PDF Invoices & Packing Slips, WooCommerce ShipStation Gateway
• Tax and currency: WooCommerce Quaderno, WooCommerce Multilingual
• Product management: WooCommerce Google Feed Manager
• SEO and marketing: Yoast SEO, Omnisend, Livechat

Adding too many plugins often causes performance issues and slows down your website. So do your research and only add reputed plugins that you really need.

If you’re interested in using AI for SEO, consider reading my article on the best AI SEO tools for ecommerce where I share my top 8 recommendations and advice to help you get the best value on your money.

10. Set up your website navigation

Now that you have your products, theme, and store pages all set up, it’s time to focus on your main website menu.

The navigation menu consists of links that guide visitors to different pages on your website. Typically, it’s located at the top of the page or in a sidebar.

Now, you’re probably wondering why you need a navigation menu for your ecommerce store.

Well, a well-organized navigation menu is like having a friendly guide for your visitors. It helps them find things on your store easily, which improves the user experience and drives more sales for your store. 

Plus, it’s not just your visitors who benefit 一 search engines like Google and Bing love a clear site structure too. When your site is easy to navigate, these search engines can crawl and index your content more effectively.

To set up a menu in WordPress, go to Appearance > Menu > Main Menu.  The main menu appears on every page of your site. It’s usually the first place visitors look to find product categories and links to other store pages.

The menu is already created for you and includes pages like home, services, and contact. You can add more pages by checking the boxes next to the desired pages in the Add menu items section on the left side.

Once you’re done, choose Save Menu to update your changes.

11. Customize your store branding

Now that you’ve set up the foundation of your WooCommerce store, it’s time to make it truly yours by customizing its branding.

Your store’s branding, including logo, color scheme, and typography is what sets it apart from the competition and creates a memorable experience for your customers.

The good part is WordPress makes it easy to manage all your brand assets by going to Appearance > Customize in the WordPress admin.

Here’s how you can customize different brand elements to ensure your WooCommerce store is completely on-brand:

1. Logo: Go to the Site Identity section and add logo, site title, site icon, and tagline.
2. Colors: In the Colors section, add text the header text color and background color.
3. Header Image (optional): In the Header image section, upload a PNG or JPEG image that will display at the top of your website to give it a personalized look and feel.
4. Store Notice: Add a message that will be shown site-wide. You can use it to show events or promotions to visitors.
5. Product Catalog: Choose how and what you want to display on your main shop page and product category [ages.
6. Product Images: Choose the aspect ratio of product image thumbnails.
7. Checkout: Customize your checkout page and add your privacy policy that will be shown during checkout.

Finally, choose Publish when you’re done to ensure all changes update across your website.

12. Set up shipping and taxes

Setting up shipping and taxes in WooCommerce is fairly easy. But it’s important that you understand your local laws and regulations to ensure you’re setting it up correctly.

Go to WooCommerce > Settings > Shipping and select Add shipping zone.

WooCommerce supports three main shipping methods: flat rate, free shipping, and local delivery. You can offer one or more of those options to your customers depending on your products and business model.

Once you set up shipping, it’s time to turn your attention to tax rates.

Taxes are a bit more complicated since they vary by country and state. WooCommerce doesn’t provide preconfigured settings for your regions, so you’ll need to set it up manually.

Select the General tab on the Settings page, scroll down, and check the Enable tax rates and calculations box. Then choose Save changes.

You’ll see a Tax tab appear besides the Shipping tab.

The Tax tab has four nested tabs: Tax options, Standard rates, Reduced rate rates, and Zero rate rates.

Go through each of them carefully and configure the settings based on the tax requirements of your country.

Make sure you select Save changes after updating the tax rates.

13. Integrate a payment gateway

Next, you need to integrate a payment gateway to accept payments on your online store.

Go to WooCommerce > Settings > Payments.

You can directly install WooCommerce Payments from here which accepts major credit cards and debit cards.

WooCommerce Payments has a pay-as-you-go fee structure that starts from 2.9% + $0.30 per transaction for U.S.-issued cards.

You can also enable and set up direct bank transfer, check payments, and cash on delivery from here.

If you need more payment options — whether that’s for a local payment gateway or alternate payment methods like cryptocurrencies — you can install a plugin of your choice from the official WordPress repo. You won’t have to pay anything extra for using them!

14. Set up website analytics

The simplest and most effective way to track visitor behavior on your WooCommerce store  is to use Google Analytics 4. You can connect your WooCommerce store to Google Analytics 4 by using the official WooCommerce Google Analytics plugin.

Here’s how you do it:

1. Download the extension from the WordPress plugin repository.
2. Go to Plugins > Add New > Upload and upload the ZIP file.
3. Select Install Now to install the plugin and Activate Plugin to enable it.
4. Go to the Google Analytics website to create a new account.
5. Copy the Tracking ID and navigate to WooCommerce > Settings > Integrations > Google Analytics tab and insert the ID in the Google Analytics Tracking ID field.
6. Enable Ecommerce and Enhanced Ecommerce Reporting in the Ecommerce Settings tab.
7. Set domain name and tracking options in the Google Analytics tab of WordPress backend.

15. Test your store, connect your domain, and go live

We’re on the home stretch now!

We’ve set up the WooCommerce store correctly, and now it’s time to test it to ensure things like your shipping, taxes, and payments are working properly.

WooCommerce provides a test mode for testing payments without messing up your accounting data. Follow these steps to place a test order on your WooCommerce store:

• Go to Payments > Settings in your site’s dashboard.
• Check the Enable test mode box and select Save changes.
• Place a test order on your store and fill out the checkout form.
• Add a test card number from WooCommerce’s documentation. Feel free to test a country-specific card if you like.

You should see the test order in WooCommerce > Orders and Payments > Transactions.

Once you’re done testing, don’t forget to uncheck the Enable test mode box in Payment > Settings.

Now, it’s time to go live! For that, you’ll need to add and point your domain name to 10Web’s servers.

The 10Web AI builder creates an online store on their random, auto generated, free subdomain which reads something like “bursting-narhwal.10-web-site”.

To point the online store to your domain name, go to the Hosting Services tab and choose Point domain.

Add your custom domain by selecting Add Domain on the top right. After that, you need to point your domain to your website.

You can point your domain name to your website in two ways:

1. Update your nameservers: Go to Domains > Manage DNS (for the site you want to point to) and copy the 10Web nameservers. Sign in to your domain registrar , go to manage DNS records, and to replace/add the domain register nameservers with the 10Web nameservers.
2. Add an A record: Go to Hosting Services > Credentials. Copy your IPv4 address from the Datacenter & IP section. Log in to your domain registrar and replace the existing A record with the 10Web IPv4 address.

Once your website is live, promote it across your social media pages and drive traffic with ads. That’s the best way to get your first few orders until your website starts ranking organically.

How to build an online store with 10Web AI builder: Ready to take the next step?

There you go. I’ve explained the exact steps you need to follow to build an online store with 10Web’s AI builder. All you have to do is follow them and you’ll be ready to launch your store in no time.

10Web’s AI builder takes the guesswork out of building an online store with AI. It does most of the work for you and even helps you recreate designs from other websites in minutes. You only need to step in and clean things up to make them publish ready.

Feel free to leave any questions you have in the comments below. I’ll do my best to help you out. And make sure you subscribe to my newsletter so you don’t miss out on the latest ecommerce tips, tricks, and tutorials.