Hello there and welcome! So glad you are here with us as we explain how you can setup your new Shoppie Pro eCommerce Theme just like our live demo. So let’s go ahead and get started.
Begin by logging into your WordPress Dashboard. From there you will want to navigate to Appearance » Themes. In the upper left hand corner you will see a button that says “Add New“, go ahead and click on it.
First, upload your Genesis Framework zip file(it will be titled genesis.zip). Then repeat to upload your new Shoppie Pro themes’ zip file(it will be titled shoppiepro.zip). Next, navigate back to the themes section of your Dashboard and locate the Shoppie Pro theme and click on the blue “Activate” button.
Your new theme is now active and live on your website. However, we still have plenty of ground to cover before it actually looks like the live demo.
Blog Title & Tagline
You will want to head on over to Settings » General. As you will see below, it is pretty self-explanatory. However, we wanted to point you in the right direction so you may modify these if you wish.
Adding a header has never been easier. Just make sure your header image/logo is 320px X 100px then head on over to Appearance » Header. Click where it says “Add New Image” and upload your header image. Once finished click where it says “Save & Publish” in the upper right corner.
Pick Your Own Color
Now you can change your website colors with just a few simple click. While you are still in the customizer go ahead and click on the back arrow next to where it says “Header Image”. You will want to click on the “Colors” tab next. Here you can change background color and your accent color. Once you have picked your colors click on the “Save & Publish” button and that’s it!
Now if you want to add a background image this is the time to do it. Just click the back arrow next to “Colors” and then click on the “Background Image” tab. Here you can upload a background image of your choice and chose how you would like it to display. Don’t forget to save one finished!
Alright, we are pretty much finished with the customizer at this point. So simply click the “X” in the upper right corner to close out of it.
Setting up your Posts Excerpts
To do this, you will need to navigate to Genesis » Theme Settings. Scroll down until you find the section labeled “Content Archives” and apply these settings and remember to click the “Save Settings” button when finished.
You will want to install and activate the following plugins:
Genesis eNews Extended
Genesis Simple Share
Simple Social Icons
jQuery Pin It Button For Images
Genesis Connect for WooCommerce
WooCommerce Menu Cart
Weptile Image Slider
YITH WooCommerce Wishlist
For those of you who are WordPress “virgins”, we will go ahead and explain how and where to upload these plugins. There are two options.
You will want to navigate over to Plugins » Add New. In the upper left hand corner you will see a button titled “Upload Plugin”, go ahead and click on it. You will need to upload the plugins one at a time. After each upload is complete it will ask you if you want to activate. Yes, click the activate link for each plugin!
Like the first option find your way over to Plugins » Add New. From there you can enter the name of the plugin into the search bar on the right hand side and hit enter and click on the “Install Now” button next to the plugin image. After it has installed it will ask you to activate, go ahead and do this.
jQuery Pin It Button For Images
You will want to navigate to Settings » jQuery Pin It Button For Images. Then you will want to click on the “Visual” tab. You will want to apply these settings. Note you can find all your themes’ “Pin it Buttons” in the themes’ images folder.
Genesis Simple Share
To configure this plugin simply go to Genesis » Simple Share. Set the Icon Size to Small Bar, the Icon Appearance to Filled and the Icon Display Position to After the Content. Choose which social networks you wish your content to be shared on and save!
Menu Cart Setup
We are now going to add the shopping cart to our Primary Navigation. So let’s go on and visit Settings » Menu Cart Setup. You need to replicate these settings and save!
WooCommerce Product Image Sizes
These are the exact image sizes that are used in the demo. To edit yours you will need to go to WooCommerce » Settings » Products » Display and duplicate these settings.
If this is your first time working with WooCommerce, this information will prove useful in setting up your shop to start selling. There is a lot of good information here to help you get started!
Above Header Widget Areas
First we need to create a “Custom Menu” that we will be placing in our Above Header Left widget area. So navigate to Appearance » Menus. You are going to create a new menu and title it “Above Header Left” and click save. Next you are going to add the “My Account” page and “Wishlist” page. Once you have added them into the menu scroll up to the top of the page and click on the “Screen Options” tab then tick the “CSS Classes” check box.
Now scroll back down and expand your menu items by clicking on the little arrow in the right corner. You will see an area labeled “CSS Classes (optional)” with a box below it. In the box for My Account type “login” into the CSS Classes box and “wishlist” into the CSS Classes box for Wishlist and save!
Above Header Left
Now it’s time to setup the Widget Area bar that is going to be above our header. So let’s move on. Go to Appearance » Widgets. Locate the Above Header Left Widget Area and expand it. You are going to drag over a Custom Menu widget from the left and place it here. Once you have done this, you are going to choose Above Header Left from the Select Menu box and save!
Above Header Right
That finished the left side of our above header section, on to the right! Go ahead and expand the Above Header Right widget area and drag over the Simple Social Icons widget from the left and apply these settings and save! Just be sure to place your social media urls into their proper locations.
Now that section is finished. It’s time for our sidebar! We are already half way there, phew! Let’s just keep chugging along.
Now in this area we have placed two custom menus(to display our products in a organized fashion), a Products Search widget, our Genesis eNews Extended widget, Genesis Featured Posts widget, and a Text widget.
Custom Menu Widgets
To learn how to set these up, follow this tutorial here to get these widgets squared away.
Product Search Widget
You are simply going to drag over the WooCommerce Product Search widget, place it in the Primary Sidebar widget area title it save!
Genesis – eNews Extended
We use MailChimp in conjunction with plugin. Don’t know how to do this? Then click here and visit Restored 316 Designs to find out how!
However, if you still use feedburner then this will be a piece of cake for you(you will see the area to enter your username)! And save when finished.
Genesis – Featured Posts
Here are the settings used in the demo. However, you can choose the category of your choice, choose the order you want them in, and also how many are to be displayed. Just click save when finished.
Simply drag over a text widget and open it. Then place your ad code within the input box. To center it just add the “< center >< / center >” tags around the ad code minus the spaces and save!
Promotion Widget Area
This area is simple. Just drag over a text widget, type your promotion within the box and save! Your done, this area was coded already to automatically center your text!
Now it’s time to work on the look of our Homepage, whoo! These are the last areas to be setup, we are so close to finishing and then you can get down to business!
Home Top – Weptile Image Slider
This little handy dandy widget is going to be placed in our Home Top widget area, so let’s go ahead and expand this section. Next you will need to locate the Weptile Image Slider Widget widget and drag it on over. Then you will want to expand the widget and apply these settings(you may make the images taller if you wish). At least until the part where we add images, I’ll explain that a bit better once we get to it.
Now for the images portion. Go ahead and click on the button that says “Upload or Pick Image” and upload your image of choice. You may add as many images as you want, but let’s get the first one setup before hand. Alright, once your image is uploaded will notice two little icons in the upper right corner of your image, you are going to click on the one that looks like a little chain link. Here you can set a link for your image, how the link will open, and of course alternate text(which is always good for SEO since search engines can not read links so choose your text wisely).
You may repeat this for all images that you add your slider.
You can place virtually any widgets you want in this and the bottom area. However, in this setup we are sticking to the demo, just wanted to give you that bit of information.
Woocommerce Products Widget
Alright, you can find this widget on the left side and drag it over. Then you will need to expand it and configure the settings. We titled this widget “New in the Shop” mainly because we set the widget to display our most recent products first. You can choose the amount of products you wish this area to display. Go ahead and duplicate these settings.
Woocommerce Top Rated Products Widget
This widget also gets placed in the Home Middle widget area. This one is super simple and easy. Simply locate the widget on the left, drag it over, title the widget, choose how many to show and save! That’s it, your done!
Can you see the finish line? We are almost there, promise. Let’s pick up the pace.
Genesis – Featured Posts
By now you are familiar with this widget as we used on earlier in the setup. However, this one is to display your most recent posts. So go ahead and drag another one of these widgets over and replicate these settings choosing how many to show and save!.
We have finally made it to the finish line. We hope you found this helpful. We wish you the best of luck in your endeavors and may you be prosperous.