Before you start, ensure that:
- You have your own hosting platform running up to date stable versions of Apache/Nginx, PHP, MySQL. If you need hosting we recommend SiteGround.
- You have installed the latest version of self-hosted WordPress.
- You have logged in to WordPress and are looking at the WordPress dashboard.
New! Video Tutorial
We’ve prepared a comprehensive tutorial on creating a fast WooCommerce store from scratch which includes installing the Shoptimizer theme for the first time. The video shows you how to add the demo data manually using the xml file and the widgets wie file (right-click and ‘save as’ to grab them both).
1. Install the theme
When you are ready to install a theme, you must first upload the theme to your WordPress directory. There are two ways you can install the theme:
Using WordPress: Navigate to Appearance > Themes > Install Themes. Go to upload and select the zipped theme folder (shoptimizer.zip) and hit install now and the theme will be uploaded and installed. Once you have uploaded the theme, you need to activate it. To activate your new theme, go to Appearance > Themes and activate your chosen theme.
Using FTP: By using an FTP program of your choice you can upload the non-zipped folder to the /wp-content/themes/ folder on your server.
2. Install the required plugins
Once you’ve activated Shoptimizer, you’ll be prompted to install a set of plugins which are required to get the most out of Shoptimizer. The message will look like this:
Click the “Begin Installing plugins” option.
Tick the checkbox just under Bulk actions and from the Bulk options dropdown select “Install” and click “Apply“. Give it a few minutes to install all of them.
For simplicity, tick the checkbox just under Bulk actions and from the Bulk options dropdown select “Activate” and click “Apply“. This will activate all plugins that you’ll need for the theme.
You’ll know you’ve done everything correctly when you see this confirmation.
3. Set up WooCommerce
Run the WooCommerce setup wizard and setup your store, including your currency, location and payment methods.
You don’t need to install the standard WooCommerce pages – they will be included in the demo content. Otherwise, you will have duplicates.
4. Add the demo content
We highly recommend you add the demo content so you can get setup quickly. But you must activate all of the recommended plugins first (Step 2), especially Elementor.
Just go to Appearance > Import Demo Data
It can take up to 2 minutes to import the demo pages so don’t touch it! Once correctly imported you’ll get an “All done – Have fun!” message.
This adds the demo content as well as the widgets.
Have issues with the import?
- Try increasing the memory required by WordPress and then run the import again. Instructions
- On some hosts (we’re looking at you GoDaddy) the timeout limits are set very low which doesn’t allow it to complete. Solution
5. Set the menu
Go to Appearance > Menus and click on ‘Screen Options‘ at the top. Ensure that CSS Classes is ticked. You may also want to tick Product categories and Products if these are not already selected.
You can switch between the Primary Menu (the main navigation) and the Secondary Menu (with icons next to the search bar).
You’ll need to set some pages yourself such as the Shop, Cart and Checkout. By default they’re hash links – replace this with the correct link to the page on your site – e.g. http://www.mysite.com/cart
6. Set up the Elementor page builder
Go to Elementor > Settings. Disable default colors and default fonts like so. I’d recommend enabling Elementor for Pages and Products.
7. Set the homepage and blog
Go to Settings > Reading and set the Front Page to be ‘Home‘. Set the Posts page to be Blog.
Set the ‘Blog pages show at most’ to be 8.
8. Set up the customizer
Open the customizer via Appearance > Customize and go to: Typography > Main Body
Change the variant to italic – save – and then back to regular and save. This ensures that the correct font weights are loaded.
9. Set WooCommerce’s options
Still in the customizer, go to WooCommerce > Product Images
Set the Main image width to be 800 and the thumbnail width to be 300. Also ensure that Uncropped is selected.
If you’re new to WooCommerce we’d highly recommend you taking a look through their comprehensive documentation. It covers all the basics including setting up products and payment gateways.