How to Make an eCommerce Website With WordPress – Flatsome Theme Online Store 2020!

Hi everyone

We are back with a very special video tutorial. One of our most popular tutorials is back, better than ever and updated for 2020. In this video we will learn how to use the Flatsome theme to build an ecommerce website with wordpress.

In this video you will learn how to build any type of online store that you want.

Below are the steps to this video and also the most up to date affiliate links for Siteground and the Flatsome theme. Please use both as they provide us a commission for recommending them and they help support this channel. There is no cost to you.

Enjoy the video and let me know if you need any help learning how to create your online store or ecommerce website.

This video was made in conjunction with How to Web Tutorials. 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.

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


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

Disclosure: Siteground, Themeforest, Hostgator and Godaddy pays us a commission if you use our link or coupon code. No charge to you, so thanks in advance.

This tutorial will teach you how to create 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

What You Don’t Need

What You Will Need

Step 1: Register a domain and get hosting service with Siteground

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

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

You need hosting in order to run your website and store all the data (content, images, video). Every website needs hosting, so make sure you get hosting otherwise we can’t build out your website. This is a MUST.

Go to Hostgator -> Click Get Started Now -> Choose a Plan -> Click Sign up now (doesn’t matter which)

Type in a domain you want to register and push enter to see if it is available. If you found one that is – move onto the following steps! 

Use the discount code: nyctech30 to save 30%

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

  1. 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)
  2. Fill in all the info (I suggest you choose a 12 month billing cycle)
  3. Unclick all additional services (they are unnecessary and extra money)
  4. Agree to the terms and conditions and “Check Out”

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

Step 2: Install wordpress

First we have to 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!

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 3: 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 4: 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 5: 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 6: 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.

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 7: Save and Upload Images

If you need some demo images similar to the ones in this online store website tutorial, you can download the images using this Ecommerce Demo Content.

Step 8: Choose Layout Settings

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

Header

Style – here are all the color codes we use in the online store demo

Global styles – radius – 0px

Typography – Lora

Blog – no changes

Store (woocommerce)

Layout – no change

Footer 

Copyright 2018 © <strong>NYC TECH CLUB</strong>.
[follow twitter="http://www.twitter.com/nyctechclub" facebook="http://" email="[email protected]" pinterest="http://" rss="http://" instagram="http://"]

Pages – no changes

Portfolio – no changes

Menus – we create these later

Widgets – you can edit the sidebar here if you want or we do it later

Homepage settings – we will work on later

Share – choose your share buttons here

Save all your changes when you’re done!

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

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 PRIMARYgoes 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

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

[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

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

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

Click PUBLISH

Step 16: Set Product Page Options

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

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

**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” OR click on GO next to add attributions and continue to do this to add your different values
  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

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″]

Step 20: Format Blog Page

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

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 protected]" 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 protected]” 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

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 Makrfor 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 videoI 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.