If you’re looking to set up an eCommerce business, then your website is crucial to your success. Your eCommerce website must be properly set up to provide an easy buying process to customers. And, your website must also look good enough to stand out from the immense competition that you will face in the eCommerce industry in 2018. So, you can read this blog to create an eCommerce Website Using WordPress.
But, there’s some good news for you – Now you can easily create your eCommerce website in no time at all using WordPress. WordPress is the most used CMS platform for building all types of websites, including eCommerce websites. Using WordPress is very simple and you can use it to get your eCommerce website up and running.
In today’s tutorial, I will offer you a step-by-step guide to how I built a demo eCommerce website using WordPress. You can view my demo website at https://www.flatsometutorial.com. Using the steps that I outline, you’ll be able to create your own online store and set it up for selling.
You can watch the full video tutorial on my youtube channel here
Purchase hosting and a domain name from SiteGround
The first thing you’ll need to do to create your eCommerce website using WordPress is to purchase a domain name and hosting for your website. I’ve used the domain name ‘www.flatsometutorial.com’ which I purchased off SiteGround.
So, find a domain name of your choice and go on to purchasing hosting for your website. Now, there are several hosting providers in the market and most of them have different offerings. I’ve tried many of them and I’ve finally settled on SiteGround for all of my websites. I tested them against 9 other leading web hosting companies and I found them to be the best.
Image: SiteGround WebsiteGet Hosting
While you can certainly go with any hosting provider, I recommend you to stick with SiteGround. They are the fastest and most reliable host with an incredible uptime and affordable hosting packages. They even have a helpful support team and offer a 30-day 100% money-back guarantee.
SiteGround makes the purchasing process incredibly simple too. Just check to see if your domain name is available and purchase it. You’ll be offered a choice of hosting packages – choose one that suits your needs best. For the purposes of my demo website, I chose the cheapest package but you should choose something according to your business needs. Remember – you can always change or renew your hosting package later on.
Understand your web hosting dashboard
Congratulations on having purchased a domain name for your eCommerce business! Now you’re just a few steps away from setting up your website using WordPress. But, before you can do so, you’ll need to understand the SiteGround dashboard a little.
Under the dashboard, you’ll find several tabs including Home, My Account, Support, Billing, Referral Deals, Add Services and Resources. Go through each of the tabs briefly to get an idea of what you can and cannot do on the dashboard.
Image: SiteGround Web Hosting Dashboard
It is important that you understand the dashboard a little because it includes crucial hosting information for your website. In case you need to make any changes to your hosting package or in case you face any problems, you can use the dashboard to resolve your issues.
After you’ve taken a brief look at the SiteGround dashboard, you’re all ready to set up your eCommerce website. To do this, you’ll need to install WordPress on your hosting account. Again, SiteGround makes this incredibly easy for you.
If you’ve taken a close look at the ‘My Accounts’ tab in your web hosting dashboard, you would have noticed a cPanel button at the top along with your domain name. Navigate to the cPanel Home, which is essentially the control panel for using your dashboard.
Once you’ve made your way to the cPanel Home, scroll down the page until you see a section called ‘AutoInstallers’. Under the section, you should see the WordPress icon. Click on it. What will follow is that the SiteGround Wizard will guide you through installing WordPress on your website. That’s it!
Image: SiteGround WordPress AutoInstaller
After you’re done installing WordPress using the wizard, there is one last thing you need to do. This includes filling out some basic information regarding your website. Most of the information fields are self-explanatory, so I won’t discuss them here. In case you have any doubts, just leave the information field at the default setting.
Understand the WordPress dashboard
If you’ve never created eCommerce Website Using WordPress earlier, you should get yourself a little better acquainted with the CMS. After installing WordPress on SiteGround, you’ll be provided with an administrative URL. This URL will direct you to your WordPress dashboard from where you can create and build your website.
One big reason why WordPress is so popular is that its dashboard is very user-friendly and easy to understand. Thanks to this, you can understand how this CMS works in very little time at all.
Under your WordPress dashboard, you’ll see several tabs to the left of the page. One of the most important is the ‘Settings’ tab where you’ll find general WordPress settings. Navigate your way to this tab and you’ll see important information related to your website. You can edit this information at any time.
Image: WordPress Dashboard
You’ll also see many other tabs on your dashboard. These tabs contain all the controls you need to create, build and customize your eCommerce website. Through the course of this guide, you’ll find out more about what these tabs do. But first, let’s take a look at WordPress themes.
Install the Flatsome WooCommerce Theme
Even if you’re a complete WordPress beginner, you’ve probably heard of themes. Now, WordPress themes are nothing but pre-designed templates that make creating websites much simpler. There are thousands of free and paid WordPress themes available in the market and you can use any one of them for your eCommerce website.
The best part about using a theme is that it includes all the basic setup and functionality that is required for a website to run. For instance, if you’re building an eCommerce website, you’ll need to look for a WooCommerce Theme. A WooCommerce theme is pre-optimized to work as a template for an eCommerce website. You’ll find such themes for every type of website.
Now, I’ve used the Flatsome WooCommerce Theme to create my demo eCommerce website.
Why do you ask? Well, its because it is the number one WooCommerce theme to use in 2018. I absolutely love Flatsome because it is a fully responsive, highly customizable theme which is primarily designed for eCommerce websites. It is far better than most other WooCommerce themes.
Image: Flatsome WooCommerce ThemeGet Theme
Flatsome features WooCommerce integration which is basically everything you need in a theme for creating an eCommerce website. It also includes a very useful setup wizard, which will guide you through installation and is packed with all the features and functionality you need. The best thing about Flatsome is that installation is a breeze and it takes absolutely nothing to get up and running with it.
Create your eCommerce Website Using WordPress
After you’ve installed the Flatsome theme, you can go ahead and take a look at your website. While you will have a functional website now, it is still not your website yet. To make it your website, you’ll need to customize the theme and add web pages relevant to your eCommerce business.
Head to your WordPress dashboard, locate the ‘Pages’ tab and click on ‘Add New’. You can also do this by clicking on the ‘+ New’ button at the top of the page. When you do this, the dashboard will open up a page editor where you can create your new page. The page editor allows you to add text as well as visual/media elements to your page. To the right side of the page editor, you’ll also find page attributes where you can control the design and layout of your page.
Image: WordPress Page Editor
To start off, create a Home Page, an About Us page and a Contact page for your website. Don’t worry about getting the pages to look like my demo website as we’ll get into this a little later. For now, just create as many pages as you find necessary for your eCommerce website.
Create a menu
After you’ve created separate pages, if you take a look at your website, you won’t see links to these pages. This is because you haven’t created a menu for your web pages yet. By creating a menu, you’ll be able to place links to different sections of your website on top of your homepage.
Creating a menu is very easy using WordPress. Just navigate to your dashboard, find the ‘Appearance’ tab and click on ‘Menus’. This will open up a menu editor, where you can create and name your menus. Once you create a menu, you can assign different pages of your website to the menu. This will now create links on your website.
Image: WordPress Menu Editor
Designing your website
Now comes the fun part – getting your website to look like my demo website. If you’ve followed all the steps I’ve mentioned above, you should have your website setup and ready and you can get into designing your website.
For this, visit any page of your website and click on the ‘Edit Page’ button located at the top and then click on ‘Edit with UX Builder’. When you click on it, you’ll see a number of predesigned page templates to choose from. While you can use any of those templates, I personally wouldn’t recommend it as these templates may not be suitable for your specific website. Instead, you can design your page from the ground up using the UX Builder.
Image: WordPress UX Builder
On the left of the UX Builder, you’ll find an ‘Add Content’ button. If you click on it, you’ll open up a menu with options for page layout and page contents, with several widgets you can use. This UX Builder is extremely simple to use and you should get a good grasp of it in no time at all. Just experiment around a little with all the different layout options, content options and widgets and you’ll know exactly how the UX Builder works.
Adding background images to your web pages
If you’re creating an eCommerce website in 2018, you have to make it look trendy and up to date. Simply creating a website using the Flatsome theme won’t make your business stand out from the competition. You need to add certain design elements to your website to make it look stylish.
Thankfully, you can do this very easily by adding some background images to your web pages. To add a background image to any page of your website, navigate to the Page Editor for that page. Under the Page Editor menu on the left, navigate to ‘Background’ and click on ‘Select Results’ under ‘Image’. This will open up a new page where you’ll find some stock images to use. Instead of using the stock photos, look for free images that are relevant to your business.
Image: Adding Background Images Using the WordPress Page Editor
For my demo website, I’ve used a number of royalty-free images from Pexels and Unsplash. There are several other such websites where you can find high-quality images for your eCommerce website. And, if you’d like to use the same images that I’ve used, you can download them here.
Create a website banner
On my demo website, I’ve used a website banner on my home page to divide different sections of the page. Not only does this create a better design look, but it also makes content flow better on my website. You should do the same on your website as well.
Image: Flatsome Studio
To create a website banner, head back to the UX Builder for your Home Page. Under the ‘Add Content’ section, click on Flatsome Studio. This will open up a number of predesigned elements you can add to your webpage. Find the ‘Category’ section and import the 3-column text box as I’ve used in my demo website. You can also choose any one of the other elements on the page as well to create your banner. The UX Builder will also allow you to drag sections of your banner around. Play around with it a little to find a look that you like.
While it is possible to create a website banner using other methods, it’ll take you very long. Using the predesigned elements from Flatsome Studio will save a lot of your time.
Create products for your website
After you’ve completed all the steps above, your website will be fully functional and designed to look good. But, hold on – you aren’t done just yet. You’ll need to create products for your eCommerce website.
To do this, head back to your WordPress dashboard and navigate to the ‘Plugins’ tab. Search for the WooCommerce plugin, install it on your website and activate it. When you click on activate, WooComerce will open up a wizard. This wizard will allow you to configure products for your store and get you started in no time at all. It will also allow you to configure payment options, shipping options and other extras. Everything is pretty self-explanatory within the wizard, so I won’t dive into the details here.
When you’ve completed all steps within the wizard, you’ll see a ‘Create Product’ button. Click on it and you’ll be redirected to a Product Editor inside your WordPress dashboard. You can add text and visual information for your products using the Product Editor. Use this editor to create all the products that you want for your eCommerce website. Again, you can model your products similar to those on my demo website if you’re unsure how to start.
Image: WooCommerce Product Editor
Customizing product pages
Even after you’ve created separate pages for your products, you may still want to customize the look of individual pages. You may want to do this if you’re promoting special products on your website or offering discounts.
Image: Customizing Product Pages Using the UX Builder
Customizing product pages in WordPress is also very simple. Just head over to any product page that you want to customize and click on the ‘Customize’ button located at the top of the page. This will open up the UX Builder once again, but this time with different design elements and widgets.
Mess around with the various elements under the menu to design specific product pages. For example, try and create a page for a product with variable color options. There are tons of options available and you’ll be able to design a product page just the way you need.
Add a category menu
To truly provide ease of use to your customers, your eCommerce website should offer easy navigation. And, if there’s one navigation element that is common to all online stores, it is using a category menu.
I’ve explained what menus are a little earlier – they link to different pages of your website. Now, a category menu allows you to organize multiple products together and display them aona separate page. For instance, Men’s Trousers is an example of a category. Such categories will allow your customers to easily find what they need on your online store.
Image: Creating Category Menus for your Products Using the UX Builder
To add a category menu, head back to your UX Builder, navigate to the ‘Shop’ tab and click on ‘Category Page’. This will allow you to add as many categories for your products as you need. Also, you can customize the design, layout and font of your category menu. I’ve kept the category menu to the left of the page on my demo website as this is the common norm for online stores. But, you can always tinker around with the UX Builder to give your category menus a unique look.
One important point when creating category menus is deciding how many products to display on a page. Experiment a little to see what works for you. Just make sure not to add too many or too few products to your category pages.
Also, you’ll need to create separate sections for every category that you create on your homepage. This is not too difficult and you can do it using the UX Builder and the Flatsome Studio elements. Make sure to choose a layout that allows your users to scroll sideways and view more products.
Add widgets to your website
By now, you have almost finished creating and designing your eCommerce website. But, you still can’t launch your website yet as you have to complete the setup. And, this starts with adding widgets to your website.
Widgets such as price filters and sort by price are very commonly used in online stores and you must use them too. Thankfully, the WooCommerce plugin offers all the eCommerce widgets you need. You just need to add them to your website.
Image: Adding Widgets Using the UX Builder
To add widgets to your website, head over to the ‘Widgets’ tab in the UX Builder. This will open up a menu which will allow you to add as many widgets as you need. You can even decide on the layout and style of the widgets using the UX Builder. Take a look at all the widget options you have, think of what your store needs and add them to your website. I’ve added a search widget, a price filter widget and a categories widget to my demo website. You can add as many as you think your online store needs.
Add blocks to customize your checkout page
One really cool thing about the Flatsome theme is that it allows me to add blocks to my website. If you’re wondering what blocks are, you can see an example of them on my demo website. The ‘New Arrivals’ section on my front page has been created using blocks.
Image: Adding Blocks Using the UX Builder
To create blocks for your website, head over to your WordPress dashboard, navigate to ‘Blocks’ and click on Add Block. Open up the UX builder and select the block element you want from Flatsome studio. There are thousands of different element styles so take a look around to find what you need.
Customize your checkout page and the account portal on your website to include blocks and other design elements. While the default pages offered by Flatsome are okay, by customizing it using Flatsome Studio, you can create amazing pages for your customers. Use banners and other elements to add a unique look to your website. Trust that customization will make your website look slicker to users.
Other basic setup pointers
Some other basic things I’ve done to my demo website are adding an email subscribe on the website, adding Instagram plugins and feed, a wishlist and creating headers and footers. If you’ve followed all the instructions I’ve mentioned in the steps above, you should have no problems in adding these basic elements to your website. You’ll find everything that you need under the widgets and plugins section in your WordPress dashboard.
One other thing I’ve included is blog posts on my website. You must also do the same, as blogs will allow you to promote and drive traffic to your online store. Create a section for a blog and add a couple of blog posts before you launch your website.
Also, its very important that you get a professional looking logo for your website. You can hire logo designers for as low as $5 on online marketplaces such as Fiverr, Upwork and Freelancer. Don’t launch your website without a logo as it will affect your reputation.
General WooCommerce settings
For the last step of this tutorial, you’ll need to configure some general WooCommerce settings. To do this, head over to your WordPress dashboard and click on the ‘WooCommerce’ tab. Here, you’ll find the basic fields for your store settings, products, tax, shipping, checkout, accounts, emails and APIs.
I won’t go into the details of configuring each and every WooCommerce setting as it is an entire tutorial in itself. I have a seperate video for this that you can watch here for free
So, there you go – these are the exact steps I used to create my demo online store using the Flatsome theme. Flatsome is a great theme which will allow you to create and setup your online store in no time at all. Sure, truly designing your e-commerce website to the way you want will take some time. But, if you follow the basic steps I’ve mentioned, you’ll have your store up and running very soon.
Do you already own an eCommerce website? If you do, which theme have you used? Do you know of any other great WooCommerce themes other than Flatsome? Or, do you have any questions or doubts about my tutorial? Please feel free to leave your comments in the section below and I’ll be more than happy to help!