5 SIMPLE STEPS
STEP 1: Install WordPress
STEP 2: Install the web design
STEP 3: Customize text, images, buttons
STEP 4: Add New Pages
STEP 5: Contact Form and Details
FINAL STEP: Launch it Live – click here
Get Online:
We use Hostgator. To get a huge discount:
https://www.hostgator.com/discounted
Use a coupon code at checkout:
Code: ONLINESTORE (up to 60% OFF & $5.99 Domain)
Code: 1DIRTYCENT (1 cent first month)
Affiliate disclaimer: if you purchase Hostgator via our discount referral link we may earn a commission. You can take advantage of some serious discounts, while helping us pay the bills to keep producing these videos. Thank you for your support.
Useful Links:
- Finished demo – www.thestoredemo.com
- WooCommerce info – here
- Storefront design info – here
Subscribe for updates:
FAQs
Firstly, check our generic FAQ section here. If that doesn’t help, here are questions specific to only this tutorial:
Is there a newer tutorial available?
The video above is the most up to date tutorial for 2019! If you are watching a different video, it is probably an old one.
How do I subscribe for updates?
Subscribe to our YouTube channel for updates and more useful content:
After adding the Homepage Slider Code my website stopped working
You will need to remove the code manually:
- Login to your hosting cPanel
- Go to File Manager
- Go to Public_html > wp-content > themes > Storefront
- Edit the file called functions.php
- Remove the code you just input, and save Don’t touch anything else!
If it still doesn’t work contact us for help.
How do I make Image Slider full screen on Homepage only?
Go to Appearance > Customize > Additional CSS. Then copy & paste the following code:
/* remove slider internal page */
.ewd-slider-section .slider , .ewd-slider-control{
display:none !important;
}
.home .ewd-slider-section .slider , .home ewd-slider-control{
display:block !important;
}
How do I remove the Search Box?
Go to Appearance > Customize > Additional CSS. Then copy & paste the following code:
/* remove search box */
.site-header .widget_product_search , .site-search{
display: none;
}
How do I Center the Logo, and the Menu?
Go to Appearance > Customize > Additional CSS. Then copy & paste the following code:
/* center logo*/
.site-branding{
width:100% !important;
text-align:center;
}
.site-header .site-branding img {
margin: 0 auto;
}
/* center menu */
nav#site-navigation {
width: 100%;
text-align: center;
margin-right: 0px;
margin-bottom:25px;
}
@media (min-width: 768px){
.woocommerce-active .site-header .site-header-cart {
width: 21.7391304348%;
margin: 0 auto;
float:none;
}
}
Affiliate Disclosure: some links on our site are affiliate links which means we may get paid a commission for purchases through them. While this does not cost you anything, it helps us pay the bills and allows us to continue producing these awesome tutorials for you free of charge! Thank you for your support.