Hello there and welcome! So glad you are here with us as we explain how you can setup your new Ashlynn 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 Ashlynn themes’ zip file(it will be titled ashlynn.zip). Next, navigate back to the themes section of your Dashboard and locate the Ashlynn 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. Here you are able to setup your website title and tagline.
To upload your own header image/logo navigate to Media » Add New or you may upload to your themes’ images folder via FTP, it is up to you. Your image/logo must be 320px by 100px, or it can be smaller in height or width. If you choose to upload your image via Media, once uploaded you will see a link to the right that says “Edit”, click on that. You will need to grab the images’ url, which can be located on the right hand side.
Now lets cruise on over to the style.css file by going to Appearance » Editor, you will find that you have landed on the stylesheet css file. Next search the css for this line of code:
You will want to replace “images/logo.png” with your image/logo url. Then scroll to the bottom and click the “Update File” button.
Next we want to make sure our image/logo shows instead of the default website text. So we will need to head on over to Genesis » Theme Settings in order to accomplish this. Once you find yourself there, scroll down until you see the section titled Header. Click on the arrow of the dropbox and select the “Image Logo” option.
Go to Appearance » Background. Once there you can upload your own background/pattern image or pick. Which from there you can choose how you will like it to display such as repeat horizontally/vertically or tile.
Perhaps, you just want to pick a solid color. That’s easy to do too! Go to Appearance » Customize, click where it says Colors and choose one. Just be sure to click save when finished!
There is one menu present in this theme. When you go to name your menu you need to name it Header Navigation in order for it to be mobile responsive when viewed on other devices. To setup your menus simply go to Appearance » Menus. Create a menu with the name stated above and add menu items. You can click and drag menu items to arrange them as you wish and click save when finished.
Once finished head over to the widgets area Appearance » Widgets and drag the Custom Menu widget over to the Header Right widget area. Select the Header Navigation menu from the dropbox and click save!
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
Genesis Responsive Slider
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 the themes’ “Pin it Buttons” in the themes’ images folder. So just select the image that matches your themes’ color choice.
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!
Genesis Responsive Slider
Let’s go ahead and get our slider settings all set up. Just go over to Genesis » Slider Settings/strong> and apply these settings.
Alright let’s set up your Menu Bar area. Alright, we need to create another menu for this part. So let’s head on over to Appearance » Menus. We are going to name our new menu Menu Bar Right and hit save. That’s it? Well, for that part yes. We just need a menu that we can attach our Menu Cart to so we can place it in the upper right hand corner.
Now let’s go to Settings » Menu Cart Setup and replicate these settings. Save when finished!
Moving right along here. Now we need to go into our widgets area for this next part. You can get there by going to Appearance » Widgets. Alright let’s set up our left side of the Menu Bar first. As you can see in the demo we place a promotional code. You can place whatever greeting or promotion you would like in this area, simply by placing a text widget into the Menu Bar Left widget area typing in your promotion and saving.
Now for the right side of the Menu Bar, we are going to add the custom menu widget and select the Menu Bar Right for the drop box and saving. Next, we are going to add the Simple Social Icons widget below the previous widget we setup. Duplicate these settings and save.
That’s it for the Menu Bar that appears at the very top of your website. That wasn’t so hard, now was it?
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!
Setting up the Homepage
Phew! We have accomplished so much already, I bet you even perhaps learned a thing or two along the way so far. Time for the homepage!!
Time to set up the sidebar of the homepages and all the other pages. Simply place these widgets into the Primary Sidebar widget area and duplicate these settings remember to save as you complete each widget and their settings.
We use MailChimp in conjunction with the eNews Genesis Extended 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.
You can also change the numbers and some of the settings around to meet your needs in this next area. Also, note that we created Custom Menus to display our products in an orderly fashion. The last two widgets are not necessary we just placed them for an ad space and a place to let people know where they can locate the credit for the demo products that were used in this theme.
Now onto the right side of the homepage. Same as above just drag the widgets over and replicate the settings. This time you will be placing the widgets in the Home Top, Home Middle, and Home Bottom widget areas and saving as we complete each widgets’ settings. You may of course change the categories, number of items displayed, etc.
We have finally come to the end of this walk through. We hope you found this helpful. We wish you the best of luck in your endeavors and may you be prosperous.