If you want to learn how to use the Flatsome theme and make a WordPress website or an online store and want it to be mobile friendly, we have a video tutorial that shows you how. I will link it below and this will be a text tutorial that you can also use if you want some step by step help.
If you need to install WordPress and you don’t know how, you can check out our video on how to set up a WordPress website with Hosting. In this text tutorial, I am just going to focus on the Flatsome theme but the video does walk through how to set up WordPress also.
First thing, we need to get the Flatsome theme. You can go to the theme forest website to get it. It’s a premium theme.
Why the Flatsome theme is good
- Popular and developer cares – this mean it stays updated
- Easy to use – you can click and drag things around and its easy to customize
- Integrated with Woocommerce – so you can sell products and collect payment
- Demo content – you don’t have to start from scratch so it makes things easier and faster
- Not subscription based – you only have to pay a one time fee. This beats a lot of other options where you have to pay monthly or annually
Get the Flatsome theme
- Download all the files and the purchase code
Once you get the Flatsome theme you want to install it. If you don’t know how to do this, then do this!
Go to the wordpress dashboard
- Hover over appearance
- Click on themes
- Click on upload themes
- Upload the zip file of the version of the theme (click on flatsome folder, go to themes, there it is)
Now you’ll see the set up wizard
- Go through the set up wizard
- Click to select the template you want
- You don’t really need the child theme unless you are going to do some coding to it
- Select all the plugins and demo content
- Choose the logo you want to use if you have one – you can update this later
- Install everything
- Now you can visit the site if you want. After that, we want to set up Woocommerce
Click to install Woocommerce for the Flatsome theme
- If you are on the WordPress dashboard you can hover over Woocommerce and click on settings
- Now just go through the tabs.
- Put in your address
- There is nothing to do on the products tab
- Nothing to do for taxes unless you want to make it more complex
- For payments you can install a payment plugin or use the woocommerce option. I like to use woocommerce for PayPal. So I go and get that and install and activate it.
- Then I go through the set up to enable it for the payments. I don’t do pay later or the credit card option since I can use that with the regular set up.
- For the accounts tab, you can add a terms and conditions page
- For the emails, you will see the notification settings. If you scroll down to the bottom you can choose to edit the email template.
- The other tabs I don’t think are really necessary but you can go through them. Check the video to see if there is more if you have questions because we cover it all.
Now that you have Woocommerce set up and the Flatsome theme, what you can do is go to the theme options to change the default settings for the ecommerce website if you want.
Theme Options for WordPress Website
- To go to the theme settings you can hover over Appearance and click on customize.
- In the theme options you can customize the layout default settings. This doesn’t mean that everything you select are the only options for your website. Just the default settings.
- You can go into the general tab to change the colors that you can select from with your website.
- The header tab lets you customize the header and also where you can go to change the logo. Just click on the button at the bottom in the builder to go to the logo page or navigate through it in the header options.
- You can also change the layout for the footer and the product pages and blog post pages.
- Once you have all of your changes, click on save or publish (the blue button) so all the changes are saved.
- Now close out of this and we’ll go to the website settings for the WordPress website.
General Settings for the Website
- If you want to go into your general settings, you will see a settings tab on the left hand side of the dashboard.
- Hover over that and click on general. You can change the website name here and the email address associated with the ecommerce website with WordPress.
- Make sure you click update or save at the bottom.
To update the password for logging in
- Hover over Users
- Click on the admin user
- Change the password in the section on the page
- Click update and save
- To login you can use the URL websitename.com/wp-admin/
- Put in the username and password
- This is an easier way than going through the hosting dashboard.
- Now that we got all of that out of the way, this is how you can update the Flatsome theme and the pages
Customize Website With the Flatsome Theme
- What you are going to do is go to your pages list and find the homepage (it might be labeled as the front page)
- Click to edit it
- If you want to remove the parent page for the homepage, just click on the x to do so
- To edit the homepage using the flatsome pagebulider you want to click on the UX builder button
- Now you should see the UX builder
- This is how you can edit the entire page
On the left hand side are the different sections. The preview screen of the page you are editing is on the main page. And on the right hand side you should see icons that
This is where you can go to see the website on different devices including the desktop, tablet and the mobile devices
We will make the website looks good on the mobile device since that is what most people use nowadays in order to shop online and to surf the internet.
Just a side know, whether you are watching our tutorial or someone else’s you should make sure your website is mobile responsive and you should prioritize the the mobile view in order to make sure the user experience is good for all users since that is where most of your customers are going to be coming from.
So to edit the website we are going to go into the different sections and we can click on each module and customize everything from the colors to the spacing to anything in between.
The first thing that we’ll do is change the background for the sliders.
- In order to do this we can go into each banner and if you need, you can see the structure by going into the left hand side to expand the section.
- For the tutorial we delete two of the banners and only edit two of them for practice.
- If you expand each section you can see all the elements inside. To edit them you can click on the options wheel and you can click into the options
- Here is where you can edit the different options available for the element
- Whether it is the spacing or the size or the colors of even adding links
- For the text module for the Flatsome theme you can click on the text editor and you’ll a pop up and you can change the text here and also change some of the settings and formatting
- Click apply and update once you are done
That’s all you have to do for all the text editors throughout the website using the Flatsome theme
To edit the buttons
- All you have to do is click into them (double click) or you can click on the wheel and you will see the drop down and you can click on the options
- Here is where you can change the layout options and the settings
- I normally change the button to a larger size and sometimes change the color depending on the location of it on the page
- You can also change the link to a URL you want to link the button to for the ecommerce website
- Make sure you click apply and update once you are ready
Adding Elements
- You can add element anywhere just by clicking to add elements at the bottom on the left hand side or if you want to add them to any row or element.
- You will also see a plus button that allows you to add elements to the ecommerce website with the flatsome theme.
Add New Row / Section
- If you want to add a new section or a new row then you can also just add that with the plus button.
- After you add a new section, you will get some options to customize the layout options. These are templates and you can add and remove and customize the settings in the options.
Making The Website Mobile Responsive
- If you view the website on the different devices using the icons on the right side of the pagebuilder and you want to edit anything for specific screens then you can go to each section and go into the options
- At the bottom of each section or module/element on the bottom of the left hand side you will see an advance section where you can choose settings for whether the section will show up on the desktop, tablet or the iPhone device.
- You can show and hide on specific devices
- For the section you want to modify, the best suggestion we have is to duplicate the section and then change the visibility.
- Go to the device view for the one that you want to change and customize
- And then change the settings
- You do not have to have the same content on each device when you do this hide/show option
- Sometimes you do not want the same content on different devices because it does not look good and that is perfectly fine.
To Add Products
Now that you know how to customize the ecommerce website with the UX builder using the Flatsome theme, we are going to discuss how to add and customize different products since the whole point of making an ecommerce website is to make sure that you have products that can be sold.
What this also means is that you want to make sure you integrate and set up Woocommerce in order to take payment and take your customer’s information so that the ecommerce website can process transactions.
If you want to integrate Woocommerce and set it up, we have video tutorials that walk through how to do that and you can use this link if you want in order to set that up. You can also check out the video tutorial we’ll link at the bottom of this page on creating an ecommerce website with wordpress and the flatsome theme and it will have all the steps there.
In order to add products, you can go to the WordPress dashboard and hover over products and click on add new
- WordPress Dashboard
- Hover over products
- Click to Add a new product
- Type in the product name
- Add the long description
- Add the price to the product data section
- Type in the short description
- On the right hand side you can add the featured image and additional images
- Add categories and tag names to sort and for related products
- If you want to make the product a featured product then you can go to the top of the edit page and click into the visibility
- Select the featured product option
- Click to publish the product
- Now you have your product!
The product we just walked through was a single product. We want to also learn how to create variable products.
Create Variable Products
Most of the steps are going to be the same as the first product which is called a single product. The only difference is that we want to add variables and different variations for the variable product.
Just so you know a variable product is considered one where there are different options and different sizes or any type of variations. They can have the same price or unique prices for each option.
- WordPress Dashboard
- Hover over products
- Click to Add a new product
- Type in the product name
- Add the long description
- In the product data section, go into the drop down and select the variable option
- Type of the attributes name (color, size, etc)
- Then add the different options (small, medium, large)
- You can add as many variables as you want
- Keep the boxes selected to save variations and to use the variations
- Click save attributes
- Now go to the variations tab
- You can generate your own variations or generate all the variations. The latter means that all the different options will be generated and then you can go into each individually to set the price or SKU number or any other data information.
- If you only have one price for the product, no matter what the size is then you don’t need to generate all types of variations (the video shows this if it is confusing here)
- Type in the short description
- On the right hand side you can add the featured image and additional images
- Add categories and tag names to sort and for related products
- If you want to make the product a featured product then you can go to the top of the edit page and click into the visibility
- Select the featured product option
- Click to publish the product
You can check out the product page to see that the product now has a drop down for the different variable options. Way to go! And hello if you actually are reading this text tutorial!
Affiliate and Virtual / Downloadable Products
The last type of product that we walk through in the video is the affiliate products and also the virtual and downloadable products.
The steps are the same as the first two products in creating the product and the only difference is the product data section again where you go into the dropdown to choose the type of product you are creating.
- For an affiliate product, go into the drop down and select that option.
- You will see that the tabs change a bit to let you add the affiliate referral URL and to customize the buy button
- This is where you will go to add the link so your customers can use to purchase products and track the referral.
- For virtual and downloadable products you can just check the boxes at the top of the product data section.
- When you click on the virtual option you will see that the shipping tab disappears
- For the downloadable products, when you check that option you will see a section that lets you add the files that can be downloaded and allows you to customize the settings / rules for how long someone has to use the link.
Product Page Layouts
The last thing to say about products is that you can change and customize the product layout pages in the theme options.
- To go to the theme options
- Go to the WordPress dashboard
- Hover over Appearance
- Click on customize
- In the theme options > click on Woocommerce
- Go to the archives page for the shop page
- Go to the product page for the individual product pages
- Make sure you click publish if you make any changes
In the video tutorial, we go over the layout settings (we don’t make too many changes, if anything we select the option to not have the sidebar).
Editing Other Pages (About, Contact, Etc)
In most of our tutorials we customize all the other pages together. In our latest video tutorial using the flatsome theme to create an ecommerce website, we just walk through how to edit the contact page to add the contact form and discuss how to add the title section and edit the FAQ section.
- All you have to do to populate the contact form is add the form7 module and then select the contact form you want to add.
- You can delete the text that added from the flatsome demo content if you are using the demo contact page and editing it.
- Make sure to click apply and update and that’s all you have to do!
Edit Sidebar (Shop Page, Product Page, Blog Post Page)
You may not need this section but if you do (depending on the layout options you select for your ecommerce website)
- To go to the sidebar and footer widgets
- Go to the WordPress Dashboard
- Hover over appearance
- Click on widgets
You will see all the options here to edit the sidebar and the widgets for the footer and the shop and product sidebars
- There may be demo widgets already added to the different sections
- You can just go in and click to expand each and delete the widgets or go in and edit them
For the shop sidebar, if you do not add anything to the product sidebar then the product page will take whatever is in the side bar for the shop page
This again depends on whether you have this option selected to show the sidebar on the shop and the product pages
The main sidebar is used for the blog post pages and the shop pages
For the footer, if you want these widgets to show up, then you want to make sure that the footers are enabled in the theme settings.
There are two footers: footer 1 and footer 2.
In our video tutorials, we normally disable these since it’s not the type of layout we normally go with but you can keep them enabled and add or customize the widgets however you want.
There are a bunch of woocommerce widgets on the left hand side of the widget page that you can add to customize your pages however you want.
You can also go to the plugins page or the woocommerce extensions if you ever want to use any additional widgets for your online store and ecommerce website.
Edit the Header and the Footer
To edit the header and the footer you can go back into the theme options which hopefully you know how to do by now but I’ll put the instructions below again 🙂
- Go to the WordPress dashboard
- Hover over appearance
- Click on customize
- You will see the header and the footer
- The header allows you to use the header builder
- You can drag and drop and move whatever elements around
- Or you can use the preset layout options
- You can also change the logo here
- You can also disable or enable the top bar here
In order to edit each element you can go into the different tabs and navigate or you can just click on the elements and it should bring you to the options to modify the module itself for the ecommerce website using the flatsomet theme
For the footer, you can go back to the theme options main page and click to edit the footer
You will also see options here to change the background and enable or disable different parts of the footer
- The main thing that we edit in the video for the footer is the copyright
If you go into the footer and scroll down, you will see a text box that lets you edit and customize the copyright for the flatsome theme so you can change it to your own business or design agency. Whatever you want.
Make sure you click publish after you are done to save your changes!
This covers just about everything you need to know in order to use the Flatsome pagebuilder for any ecommerce website that you can create. If you want more help, you can check out our video tutorials or the other text tutorials. You can also send us a message or leave us a comment on the NYC TECH CLUB YouTube channel and we’ll get back to you.
I hope this was helpful!
*Please note that the links in this video to the Flatsome theme or any other WordPress plugin or theme and hosting service + content management system may be affiliate links and partners for NYC TECH CLUB.