How to Create and Set Up an Online Store With 10Web

With 10Web, you can create a fully functional online store using AI. Describe your business, provide a link to an existing store or social media shop, or upload a product list, and 10Web will generate a store with product pages, a shopping cart, checkout, and customer accounts.

This guide explains how to generate your online store, customize its design, configure essential business and checkout settings, and prepare it for launch.

Step 1. Create your online store with AI

You can start building your online store from a written description, an existing website or social media link, or files containing your business and product information.

1. Visit 10web.io, or go to my.10web.io if you already have an account.
2. Enter a description of the online store you want to create in the AI prompt field.
3. Include your store name, the types of products you sell, design preferences, and any important shopping features.
4. Optionally, use the attachment option to upload files or provide a link to an existing store, Instagram shop, or another online source.
5. Submit your request to start the AI planning process.

Example AI prompt:

Create a modern online store for UrbanNest, a business selling stylish home decor, furniture, lighting, and lifestyle accessories. Use a minimalist design with warm beige and white colors, elegant typography, and high-quality product imagery.

Include a homepage, product catalog, product detail pages, shopping cart, checkout, customer accounts, and contact page. Organize products into Furniture, Lighting, Home Decor, and Accessories. Add realistic sample products with descriptions, prices, images, and color or size variations. Include product search, filtering, discount codes, and related products.

The store should be mobile-friendly, easy to navigate, and ready for me to configure payments, shipping, and taxes.

Answer the AI Planner's questions

After you submit your prompt, the AI Planner may ask additional questions to understand your business and configure the initial store settings.

Depending on your request, these questions may include:

• Store location: Which country and region your business is based in. This helps determine the initial currency, delivery area, and tax settings.
• Product information: What products you sell and whether you have an existing catalog.
• Store preferences: Details about your business or shopping experience that were not included in your original prompt.

For example, when creating a store in the United States, the AI Planner may ask which state your business is registered in.

1. Read each question and select the appropriate answer or enter your own.
2. Click Next to continue through the questions.
3. Provide any additional details requested by the AI Planner.

Review and approve your store plan

Once the AI Planner has collected the required information, it prepares a store plan based on your answers.

The plan may include your store's purpose, website structure, sample products, initial pricing, and other business configurations.

1. Review the generated plan, including the store description, products, and initial settings.
2. If you want to change something, enter your instructions in the AI chat. For example: "Add a Kitchen Accessories category and use a more colorful design for the homepage."
3. Review the updated plan.
4. When everything looks correct, click Approve & start generation.

10Web will begin generating your online store according to the approved plan.

Step 2. Customize your online store

After generation, you can use the 10Web Editor to customize the appearance, content, and layout of your store. You can make changes using AI prompts or edit individual elements manually with visual or code editor. 

Customize your store with AI

Use the AI chat in the 10Web Editor to describe the changes you want to make.

Example prompts:

"Change the homepage color palette to beige, cream, and dark brown."

"Add a featured products section below the homepage hero banner."

"Make the product cards more compact and display three products per row on desktop."

"Add a promotional banner offering free shipping on orders over $100."

"Create a Frequently Asked Questions page covering delivery, returns, and payments."

Customize your store with the visual and Theme Editors

The 10Web Editor lets you customize individual page elements and manage your store's overall design without writing code. You can use the visual editor for specific changes or the Theme Editor to maintain a consistent appearance across your store.

Edit individual elements

Use the visual editor to customize text, images, buttons, links, and other elements directly on your website.

1. Open your online store in the 10Web Editor.
2. Click Edit in the top toolbar.
3. Select the element you want to modify.
4. Use the left editing panel to adjust its available settings, such as images, links, colors, and appearance.
5. Review your changes directly in the website preview.

You can also select an element and use the AI prompt field to request changes instead of adjusting its settings manually.

Customize your store's theme

The Theme Editor lets you manage your store's overall visual identity, including its colors, fonts, corner styles, and shadows.

1. Open your online store in the 10Web Editor.
2. Click the palette icon in the top toolbar to open the Theme Editor.
3. Use the available settings to customize your store's appearance:
   • Colors: Adjust the color palette used throughout your website.
   • Fonts: Choose the typography used for your store's content.
   • Radius: Select corner styles, such as None, Small, Medium, or Large.
   • Shadow: Choose shadow styles, including preset options and custom shadows.
4. Review the updated design in the website preview.

Manage page sections

You can also manage the sections that make up each page of your store.

1. Open the Sections panel in the 10Web Editor.
2. Review the section thumbnails to see the structure of the current page.
3. Select a section to navigate to it and make changes.
4. Click the + icon to add a new section.
5. Use the available section controls to manage existing sections.

Edit your store's code

For more advanced customization, the 10Web Editor includes a built-in Code mode where you can view and edit your store's source code directly. This gives you greater control over your store's design, components, pages, and functionality.

To access the Code Editor:

1. Open your online store in the 10Web Editor.
2. Click Code in the top toolbar.
3. Use the file explorer on the left to browse your store's files and folders.
4. Select a file to open it in the code editing area.
5. Make the necessary changes to your code and review the results in the website preview.

The Code Editor provides access to files used to build your storefront, including:

• Pages: Edit the code for individual pages, such as Home, Shop, Product, Cart, Checkout, and My Account.
• Components: Modify reusable elements used throughout your store.
• Styles: Edit CSS files to customize colors, typography, layouts, and other design properties.
• Integrations and supporting files: Explore the files responsible for connecting and supporting different parts of your storefront.

For example, you can open a page's .tsx file to modify its React components or edit a .css file to adjust its styling.

Step 3. Access your store management dashboard

Your store's appearance is managed in the 10Web Editor, while products, orders, customers, discounts, reports, and store settings are managed from the WordPress dashboard.

You can access the WordPress dashboard in two ways:

• From the 10Web dashboard, click the W icon on your website thumbnail.
• From the 10Web Editor, click the W icon next to the Publish/Save button.

Once inside WordPress, navigate to Store section from left side menu. 

Step 4. Configure your store's general settings

Although AI generates your store's initial configuration, you should review the business information, currency, regional preferences, and other settings before accepting orders.

From the WordPress dashboard, navigate to Store → Settings → General.

Set up your store identity

Under Store identity, configure the information customers see on your storefront, in emails, and on invoices.

1. Enter your Store name. If left empty, the website title is used.
2. Enter your Contact email. If left empty, the site administrator's email address is used.
3. Add your business Phone number.
4. Click Choose logo to upload or select your store logo. This logo is used on invoices and in emails.

Configure your trading address

Under Trading address, enter the location from which your business operates.

Complete the available fields:

• Street address and Address line 2
• Town or city
• State, region, or county
• Postcode
• Country

The trading address is used as the tax base, the default pickup address, and a fallback for invoices.

Add your legal business details

Under Legal details, enter the official business information used on invoices and credit notes.

1. Enter your Registered business name, if it differs from your store name.
2. Enter your Tax registration number, such as your VAT, GST, or sales-tax registration number, where applicable.
3. Complete your legal business address. If it is the same as the trading address, you can leave the separate legal address empty.

Important:

Make sure your legal business details are complete and accurate before accepting orders. These details are used on invoices and credit notes. Missing information may result in documents that do not meet applicable legal requirements.

Configure your region, language, and units

Under Region and units, review the following settings:

• Store country: The country where your business operates. This also determines the initial currency and number formatting.
• Store language: The language used for store-generated content. If left empty, the site language is used.
• Timezone and dates: The timezone and date format used for orders, reports, and other store activity. Use the provided link to change these settings.
• Weight unit: Select the unit used for product weights, such as pounds or kilograms.
• Dimension unit: Select the unit used for product dimensions, such as inches or centimeters.

Configure currency and number formatting

Under Currency and number formatting, choose how product prices and order totals appear throughout your store.

• Currency: Select the currency used for purchases, such as USD ($).
• Symbol position: Choose whether the currency symbol appears before or after the amount.
• Thousand separator: Define the character separating thousands.
• Decimal separator: Define the character separating decimal values.
• Decimal places: Choose how many decimal digits appear in prices.

Configure product image sizes

Under Product image sizes, you can define the image widths used for different parts of your store.

• Thumbnail width: Used for smaller product images.
• Catalogue width: Used for images in product listings.
• Product page width: Used for images on individual product pages.

Enter the preferred widths in pixels. These settings affect product images uploaded after the changes are saved.

When finished configuring the General tab, click Save settings.

Step 5. Configure the shopping cart and checkout

Before accepting orders, review how customers add products to their cart, enter their details, and complete checkout.

Navigate to Store → Settings → Checkout.

Configure customer checkout options

Under Who may buy, you can configure how customers access checkout.

• Guest checkout: Enable Let people buy without an account to allow customers to complete purchases without signing in.
• Order lookup: Enable Let guests find their order with the order number and their email address to allow guest customers to look up their purchases.

Customer registration, login, passwords, and email verification are managed through the 10Web User Management plugin.

Configure checkout fields

Under Fields, choose which customer details are collected during checkout.

• Phone number: Choose whether the field is required, optional, or hidden.
• Optional address fields: Require the company name or second address line when necessary.
• Order note: Enable or disable the option for customers to add special instructions to their orders.
• Business tax number: Allow business customers to provide a VAT or tax number for their invoice.
• Guest tax numbers: Choose whether a connected tax engine can act on tax numbers provided by guest customers.

These settings help you collect the information needed for delivery, invoicing, and processing purchases.

Configure terms and policy pages

Under Terms and policies, connect your store's legal and customer information pages.

You can select existing pages for:

• Terms page: The store's terms and conditions.
• Privacy page: Information about how customer data is collected and used.
• Refund policy page: Your return and refund conditions.
• Delivery policy page: Shipping destinations, delivery conditions, and related information.

To configure these pages:

1. Create the required policy pages if they do not already exist. You can create them through WordPress → Pages or request them through the 10Web AI chat.
2. Return to Store → Settings → Checkout.
3. Select the corresponding page from each dropdown.
4. Optionally, enable The shopper must accept the terms before paying.
5. Configure the EU right to cancel disclosure according to your store's requirements.
6. Click Save settings.

When terms acceptance is enabled, the store records the time and version of the accepted terms with the order.

Important:

Policy page settings link existing pages; they do not automatically create them. Make sure each required page has been created and contains accurate information before selecting it in the store settings.

Configure checkout timers

Under Timers, you can control how long unpaid orders reserve stock and when incomplete checkouts are considered abandoned.

• Hold stock for: The number of minutes an unpaid order reserves its products. When the configured period expires, the unpaid order is canceled and its reserved stock is released.
• Count a checkout abandoned after: The number of minutes without activity before an incomplete checkout appears in the abandoned-checkout list. This setting does not cancel the checkout or its associated order.

For example, you can reserve stock for 15 minutes and count a checkout as abandoned after 30 minutes of inactivity.

Customize the shopping cart

Under Cart, configure how customers interact with their cart while shopping.

• Cart style: Choose how the cart appears, such as a slide-out panel, mini cart, or cart page.
• Panel side: If using a slide-out panel, choose whether it opens from the left or right.
• After adding to the cart: Choose whether the cart opens automatically, the customer stays on the product page, or the customer goes to the cart page.
• Cross-sells: Enable suggestions for related products in the cart.
• Delivery estimate: Allow customers to estimate delivery costs in the cart after providing their location.

Click Save settings when finished.

Step 6. Review your store before publishing

Once your store has been generated and its initial settings configured, review the shopping experience before making it available to customers.

1. Open your store in the 10Web Editor and preview the homepage, product catalog, and individual product pages.
2. Check product names, descriptions, images, prices, and category links.
3. Verify that customers can open product pages, select available options, and add products to the cart.
4. Review the cart layout and checkout fields.
5. Confirm your store name, contact information, business address, currency, and legal details.
6. Make sure your policy pages are created and linked correctly.
7. Open Store → Dashboard and resolve any configuration warnings.
8. Configure and test your payment provider, shipping options, and tax settings before accepting real purchases.
9. Return to the 10Web Editor and click Publish when you are ready to make the website available.

What's next?

Your online store has been created, and you now know how to customize its design, manage general settings, and configure the initial shopping experience.

Continue setting up your store with these guides:

• How to Add and Manage Products and Inventory in Your Online Store: Learn how to add products, create variations, organize your catalog, and manage stock.
• How to Set Up Payments, Shipping, and Taxes for Your Online Store: Connect payment providers, configure delivery options, and set up tax calculations.
• How to Manage Orders, Fulfillment, and Refunds in Your Online Store: Process purchases, fulfill orders, and manage refunds.
• How to Manage Customers, Discounts, and Sales Performance in Your Online Store: Manage customers, create promotions, and monitor your store's performance.