Getting Started

Once you’ve activated Checkout, you’ll be forwarded to the Getting Started page (Appearance → Getting Started). Here, you can view the help file, browse frequently asked questions, and activate your theme’s license to enable Typekit fonts and seamless theme updates.

Activating Your License

We strongly recommend that you add your theme’s license key in the Getting Started page. By adding your key, you activate the beautiful Typekit fonts we’ve added for you as well as seamless theme updates. With theme updates enabled, you’ll get a notification in your dashboard whenever there is an update available. You can then update right in your WordPress dashboard, keeping your site healthy and secure.

You can find your theme’s license key by signing in to your Array dashboard and visiting the Downloads page. Click the View License link on your theme to view the license key. Copy this key and enter it into the sidebar of your Getting Started page and click the Activate License button. Your license key should now be active!


Installing Recommended Plugins

Below is a list of recommended plugins to install that will help you get the most out of Checkout. Although each plugin is optional, it is recommended that you at least install the Array Toolkit and Easy Digital Downloads to create a website similar to the Checkout demo.

These plugins are also listed in the Plugins tab of your Getting Started page, and you can install the plugins directly from there.

  • Array Toolkit is a free plugin that we’ve developed to add Portfolio Items and Testimonials to your site. We recommend this plugin if you’d like to showcase your work or display testimonials throughout your site.

    View the Array Toolkit →

  • Easy Digital Downloads is a free plugin that enables you to sell digital or physical goods on your website. This plugin powers the ecommerce store in Checkout. If you would like to sell goods on your website, you will need to install this plugin.

    View Easy Digital Downloads→

  • Subtitles is a free plugin that lets you add optional subtitles to your post and pages. As you can see in the Checkout demo, these subtitles add a nice accent to introduce your page. Once installed, you’ll see a Subtitle field under your Title field on post edit pages. Checkout outputs this title in the header for you, no setup required.

    View Subtitles →

  • WPForms is a free plugin that lets you add contact forms to your website. Creating and editing contact forms is super easy and they integrate seamlessly with Checkout.

    View WPForms →

  • MailChimp for WordPress helps you add more subscribers to your MailChimp lists using various methods. After creating a form, you can add the subscription shortcode to your posts, pages and widgets as seen in the Checkout demo.

    View MailChimp for WordPress →


Installing Demo Data

When you first activate Checkout, it will look like simple blog with your existing posts. This is expected since Checkout needs you to setup several pages before it will look like the demo. Optionally, you may install our Checkout demo data, which will populate your site with the pages you see on our live demo. This can give you a head start in setting up your site, since these pages have already been created and have the appropriate templates applied accordingly. Once you get your site setup and get the hang of it, you may delete the unwanted posts or pages as you see fit.

Before installing the demo data, you should first install the Array Toolkit and Easy Digital Downloads (as mentioned above in the Recommended Plugins section). If you’re setting up a multi-vendor marketplace, be sure to install the Frontend Submissions plugin as well. If you do not first install these plugins, the demo data will not import sample portfolio or download posts.

Download the Checkout demo data here. You can install this XML file by going to Tools → Import → WordPress and click Choose File. Upload the xml file and follow the steps to import. When the demo data is finished importing, you should have several new posts and pages to work with going forward. Hooray!


Customizing Your Site

One of the first steps you’ll want to do when setting up your site is customize the appearance with your site title or logo, header images, header color, link colors etc. This can all be done by visiting Appearance → Customize.

  • Site Title & Tagline – Change your site title or upload your logo.
  • Colors – Change the various colors throughout Checkout. You can customize the header background color, accent color (for buttons and links), and header and footer text and link colors. You can also add your own Custom CSS in the Colors menu. This is helpful for adding quick styling fixes on the fly, however, if you plan on doing a lot of theme customization, we recommend that you use a child theme instead, so you can preserve your changes when you update your theme.
  • Header & Footer Image – Add a background image to your header and footer. Click Add New Image to choose an image from your library or upload one from your computer. If you would like to rotate through images in your header on each page load (as seen on the Checkout demo), select or upload multiple images and click the Randomize Uploaded Headers button.You can also control the opacity of your header and background images by using the Header and Footer Image Opacity slider settings.
  • Homepage Settings – The Homepage Settings panel lets you change options for the current homepage template. Some settings in this panel will only be shown when you are viewing a page with a homepage template applied (Homepage EDD Shop, Homepage Portfolio or Homepage Widgets). Here, you can change settings for the various sections of the homepage template you’ve applied to your homepage.

Social Icon Menu

Create a social icon drop menu to let visitors know where to find you.

  • To add a social icon menu, go to Appearance → Menus.
  • On the left side of the Menu page, click the Links menu item to add to your social links.
  • Add the URL for each of your social profiles and a label for the link. Checkout will detect which site you are linking to and display a matching graphic. Icons are supported for the following sites: Twitter, Facebook, Google, Instagram, YouTube, Vimeo, Dribbble, Github, Behance, Pinterest and Soundcloud.
  • To create a drop menu, as seen in the demo, drag your custom links under a parent menu item in the primary menu, as seen here.
  • Save the menu when finished.
  • You can also use this social menu with the Custom Menu widget (Appearance → Widgets) to display social links in your footer.

Creating Your Homepage

homepage

Checkout ships with three homepage templates: Homepage EDD Shop, Homepage Portfolio and Homepage Widgets. Each template does something a little different, so we’ve provided a quick breakdown below. Please note, to change a template’s settings in the Customizer, you must be currently viewing the page template. For example, if you’d like to change the number of downloads to show on the Homepage EDD Shop template, you need to be viewing a page with that template assigned.

  • Homepage EDD Shop This homepage template will turn your homepage into a grid of products created with Easy Digital Downloads. You will need to install and activate Easy Digital Downloads to enable products. This template also includes a featured product slider, a testimonials section, and a call-to-action banner at the bottom of the page. Preview the Homepage EDD Shop Template.

    To get an idea of where each element on this homepage template comes from, view this template’s Homepage Template Visual Guide.

    To use this template, create a new page and choose the Homepage EDD Shop template in the Page Attributes Box. See the Setting Your Front Page section below to learn about making this your homepage.

  • Homepage Portfolio This homepage template will turn your homepage into a grid of portfolio items. You will need to install and activate the Array Toolkit to enable portfolio items. This template also includes a featured portfolio item slider, a testimonials section, and a call-to-action banner at the bottom of the page. Preview the Homepage Portfolio Template.

    To get an idea of where each element on this homepage template comes from, view this template’s Homepage Template Visual Guide.

    To use this template, create a new page and choose the Homepage Portfolio template in the Page Attributes Box. See the Setting Your Front Page section below to learn about making this your homepage.

  • Homepage Widgets This homepage template will turn your homepage into a grid of widgets. Any widgets you add to the Homepage Text Column Widgets area will be shown on this template. This template also includes a featured posts slider, a testimonials section, and a call-to-action banner at the bottom of the page. Preview the Homepage Widgets Template.

    To get an idea of where each element on this homepage template comes from, view this template’s Homepage Template Visual Guide.

    To use this template, create a new page and choose the Homepage Widgets template in the Page Attributes Box. See the Setting Your Front Page section below to learn about making this your homepage.

Setting Your Front Page

Once you’ve decided on which homepage template to use and you’ve created the page, we need to tell WordPress to use this page as your front page instead of your blog posts.

Before we can do this, we need to make sure we have a page that will display our blog posts. Create a new page called Blog (or whatever title you want) and publish the page. You do not need to add any content to this page since it will only display your blog posts.

Now that we have a Home page and a Blog page created, go to Settings → Reading (or Appearance → Customize → Static Front Page). In the Front Page Displays setting, select A static page and set your Front page to your newly created Home page and your Posts page to the Blog page and click the Save button. You may now start adding portfolio items or products to the homepage.


Add Page Subtitles

Image 2015-03-09 at 7.40.07 PM

Checkout uses the Subtitles plugin to add subtitles to posts and pages throughout the theme. Subtitles add a nice touch by introducing the page with a little intro text.

To add subtitles, you’ll first need to install the Subtitles plugin. Once installed and activated, you’ll see there is now a Subtitle field under your post and page titles. Any time you enter a subtitle, it will be output into the header of your post or page. No other action is required to use subtitles.


Add Testimonials

testimonials-page

To add testimonials to your site, you first need to install the Array Toolkit. One installed and activated, you will see a new Testimonials menu in your WordPress dashboard.

Testimonials are output in a few places. All three of the homepage templates output testimonials toward the bottom of the page. Checkout also comes with a Testimonial template which displays all of your testimonials. To create this page, simply create a new page and apply the Testimonials template.

To create a new Testimonial, go to Testimonials -> Add New. For the title of the post, use the name of the person who is giving the testimonial. Optionally, you can use the subtitle field to give the person a title, as seen here. Finally, add your testimonial text into the post editor and choose a featured image to represent the testimonial. Your testimonial should look something like this once complete.


add-carousel

A carousel gallery allows you to showcase several product or portfolio images in a slider as well as a pop-up lightbox. Carousel galleries are available on all posts, downloads and portfolio items.

The carousel gallery is super simple to create and uses WordPress’s built-in gallery function. To create a new carousel, click the Add Media button on your post. Click Create Gallery and select the images you’d like to add to the carousel. Once you’ve selected and arranged your images how you’d like, click Insert Gallery and insert the gallery at the top of your post editor, like this. Finally, in the Format box on the right side of your post editor, select Gallery. You can now publish your post or continue to add content below your gallery.


Create A Team Page

team-page

Checkout comes with a Team template that lets you showcase your team members. To create the Team page, first create a new page and apply the Team template. You may choose to add content to the page, which will appear below the team members, or leave it blank. On the Checkout demo Team page, we’ve added a contact form into our post content. To do this, you’ll need to install the WPForms plugin, create a form, and add the shortcode to your Team page.

Once you’ve setup the Team page, you need to add team members to it. Checkout uses a Gravatar widget to provide team member profiles. A Gravatar is a social profile and avatar that you can use across many sites. You probably already have a Gravatar, but if you don’t, it’s super easy to create one. Head over to Gravatar and create a profile if you don’t have one. Once you’ve created an account, you’ll be able to add an avatar, a brief bio and links that you’d like to share.

Once your team’s Gravatar profiles are setup, head to Appearance → Widgets and add a Gravatar Profile widget for each team member to the Team Page Widgets section. If your team members are already users in your WordPress site, you can select them from the user list. If not, you can simply use the Custom Email Address option and enter the email associated with their Gravatar.


Create A Portfolio Grid Page

portfolio-page

Aside from displaying your portfolio items on the Homepage Portfolio template, Checkout also comes with a Portfolio page template that displays all of your portfolio items in a grid.

To create a Portfolio page, simply create a new page and assign the Portfolio page template.

Create A Portfolio Item

To enable the Portfolio, you must first install the Array Toolkit. Once installed and activated, you will see the Portfolio Items menu in your WordPress dashboard. Click Add New to create a new portfolio post. Feel free to use a mix of images, galleries, audio or video in your portfolio. If you’d like to create a carousel gallery for your portfolio item images, check out the Create A Carousel Gallery section.

Portfolio items are output on the Portfolio page template and the Homepage Portfolio template.


Easy Digital Downloads

banner-772x250

Easy Digital Downloads is a free plugin that enables you to sell digital goods on your website. This plugin powers the ecommerce store in Checkout. If you would like to sell goods on your website, you will need to install this plugin.

If you have any general questions about Easy Digital Downloads, please visit the EDD Docs page. Here, you can learn how to use EDD, browse frequently asked questions and post in the support forum with specific questions.

Easy Digital Downloads Quick Links

Getting Started with EDD

When you install and activate Easy Digital Downloads, it will create a few key pages for you: Checkout, Purchase Confirmation, Purchase History and Transaction Failed. These are important pages that will ensure your checkout process works. These pages will automatically be assigned, but you can modify these settings in the EDD settings.

Download Templates

Checkout outputs product downloads in several different areas throughout the theme. By default, your downloads are always available via the download archive located at yoursite.com/downloads. This page does not need to be created, nor is there a page in your Pages section for this, since it’s an archive page.

Checkout also comes with a Downloads template. This template is very similar to the download archive above, except you can customize the header title and subtitle and add content above the download grid. Another benefit is that you can change the URL to this page template to anything. Instead of having to use yoursite.com/downloads, it can be yoursite.com/albums, yoursite.com/ebooks, or whatever you’d like.

Checkout also outputs your downloads on the Homepage EDD Shop page template. You can control the number of downloads output on the Homepage EDD Shop template by viewing this page in the Customizer and going to Appearance → Customize → Homepage Settings → Download Section. Please note that you must be viewing the page with the Homepage EDD Shop template applied to see the template’s settings in the Customizer. To reduce clutter and distractions, Checkout only shows theme settings when they are relevant to the current page.


Multi-Author Marketplace

Checkout lets you sell your digital goods as a standalone store, but you can also use Checkout as a multi-author marketplace that allows users to submit files for sale. This is made possible by the Easy Digital Downloads Marketplace bundle.

The Marketplace bundle is a collection of extensions that have been specifically chosen for users that wish to setup a marketplace with Easy Digital Downloads. These extensions add features like Frontend User Submissions, Reviews, Recommended Products and Wishlists, allowing you to create a single or multi-user marketplace. All of the extensions in the Marketplace bundle have been designed to work seamlessly with Checkout.

Getting Started With Front End Submissions

Front End Submissions is the plugin that allows authors to register and sell products on your site. If you don’t need all of the plugins in the Marketplace bundle, you can purchase Front End Submissions on it’s own.

Front End Submission Pages

Upon activating Front End Submissions, it will create two new pages for you: Vendor and Vendor Dashboard. The Vendor page displays a grid of each vendor’s products. We’ve included a Vendor page template that adds a sidebar profile for each vendor. The sidebar will display the vendor’s avatar, their profile info and a contact form. See an example here. The Vendor Dashboard page allows your vendors to manage their products, add new products, view earnings and more.

Learn more about the Front End Submission basic setup and configuration below.


Create A Pricing Page

pricing-page

To create a Pricing page, start by creating a new page and assigning the Pricing page template in the Page Attributes box. This is all you’ll have to do here. The widgets we assign in the following steps will be output with this page template.

Variable Pricing Table Widget

The Variable Pricing Table widget allows you to display a pricing table based on a download’s variable pricing options. For example, if you have a product with 3 price options, the widget will output 3 different price tables, one for each of your price options. Let’s create an example variable price product to use in the Variable Pricing Table widget.

  • Create a new product by going to Downloads → Add New. Our ebook will have 3 different price options and each price will offer something a little different. Our Download Prices section of the ebook download would look something like this. You can see we’ve created 3 different price options. If we scroll down to the Download Files section we can assign files to each of these price options so that we can deliver different files to the different price options. After we’ve assigned price options to files, we should save the page before proceeding to the next step.
  • Next, we can add some product details to each pricing option, which will be output as a list on your pricing tables. Scroll down to the Download Details section and add product details similarly to the Price Assignment. Here, we can enter bullet points and assign them to pricing options. A bullet point can be added to all price options or just assigned to one price option. This is handy if all of all your price options share a feature or file. In this example, the first three bullet points will show up on of the pricing tables, but we’ve also added a few bullet points to only show on certain price options. Notice how the two higher prices have extra files!
  • Once we’ve finished setting up our download, we still have one last step. We need to add the Variable Pricing Table Widget to the Pricing page. Go to Appearance → Widgets and add the Variable Pricing Table widget to the Pricing Page Widget section. Add an optional title to your pricing table and select the download you just setup for the Pricing page. If you’d like to highlight one of your pricing options and make it stand out, select it from the featured price select menu. You may also choose to add a foot note (fine print) below your pricing table. Save the widget and checkout your table! We should end up with something like this.

Email Subscription Widget

Using the MailChimp for WordPress plugin, you can quickly and easily add a MailChimp email subscription form to your posts, pages or footer widget area.

  • After activating MailChimp for WP, visit the MailChimp for WP menu to add your API keys to get started. Enter your API keys and click Save Changes.
  • Once activated, use MailChimp for WP > Forms to build a subscription form. Once saved, it will give you a shortcode you can use to display this form around your site.
  • Add an email form to your footer area by adding the the shortcode to a text widget. See an example. Be sure to turn off “Automatically add paragraph tags” since these are provided by the plugin.

Out of the box, Checkout allows you to add a lightbox carousel gallery to your products. If you are using the Front End Submissions plugin, you might want to add gallery support for your vendors as well. To add support for galleries, you need to modify your vendor submission form by going to EDD FES > Submission Form.

fes-field

The carousel gallery uses the Gallery post format to properly style and display the custom gallery. First, let’s add the ability for vendors to change the post format. Do this by adding the Post Format field to the submission form.

fes-add-image

Next, we need to enable users to upload images on the vendor submission form. In the Description field, make sure the Textarea is set to “Rich textarea” and the “Enable image upload in post area” is checked. This will add a “Add Media” button to the vendor submission form. Once you’ve made these changes, you can save the form and view it on the front end.

fes-image-field

In order for vendors to create a gallery, they’ll need to make sure the Gallery post format is selected, and then they’ll need to create a gallery as they normally would by using the Add Media button. See a quick video on how to add a gallery with these new settings. Feel free to share this video with your vendors.

Vendor Submission Fields

Using the FES submission form, vendors can populate various elements on the product page via submission fields.

Vendor Product Subtitle

checkout-vendor-title

If you are using the Subtitles plugin to add subtitles to your pages, you can also enable this for vendors. To allow vendors to submit page subtitles, you need to add a Text field to your submission form and give it a meta key of _subtitle as seen in the screenshot below.

checkout-subtitle

Vendor Product Sidebar HTML

If you’re running an EDD-powered store with only one vendor, you have the option to add download details (file type, file size, etc.) to the sidebar of your product pages. This feature is also available if you have multiple vendors, but the setup is a little different because of the way frontend submissions by your vendors is handled.

sidebar-details

The first thing you’ll want to do is add a new field to your submission form by going to EDD FES > Submission Form. Using the Add Custom Fields box on the right, add a Textarea field to your submission form. Next, in the Meta Key field, add checkout_download_sidebar_html. This tells the theme to look for this particular field and display it in the sidebar. Finally, in the Textarea setting in the bottom, select Rich textarea, which will allow your vendors to add HTML lists and other details to the sidebar of their product pages.

sidebar-details-2

Once a vendor adds HTML to this field in your submission form, the HTML content will be shown in the sidebar as seen above. To create a list as seen in the screenshot, vendors will need to add standard HTML list markup. It may be helpful to add instructions for this in the Help Text setting of the Textarea field.

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match