Jessica Theme Instructions

!

Jessica Theme Overview

Overview

Jessica is a flexible WordPress eCommerce theme that lets you pick from three different eCommerce

plugins. The theme is pre-styled for WooCommerce, iThemes Exchange, and WP e-Commerce.

The store template comes with options to capture subscribers, sizing tables, and contact forms. The

home page is fully widgetized so you can decide the content and placement.

The WordPress theme is mobile responsive, coded with HTML5 and supports schema. It is also

translation ready with i18N Right-to-Left (RTL) support built in.

Support

Theme support is available: https://www.web-savvy-marketing.com/forum/jessica-1/

Request support forum access: https://www.web-savvy-marketing.com/studiopress/

!

Jessica Theme Instructions

Installing the Child Theme With Genesis

Log into your WordPress Dashboard.

Go to Appearance > Add New Themes

! Click on Upload

! Locate the genesis.zip file from your local computer and then click the “Install Now” button.

! Activate the newly added theme.

! Once the Genesis Framework is installed, you can load the child theme.

! Follow the same process for the child theme as you did Genesis.

NOTE: Do not install the child theme prior to installing Genesis.

Read the StudioPress introduction to Genesis for a more detailed tutorial at:

http://cdn.web-savvy-marketing.com/wp-content/uploads/2013/10/genesis-for-beginners-v2.pdf

Here is a blog post we published on the topic:

http://www.web-savvy-marketing.com/2014/09/installing-the-genesis-framework-and-child-theme/

Get Confused?

If you installed a child theme before Genesis, make sure you delete the child theme before trying to install

Genesis. It allows you to start with a clean slate and provides a smooth installation process.

Recommended Plugins

Below is a list of recommended plugins that we used in our demo. You may swap these out for other plugins as

needed.

Keep in mind our demo is using an e-commerce plugin but this is not necessary for the theme to operate in it's

basic format.

It is always best to install these before importing your XML file.

Generic plugins:

! Digg Digg

! Gravity Forms

! Soliloquy (will install with the theme)

! TablePress

Pick from the following for e-Commerce plugins:

! WooCommerce

! Genesis Connect for WooCommerce

! iThemes Exchange

! iThemes Exchange - Add Product SKU

! iThemes Exchange - Product Variations

! WP e-Commerce

! WP e-Commerce Grid View LITE

!

Importing the XML File

Before You Begin

It is not required that you use an XML file in your website. This file is provided as a convenience for those who

wish to exactly duplicate our theme demo. But for most cases it is far more work than needed because you can

just start adding your own real content to your site rather than uploading placeholder content and then replacing it

with genuine content.

If you are going to use the XML import, please make sure you have Genesis, your child theme, and your plugins

all loaded and activated before you start.

Using a Genesis Theme XML File

1. Download the jessica-xml-files.zip file (aka the demo data) from your My Account page.

2. Unzip the file

3. Read the Readme file in the unzipped folder to see what files are contained therein.

4. Log into your WordPress admin panel (as an administrator).

5. Install the Genesis framework.

6. Install your Genesis child theme and activate.

7. Install and activate any required plugins used in the demo/exporting site.

8. Go to Tools --> Import.

9. Choose “WordPress” from the list of available data options.

10. If the WordPress Importer is not already installed on your WordPress install, follow the instructions for

installation.

11. There are three XML files in the zip file above.

12. Find the XML file which corresponds to the eCommerce plugin you have installed on your site.

13. Upload that XML file via the importer’s instructions. Don’t worry, this part is really easy. You just need to

know where you saved the XML file on your local computer.

14. Map the authors in this XML file export to a user on your installation. For each author, you may choose to

map to an existing user or create a new user.

15. You will then have the choice to import attachments. Say yes to this so you import content images, as

well as home page sliders.

16. WordPress will then complete the import process by populating pages, posts, categories, tags,

comments, images, and menus.

At this point you have the content, but you are not finished. You need to assign menus, configure widgets, and

populate any theme settings.

Something is Wrong! Nope Not Really

The thing to remember is that the WordPress (not Genesis) XML export process only includes menus, pages,

posts, categories, tags, comments, and images. It does not include widget settings, menu assignment, or theme

settings. You have to configure this yourself. This is not an issue with Genesis or the theme, but a constraint of

WordPress itself.

Also, if you don’t have the required plugins activated then the import may leave out some important parts. For

example if the exporting site uses an image slider on the home page, has an event calendar or a store, these

content types will be in the XML file. Unless those corresponding plugins are activated in your importing site those

content types cannot be successfully imported.

!

Changing the Theme Color

This theme comes with multiple color options.

Go to Genesis –> Theme Settings

! Under Color Style

! Select desired color from drop down menu

! Save settings

!

Using a Logo Image

Here are the steps to use your custom logo image with the theme.

First set the logo to show by performing the following:

1. From your WordPress dashboard go to Genesis –> Theme Settings

2. Under "Header Settings" choose "Image Logo" from the drop down.

3. Click the "Save Settings" button to save your settings.

Next you need to upload your logo images to your theme file. Your logo image must be a .png image file.

The theme demo logo.png file is sized to:

Width = 209 pixels

Height = 39 pixels

Use an FTP program to upload your /logo.png file to the theme folder at your web host.

The exact location can vary some depending on server configuration but is usually found

at /wp-content/themes/jessica/images/logo.png

Please note: You may use a larger logo image file. However, please note that larger files sizes may require some

customization of your /jessica/style.css style sheet to display properly.!

!

Navigation Menu in Header

Header Menu

! Click Create New Menu

! Check on any pages or custom links

! Click Add to Menu

! Save

Under Manage Locations (same screen)

! Select your new menu from the drop down list under Primary Navigation Menu

! Save

!

Top Navigation Menu Above Header

To configure the top menu above the header which in our demo displays the My Account and My Cart links,

please follow the following steps.

! Go to Appearance --> Menu

! Create a new menu

! Add your desired links

! Designate this menu to use the Secondary Navigation Menu theme location via the check box below the

menu

! Click the Save Menu button to lock in your changes.

To prevent the vertical bar to the right of the last menu item enter the word last to the CSS Classes setting for the

last menu item.

To display the shopping cart icon enter the word cart to the CSS Classes setting for that menu item.

To add multiple classes to the same navigation menu item separate the classes with a space. Do not include a

comma.

Note: You may need to go to your Screen Options in the extreme upper right hand corner of your Appearance -->

Menu screen and check the box to display your CSS Classes.

Header Right - Social Icons and Free Shopping Text

The right side of the header is widget based, so you can insert what you would like in this area. To mimic our

demo, do the following:

Go to Appearance -> Widgets

Drag Web Savvy - Social Widget over to Header Right

Insert the below text into Custom Text:

<h2>Free Shipping!</h2>

For all orders over $50

Add profile URLs to any social icons you want to show. If you don't want an icon to show, just leave it blank.

Save

!

Home Page - Large Image (aka Slider or Rotator)

Our home page has a large image displayed. While we are not rotating images here, this is possible. We just

choose to have one single image.

Note: This uses a premium plugin called Soliloquy. A license for this is already included in your theme at

purchase. You do not need to purchase a license unless you want direct support from the plugin developer.

Thomas, the developer, is really good with support so we encourage buyers who have advanced needs to

consider purchasing a their own license so they can receive direct support. If you do not have advanced needs

which would require support, you are good to go with our included license.

Create any number of images and size them to 1116px x 372px.

Go to Soliloquy –> Add New

Give your slide set a name of Home Page.

Under Config

Slider Theme = Classic

Slider Dimensions

Base

! Slide width = 1108

! Slide height = 378

Slider Transition = Fade

Slider Transition Duration = 7000 (if you want to match demo)

Slider Transition Speed = 600 (if you want to match demo)

Slider Position = Center

Slider Gutter = 0

Autostart Slider = Checked

Show Slider Control Nav = Checked

Loop Slider = Checked

Enable Keyboard Navigation = Checked

Use CSS Transitions = Checked

Use Adaptive Height = Checked

Crop Images in Slider = Checked

Slider Delay = 0

Start on Slide = 0

Under Misc

Slider Title = Home Page

Slider Slug = home-page

Under Images

Click Select Images

Import files from your computer as you would normally do in WordPress

Our sliders are using text and this is set per slide.

An example of the text is:

<h2>Shop by Category</h2>

!

Home Page - Categories (Under Large Image)

Our home page uses a Custom Menu to list the product categories. To create this, you'll go to two different

locations within WordPress.

Define Your Menu

! Go to Appearance -> Menus

! Create a new menu and label is Home Categories

! Drag your desired categories over to the right side of the menu set up screen

! Input two short words under Description

! Save Menu

Configure the Widget Area

! Go to Appearance -> Widgets

! Drag the Custom Menu option over to Home Categories Menu

! Select your new Home Categories in the Select Menu drop down

! Save

Note: You have limited space here, so pick the best categories and keep your text limited. You want people to

scan and quickly find the category they want.

Home Page - Call to Action Images

Our home page has two images that are used as call to actions. You can use any images and you can link to any

location on or off your website.

You define these under Appearance -> Widgets and you place them in Home CTA Left and Home CTA Right.

Instructions for defining these are locations in the section titled Web Savvy - CTA Widget.

Home Page - Subscribe Option

Our subscribe box is using a plugin called Gravity Forms. Gravity Forms is a premium plugin and the developer of

this plugin does not allow us to provide a developer license. If you would like to use this form plugin, you will have

to purchase a license.

If you would prefer to go another route, there are many free contact form plugins available for WordPress. Just

visit WordPress.org to find one that meets your needs.

If you do opt to use Gravity Forms for the subscribe feature:

Go to Appearance -> Widgets:

! Drag Form widget over to Home Mid Right

! Select desired form from Gravity Forms list

! Insert a title for the widget (we used JOIN JESSICA's SHOP for the demo)

! Check Display for description

! Save

If you would like to have your form look like the demo sidebar form here are the steps.

! Go to Forms and add/edit the desired form

! Add an Email field and mark as Required

! Click on the Advanced tab

! Set the Field Size as Large

!

! Save

! Click on Form Settings

! Form description: Join now and instantly receive a $20 off $100 coupon via email.

! CSS Class Name: gforms-placeholder button-right

! Button text: Submit

! Save

Remember to click your teal "Update Form" button to save your changes.

Home Page – Testimonial

Our subscribe box is using a plugin called Gravity Forms. Gravity Forms is a premium plugin and the developer of

this plugin

To set up a prestyled testimonial on the home page, go to Appearance -> Widgets:

Drag a Text widget over to Home Mid Left

Set title: What Our Customers Think

Insert the following in the large white box:

<blockquote>I absolutely love my new dress and shoes. They made the perfect night even more perfect. Not only

did I get a fab outfit, I received free shipping too. Love you Jessica's Shop!</blockquote>

Save

Home Page - Bottom Ad

In our demo we are showing a large horizontal ad. You may use our built in coding for this, you can place

something else in this widget area, or you can completely omit it.

To mimic our demos go to Appearance -> Widgets:

! Drag Web Savvy - On Sale Widget over to Home Bottom Ad

! 50 % OFF

! Custom Text = see code below

! More Text: Details + Exclusions >

! More URL:

! Image URL: /wp-content/themes/jessica/images/banner-bg.png

! Save

Custom Text:

NOW THROUGH JULY 4<br />

Enter Code Z98R3 at Checkout

!

Home Page - Bottom Widgets

These instructions apply to the WooCommerce and WordPress eCommerce demos. While you can use these

widget areas with the iThemes Exchange plugin, we did not populate them in our demo.

The Jessica theme comes equipped with four widget areas at the bottom of the home page. You may pick and

choose what content you'd like displayed here. You do not need to follow what we have done in the demo.

Appearance -> Widgets

! Locate the widget areas defined as Home Bottom 1, Home Bottom 2, Home Bottom 3, and Home Bottom

4

! Drag any items you'd like over to these areas

! Save widgets

In our WooCommerce version of the demo we used:

! WooCommerce Products

! WooCommerce Top Rated Products

! Web Savvy - Featured Posts

In our WordPress eCommerce version of the demo we used:

! (WPEC) Latest Products

! (WPEC) Product Specials

! (WPEC) Price Range

! Web Savvy - Featured Posts

!

Footer – Widgets

The Jessica theme comes equipped with four widget areas. You may pick and choose what content you'd like

displayed here. You do not need to follow what we have done in the demo.

Appearance -> Widgets

! Locate the widget areas defined as Footer 1, Footer 2, Footer 3, and Footer 4

! Drag any items you'd like over to these areas

! Save widgets

In our demo we used:

! Text widget

! Tag Cloud (we are displaying product tags in our demos)

! Custom Menu

Footer - Web Savvy Marketing Credit

You are more than welcome to remove the WSM footer credit.

To do so, simply go to Genesis -> Jessica Settings:

! Locate the Footer Info area

! Remove our default text in Credit Info

! Add your desired text to the field

! Save Settings

Footer - Copyright

Go to Genesis -> Jessica Settings

! Locate the Footer Info

! Place your desired copyright text into Copyright Info

! Save

!

Configuring the Blog Page

Go to Pages

! Add a new page into WordPress and label it Blog

! Set the Template to Blog

! Save your new page

Go to Genesis -> Theme Settings

! Locate the Content Archives area

! Select one of the following: Select Display post content

! Set Limit content to 145 characters

! Check Include the Featured Image?

! Set Image Size to Blog Thumbnail (162 x 159)

! Set Image Alignment to Left

! Set Select Post Navigation Technique: to Numeric

! Save

!

Sidebar – Pages

The page sidebar will display on the regular WordPress pages.

Go to Appearance -> Widgets

! Drag any desired widgets over to Page Sidebar on the right

! Save

In our demo we are using:

! Form (Gravity Forms widget)

! Web Savvy – CTA Widget

! WooCommerce Top Rated Products (this is in the Woo demo only)

! Web Savvy – Featured Posts

Sidebar - Store

The store sidebar will display on the main store page, store categories, store tags, and individual store product

pages.

Go to Appearance --> Widgets

! Drag any desired widgets over to Store Sidebar on the right

! Save

Each demo will utilize different options for this side. They are listed below.

WooCommerce

! WooCommerce Product Categories (show hierarchy is checked)

! WooCommerce Price Filter

! WooCommerce Layered Nav Filters

! Tag Cloud (Product Tags is selected as Taxonomy)

! WooCommerce Product Search

iThemes Exchange

! iThemes Exchange Super Widget

! Tag Cloud (Product Tags is selected as Taxonomy)

WP e-Commerce

! WPEC Shopping Cart

! WPEC Product Categories

! WPEC Price Range

! WPEC Product Tags

! WPEC Latest Products

o Number of products to show: 5

o Check Show Thumbnails

o Width 45 Height 45

!

Sidebar - Posts

The blog sidebar will display on the main blog page, blog category pages, blog tag pages, and individual blog

posts.

Go to Appearance -> Widgets

! Drag any desired widgets over to Blog Sidebar on the right

! Save

In our demos we have using the following:

! Web Savvy - Featured Posts

! Categories

! Recent Comments

! Archives

!

Sidebar - Join Jessica's Shop

Our subscribe box is using a plugin called Gravity Forms. Gravity Forms is a premium plugin and the developer of

this plugin does not allow us to provide a developer license. If you would like to use this form plugin, you will have

to purchase a license at http://www.web-savvy-marketing.com/go/gravity-forms/.

If you would prefer to go another route, there are many free contact form plugins available for WordPress. Just

visit WordPress.org to find one that meets your needs.

If you do opt to use Gravity Forms for the subscribe feature:

Go to Appearance -> Widgets:

! Drag Form widget over to your desired sidebar

! Select desired form from Gravity Forms list

! Insert a title for the widget (we used JOIN JESSICA's SHOP for the demo)

! Check Display for description

! Save

If you would like to have your form look like the demo sidebar form here are the steps:

! Go to Forms and add/edit the desired form

! Add an Email field and mark as Required

! Click on the Advanced tab

! Set the Field Size as Large

! Save

! Click on Form Settings

! Form description: Join now and instantly receive a $20 off $100 coupon via email.

! CSS Class Name: gforms-placeholder button-right

! Button text: go

! Save

Remember to click your teal "Update Form" button to save your changes.

Web Savvy - Featured Posts

We have used the Web Savvy - Featured Posts in our sidebar and home page on some demos. This is optional.

To mimic our demo, go to Appearance -> Widgets:

! Drag the Web Savvy - Featured Posts over to your desired widget area or sidebar

! Input your desired header text into Title

! Select your desired categories from Category (these are blog post categories)

! Number of Posts to Show: 3

! Order By: Date

! Sort Order: Descending (3,2,1)

! Check Show Post Title

! Check Show Post Info

! Input the following into the white field below post info and remove out the extra space inside each

bracket: [ post_date format="M <b>d</b>" ]

! Content Type: No Content

! Save

!

Web Savvy - CTA Widget

!

The Web Savvy – CTA Widget is used in our demo to create the call to actions with images and links. These are

used on the home page and the sidebars. They are optional.

Prior to setting up this widget, you'll want to upload your desired images to the media library. You should size your

image 544px x 194px.

Go to Appearance -> Widgets:

! Drag the Web Savvy – CTA Widget over to your desired sidebar

! Input the desired display text into the Title field

! Insert your desired text into the More Text field (we used GO for the demo)

! Input your desired destination URL into the Link field

! Input the URL for the image you are using in the Image field (locate via media library)

! Set the Target (parent is normal and self is a new window/tab)

! Save

!

WARNING: This theme comes with three different store options. Make sure you are in the right

instructions for the e-commerce plugin you selected.

Store Set Up - WordPress eCommerce

WordPress eCommerce is a large plugin with a host of options and add on extensions available. The plugin team

has a large pool of documentation available to assist with set up. Because of this, we will not go into instructions

in our forum.

It is best that you review the latest documentation via the plugin developer's website(s):

! WordPress.org Download - https://wordpress.org/plugins/wp-e-commerce/

! Plugin Developer - http://getshopped.org/

! Plugin Documentation - http://docs.getshopped.org/

! Plugin Support - https://wordpress.org/support/plugin/wp-e-commerce

Store Set Up – WooCommerce

WooCommerce is a large plugin with a host of options and add on extensions available. The Woo team has a

large pool of documentation available to assist with set up. Because of this, we will not go into Woo instruction in

our forum.

It is best that you review the latest WooCommerce document via the plugin developer's website at

http://docs.woothemes.com/documentation/plugins/woocommerce/

Important - Below is the standard setting for product Image Options found at WooCommerce -> Settings:

Catalog Images = 246 x 351

Single Product Image = 350 x 500

Product Thumbnails = 75 x 75

You should install and activate the Genesis Connect for WooCommerce plugin when using WooCommerce with

this theme.

Store Set Up - iThemes Exchange

One of our store demos is using iThemes Exchange. We have also activated the following add on's:

! iTheme Exchange - Add Product SKU

! iThemes Exchange - Product Variants

iThemes Exchange is a very nice plugin with a host of options and add on extensions available. The iThemes

team has a large pool of documentation available to assist with set up. Because of this, we will not go into

instruction in our forum. It is best that you review the latest iThemes document via the plugin developer's website

at:

! Plugin Main Page – http://ithemes.com/exchange/

! Features - http://ithemes.com/exchange/features/

! Add-Ons - http://ithemes.com/exchange/add-ons/

! Tutorials - http://ithemes.com/tutorial/ca.....-exchange/

! Documents - http://ithemes.com/codex/page/Exchange

! Support - http://ithemes.com/exchange/support

Important - Single Product Image = 250 x 500