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.
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 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.
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
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 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!