How To Make An Ecommerce Website In 2024 (Easy Guide)

Posted on November 16, 2024 by Leave a Comment

Editorial Note: We may earn a commission when you visit links on our website.
How To Make An Ecommerce Website In 2024 (Easy Guide)
Blog / Business / How To Make An Ecommerce Website In 2024 (Easy Guide)
Play Button

Do you want to convert your struggling physical store to an online business? An online business can tap into a broader audience and improve sales. Many users today desire to expand a traditional business online or start a new venture in the digital marketplace. This guide provides a step-by-step approach to creating a successful eCommerce website that boosts sales and enhances customer interaction. Weโ€™ll cover how to generate a complete online store in minutes with Divi and WooCommerce, how to design it to fit your brand, and much more.

Why Do You Need to Build an Ecommerce Website?

Building an eCommerce website has become essential in todayโ€™s business world for several reasons, especially as shopping habits shift online. Here are some key reasons why itโ€™s important to build one:

  • Expanded Reach: An eCommerce site allows your business to reach customers beyond your local area. You can sell to people anywhere, anytimeโ€”24/7, no physical boundaries.
  • Convenience for Customers: People love the ease of shopping online. Whether theyโ€™re using a phone, tablet, or computer, customers can shop at their convenience. With an eCommerce site, you make the buying process smooth and accessible.
  • Cost Efficiency: Running an eCommerce site can be more cost-effective than running a brick-and-mortar store. You can cut down on overhead costs like rent, utilities, and, in some cases, staff.
  • Data and Analytics: eCommerce websites offer rich data that can help you understand your customers better. You can track their shopping habits, see what products perform best, and use that data to improve marketing strategies and customer experience.

Letโ€™s start building, as you know, the reasons for making an eCommerce website!

How to Build an Ecommerce Website in 7 Steps

Creating your own eCommerce website with WordPress becomes straightforward when you follow the right steps and use the appropriate tools. Whether a novice or an experienced developer, you can effortlessly launch a visually appealing online store. Hereโ€™s how to do it:

1. Get Domain and WordPress Hosting

Before building your site, youโ€™ll need a few essentials readyโ€”your domain, hosting service, and WordPress setup.

If youโ€™re still looking for a hosting provider, SiteGround offers a convenient solution by managing all these aspects.

Domain

Your domain (or domain name) is the web address for your site (e.g., elegantthemes.com), and itโ€™s crucial to pick one that reflects your brand and is easy to remember. Ideally, your domain should give visitors an idea of your eCommerce business.

After selecting your domain name, search for a reliable domain registrar to register it. Namecheap is a good option, or you can get a discounted domain directly through SiteGround if you choose them for hosting.

Visit NameCheap

If you own a domain, you can easily connect it to your hosting provider by updating the nameservers.

WordPress Hosting

Your website needs a reliable home online, where hosting comes into play. Since we will be using WordPress, choosing a high-quality WordPress hosting provider is important. A good host will make managing your site simple while ensuring it performs well in speed and security.

SiteGround offers WordPress hosting plans starting at $3.99 per month, providing a budget-friendly option. Setting up WordPress hosting with SiteGround is straightforward.

Watch the video below to learn how to set up your domain and hosting.

Install WordPress

Many WordPress hosting providers, such as SiteGround, offer a one-click WordPress installation during the setup process.

If this option isnโ€™t available, simply head to your hosting providerโ€™s dashboard. Select the WordPress installer and follow the steps provided. Once the installation is finished, youโ€™ll receive a confirmation email with your login details. To access your site, go to yourwebsite.com/wp-admin and log in using the credentials you created during installation.

2. Install the Divi Theme

Building your eCommerce website with Divi has never been easier. This versatile theme empowers you to create visually stunning and fully customizable websites without any coding experience. Divi is well-known for its robust design features and offers a wide array of pre-made layouts tailored for different types of eCommerce websites.

divi nonprofit theme

Divi connects all the dots for the eCommerce websites:

  • It easily enables you to design and customize your online store using a visual drag-and-drop interface, eliminating the need for coding.
  • Divi offers 211 pre-designed layouts and 30 layout packs specifically for eCommerce, allowing you to create product pages, checkout pages, and more with minimal effort.
  • Diviโ€™s WooCommerce modules allow you to display, filter, and customize your products. Moreover, you can create unique product page layouts with drag-and-drop modules, showing product details, reviews, images, and more.
  • You can access the marketplace for Divi extensions to integrate multiple payment gateways, such as PayPal and Stripe.

Download and Install Divi

You can purchase Divi from Elegant Themes with an annual license for $89 or a lifetime license for $249. After purchasing, download the theme and install it on your WordPress site by following these steps:

  1. Navigate to Appearance > Themes.
  2. Click on Add New and then Upload Theme.
  3. Select the Divi .zip file you downloaded and click Install Now.
  4. After installation, click Activate to set Divi as your active theme.

Watch the video below for more information.

With the setup complete, youโ€™re ready to start building. If youโ€™d like to learn more before diving in, check out our tutorial on using the Divi Builder.

Get Started with Divi

3. Build Your Ecommerce Website

After installing the Divi Theme on WordPress, you can build your eCommerce site. No need to worryโ€”Divi Quick Sites can automatically create your store, so you wonโ€™t have to start from scratch!

Launch Onboarding Wizard

After activating the Divi Theme in WordPress, youโ€™ll gain access to Diviโ€™s onboarding wizard, which will walk you through the setup process. Simply click the button to log in and activate your Divi license.

login to activate your divi license

After logging in, youโ€™ll arrive at the main Divi Dashboard. Here, you can manage your site, access documentation, get support, and start building a new site with Divi Quick Sites. To begin, simply click โ€˜Generate A New Siteโ€™ from the Divi Dashboard.

A screenshot of Divi's option to generate a new site on dashboard

Get Quick Sites with Divi AI

Generate Your Site with an Ecommerce Starter Site (or with AI)

Next, you can choose to build your new eCommerce website using either a pre-made starter site or Diviโ€™s AI website builder. Divi offers a stunning online store starter site template, so click โ€˜Select a Website Templateโ€™ to get started.

select starter site

On your screen, you will see several Starter site templates. Choose the online store starter site. If youโ€™re concerned that the template doesnโ€™t align with your brandโ€™s colors, fonts, or images, donโ€™t worry; these can be customized later.

divi online starter site

Divi Quick Sites will prompt you to provide details about your new website and the pages you want to include.

  1. Fill out the form with your Site Name, Slogan, and Logo.
  2. Upload your logo to add it to your site (if available) automatically.
  3. Select the pages you want from the Starter Site and, if necessary, add custom pages to initiate the process.
  4. Once ready, click the โ€˜Generate & Publish My Websiteโ€™ button.

customize online store starter site

NOTE: Selecting the Shop page will automatically install WooCommerce and pre-built pages for your online store (shop, product templates, checkout, etc.). Since youโ€™re building an eCommerce website, including the Shop page to enable product listings and transactions is essential.

After entering your website details, Divi Quick Sites will use your input to generate the website in under two minutes. It will automatically create all necessary elements, including pages, templates, styles, and navigation menus.

Divi AI website generation process

Once your site is ready, a confirmation page will appear with the message โ€˜Your Site is Ready!โ€™

divi your site is ready

You will also see a list of all the pages and theme templates created, along with links to tutorials and documentation to help you begin customizing your new website.

Get Started With Divi

4. Checkout Your New Site

Before we continue with the rest of the process, you can view your live site to explore your brand-new online store design.

Here is a look at all the pages and templates of your site that will be generated automatically, including WooCommerce pages and templates.

Website Pages

online store pages and templates generated with Divi Quick Sites

WooCommerce Shop, Product, Cart, and Checkout Page Templates

online store WooCommerce pages and templates generated with Divi Quick Sites

Get Started With Divi

5. Configure WooCommerce and Add Products

Since WooCommerce has already been installed in the Divi Quick Sites website generation process, we can use the WooCommerce setup wizard to simplify the process.

WooCommerce Setup Wizard

Once activated, WooCommerce automatically prompts you to begin the setup wizard. This is where WooCommerce guides you through the key setup steps for your store. To begin the setup wizard, navigate to the WooCommerce section and select Home.

divi woocommerce

The setup wizard will prompt you to enter details about your store, such as your address and email.

WooCommerce personal details

Choose the industry and product categories that best represent your store.

WooCommerce product store

Next, choose what type of products you plan to include in your store. Some options (Memberships, Bookings, etc.) require installing additional plugins on your site.

NOTE:ย Plugins come in both paid and free versions. Explore our recommended plugins for memberships, bookings, and more to enhance your eCommerce site. For instance, tools like Memberpress or Paid Memberships Pro can help you build a subscription-based store with multiple payment options. Additionally, plugins like Amelia allow you to create a booking site with features such as appointment calendars for visitors to schedule bookings.

WooCommerce type of products

The setup wizard will prompt you with additional questions regarding your store.

WooCommerce business goals

Choose any additional plugins you might need. You can check out Jetpack and MailPoet to determine if they fit your needs. However, if you expect to collect taxes, process credit card payments, or manage shipping, these free plugins could be beneficial.

woo onboarding flow

At this point, you can shift focus towards the additional settings in WooCommerce.

WooCommerce Settings

Setting up an eCommerce store can be challenging, but WooCommerce simplifies the process. Hereโ€™s what you can manage:

  • General settings: Currency, products, and checkout options.
  • Product settings: Item display and inventory management.
  • Shipping settings: Delivery methods and costs.
  • Payment settings: Customer payment options.
  • Account settings: User registrations and privacy controls.
  • Email settings: Store communication preferences.
  • Advanced settings: Custom configurations for your store.

For further assistance, refer to our WooCommerce settings guide, which provides step-by-step instructions for navigating these essential pages.

Add Product Categories

Categories make it easier for customers to find items in your store. For instance, if youโ€™re selling clothing, you might create categories such as Handbags, Chairs, and Tables. Itโ€™s a good idea to set these up before adding products.

To create categories, navigate to WooCommerce > Products in your dashboard and click on Categories. They function similarly to WordPress post categories and tags. Fill in all the required fields for your category before adding them to your store.

woocommerce product categories

If there are any placeholder categories, you can either edit or delete them. When selecting categories and tags, consider the most intuitive and easy for your customers to understand.

Add Products to Your WordPress eCommerce Store

You can add products individually or import them simultaneously using a CSV file.

To add products individually, navigate to Products > Add New.

woocommerce add products

Input the product name.

woocommerce product name

Provide a product description and upload the product image.

woocommerce product description image

First, choose the type of product you want to create. Then, determine the price for your item and adjust the inventory levels as needed. You can also specify shipping details for individual products. You can assign categories and tags to your product on the right sidebar.

woocommerce product price settings

Once youโ€™re satisfied, click Publish. You can add as many products to your store as you like.

Manage your product inventory with WooCommerce, and check out our comprehensive guide on setting up shipping in WooCommerce.

Set Up Payment and Shipping

Providing diverse payment options is essential to keeping customers satisfied. WooCommerce supports multiple gateways, such as PayPal, Stripe, and bank transfers. However, when combined with Diviโ€™s builder and Woo checkout module, you can fully customize your checkout page design.

WooCommerce settings let you select the payment methods that best suit your business. Based on your preferences, enable payment methods such as direct bank transfer, cash on delivery, or check payments.

woocommerce settings payment

WooCommerceโ€™s flexibility ensures that your shipping options are tailored to meet customer expectations. Here are the steps involved in finalizing your shipping details for your store:

  1. Go to WooCommerce > Settings > Shipping
  2. Define zones based on geographic regions
  3. Assign specific shipping methods to each zone, such as flat rate, free shipping, or local pickup.

woocommerce shipping methods

6. Design and Customize Your Ecommerce Website

Now that your Starter Site is live, itโ€™s time to align it with your brand. Rather than spending hours adjusting each element individually, you can quickly and efficiently customize your site using a faster and more effective method.

Design WooCommerce Pages

WooCommerce provides a set of essential pages for your store, which can be easily customized with Divi. These include:

  1. The Shop page, where all your products are displayed
  2. The Cart page, which shows the contents of your shopping cart
  3. The Checkout page, where customers can complete their purchases
  4. The My Account page for managing user accounts
  5. Additional pages, such as those for product categories and tags

With Divi, you can use the Divi Builder to edit each page directly or create custom templates for these pages using the Theme Builder.

divi theme builder woocommerce pages

The Divi Theme Builder is especially helpful for creating templates for product pages, category pages, and other design elements across your site.

For instance, you can download a free product page template from the blog and apply it to the theme builder, giving all your products a consistent, attractive layout. Alternatively, you can design your product page template from the ground up.

For additional support, refer to the guides on building a cart page, configuring a checkout page, and using Divi with WooCommerce pages.

Get Started With Divi

Edit Divi Starter Site Theme Builder Templates

Each Divi Starter Site includes Theme Builder templates that manage the layout of key sections of your website, such as headers, footers, and blog posts. After setting up your site, you can view these templates by visiting Divi > Theme Builder.

divi theme builder templates

You can modify any Starter Siteโ€™s templates by selecting the pencil icon next to the global header, custom body, or global footer sections. Any changes made to the header or footer will apply across all templates. To see this in action, click the pencil icon for the Default Website Template.

Once you open the template, you can change the headerโ€™s background color, insert a logo, and adjust fonts and colors using the Visual Builderโ€™s menu settings. You can also add, remove, and style Divi modules as you would on a web page.

ecommerce global header

The advantage of using templates is that any adjustments to the Header (or other Theme Builder templates) will be automatically reflected throughout your entire website.

Customize Global Fonts and Colors

Personalizing your Starter Site to align with your brand is simple. Thereโ€™s no need to adjust each color or font for every element on every page. The site comes with pre-configured Global colors and fonts. You can modify these Global settings while editing elements in the Divi Builder, and any updates will automatically apply across the entire site.

To modify global fonts and colors on the home page of the new starter site, click โ€œEnable Visual Builderโ€ from the front end.

ecommerce enable visual builder

Click on the module that you want to customize. We will customize a text module on our homepage to prioritize the global fonts first. Click on the wheel icon to open the tabs for modification.

divi ecommerce text settings

The starter site you created includes pre-set global fonts that can be kept or replaced with your brand-specific fonts. You can easily customize the global fonts using the Divi Builder. Navigate to the Design tab, scroll to the Text section, and choose Font.

divi ecommerce global fonts

You can also upload your own fonts or select from our library, which includes Google fonts.

We can choose to prioritize the global colors of the same text module, but in our case, we have chosen to customize the global colors of the button module. Youโ€™ll need to modify the Global Colors settings to customize your brand colors. Like Global Fonts, the existing global colors are inherited from the eCommerce starter site.

Click on the wheel icon of the button module to get things started.

divi ecommerce button settings

Scroll down to the Button section and adjust the button text color.

divi ecommerce button text color

Switch to the Global tab from the Saved tab to view the current Global Colors.

divi ecommerce button global colors

To make changes, click on each color and select your preferred option. You can also enter your hex codes for custom colors. In our case, we have changed the text color from white to black.

divi ecommerce button customize colors

In the same way, modify all the colors as needed. To add additional colors, simply click the plus icon next to the last Global Color.

Get Started With Divi

Edit Global Presets

Divi global presets allow you to reuse styles across different Divi modules. Think of them as style templates that can be applied to buttons, text modules, blurbs, and other elements. By creating a global preset for a module, like a button, you can set it as the default style or create different presets for various buttons on your site. This ensures consistency when applying your preferred styles, whether for buttons, text, or other frequently used modules. Divi Starter Sites include presets for all modules used in their templates, so you typically donโ€™t need to create new ones. However, you can easily adjust these existing presets to align with your brandโ€™s styling.

As in the case of editing the global fonts and colors, start by clicking โ€œEnable Visual Builderโ€ from the front end.

divi ecommerce enable visual builder

As noted earlier, each Divi Starter Site has its own presets. For instance, to modify an existing button preset on a Starter Site, click the dropdown arrow next to the preset section under the moduleโ€™s header. In our case, we are modifying a button in the deal section of our eCommerce starter site.

divi ecommerce button dropdown menu

Next, find the module preset, such as โ€œOnline Store Tertiary Light,โ€ in our case. Hover over the preset to display its menu, then click the pencil icon to make edits.

divi ecommerce button pencil icon

When modifying Divi presets, the moduleโ€™s header changes from purple to grey, signaling that design adjustments are being made.

divi ecommerce black button module

Feel free to apply any design modifications you prefer, then save the module by selecting the green checkmark. In this case, we have changed the colors of the buttons from orange to black.

divi ecommerce button color change

A confirmation dialog box will pop up at the bottom, asking if youโ€™d like to proceed with changes to the preset. Click โ€˜Yesโ€™ to save your adjustments.

divi ecommerce button dialogue box

The moduleโ€™s header will revert to purple. Press the green save button one last time to finalize the preset.

divi ecommerce final changes

Get Started With Divi

7. Boost Your eCommerce Site with Plugins and Integrations

Focusing on email sign-ups and social media sharing can help your eCommerce website attract more traffic and increase sales. Divi offers built-in optimization tools and works smoothly with popular WordPress plugins for social mediaย and email sign-ups. Here are a few tools to help you begin.

Email Marketing

Growing an email list is crucial for staying connected with your audience and informing them about your eCommerce storeโ€™s updates. The Bloom plugin by Elegant Themes is an excellent tool for designing eye-catching email opt-in forms. After installing the plugin, you can customize forms to match your siteโ€™s style and requirements. Bloom also integrates with several email marketing platforms, allowing you to manage your list and automate communications efficiently.

divi bloom plugin

Get Bloom

Social

You can easily add social sharing buttons to your site with the Monarch plugin by Elegant Themes. After activation, set up Monarch to position these buttons in prominent spots like the header, footer, or within your posts. This encourages visitors to share your content, increasing your eCommerce siteโ€™s presence on social media.

divi monarch plugin

Get Monarch

Products in the Divi Marketplace

Divi Marketplace

Divi offers a vibrant marketplace of plugins, extensions, and child themes specifically designed to enhance your Divi-powered eCommerce website. You can purchase these and integrate them into your website.

For example, Carousel for Divi is a popular extension display featuring best-selling or on-sale products in a visually appealing way. Itโ€™s perfect for driving attention to specific items and boosting sales. You can buy it for $3.19 from the marketplace. To test it out, you can review its screenshots and live demos.

Visit Divi Marketplace

Essential WordPress Plugins

Every WordPress site can greatly benefit from certain essential plugins. Here are a few examples of highly recommended plugins that you can use with WordPress:

Conclusion

In 2024, launching a successful eCommerce site requires more than just functionality; itโ€™s about creating a seamless, engaging experience for your customers. Divi empowers you to craft a visually captivating, user-friendly store that reflects your brandโ€™s identity while delivering top-tier performance. By integrating smart plugins and leveraging the powerful customization options within Divi, your site becomes more than just a storefront.

Want to build your first eCommerce website? Get started with Divi and boost your eCommerce business. You can explore our curated table of plugins and tools that may prove valuable for your eCommerce website.

Products MentionedStarting PriceDescription
1Siteground$2.99 per monthHosting Provider and Domain RegistrarVisit
2Divi$89 per yearTheme and Page BuilderVisit
3Rank Math$78.96 per yearSEO PluginVisit
4Bloom$89 per year (Available with an Elegant Themes membership)Email Optin PluginVisit
5Monarch$89 per yearSocial Media PluginVisit
6Carousel for Divi$3.19Divi ExtensionVisit
Top Picks
Product Image

Get Started With Divi!

Explore plans, pricing and features. Click here to get started. ๐Ÿ‘‡

Visit Divi

Get Started With Divi!

Explore plans, pricing and features here. ๐Ÿ‘‡

Explore Divi
Premade Layouts

Check Out These Related Posts

WordPress Security Guide for Busy Freelancers (2024)

WordPress Security Guide for Busy Freelancers (2024)

Posted on November 22, 2024 in WordPress

Though WordPress is built to be secure, it’s not entirely safe. It requires regular maintenance, and your responsibility increases even more when you manage your clients’ WordPress. This WordPress security guide lists effective set-it-and-forget-it ways for freelancers and agencies to...

View Full Post
How To Design Websites In 2024 (Tips & Tricks)

How To Design Websites In 2024 (Tips & Tricks)

Posted on November 21, 2024 in Design

Learning how to design websites that work isn’t only about having an eye for design or chasing trends. It comes down to essential principles that the best-performing sites share. Get these right, and everything else falls into place. In this post, we’ll try to help you understand the...

View Full Post

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

๐Ÿ‘‹ It's The Divi
Cyber Monday Sale!
Get The Deal
Before It's Gone!
Get Started With Divi