Hey Hey NYCTECHCLUB in the house!

How to Create an Ecommerce Website with WordPress and GoDaddy

I’m all about helping you build the BEST and MOST PROFESSIONAL website possible.

  • I won’t teach you how to build a cheap crappy website (like everyone else)
  • I won’t just keep making tutorials after tutorial and not teach you how to build a business
  • I will only recommend to you what I know will work

This tutorial will teach you how to build an online store (eCommerce website) and will be using the top selling ecommerce theme available (Flatsome)

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!

Pre-requisites

  • None really.
  • Just an hour or so and the ability to follow the tutorial 🙂 Okay, probably a little more than an hour (I wrote this bullet before I recorded the video and it turned out we cover way more than I thought, which is a good thing!)

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 – we use Godaddy for this tutorial (web address for your ecommerce website)
  • Hosting Service – we use Hostgator for this tutorial (the engine that powers your online store)
  • The Flatsome Theme by UX Themes (the best selling ecommerce theme, ever)


The following steps are always the same for my tutorials, so they might look familiar to some of you. 

Step 1-A: Register a domain with GoDaddy

A domain is your web address (what you type in to get to your site). This is a MUST.

Go to Godaddy and register a domain / create an account

  • I recommend Godadady because it’s cheap and easy to register a domain (most of my domains are register using godaddy)

Without a registered domain, you don’t actually have your own website address so this is necessary for you to continue.

Step 1-B: Get  hosting service with Hostgator

The hosting service I recommend is Hostgator. We need hosting to run our website. THIS IS A MUST.

Use the discount code: nyctech30 to save 30%

(its an affiliate link so hostgator also pays me a commission for helping you)

  • Cheap
  • Good customer service
  • Easy to install everything you need to build your website
  1. Go to www.hostgator.com
  2. Click on web hosting
  3. Decide what plan is best for you (if you only will have 1 website – choose hatchling plan, if you think you’ll have more than 1 website – choose baby plan)
  4. Click “Sign up now!”
  5. Go to the tab “I already own this domain” (since you already registered with GoDaddy)
  6. Fill in all the info (I suggest you choose a 12 month billing cycle)
  7. Unclick all additional services (they are unnecessary and extra money)
  8. Enter “nyctech30” for a 30% off coupon code (our very own special coupon code!)
  9. Agree to the terms and conditions and “Check Out”

You will receive a hostgator email in your inbox with all your login and account details

Hosting is storage for you to build your website and hold data/content/images/videos for your website. Think of hosting like a house and all the furniture being the data you put in your house. If you don’t have a house, you don’t have anywhere to live 🙂

Step 2-A: Go to your email inbox

You will receive a hostgator email in your inbox with all your login and account details

Use that information to do Step 2-B

Step 2-B: Connect Your GoDaddy Domain to Hostgator

This is the most difficult of steps in this entire tutorial (but its really not that hard). Just take your time and breathe 🙂

  1. Pull up your new account email from Hostgator – you will need two pieces of information here (1st Nameserver, 2nd Nameserver)
  2. Log into your GoDaddy account
  3. Click the + on the Domain section of your account dashboard to expand
  4. Click the green button “Manage” for the domain you just registered
  5. In the Settings section, you will see “Nameservers” click the link below them that says “Manage”
  6. Click on the “Custom” bullet and then the button “Add Nameservers”
  7. Paste in the 1st Nameserver address into the first box (starts with ns***.hostgator.com)
  8. Paste in the 2nd Nameserver address into the second box (starts with ns***.hostgator.com)
  9. Click OK

Awesome! Now we are done with GoDaddy – so let’s get to building the website now!

Step 3: Log into website cpanel

  1. Pull up your new account email from Hostgator
  2. Click on the link that says “Your Control Panel”
  3. Login with the username and password from your email

Now the fun starts!

Step 4: Install wordpress

Now we need to install the platform we’re going to use to make it. The platform is called WordPress – it’s a content management system and super popular with a large community of users.

  1. Now that’re you’re logged in to your cpanel
  2. Scroll down to Software/Services section of the main page
  3. Click on the icon that says “QuickInstall”
  4. Click on WordPress on the left side menu
  5. Click Continue
  6. Enter an admin email (that you get email from), blog title (you can change this later), user name and other details
  7. Click “Install now!”

Sweet! Now we have wordpress installed! You can go to your domain address and see that we have just uploaded a website to your site (we’ll fix this whole thing and make it pretty – don’t worry!)

Step 5: Log into wordpress

You might have to wait 5-15 minutes before you can click to log into your new site. Take a break if you need.

There are two ways to log onto your site

  1. You can click on the link provided on the hostgator page after the quick install and use the username and password
  2. You can go to your email and open the new email you get with details about logging into your site (same info as above)

To customize and add content to your site, you will always log into the site with the following address: www.YourSite.com/wp-admin

So go ahead and log on!

Step 6: Get The Flatsome Theme

I don’t like making you spend money but for this tutorial its necessary. All the free themes are ugly and unprofessional and it would take me too long to recreate something from scratch for you.

  1. Follow this link to ThemeForest to the theme homepage (affiliate link)
  2. Click Buy Now (this is the only thing we need to purchase)
  3. Fill out your account information
  4. Follow the instructions to download the ZIP file that contains your new premium theme

You still end up saving hundreds if not thousands of dollars by purchasing this theme and customizing it yourself. It’s a great investment.

Step 7: Install Flatsome theme for our Ecommerce Site

Sweet. If you made it past Step 6, I can honestly say you made an awesome decision. I know not everyone wants to spend money but I don’t feel comfortable showing you how to build an ugly website. Only the best!

Now it’s time to install the the theme that you just purchased.

  1. Go to WordPress website page (www.yoursite.com/wp-admin) – this is your Dashboard
  2. On the left side, find the Appearance link – hover over it and click “Themes”
  3. Near the top you’ll see a button that says “Add New” – click on that
  4. Then click the button that says “Upload Theme”
  5. Click the button that says “Choose file” right in the center
  6. Go to your download folder (or wherever the Flatsome theme is saved) and choose that file and click upload and “Install Now”
  7. You’ll be brought to another page – click “Activate”

Now you should be back on the Dashboard

Step 8: Install Plugins

Now we need to install the super popular ecommerce plugin that supports almost all the online stores own the web.

The Flatsome theme has a bundle of pre-packaged themes so we can install them all at once.

  • WooCommerce – WordPress eCommerce plugin (Required)
  • Ninja Forms – Used for contact form and newsletter signup (Optional)
  • Regenerate Thumbnails – Use to resize product images to recommended sizes. (Optional)
  • Taxonomy Metadata – Used to create custom fields in settings for Product categories. (Optional)
  • WooSidebars – Create unlimted sidebars for pages and footers (Optional)
  • YITH WooCommerce Ajax Search – Adds live search functionality to search box(Optional)
  • YITH WooCommerce Wishlist – Adds wish list functionalty to category grid and product pages(Optional)

flatsome_required_3

  1. Go to your dashboard > plugins
  2. Check the box above all your plugins so it selects everything
  3. Where it says “Bulk Actions” click that drop down and click Install
  4. Click Apply

Now check the box above all the plugins again and this time click “ACTIVATE” in the drop down menu and click Apply

Step 9: Install WooCommerce Pages

Now we just have to click a button so we have our Default pages like Shop, Cart, and Checkout

  • Go to your Dashboard
  • On the left hand site hover over Appearance > Click on Themes
  • Right on this page you will see a banner that says “Install WooCommerce Pages” – click on that
  • Now go to Pages on the left hand side and click “All Pages”
  • Just to see a bunch of default pages are up (if you see pages like Cart, My Account, Checkout…you’re good to go!)

Change Image Sizes

This theme uses image sizes other than WooCommerce normal sizes. Go to  WooCommerce > Settings > Products >Display and change sizes to these:

Note: You dont have to use the same heights. But its recommended to use the same widths

Step 10: Save and Upload Images

 

It is best for you to use your own images to build out your own website 🙂 Our demo images really have no use for you.

Step 11: Regenerate thumbnails

After image sizes are set, you’ll need to resize all images. We can do this automaticly with the plugin: “Regenerate Thumbnails”.

  1. Go to Tools > Regen. Thumbnails
  2. Click Regenerate All Thumbnails

You’ll need to install “Regenerate Thumbnails” if you cant find it under Tools.

Tip: You should probably regenerate your thumbnails after you upload them on your pages/post so this step may not be necessary until you upload some products and publish some blog posts. 

Step 12: Choose Layout Settings

  1. Go to DASHBOARD > APPEARANCE > THEME OPTIONS
  2. We will go through all of the important options right now

Global Setttings

  • If you want to Show a Message instead of your website while you build it -> Select Maintenance Mode

Logo and Icons (we will do this in a separate section)

Layout

  1. Choose the layout you want in the first section (we are using the first layout – left with no borders)
  2. Make sure you scroll down and click save

Header 

  1. No changes necessary
  2. You can add some text to “Top Bar Right” if you want
  3. We may do some additional work here in Step 25

Footer

  1. You can modify the text in the “Footer Botton Left Content” area
  2. We will do some additional work here in Step 25

Fonts

  1. Select what type of font you want for your website. We will be using LAGO

Style and Colors

  1. Go ahead and choose what colors you want for your website here. 
  2. Watching the video will help you understand the differences between the primary and secondary colors better

Product Page 

  1. We’ll work on this section in Step #15

Category Page

  1. We’ll work on this section in Step #17

Cart and Checkout

  1. No changes necessary

Catalog Mode

  1. No changes needed

Blog

  1. We’ll work on this section in Step #

Featured Items

  1. No changes needed

Backup and Import

  1. No changes needed

Step 13: Create custom website logo

Now we’re going to create a custom logo – how cool is that?

  1. The first thing you need to do is go to this website: Logomakr
  2. On the upper left corner, there is a search bar.
  3. Type in whatever type of image you want your logo to be
  4. Then find an image that you like
  5. Then go to the right upper corner and change the size
  6. Make sure your logo fits within that white space
  7. Click on the T on the left hand side if you want to add text to your logo
  8. Make sure all the text also fits within the white space
  9. You can change the colors of your logo by highlighting the image or the text and clicking in the color chart on the lower right corner
  10. Once you’re happy with your logo, go to the upper right corner and click on the disk
  11. A new page will pop up. Right click and download the logo
  12. Then go to your download folder. Double click the logo and export it to PNG.
  13. The logo should now be saved as a PNG image

Step 14: Create Homepage and Blog Page

We are going to create our homepage early on in this tutorial so we can add to it as we go through the steps. This way you can see the progress of your site from beginning to end.

  1. Go to your DASHBOARD
  2. On the right hand side you will see Pages > Hover over that and click Add New
  3. Create a new page and title it “Homepage”
  4. In the Page Attributes (right side section) -> Select Full Width
  5. Click publish

Now let’s create a blog page if you plan to have a blog for your website. These steps will be similar to creating a homepage.

  1. Go to your DASHBOARD
  2. On the right hand side you will see Pages > Hover over that and click Add New
  3. Create a new page and title it “Blog”
  4. Click publish

For now we will not add anything to these pages, but we need to set this page as our homepage and blog page so do the following:

  1. Go back to your DASHBOARD > Settings > Reading
  2. At the top of the Reading page you will see “Front page displays” > click on the button for “A static page”
  3. Select Homepage for your front page
  4. Select Blog for your posts page (change the number of blog posts you show per page if you wish)
  5. Scroll down to the bottom and click SAVE

Step 15: Create HOMEPAGE Blocks

  1. For this ecommerce website theme (online store website) we will be using “Block IDs” to create our site.
  2. Blocks will be different sections of your website.
  3. We’ll create the main image section, buttons, featured products, categories, etc. You’ll be able to create any and all blocks for your ecommerce site after this tutorial.

Step 15-a: Create Slider BLOCK

To create your slider block go to DASHBOARD > BLOCKS > ADD BLOCKS

If you want a large image at top of your page and want additional images to rotate – this is the slider section.

Remember, everything we do requires BLOCKS. So make sure you’re on the block page (left menu, block, add new).

Title your block ID: Homepage Slider

  • Make sure you’re on the Visual Tab
  • Click the Shortcodes drop down
  • Go to UX Slider > Simple Slider

Now you will see a line that says “Insert slides here (UX Banner or Sections)”

  1. Delete that line and insert some UX Banners by going back to the shortcode tab and clicking UX Banner
  2. Change the height to 700px
  3. Choose your slider image to use
  4. Change annimation to Flip in X
  5. Text Color = Dark/Light
  6. Text Layout = center (or whatever alignment you want)
  7. Choose whichever text content you want (with or without buttons)
  8. Then click OK
  9. Change the text_width to 70%
  10. Now you can modify the text
  11. IF YOU chosen text to have buttons -> go down to the buttons area “[button text]” and edit the text and paste in URLs between the link = “(section)” so the button brings you to another page (we will be creating these pages in a little bit)

Tip: Here are button shortcodes – note that PRIMARY goes with the color of your site http://flatsome.uxthemes.com/shortcodes/shortcode-buttons/ (I modify my button colors on the video tutorial – please watch to see how to do this)

Now repeat these steps if you want multiple images and links in your slider

Then click PUBLISH

  • You will see on the right side of the edit page a box that says “Shortcode: [block id =…]”
  • Open up the Homepage that you created (Dashboard > Pages > All Pages > Click on Homepage)
  • Paste in the short code and click publish. You should now see the slider on your homepage.

Step 15-b: Create Banner Row

This is for the section for the three small /medium sized images for different sections of your site

We need to create a new block ID, so click Add New if you are still on the BLOCK page or Go create your slider block go to DASHBOARD > BLOCKS > ADD BLOCKS

We are going to create 3 buttons but if you want you can create more.

Title your new BLOCK ID: Banner row – 3 column zoom effect

  • Make sure you’re on the TEXT Tab since you’re pasting in code in the yellow box below
  • Paste in this code
[row]

[col span=1/3]
[ux_banner link="(add link to page)" bg="http://imageurl" hover="zoom" height="160px"]
<h2 class="uppercase">WHY?</h2>
___
[/ux_banner]
[/col]

[col  span=1/3]
[ux_banner link="(add link to page)" bg="http://imageurl" hover="zoom" height="160px"]
<h2 class="uppercase">MEET THE TEAM</h2>
___
[/ux_banner]
[/col]

[col span=1/3]
[ux_banner link="(add link to page)" bg="http://imageurl" hover="zoom" height="160px"]
<h2 class="uppercase">SHOP</h2>
___
[/ux_banner]
[/col]

[/row]

Now you can stay on the TEXT tab or go to the visual tab.

  1. Now we have to add a background image to these banners. If you are using the images or your own images:
  2. Go to your DASHBOARD > Media > Library
  3. Click on the image you want to use for each button
  4. Highlight the URL
  5. Go back to your Banner Block page – paste in the URL between the “” in the bg= section

We just have to add page links to the link= sections (we will add these later after we create pages)

Then click PUBLISH

  • You will see on the right side of the edit page a box that says “Shortcode: [block id =…]”
  • Open up the Homepage that you created (Dashboard > Pages > All Pages > Click on Homepage)
  • I like to add some space between each section so if you want:
    • ADD SOME SPACE: Go to the shortcodes tab > elements > title/dividers > Gap 30x
  • If you want to add a short description sentence like the tutorial before your featured products section
    • Add TEXT: Go to the FORMAT tab above the content area and click on “Paragraph – Lead, Centered”
  • Paste in the short code and click publish. You should now see the slider on your homepage.

If you want a different featured box you can go here to find the code you want: http://flatsome.uxthemes.com/shortcodes/shortcode-ux-banner-grid/

Step 15-c: Create Featured Products

Let’s make a section to show off our best products.

We need to create a new block ID, so click Add New if you are still on the BLOCK page or Go create your slider block go to DASHBOARD > BLOCKS > ADD BLOCKS

  1. Save the title of the block as Featured Products
  2. Go to the TEXT tab
  3. Now just paste in this code
[title text="Featured Products" style="center"]
[ux_featured_products]

Now click PUBLISH

  • You will see on the right side of the edit page a box that says “Shortcode: [block id =…]”
  • Open up the Homepage that you created (Dashboard > Pages > All Pages > Click on Homepage)
  • I like to add some space between each section so if you want:
    • ADD SOME SPACE: Go to the shortcodes tab > elements > title/dividers > Gap 30x
  • Then paste in the short code and click publish. You should now see the slider on your homepage.

Step 15-d: Create Blog Section

Now we just have to create our latest blog post section.

We need to create a new block ID, so click Add New if you are still on the BLOCK page or Go create your slider block go to DASHBOARD > BLOCKS > ADD BLOCKS

  • Save the title of the block as Latest from blog
  • First we need a title so go to your shortcodes > Elements > Titles/Dividers > Title – Center
  • You will see this code: [title text=”This is a centered title” style=”center”]
  • Change “This is a centered title” to Latest from our blog
  • Go to the TEXT tab and paste in the following code below
  •  [blog_posts posts="3" type="grid" columns="3" image_height="200px" show_date="true"]

Click PUBLISH

  • You will see on the right side of the edit page a box that says “Shortcode: [block id =…]”
  • Open up the Homepage that you created (Dashboard > Pages > All Pages > Click on Homepage)
  • I like to add some space between each section so if you want:
    • ADD SOME SPACE: Go to the shortcodes tab > elements > title/dividers > Gap 30x
  • Paste in the short code and click publish. You should now see the slider on your homepage.

Step 16: Set Product Page Options

First let’s make sure our product page formatting is correct.

  • Go to DASHBOARD > APPEARANCE > THEME OPTIONS
  • Click on Product Page
  • Make sure left side is selected for Product Page Layout (so we can show different categories here)
  • Tabs is selected for Product Info Style
  • And check the box for Show Mini-cart drop down

Now to to your widgets page and let’s put something in the left sidebar

  1. Dashboard > Appearance > Widgets
  2. You should see a Product Sidebar box on the right side of the page
  3. From the left side find the “WooCommerce Product Categories” widget and drag it into the Product Sidebar
  4. Click save

Step 17: Add Products

This is where you’ll be adding all the products you’ll be selling on your website. This is probably the most important and time consuming part of building out your ecommerce website.

Go to DASHBOARD > APPEARANCE > PRODUCTS > ADD NEW

  • Add a title and description in the main content section (the description you put in will be in the additional information section)
  • Add Product Data information (this is where you’ll put in the price and SKU and everything else)
  • Click on the Advance tab and check to enable reviews (if you want)
  • Add a short description in the “Product Short Description” section (this will be next to the main image)
  • Add comments if you have any to add
  • Add or select categories on the right (on the right side)
  • Add product tags on the right (on the right side)
  • Add or select categories on the right (on the right side)
  • Add Featured Image for the main image
  • Add images into the Product Gallery section for additional images to be viewed
  • Above the PUBLISH button you will
  • Click Publish

** If you want any of these products to show up on your “Featured Products” section on your homepage:

  1. Click on the link next to Catalog Visibility above the Publish button
  2. Select Featured Product
  3. Push Publish or Update

Repeat these steps as necessary to add additional products

Extra: Additional Columns for Description Section

You can have more than one volume for your description section if you don’t just want paragraph format (lists for example)

  1. Just go to Shortcode > Row/Colums > select how many columns you want
  2. Modify text and what not 🙂

Extra: Variable Products

If you have different sizes or different price points, you can add variables to your products with rather than just have one size/price

  1. In the Product Data section -> select Variable Product
  2. Go to the Attributes section -> Click the blue button that says Add for custom product attribute
  3. Create a name for your attribute (Size, Weight, etc.) -> then in the values section, add your attributes. Instead of using a comma use a | to separate the attributes (it will automatically add a comma to your list of attributes if you have the “Visible on product page” selected
  4. Click on “Used for variations” if you want to allow a customer to select different variables (most likely)
  5. Click save attributes when done
  6. Now go to the Variations tab -> Click the button that says “Link All Variations”
  7. Modify and add different prices and other options 🙂

Step 18: Set Categories Options

We need to set up the lay out for our categories page since we are showing categories on our “Shop/Product” page

  • Go to DASHBOARD > APPEARANCE > THEME OPTIONS
  • Click on Category Page
  • Choose the shop sidebar layout you want (I use the left sidebar option)
  • Disable Cart Option
  • Choose 4 products per row – Desktop (this looks better to me)
  • Choose 2 products per row – Mobile
  • 12 products per page (or whatever number you want)
  • Click save changes

If you selected a sidebar option layout like I do then you need to drag in a some widget(s) into your side bar.

  1. Dashboard > Appearance > Widgets
  2. You should see a Shop Sidebar box on the right side of the page
  3. From the left side find the “WooCommerce Product Categories” widget and drag it into the Shop Sidebar
  4. Click save

Step 19: Create “Shop” Page

This page will show whatever items we want to show.

First make a new page and title it Products.

  1. To do this go to Dashboard > Pages > Add New > Title Page as “Products”
  2. Go to the Page Attribute section (on your right) and select Default Template (no title)
  3. Then paste this code in to the content section:
[title text="" style="center"]
[products ids="##" columns="6"]
[title text="" style="center"]
[products ids="##" columns="6"]
[title text="" style="center"]
[products ids="##" columns="6"]
  • Title the three sections by writing in a title between the quotes for “Title Text”
  • Go to our Products page and get ID #’s to put into the “Product id” sections
  • You can change the number of items you want to show per row in the column section.
  • Click Publish when you’re done.

Step 20: Format Blog Page

First let’s make sure our blog page formatting is correct.

  • Go to DASHBOARD > APPEARANCE > THEME OPTIONS
  • Click on Blog
  • Choose whatever settings you want or you can use the following (which I use in the tutorial)
  • Blog List Layout – Right sidebar
  • Blog List Style – Normal
  • Blog Single Post Layout – Right sidebar
  • Blog Single Post Header Style – Default
  • Check the boxes for Show Author box and Enable Share Icons

Step 21: Create Blog Posts

You don’t have to do this section right now if you don’t have any articles you want to publish. But since I want to show you what your website will look like after you do publish some blog posts, I will show you how to create 3 blog posts.

  1. Go to your DASHBOARD > POSTS > Click Add New
  2. Title your blog post whatever you want
  3. Type in whatever content you want and change the text formatting if you would like
  4. Once you’re done you can add in a category for the blog post if you would like
  5. Add a image in the Featured Image section on the lower right if you want a thumbnail to show up on the homepage and blog post page

This is how you create blog posts 🙂

Step 22: Create About Page

We need to create a new page for the About Page.

  1. Go to DASHBOARD > PAGES > ADD New
  2. Change the page template to Default Template (no title)
  3. Title the page

Now we are going to do some formatting for this page. You can do whatever formatting you want or you can copy what we are creating in this tutorial.

  1. First we want to make a slider banner and paste our title and social media buttons in there. So I want you to do the following:
  2. On the upper right corner you will see a button that says SCREEN OPTIONS. Click on that and expand it.
  3. Check the EXCERPT box
  4. Scroll down below your content area and paste in this code:
[ux_banner bg="http://imageurl" height="300px" animation="flipInX"]
<h1>Our Story</h1>
___
[share]
[/ux_banner]

Change the “Our Story” title to whatever you want.

Now go back up to your content area – 

  1. Go to the Format tab above the content section > Select Paragraph – Lead, Centered
  2. Type in a short summary of your business (maybe just one sentence)
  3. Now add a title for the next section -> Go to the Shortcode tab > Elements > Title/Dividers > Title – Center
  4. This is the short code you should get: [title text=”” style=”center”]” — add a title after the title text section in the quotes
  5. How go ahead and write a blurb about your company and style the font however you want

Then we will add a team bio after our about section

Depending on how many team members you have – you’ll want to create a certain number of columns. In our example we will have 4 team member bios.

  1. Add a title for the next section -> Go to the Shortcode tab > Elements > Title/Dividers > Title – Center
  2. This is the short code you should get: [title text=”” style=”center”]” — add a title after the title text section in the quotes
  3. Go to the Shortcode tab > Rows/Columns > Select the number of columns you want (1/4 in this example) > then in column content select Team Members
  4. Then click OK
  5. Now you can Edit the name and add social media pages links
  6. For the image – go to your Media > Library tab and either find the team members photo or upload it and then click on the image and click and save the URL on the right side
  7. Paste the image URL between the quotes in this section of the short code: img=”http://imageurl”
  8. Then add bio information for the team member in the Team Member Description section

Now we are going to add a VALUES section

  1. Add a title for the next section -> Go to the Shortcode tab > Elements > Title/Dividers > Title – Center
  2. This is the short code you should get: [title text=”” style=”center”]” — add a title after the title text section in the quotes
  3. Go to the Shortcode tab > Rows/Columns > Select the number of columns you want (1/2 in this example)
  4. Then in the INSERT CONTENT HERE area – just paste in the code below and then edit the content including adding a title for your value, an image URL for your ICON (go to Media > Library > get URL) and then in the “feature box text” add a description of the value
 [featured_box title="Featured box title" img="http://iconurl"  pos="center"]
    Featured box text
  [/featured_box]

For our tutorial page we will have 4 values. To have another row – do the steps again in the value section.

Once you’re done push Publish 🙂

Step 23: Create Contact Us Page

For our contact us page, we’ll put our address, an email form and a map to show your location.

  1. Go to DASHBOARD > PAGES > ADD New
  2. Change the page template to Default Template (no title)
  3. Title the page

Now let’s get the shortcode for our map first –

  1. Go to the Shortcode tab > ELEMENTS > MAP
  2. You can find your longitude and latitude for your map using this link: http://universimmedia.pagesperso-orange.fr/geo/loc.htm
  3. Then insert your latitude and longitude in the sections of the shortcode
  4. Put in your address or other content in the “Enter map content” area
  5. Now cut and paste all tho content in the EXCERPT section below the content box (similar to the About page)

Now we need two columns to put in our address and have a contact form.

  1. Make sure all your MAP shortcode is deleted from the main content area
  2. Go to your shortcode tab >Rows/Columns > Choose 1/2 1/2 for your columns
  3. Click OK

In the first column we will be putting in our address. In the second column we will create a contact us form.

First column

This column is pretty straight forward. Just put in your address and hours and what not and edit the font.

Second Column

Here we will be using the Ninja form plugin that comes with the Flatsome theme

  1. All we have to do is go to the Dashboard > Find the FORMS tab (click on Forms)
  2. You should have a default form set up but if not -> click ADD NEW and create a form and publish it
  3. On the FORMS page you will see a shortcode for your form that looks like this: [ninja_forms id=1]
  4. Copy the short code and paste it into your column area on your ABOUT PAGE where it says “Insert content here..”

Click PUBLISH when you’re done and we are good to go 🙂

You can view the messages you receive from the Ninja form by going to DASHBOARD > FORMS > SUBMISSIONS

Step 24: Create FAQ Page

Create a new page – DASHBOARD > PAGES > ADD NEW

  1. Title the page FAQ
  2. You can add some content if you would like before we have the FAQ section
  3. Now to got the Shortcodes button > ELEMENTS > TABS/ACCORDIANS > ACCORDIAN
  4. In this section between the quotes: [accordion-item title=”Accordion Item 1 Title”] – add your question
  5. Where it says “Accordion Item 1 Content Goes Here” – add your answer
  6. Do this over and over again until you get all of your FAQs listed
  7. Then just make sure the last line of code is: [/accordion]
  8. After you’re done, click PUBLISH

Step 25: Create Shipping & Returns Page

Now create a new page – DASHBOARD > PAGES > ADD NEW

  1. Title the page Shipping & Returns
  2. You can add some content if you would like
  3. Push Publish and we’re done 🙂

Step 26: Create Terms & Conditions Page

Now create a new page – DASHBOARD > PAGES > ADD NEW

  1. Title the page Terms & Conditions
  2. You can add some content if you would like
  3. Push Publish and we’re done 🙂

Step 27: Create Privacy Policy Page

Now create a new page – DASHBOARD > PAGES > ADD NEW

  1. Title the page Privacy Policy
  2. You can add some content if you would like
  3. Push Publish and we’re done 🙂

Step 28: Create Wish List Page

First create a page and insert the shortcode [yith_wcwl_wishlist]. Using the “My account” template is recommended. Select this page in Wp-admin > YIT Plugins > Wishlist.

  1. Go to Wp-admin > YIT Plugins > Wishlist
  2. Change “Position” to “Use shortcode”
  3. Enable “Show “Add to Cart” button”
  4. Enable “Show Unit price”
  5. Disable “Use buttons”
  6. Enable “Use theme style”

Step 29: Header Menu

  1. Go to Dashboard > Appearance > Menus
  2. Select Main Menu in the drop down menu section at the top
  3. Drag / Modify / Edit what you want to show in the menu from the left pages or create new menu items
  4. Click Save

Step 30: Navigation Menu (Top and Footer)

I do these two menus separately since I have different things included in each

  1. Go to Dashboard > Appearance > Menus
  2. Select Top Nav and Footer Nav in the drop down menu section at the top
  3. Drag / Modify / Edit what you want to show in the menu from the left pages or create new menu items
  4. Click Save

We can go back to our Theme Options (Appearance > Theme Options > Header / Footer) and modify things there if we’d like.

[follow twitter="http://" facebook="http://" email="email@post.com" pinterest="http://" rss="http://" instagram="http://" googleplus="http://" linkedin="http://" youtube="http://" flickr="http://"]

Step 31: Activate My Account Login

  1. Go to DASHBOARD > WooCommerce > Click on the Accounts tab
  2. Check to enable registration on My Account page

First create a new page (Dashboard > Pages > Add New)

  1. Title the page as “My Account”
  2. Add this code to your content section: [woocommerce_my_account]
  3. Click Publish

Step 32: WooCommerce Settings

We need to create a few pages so our visitors can make purchases.

  1. Make a page and title it My Cart or Cart (DASHBOARD > PAGES > ADD NEW)
  2. Paste in this shortcode: [woocommerce_cart]
  3. Change the page template to Page Checkout
  4. Click Publish
  1. Make a page and title it Checkout (DASHBOARD > PAGES > ADD NEW)
  2. Paste in this shortcode: [woocommerce_checkout]
  3. Change the page template to Page Checkout
  4. Click Publish
  1. Make a page and title it Terms and Conditions (DASHBOARD > PAGES > ADD NEW)
  2. Click Publish

Now let’s go make these pages the default pages for viewing the cart and checking out.

  1. Go to DASHBOARD > WOOCOMMERCE > SETTINGS
  2. Click on the Checkout tab at the top
  3. Scroll down to Checkout Pages
  4. Select the correct pages for Cart Page, Checkout Page, and Terms Page (we just made those pages above)

Now we need to set up our billing system with woocommerce. For this tutorial we will use paypal but you can select any billing service offered within Woocommerce.

  1. On the same page that we should still be on scroll down and select PAYPAL
  2. Click SAVE CHANGES
  3. Then click on SETTINGS next to the PayPal Button
  4. Now just enter your PayPal information
  5. And Click Save Changes on this page 🙂

Optional Step : Create Footer 1 and Footer 2

There are two footer sections. One on top of each other. We will not be using any of these in the tutorial but if you want to – you can follow these instructions to add widgets to one of your footers.

Go to your Dashboard > Appearance > Widgets

On the right side of the page you will see two boxes – Footer 1 and Footer 2

Footer 1 = upper footer

Footer 2 = lower footer

Add Widgets to Footer 1

About section: Drag text box into Footer 1

  1. Title your text box “About”
  2. Post in whatever you want to say about your website/company
  3. Paste in this shortcode:
  4. [follow twitter="http://" facebook="http://" email="email@post.com" pinterest="http://" rss="http://" instagram="http://" googleplus="http://" linkedin="http://" youtube="http://" flickr="http://"]
  5. Add the correct URLs and addresses for the correct buttons
  • Drag in the Flatsome Recent Post widget and title it Recent Posts
  • Drag in the WooCommerce Product Tags and title it Product Tags
  • Drag in the Blog Subscriptions (Jetpack) widget and modify the content as you please (this will send an email each time a blog post is published)
    • You can check the list of subscribers by going to your DASHBOARD > JETPACK > SITE STATS > and scroll down to subscriptions. This list can be exported.

Make sure you click save on each widget

Extras:

How to add newsletter signup to top bar

The newsletter link shown on demo page is just a normal menu item combined with [lightbox] shortcode. Here is how to make it:

  1. Go to Appearance > Menus
  2. Select Top Bar menu in the drop down menu section at the top
  3. Add a custom link. URL should be #newsletter-signup
  4. Add “icon-envelop” to CSS Classes. (Enable CSS classes in Screen Option)

Now you have setup the menu. Now lets setup the lightbox:

Go to  Theme Option > Header and add this to “HTML after footer”:

[lightbox id="newsletter-signup" padding="0px" width="600px"]
[ux_banner bg="http://bgurl" height="400px" text_color="dark" text_align="left" text_pos="left center" text_width="50%" text_bg="" parallax_text="0" parallax="0" effect=""]
<h3>Signup for our Newsletter!</h3>
 ____

[ninja_forms_display_form id=1]
[/ux_banner]
[/lightbox]

Get your ninja forms shortcode from  wp-admin > Forms

UPLOAD Logo & Other Icons

  1. Go to DASHBOARD > APPEARANCE > THEME OPTIONS > LOGO AND ICONS
  2.  Here you can upload any icons you want including your logo
  3. Make sure you scroll down and click save

To create a custom logo you can make one at Logo Makr for free

Edit Font

You can change the type of font you use by going to your theme options.

  1. Go to DASHBOARD > APPEARANCE > THEME OPTIONS > FONTS
  2.  Make sure you scroll to the bottom and click SAVE

Edit Style and Colors

  1. Go to DASHBOARD > APPEARANCE > THEME OPTIONS > STYLE AND COLORS
  2.  The only color that really matters is the Primary Color so choose wisely 🙂 it will affect your borders, buttons, and navigation
  3. Make sure you scroll and and click save

Add Favicon

  1. Go to DASHBOARD > APPEARANCE > THEME OPTIONS > LOGO AND ICONS
  2. Click on Footer
  3. The first box should be labeled “FOOTER BOTTOM LEFT CONTENT (COPYRIGHT TEXT)” you can edit the text here.
  4. Make sure you scroll down and click save

Edit Copyright Text

  1. Go to DASHBOARD > APPEARANCE > THEME OPTIONS > FOOTER
  2. Click on Footer
  3. The first box should be labeled “FOOTER BOTTOM LEFT CONTENT (COPYRIGHT TEXT)” you can edit the text here.
  4.  Make sure you scroll to the bottom and click SAVE

 Adding Background Colors / Images

  1. Go to Dashboard > Appearance > Theme Options
  2. You will see three tabs on: Layout, Header, Footer
  3. In each of those there will be a section to modify colors and add a background image if you would like

Edit Permalinks

If you want the www. in front of your URL, do this:

  1. Go to DASHBOARD > SETTINGS > GENERAL
  2. Then type in www. on WordPress and Site URL

If you want your product and blog links to show up differently, follow these steps:

  1. Go to DASHBOARD > SETTINGS > PERMALINKS
  2. Then choose how you want your links to look

Change Your Tagline

To change your tagline for your site or the name of your site –

  1. Go to DASHBOARD > SETTINGS > GENERAL
  2. Modify Site Title and Tagline

 Add Email Optin Pop-up

Incase you want to collect emails or offer some sort of weekly discount – here is how you can integrate MailChimp and a pop up box to your site when a visitor scrolls down.

  1. Download and install the plugin – Social Triggered Boxes
  2. Activate the plugin
  3. You will see on the side bar menu on your dashboard – Social Triggered Boxes
  4. Go to Add New
  5. Let’s first modify the colors and when the pop up appears
  6. Go to Box Appearance and choose your background color for the box and the text and anything else you want
  7. Go to Box Options and select when you want the optin box to appear
  8. Now scroll back up to the content section and go to the TEXT tab and paste in the code below (you will need to modify the sections highlighted in RED)
<p style="text-align: center;">SIGN UP FOR...TEXT</p>
<p style="text-align: center;">Subscribe to our mailing list</p>
<div id="mc_embed_signup"><form id="mc-embedded-subscribe-form" class="validate" action="ADD IN YOUR MAILCHIMP ID HERE" method="post" novalidate="" target="_blank">
<div style="text-align: center;">
<input id="mce-EMAIL" class="email" name="EMAIL" required="" type="email" value="" placeholder="email address" />
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input tabindex="-1" name="b_dd4796fd9dc397c6238d4e9d6_dc0f3b1a27" type="text" value="" /></div>
<div class="clear"><input id="mc-embedded-subscribe" class="button" name="subscribe" type="submit" value="Subscribe" /></div>
</div>
</form></div>
<!--End mc_embed_signup-->
  • You can get your MailChimp and go to your LIST
  • Once you are on your LIST page – go to sign up forms
  • Click on Embedded forms
  • You will see a section that starts with FORM ACTION (take what is inside the quotes)
  • Paste in above

Click save and you’re done!

For more info on mailchimp you can watch this video I put together.

Congratulations!

You’re Done! Please make sure you subscribe to the NYC TECH CLUB YouTube Channel as I will be uploaded shorter videos on how to customize and edit your ecommerce website.