Let’s Get Started
Thank you for purchasing Simple Shopper! To get this theme up and running like the demo, first, you must purchase and upload the Genesis Framework to your WP account. To do this:
- Login to your WP Admin dashboard
- From the dash, place your mouse over Appearance, then select Themes.
- On the Themes page, select Add New at the top and upload the Genesis Framework from wherever you have it saved on your computer.
- Activate it.
Once you’ve completed this, upload the Simple Shopper zip folder in the same way. Activate the theme if it isn’t automatically done. Now, let’s begin setting it up like the demo!
The Prep Work
The first thing we’re going to do is complete the behind the scenes work, and what I mean by that is all the settings that need to be in place from your admin dashboard. On the panel at the far left, click on the Genesis tab. Next, arrange your settings like the following:
- Scroll down to the third box, titled Default Layout. Click the last layout option at the end, which is the full width option.
- In the Header box, make sure “Dynamic text” is selected in the drop down box for site title/logo.
- In the Navigation box, you can leave the “none” option selected.
- In Breadcrumbs, check the boxes for Post Page, Single Posts, Pages and Archives.
- In Comments and Trackbacks, check the “on posts?” box for Enable Comments.
- For Content Archives, make sure “entry content” is selected for the Display option. Type in “380” for content characters. Check the box for Featured Image and choose the “home-middle (360 by 200)” option, with the Image Alignment being “Left.” Leave Entry Pagination as “Previous/Next.”
You are now good to go with the Genesis options! But we’re not done yet.
- Hover over Settings on the admin panel and click Reading.
- For Front Page displays, make sure “a static page” is selected. Choose “Home” for the front page and “Blog” for the posts page.
- For Blog pages show at most, choose the number of posts you want a viewer to initially see when they visit your blog page.
- Next, hover over Users and select “Your Profile.” Look over all options, but primarily, make sure “Enable Author Box on this User’s Posts?” is checked. Fill in your bio and upload a pic (which you can do with a plugin listed below).
Uploading Your Logo
Because the logo area of Simple Shopper is actually a full width image, you will need to work with some code to get it to display, but no worries! It’s simple.
- Create a full width image logo at 1300 x 533 dimensions.
- From your admin dashboard, hover over Media on admin panel and add the image to your media library.
- Once it’s loaded, click on the image so that it pops up in it’s own display box. Copy the full URL to the right of the box.
- On the admin panel, hover over Appearance and choose Editor. Click on the Functions option to the right and bypass the warning.
- Find the piece of code labeled //* Home page featured image
- Replace the highlighted pieces of this code with the URL you copied.
echo ‘<div id=”full-image”><img src=”http://demo.risenuponthee.com/simple-shopper/wp-content/uploads/sites/2/2016/12/frontpagemass.png“. get_stylesheet_directory_uri() . “http://demo.risenuponthee.com/simple-shopper/wp-content/uploads/sites/2/2016/12/frontpagemass.png” /></div>’;
Make sure you DO NOT delete the quotation marks around it or anything else. Doing so will cause this file to not function properly and make your website nothing but a white screen when you view it. Depending on who your host is, you will need to research how to restore the file if you are unable to access any part of your site.
Having the admin email of your site tied to Gravatar is a good idea, and makes a few parts of setting up your theme like the demo easier. Click the link and follow the steps they give to have a globally recognized image for WordPress.
The plugins you need to download for Simple Shopper are as follows:
- Genesis – eNews Extended – This plugin will display the email subscribe form.
- Display Featured Image for Genesis – This plugin will display the set featured image before the title of a post.
- Image Widget – This will be used for the “About my shop” section.
- Woocommerce – This plugin is for displaying your products and providing a fast easy way for you to get paid!
- Genesis Connect for Woocommerce – This plugin helps make Woocommerce more compatible with Genesis sites.
- Jetpack (optional) – The contact form on the demo is created by Jetpack, but you could use another plugin.
- MailPoet Newsletters (optional) – If you do not want to pay for a third party company to handle your email output, this free plugin is a great option, and integrates with the eNews Extended plugin.
- Simple Social Icons – Used in the footer of Simple Shopper and provides links to your social media accounts.
- Testimonial Builder – Displays glowing testimonials! You have to manually enter them, however.
Hover over the Plugins option on your admin panel and click Add New to search WP’s database for these plugins, then click to activate them on your site.
Making It Pretty
Now we can begin putting the theme together on the front end. Click the name of your website at the top left side of the screen–this will bring you to front page of your website. Click the Customize option up top.
- Site Identity: Name your website and come up with a tagline. Also, upload a browser icon if you have one. (Skip past Display Featured Image for Genesis).
- Menus: Go into Menu Locations and under Primary Navigation Menu choose what menu you would like to be at the top of your image logo. If you don’t have one, you’ll need to create one.
- Widgets: Arrange the homepage plugins in Full Width Area as seen below.
- Genesis eNews Extended: In the “Text To Show Before Form” box, write what you would like your form to say before the subscribe boxes. Next, if you are using Mailpoet, scroll down and check the “My first list” option, along with “First name” and “Last name.” Lastly, scroll down and write in what you would like the subscribe boxes to say.
- Image Widget: Upload a picture of yourself and in the “Title” area, write About My Shop. Next, in the caption section, write what you would like people to immediately know. If you want the text centered like the demo, put this tag <center> in front of you text, and this tag after it </center>. This, choose what size you would like your picture to be in the “Size” box and choose center for the “Align” box.
- Woocommerce Products: In the “Title” section, write Products, then choose the amount of products you would like to display (two widgets were used to display eight products for the demo, but you don’t need to do this). Next, configure the following options to your liking.
- Text: Add in this default widget and write Testimonials in the “Title” area. In the “Content” box, copy and paste the short code from the set of testimonials you made.
- Genesis – Featured Posts: Configure the panel that opens up as seen below.
*Tip: If you don’t want the number of comments displayed, delete the short code for it in the “Show post info” box.
Lastly, click over to a post and put the eNews plugin in the After Entry widget area, to display a subscribe form after all of your blog posts. Configure it as you did for the home page. You are now done with the main body of the site! Woohoo!
Now onto the last step, the Footer area.
- Footer 1: This area sports a custom menu. You will want it to have less clickable items than your main menu at the top of the page. You can make a new menu and label it “Custom.” Put the most important links in it and pop it in Footer 1.
- Footer 2: This area has a search bar. Simply search through the plugin list and you’ll find it there automatically. Write what you want the title to be and you’re good to go!
- Footer 3: This is where you will place the Simple Social Icons you downloaded. In order for the icons to appear, you need to put a link in the required field of each different platform. And once you complete this…
You’ve now fully set up Simple Shopper!
I’ve done the best I can to guide you through the process, but if there is a step I’ve missed or if something doesn’t make sense, PLEASE let me know in the comments. In this way, if someone else has the same problem they can see that it’s already been asked and solved. DO NOT message through any contact form. Please, comment. 🙂