Genesis: Clip Cart: User Manual
Note: If you just want to setup your site like our demo site to start, read this section.
- How to install a Genesis theme.
- Using the WordPress Menu system to create your Navigation.
- There are many general Genesis tutorials listed here.
- We have many useful plugins listed here.
- For the contact form option on the front page you need to use a contact form plugin. We highly recommend Gravity Forms, Contact Form 7 is a lesser, but free alternative. Note design customizations to make other contact plugins work are not provided by Themedy Support.
After Installation Tips
- Make sure your: "Settings -> Reading -> Front page displays" is set to "Your latest posts"
- Setup your navigation menu at: "Appearance -> Menus"
- Add your Header / Logo image at: "Appearance -> Header"
- You can change this themes site background options at "Appearance -> Background"
- Visit the Appearance -> Widgets area to add content where needed.
Special Widget Areas
- Top Featured Area: This is shown right under the header on the homepage, we used a text widget here on our demo site.
Table of Contents
- Theme Installation
- Core Features
- Getting Started
- Using the Slider
- Setting up Store Products
- Setting up the Widgets Area
1. Theme Installation
Before you begin make sure you have the following running:
- WordPress 4.0.1+ (you should always be running whatever the latest version is)
- Genesis 2+ or Thesis 2+ Installed
- Clip Cart Installed and Activated (WordPress admin or FTP setup instructions)
- Cart66 Lite or Pro plugin or WooCommerce Installed and Activated
- If you want to use the demo content, you can import this XML file. (How to Import a WordPress XML file)
2. Core Features
- Design tool on post/page editors, learn more.
- Additional page templates, including landing pages (learn how to change page templates)
- Additional widgets, how to use them.
- Options page, make sure to check out the options page grouped under your Genesis or Thesis settings.
3. Getting Started
After activating this child theme in the WordPress admin as shown previously, you will end up with something like the following:
There are some key areas you need to visit to fill in the content.
- Navigation menu, create your own navigation menu by using the WordPress menu controls.
- Header / Logo, change this by visiting Appearance -> Header in your WordPress settings.
- Intro text: "Hello and welcome to our store!" - this text block can be edited by visiting the Clip Cart options page and changing the "Homepage Breadcrumb Replacement Text:" box.
- Empty slider, you need to add some slides to populate this box or turn it off in the Clip Cart Settings
- "Latest Products" - You need to add some products to populate this area or turn it off in the Clip Cart Settings. Note if you are using WooCommerce you would use their regular product area to add your products.
- "Copyright / Footer text" - You can edit this area by visiting the Clip Cart Options Panel and editing the Footer block.
- Blog page: If you want to add a blog, create a new blank page and select the "Blog" page template. Under Settings -> Reading the option should be left at the default: "Your latest posts"
4. Using the Homepage Slider
When you activate Clip Cart it will add two new options to your WordPress admin area, Products and Slider.
- Make sure Settings -> Readings is set to show "Your latest posts"
- To add a new slide go to Slides -> Add New
- Give the slide a name and use the editor to design your slide and click publish.
- Here's the code for an example slide we used on our demo site, you can switch to HTML mode on the post editor and paste this in: Sample Slider HTML
- Add as many slides as you want by repeating the above steps, additional settings for the slider can be found in the Clip Cart option panel.
5. Setting up Store Products
Setting up a new product requires that you have the product set up in Cart66 first.
- Go to Pages -> Add New and create a blank page to list all your products, you can call it whatever you want. Select the "Products" page template and publish this page.
- Go to Cart66 -> Products in your WordPress backend.
- Fill in your product details - make note of the "Item Number" you enter - you will need this again.
- When you're ready click the save button.
Now we can setup the product on our site:
- Go to Products -> Add New in your WordPress backend.
- Enter the item number into the "Cart66 Product Number:" box on the post editor.
- Fill out the product title and description
- You can insert the add to cart button anywhere using the Cart66 Shortcode. You can add the shortcode by using the Cart66 button on the visual editor.
- Here's the sample HTML we used to create a product on our demo site.
- Finally make sure to set a Featured Image (How to Set a Featured Image) on every product - this is what the theme uses in the Latest Products area on the homepage.
- To organize your products you should group products into categories using the "Product Categories" box to the right of the editor.
- Click Publish to make sure product live, add as many products as you need by repeating the above steps.
Adding additional images to the product gallery:
To add additional images to the product gallery (which shows up under the product description). Use the WordPress add media tool and simply upload as many images as you want.
They will automatically be attached to the product gallery. You only need to select "Add Media" and then "Upload Files", you don't need to insert the images or anything else, after they finish uploading just close the Add Media window.
Note you can't select existing images that you might of uploaded elsewhere. If you need an existing image, you would usethe Add Media button to upload it again while editing the product you want it to show on.
To add additional images to the product page use the WordPress add media tool and the Create Gallery link on the left of that screen to create a gallery and insert it into your product description.
You can also use the Product Gallery box on the product editor page: http://cloud.themedy.com/image/0T3n3W2t3g0Q - if you don't see this, click the screen options tab on the top right of your screen and make sure it's checked off.
6. Setting up the Widgets Area
To finalize your site make sure to check out the widgets area under Appearance -> Widgets. Here are the settings we used in the demo site:
- Header Right: Empty
- Primary Sidebar: Latest Tweets, Categories widgets.
- Secondary Sidebar: Empty
- Primary Product Sidebar: Cart66 Shopping Cart, Custom Menu (Created a secondary menu to list product categories)
- Secondary Product Sidebar: Empty
- Homepage Widget Area 1: Text Widget (used to create the quote underneath the Latest Products on the demo site)
- Homepage Widget Area 2: Empty
- Footer 1: Themedy Ads Widget
- Footer 2: Text Widget
- Footer 3: Flickr Photos
Thank you for purchasing and using our themes. We hope you enjoy using them as much as we enjoy making them!
Themedy Settings Explained
You can reach the Themedy settings panel by visiting "Appearance -> Themedy Settings"
- Select slider area function:
- Portfolio Slides: Pulls your slides from the items you create in the "Portfolio" menu listed on your WP admin dashboard.
- Posts Slider: Pulls your slides from the items you create in the "Posts" menu listed on your WP admin dashboard.
- Pages Slider: Pulls your slides from the items you create in the "Pages" menu listed on your WP admin dashboard.
- Enter Slide Transition Speed (ms): The time it takes to change the slides when an arrow is clicked, 1000 = 1 second.
Appearance: Select the various color options included with this theme. If you want to use a full width header image, select the checkbox here.
Footer: Customize the text shown in the footer area.