BUILD an Ecommerce Website with Wordpress and Flatsome Theme 2021

This flatsome theme tutorial video will show you how to make an ecommerce website with wordpress and the flatsome theme. So if you like the video tutorial, make sure you give them a big thumbs up and a subscribe on their youtube channel as well.

The goal here is to teach you everything about the flatsome theme and wordpress so by the end of this video, you have a professional ecommerce website.

Watch How to Create an Ecommerce Website with WordPress 2021

This is the text tutorial. In the video description and this video, we may include affiliate links for you to use. They help support the channel and help us make videos like this.

Disclosure: Hostinger and our other affiliates pays us a commission if you use our link or coupon code. No charge to you, so thanks in advance.

I will only recommend to you what I know will work and personally use

I’m all about saving money and helping you create a site that makes money from Day 1. You can pay someone thousands of dollars to create you the same site, or you can follow this tutorial.
I say the above in all seriousness. Someone just emailed me saying they used one of my free tutorials and charged someone $1,200 to build the site and they have no technical background. Sad but it happens. Don’t get taken advantage of!

What You Need for this Flatsome Theme Tutorial

Nothing really!
Just a computer and an internet connection
Three hours or so and the ability to follow the tutorial

What You Don’t Need

You do not need to have a technical background
You do not need to know how to code or program

What You Will Need

A Domain (web address for your ecommerce website with wordpress)
Hostinger hosting – use our link for 90% off and a free domain! (the engine that powers your online store)
The Flatsome Theme by UX Themes

Step 1: Hosting and Domain Hostinger (save 90%):

We need a domain and hosting in order to run a website. Hosting lets you store your content and run your website so it loads for your visitors.

Go to Hostinger for a free domain and 90% off hosting.

We also have a coupon code: SUPER10 for an extra 10% off. Make sure to use it to save some additional money.

http://www.hostg.xyz/SH4Q0 (use the code SUPER10 for an extra 10% off!)

You can choose any plan you want. I recommend the WordPress Starter plan.

Watch the video if you need any help with any of the options or signing up.

Step 2a: Install WordPress

Now that we have our domain and hosting, we need to install wordpress so we can build our online store with the flatsome theme.

To install wordpress for your ecommerce website

Click to create a new website

Choose your domain and add it

Once it is added (for free) select install a new wordpress website

And you’re good to go!

Make sure you save the login information but we will change our password together in this video in the next section.

For now, click to go to your wordpress website dashboard.

Step 2b: Login/Change Password

We want to make sure our ecommerce website and online store are secure. This starts with having a secure password to login to your wordpress website.

If you want to change your admin password

Go to the wordpress dashboard
Hover over Users
And click on profile
Go to the password section to change your password
Click save

Step 3: Flatsome Theme

Here is a link to the Flatsome theme ..which is what we are going to use to learn how to create an ecommerce website with wordpress.

I talk about why the Flatsome theme is so good in the video but I can list out a few bullet points for you here.

It’s the #1 best selling premium woocommerce theme for wordpress
There is a custom page builder that will customize your online store
Its fully integrated with woocommerce
You have a bunch of modules and pre-designed templates that you can drag into your website and customize
You get free customer support

If you need to go to the themeforest website for the Flatsome theme, just click on the link.

Step 4: Install Theme

Now we need to install the Flatsome Theme. Make sure you downloaded the theme from Themeforest first.

Once you do that, go back to the wordpress dashboard for your ecommerce website

Hover over appearance
Click on themes
Click on the add new button at the top
Click on the button in the middle
Find the theme zip file. It needs to be the zip file so it should be something like flatsome.zip if it is just a folder, you cannot upload it.
If you have a folder and not a zip file, go to the downloads folder or wherever you saved the file. Right click the folder and compress it to turn it into a zip file
Click upload/install
And then activate the theme and we are ready to rock!

Step 5: Install Plugins

Now we need to install some plugins to really build out our ecommerce website. Plugins are tools that are really going to help us out with functions and security and speed for our wordpress website.

To install the required plugins, there might be a link at the top of your wordpress dashboard that the theme recommends. Go ahead and click install for those and then activate them.

If you need to install some additional plugins, you can add more by going to your online store wordpress dashboard, find the plugins tab on the left side, hover over it and click on add new.

These are the plugins we need to install and activate.

Contact Form 7
Jetpack by WordPress.com
Nextend Social login
Really Simple SSL
Woocommerce
Woocommerce Payments
Woocommerce Shipping & Tax
YITH Woocommerce Wishlist

One we have call of these, we are ready to really get going on learning how to build an online store with wordpress and the flatsome theme!

Step 6: Demo Content Demo content:

Here is a link for the demo content.

https://www.nyctechclub.com/downloads/demo_content/flatsome_demo_content.zip

To install the demo content for your online store / ecommerce website with wordpress

Go to the wordpress dashboard
Look for the media tab on the left
Click add new
Click upload media
Find the images and content you want to upload
And upload it 🙂

You can edit the images in your media library as well using wordpress. Just click on the media library button when you hover over media.

Step 7: Woocommerce Settings

The woocommerce settings are not hard. But they do take time to go through. This is necessary if you want to make sure the online store you are learning how to build is up and running.

There are a bunch of tabs that we go through to set up our ecommerce business, to integrating payment options, shipping, and everything else. If you follow our video tutorial on how to create an ecommerce website with wordpress using the flatsome theme then you will be able to set up all the settings.

Let me know if you have any questions.

Step 8: Choose Homepage Template

The great thing about the flatsome theme is that we don’t have to build anything from scratch. We can use pre designed templates to customize our online store.

I think this is a great way to build something professional that looks great and also saves you a lot of time so you can start selling and making money instead of spending a bunch of time trying to figure out how you want to design your ecommerce website with wordpress.

So if you want to do what we do in the video, just go to the demo website of the flatsome theme, find an online store homepage that you like.

Then go to your wordpress dashboard
Hover over pages and click on all pages
Find that page and click edit
Rename the page and update.
Then turn on the ux builder 🙂

Now we’ll go through the steps of customize this site a little bit later 🙂 But we are on the right step to building our own online store.

Step 9: Theme Settings

In the theme settings, we cover everything from how to choose your header, the colors, the font styles, and layout options. Let me write out what we put into each section here for you, just incase I go to fast in the ecommerce video.

Header tab – where you can change the header options and layouts

Drag and drop whatever you want into the header section

You can customize your top bar and add your logo

I was going to type out this entire section but it doesn’t really make sense, since you will most likely customize your ecommerce website however you want. Instead, I will just add the color codes and the link to the free logo making site.

Step 10: Create Logo

Make a logo at Logomakr

To upload your free logo, go to the header tab and click on logo and site identity

Step 11: Colors, Layout Settings

Color codes for this demo online store ecommerce website –

In the style tab is where we will change our colors
Style > Colors > Primary #140000
Style > Colors > Secondary #dd9933
I don’t change any other colors 🙂
Footer > I disable footer 1
And change the background color to red in footer 2
Change the copyright name to your own business name
Change the background color for the absolute footer to #140000
Change anything else you want including share icons
Click save when you’re ready and we are good to go!

Step 12: Customize Homepage

In this section, we customize most of our homepage. From adding slider images to text. To customizing featured product widgets and other sections.

All you need to do is either use the modules on the left side and double click on them and expand them to edit OR you can double click on the section on the preview side and get the edit section.

Add your edits and you can add background overlays for your images if you want as well.

Pro tip: Make sure you add links to your buttons and images you want to link. You can also add a # if you want to make a static link and come back and update it later.

You will not see featured products or categories right now since we haven’t make them yet for our ecommerce website. But we will soon.

Make sure you click the update button to save your changes!

Step 13: Optin Forms

I want to take a break to talk about how to create an option form for our online store because we have a section on our homepage for this.

Lets go back to our wordpress dashboard
Hover over contact and click add new
Choose the type of contact form you want to create
Add a name for your form
Create new form
Customize it and click save
Now you should have short code that you can copy and paste into your website…but we don’t need to do that with the flatsome theme. We can just go back to the edit homepage.
Once you are back on the edit home page…click to edit the form module and choose the form you just created
Click update

Step 14: Create Products

An ecommerce website would be incomplete without being able to create products to sell on our ecommerce website

In this video, we are going to make a bunch of products: single products, variable products, virtual products and affiliate products (for example, if you want to sell amazon products).

So in the next few steps we will show you how to make them all and hen you can do it on your own.

Step 15: Single Products

The first type of product we are going to learn how to make is a single product. This means that we only have one option, no different sizes or colors or options.

To make a single product, just go to your wordpress dashboard and hover over products and click on add new

Type in your title for the product
Add your long description
In the product section, just select single product
Then put in your details for the price and go through the tabs for shipping, inventory and anything else.
Below the product section, is the short description. That goes next to the price on the product page.
On the right hand side, you will have details to put in your featured image, the gallery images, and then the tag and category information.
If you want to make this product a featured product that shows up on the homepage then go into the edit product section next to the publish button and select to make this is a featured product
Push publish once you’re ready

Step 16: Variable Products

Variable products are very similar to single products. The only difference is that we have to add all the different options.

You can add any type of variables that you want.

You can also add different price points for your variables.

You can follow all the steps like a single product, except for the product section.

For the variable section, what you need to do is go into the drop down and select variable
You will see the attribute and variation section show up
Go to the attributes tab
Click to add a custom product attribute
Type in the name of the variable and the options separated by a “|”
Then go to the variations tab and click add variations
Now you will see the variations and you can expand them to type in the price and details
If you want different price points for different variable selections, just select those options and put in the price for them. Then add more variations for the other options
Click save
And again, make sure you add these as featured products if you want.
Publish when ready!

Step 17: Save Variables (attributes)

Typing out variable options for your ecommerce website products each time is time consuming, so in this section, I’m going to show you how you can save the variables so you can add them with a click or two instead of typing everything out as you make your online store with wordpress.

On the left hand side hover over products and click on attributes
Type in the name of the variable and use the same name for the slug
Then click add
Now click on configure terms in the list and add the different options and use the same name for the slug and you’re good to go!
Now when you add a variable product, it will have the option to click to add the attribute

Step 18: Virtual Products

Virtual products are products that you sell but do not have a physical product.

For virtual products and downloadable products, just check the boxes and then you can upload the files you need to.

Everything else is the same

Step 19: Affiliate Products

For affiliate product, you need to go to the product section and select affiliate products.

Then you can add your links and customize the button text.

Step 20: Shop Page Layout

To change your shop page layout, you can go to the theme settings to woocommerce

Click on page layout
And choose the layout you want

If you want to customize your widgets, then go back to the wordpress dashboard

Hover over appearance and click on widgets
You can add any widgets you want to your online store and ecommerce website

The great thing about this tutorial is you can build any type of online store you want!

Step 21: Product Categories

To edit your product categories for your online store, just go to your wordpress dashboard and hover over products and click on categories.

I like to delete he uncategorized option. To do that, you need to set another category as the default first.

Step 22: Blog Posts

Blog posts are very easy to make. All you have to do is go to the wordpress dashboard on your ecommerce website with wordpress

Hover over post and click on add new

Publish when you’re done!

Step 23: Add Gallery

In this video tutorial, I wanted to show you how to add an image gallery for your blog posts as well. So if you want to do that to showcase some of your online store products, then just click on the plus button on your blog posts and find the gallery module and you can add your gallery that way.

Step 24: Add Instagram

If we go back to our homepage, we will see an instagram feed module. To integrate that into your website, you need to turn your instagram feed into a business account and then connect it with facebook.

You can follow the directions here – instagram integration with flatsome theme

Step 25: About Page

The about page uses a pre-designed template from the flatsome theme. All we do is find the online store about page we like, change the title and and customize it however we like. Super easy!

I hope you are enjoying this tutorial on learning how to build an online store using wordpress 2021 and the flatsome theme. I hope you are realizing how easy it is to create an ecommerce website with wordpress 2021.

Step 26: Contact Page

The contact page uses a pre-designed template from the flatsome theme. All we do is find the online store about page we like, change the title and and customize it however we like. Super easy!

Step 27: Footer

For the footer, what we need to do is just go back into our widgets on the ecommerce website and add any of the widgets you want.

After that, we are going to add our menu a little later. But if you want to change the style of your footer, you can do that in the theme settings for the flatsome theme website.

Step 28: Delete Pages

Now that we have all the pages made for our ecommerce website, I want clean things up so we don’t have any excess pages.

The easiest thing to do is watch the video on learning how to make an ecommerce website with wordpress 2021 to see all the pages we keep and delete so you only have the pages you want for your online store.

Step 29: Edit Permalinks

One of the things we need to do is make sure our URLs look good for our ecommerce website so they’re easy to type in.

So we go to the edit page on each of the pages for our online store we are learning how to make and we edit the permalink on the right hand side.

Make sure you click update when you make an edit!

Step 30: FAQ Page

For any online store or ecommerce website, we want to make sure we have a frequently asked questions page to help our customers out.

So we are going to create a new page. And we can just add an accordion module and add a title and a text box for an answer 🙂

Add as many as you want.

And that’s it!

Step 31: Terms and Conditions Page

The terms and conditions page for our ecommerce website is important because we need to link this page in our check out process for our online store we are learning how to build.

So create a new page and title it Terms and Conditions

Add a text box and type in your terms and conditions.

Publish the page

Then go to your woocommerce settings and go to the advance tab and set the terms and condition page

Make sure you click save!

Step 32: Menus

To create our new menus for the online store we are learning how to create for free using the flatsome theme, please go to your wordpress dashboard and hover over appearance and click menus

We are going to delete our menus and create new ones.

Create a new menu

Title the menu

Select to make it show up as the main menu (and footer for the second menu)

We also will need to make a top bar menu!

Add the pages and links you want

Click save

Do this for the footer, and the top bar for your online store.

Step 33: Mega Menu

Having a mega menu just adds to the professional look of your ecommerce website. So I wanted to show you how to make one here.

All you need to do is go to the UX blocks on your wordpress dashboard and create a new block
Title it mega menu
Click on the studio
Add a mega menu template
Customize it
Click update
Now go back to your wordpress menus for your online store
In the shop drop down for the menu, select the mega menu block
Change the width of the enu
And save

Step 34: Coupon Codes

Coupons can be created for your customers by going to your wordpress dashboard of your online store and just hover over coupons and click add new coupon

Title the coupon
And add the savings
Click save
And that’s it!

Step 35: Test Transaction

All I do here is run through a test transaction to show you that our online store that we learned how to build works…and it does!

If you have any issues with your online store or ecommerce website that you learned how to make, please let me know in the comment section of the video.

CONGRATULATIONS!

Congratulations on learning how to make your own ecommerce website with wordpress 2021 using the flatsome theme! If you need any help customizing or building your online store, please let me know! I hope you enjoyed this tutorial using the flatsome theme to create an online store.

All the best in 2021 and beyond!

We will be coming out with more tutorials using the flatsome theme and wordpress to build more websites, online stores, and talk about ecommerce everything soon.

Have a great day!