Adrenalin

A beautiful WordPress and WooCommerce Theme


Thank you for purchasing our theme! If you have any questions that are beyond the scope of this help file and our video tutorials, please feel free to email us to support@commercegurus.com. Thanks so much!

As a special thanks for your valued custom, we'll install Adrenalin on your server for free!  To avail of this special launch promotion, please email us your host and WordPress login details to support@commercegurus.com along with your purchase code and we'll schedule your free install asap! If you've not purchased hosting yet we highly recommend Siteground

After you download the Adrenalin Theme

Inside the zip file you download from themeforest you'll find a number of different directories, including:

Getting started

We've spent a lot of time to keep things as simple as possible for you to get Adrenalin up and running quickly. The easiest way to get started is to follow our Video Tutorials below.

How to update Adrenalin

The best way to update Adrenalin is to use the Envato Toolkit which will:

We also strongly recommend you keep regular backups of both your theme and your site in a safe place in case of problems during the update process.
 
Setting up Envato Toolkit
 
First of all you'll need to obtain an API key from themeforest. Login to themeforest and go to Settings->API Key. If you don't already have an API key generate one.
 
api-key
 
Once you have your API key, head back over to WordPress and go to the Envato WordPress Toolkit and enter your themeforest username and API key.
 
add-your-api-key
 
Once an update is available for Adrenalin, you will see a notification within the toolkit.
 
Go ahead and select to update automatically assuming you've not made any changes to the core of the theme. Any changes you've made to the core of the theme will be lost with an automatic update. If you have made changes to the core I would recommend the following process:
 
Manual theme update
  • Backup the theme via ftp to your local machine
  • Download the latest version of the theme
  • Update the theme locally
  • Replace your customizations in the latest version of the theme.
  • Test, test, test!
  • Delete your live theme.
  • Upload your new copy.
  • Test, test, test!

How to customize Adrenalin

The best way to customize Adrenalin (and thus avoid having to do manual updates!) is to use a child theme. Adrenalin is fully compatible with WordPress child themes. For more on child themes, see http://codex.wordpress.org/Child_Themes).

How to contact support

To get the most out of Adrenalin please take the time to go through the documentation in detail. We've covered off most of the things you'll need to know to get up and running and to enjoy Adrenalin as we intended it. If you still can't find the answer to a question you have, we'd be more than happy to help you out. Just in get touch directly with our support team via email support@commercegurus.com and we'll be in touch within 24 hours with an initial response.  

Theme install and initial setup

The first video covers the initial theme install and setup process.

Prerequisites

This video assumes you have the following setup in advance:

Assuming the above, the video below starts right at that point so grab a cup of coffee (or something stronger!) and sit back and watch the install process from start to finish. I recommend you watch it through at least once before then going into your own WordPress and watching the video again while pausing and following the steps taken in the video. It should only take you 5-10 minutes to complete the process if you do it this way :)

WooCommerce Setup

Once you're up and running with the main install, we have another video tutorial which walks you through some of the WooCommerce theme options provided by Adrenalin.

 

Theme installation

If you can't view the videos or just prefer to install the theme from scratch manually this section will guide you through the process.

Installing WordPress

We'll make the assumption that you've got yourself hosting account capable of installing WordPress :) In order to install the current version of WordPress, please go to http://wordpress.org and download the current version. For information on how to install a WordPress Platform, please see the WordPress codex page.

Installing the theme

When you are ready to install a theme, you must first upload the theme to your WordPress directory. There are two ways you can install the theme: Using FTP: By using any FTP program of your choice you can upload the non-zipped folder to the /wp-content/themes/ folder on your server. Using WordPress: Navigate to Appearance > Themes > Install Themes. Go to upload and select the zipped theme folder (adrenalin.zip) and hit install now and theme will be uploaded and installed. Once you have uploaded the theme, you need to activate it. To activate your new theme, go to Appearance > Themes and activate your chosen theme.

Installing the Required Plugins

Once you've activated Adrenalin, you'll be prompted to install a set of plugins which are required to get the most out of Adrenalin. The message will look like this:

captivaplugins

Click the "Begin Installing plugins" option. You'll then see this screen.  

installplugins

 

For simplicity, tick the checkbox just under Bulk actions and from the Bulk options dropdown select "Install" and click "Apply". This will install all plugins that you'll need for the theme. Activate Plugins Once all plugins are installed you should return to the Required plugins screen and activate all plugins using the same bulk actions menu process. You'll know you've done everything correctly when you see this confirmation.  

instalcomplete

Installing WooCommerce

Once you've completed installing all plugins, click back into Plugins and you should see a little prompt from WooCommerce prompting you to install WooCommerce pages. You should NOT do this! We provide the WooCommerce pages during the demo content install process. If you do not wish to install the demo content you can of course process with this step. You're now ready to move on to setting up WooCommerce and the rest of the theme :)

Configure catalog thumbnail sizes

When Adrenalin is installed on a fresh copy of WordPress and WooCommerce it will set product image thumbnail sizes to be optimized for the theme. To confirm these have been set correctly, go to WooCommerce->Settings->Products and scroll down to "Product Image Sizes". You should see the following.

woothumbs

If you see different image dimensions you should change them to match the dimensions above. If you've already been using WooCommerce with another theme it's likely that the thumbnail dimensions were different to that recommended for Adrenalin. As a result, we recommend you use the Regenerate thumbnails plugin to regenerate thumbnails to be optimized for Adrenalin.

Regenerate Thumbnails

Go to Tools->Regen. Thumbnails and click "Regenerate All Thumbnails". If you have a lot of thumbnails this may take a few minutes to complete.

Source image sizes

We recommend you source images are at least 500px * 650px to ensure they appear correctly in Adrenalin.

If would like to pre-populate your website to look like the Adrenalin Theme Demo site, the theme comes with a Demo Data Importer which works as follows:

You're now ready to proceed with configuring the rest of the theme. If you choose not to import the Demo Data you can proceed with adding content pages which we'll go through a little bit later in the docs. If you choose to start adding products and categories to WooCommerce manually, be sure to check out the following good guides by WooThemes:

WooCommerce - Getting Started

WooCommerce - Product Setup

Adrenalin has 2 WordPress Menu locations:

To setup your menus you will first need some pages! Once you've got some pages, go to Appearance->Menus. If you imported the Demo Data you will see something like this.

 

menus

 

By default the Primary Menu is selected. To assign this menu to a theme location, check the Primary Menu checkbox and hit "Save Menu". This will assign the Primary Menu to the Primary Menu theme menu location. Once this has been assigned, go checkout your homepage for the first time in this tutorial and you should see something like this.

hp

 

Your primary menu has been setup correctly!

A little bit more about the Primary Menu

The primary menu location supports single column dropdown and multicolumn mega dropdowns as demonstrated with the demo data.

Single column dropdowns

In the Primary menu any child pages will automatically be added to a single column dropdown. So this structure:

 

singlecol

 

Will become this on the frontend:

basicmenu

 

Mega Dropdown

To setup a mega dropdown, you'll need to do the following:

 

mage1

 

Now to make this a Mega Dropdown you'll need to add a custom css class to the main parent item. To do that, you'll first need to do the following: Scroll up to the top of your WordPress screen and click the "Screen Options" menu. This will reveal a pull down menu from the top of the screen. Check select boxes for "CSS Classes" and "Description".

 

screenoptions

 

You can now close the Screen Options menu. Now back down in your menu expand the main parent menu item - in our example above that's the "Shortcodes" menu item. Enter the following values:

 

  mega2

 

Adding images to your menu Adrenalin also supports adding images to Mega Dropdowns as follows:

imagedropdown

 

The end product of all this work will be a super looking Mega Dropdown a bit like this one:

 

mega

 

Adding banner images to mega dropdowns

To add the banner just above your mega menu content (as shown by the 1200*250 placeholder image above, please go to Theme Options -> Main menu images.  From there you can upload a menu banner for each of your primary menu items. Please note it will only be displayed where a primary menu item has a mega dropdown setup within it. And that's your Primary Menu setup complete!

Homepage Setup If you've imported the demo data, a series of homepages have already been created for you. To assign one to be your homepage:

 

hp2

 

Expecting a different slider? No problem :) We'll show you how to change that shortly. You might also see a message like "LayerSliderWP Slider not found" Fear not, we'll get to that shortly! Before that we'll keep going and setup widgets for our site.   Things are starting to take shape

Adrenalin has a number of different widget areas setup by default, including:

Creating your own widget areas The theme installs the excellent WooSidebars which lets you create your own custom widget areas if you so wish. To do so:

Adding widgets to your Widget areas

You can setup your widgets according to your own preferences. For the demo site, we have setup the following widgets.

Right Sidebar

 

rightsidbar

 

Left Sidebar Exact same setup as Right Sidebar

 

leftsidebar

 

Sidebar

 

sidebar  

 

Top Toolbar - Left

If you're using WPML, this is also where we recommend you add your Language Selector and Currency Switcher.

 

topleft

 

  Top Toolbar - Right We use a simple text widget to create a top menu in the top toolbar.

 

topright

 

Shop sidebar

 

shopsw

 

 

 

 

 

First Footer

 

1stfooter    

 

 

Second Footer

 

2ndfooter

 

Advanced widget settings on the Shop Sidebar

For some of the more sophisticated widgets illustrated above in the Shop Sidebar, here is a little bit more detail on how exactly these widgets are configured in Adrenalin.  

WooCommerce Product Categories

prodcatw

 

YITH WooCommerce Ajax Navigation - Filter by Size

 

ajaxwa

 

YITH WooCommerce Ajax Navigation - Filter by Season

 

ajaxwaseason  

That should be everything you need to setup widgets!

Adrenalin ships with a really comprehensive set of easy to use Theme Options.

 

options

 

  To access the Theme Options, go to WordPress-> Theme Options. Theme Options include:

When you first activate Adrenalin, I suggest you review your Theme Options and then Save Changes at least once to ensure all options are set correctly for the first time.    

Using Layer Slider

We're huge Layer Slider fans. We think it's the best WordPress slider plugin available. So we've also bundled that for you with the theme :) The quickest way to get up and running with Adrenalin's Layer Slider slides is to import the Demo Data slides provided with the theme. To import the Demo Data slides complete the following steps:

Once complete you should have 5 sliders as follows.

 

lsslides

Take note of the ID's assigned to the slides you just imported. To add one of these sliders to one of your content pages (e.g. a Homepage for example), open up your homepage and if you've already used one of the demo data homepages provided you should see something like this right at the top of the page.

lss

 

 

 You can edit which slider now appears on your homepage by clicking the edit icon in the Layer Slider Visual Composer box and then selecting which slider you wish to display.

 

lss2

Save your page.

 

Setup Layer Slider fonts

The final step with Layer Slider is to setup Layer Slider fonts. The demo slides use a number of great looking Google fonts. To configure these for Layer Slider:

 

lsf1

Delete:

In the bottom right hand side, you're going to add some new fonts.

In order to add these fonts, you should type the first few characters, then hit search which should return both fonts straight away. When you're finished click "Save changes". Your slides should now load correctly! In addition to this initial introduction to Layer Slider for Adrenalin, we have also included very detailed documentation for Layer Slider itself in /ADRENALIN_PACKAGE/Documentation/layerslider  

Page Templates

Adrenalin ships with a number of pre-defined Page templates which make managing content that little bit easier, including:

Assigning a page template to a page

Page Banners It's possible to add a nice banner image across the top of your page when creating a new page. At the top of your "Add New" page screen you should see the "Page Banner" metabox as follows:

 

pgbanner

 

Page Banner Image: Upload/select an image from your media library that's at least 1200px wide. Page Banner height: Let's you set the height of the banner. The page title will automatically be added to the center of the banner. See an example here:

 

banner

 

Page Title Settings

When you create a new page you will see the option to Show/Hide your page title. Page titles are set to Show by default. You might want to hide the title when you are using a Page Banner for example. You also have the ability to change the background color and font color of your page title.

 

pagetitle

 

The Page title color and background color control the display of the following example Page title.

 

pagetitleeg

 

 Breadcrumbs

We've built in support for WordPress SEO Breadcrumbs. To activate, first you'll need to install WordPress SEO. Then go to WordPress -> SEO -> Internal Links and apply the following settings.

 

bcrumbs

 

Examples of other page templates in action

Shortcodes and Visual Composer

In addition to the specific page templates listed above, you'll notice Adrenalin ships with a lot of other types of pages with all sorts of goodies included in them. These don't use specific page template per se. They are brought to life through a combination of the wonderful Visual Composer plugin and a series of Shortcodes and custom post types we have made which are bundled in the CommerceGurus Toolkit plugin.

Using Visual Composer

Visual Composer is one of the best Page builder plugins available for WordPress. It allows you to quickly make complex page layouts with minimal technical skills. We've shipped lots of example pages in the demo data provided with the theme. In addition to the demo data, we've also provided a copy of the Visual Composer docs in the /ADRENALIN_PACKAGE/Documentation/visualcomposer folder. I would recommend spending some time to read these in detail to fully understand how to use Visual Composer.

CommerceGurus Shortcodes integrated into Visual Composer

We've deeply baked in some interfaces to our CommerceGurus Toolkit shortcodes right into the Visual Composer user interface. To access these shortcodes in Visual Composer: When you're creating a new page in WordPress click the "Backend Editor" button which will activate Visual Composer.

backendedit

 

Go ahead and "Add a new element" by clicking the large plus symbol (+) which will open the shortcode lightbox.

You should see an option called "CommerceGurus Shortcodes". 

 

cgsc

 

Go ahead and click on CommerceGurus Shortcodes which will filter down the list of shortcodes we've integrated into Visual Composer. The best way to get to know what each of these do is through experimentation. Most of them are very simple. The most complex one which we use a lot in the demo data provided with the theme is the "CommerceGurus Content Strip" shortcode which is a very powerful and flexible shortcode. We think of content strips as sophisticated content banners which sit within visual composer columns and allow you to quickly create highly original elements on page layouts.

Content Strip Options

The demo data is particularly useful for providing lots of examples of how to use Visual Composer to create really beautiful content pages with Adrenalin.

Custom Post Types and the CommerceGurus Toolkit plugin

During the theme install process one of the plugins you should have installed is the CommerceGurus Toolkit. CommerceGurus Toolkit is a dedicated plugin created specially for the CommerceGurus themes which provides enhanced functionality for the theme including shortcodes and custom post types. In the past, these kind of things were integrated directly into the theme. It's now better to keep this kind of functionality in a plugin so if you switch to another theme in the future you won't lose your content.

CommerceGurus Shortcodes - we explored these briefly in the last section. Detailed examples of all shortcodes are provided with the Demo Data. In addition to CommerceGurus Shortcodes, the following custom post types are provided by the CommerceGurus Toolkit:

Showcases - These are sometimes called Portfolios in other themes. Showcases are essentially the same :) We've already covered Showcases in detail a little earlier under Page templates. Featured images for Showcases should be at least 1200px if possible. On a showcase details page you can choose to display a gallery of images or a Youtube/Vimeo video. The page will not display both. It will check and see if there is an Video ID present and if not it will attempt to load photos from the Showcase gallery. To add photos to the showcase gallery click the "Manage Gallery" button and then add and re-order gallery images as normal.

galleryvid

 

Testimonials - Testimonials is a simple custom post type that lets you manage a list of testimonials which you can then use a testimonials shortcode to display a carousel of testimonials on a page like your homepage.

 

testimonials

 

Top Reviews - Think of Top Reviews as a way of creating a curated list of your top product reviews and recommendations. You may not necessarily want all your product reviews automatically appearing on your homepage. If that's the case, use Top Reviews instead to create lists like this.

 

 

reviewssc

Logos - Logos is a simple custom post type that lets you create a carousel of logos to add to your homepage for example.

logogsc

Announcements - Announcements is another simple custom post type that let's you create simple little broadcast announcement messages which then appear in your header. Announcements auto cycle in a carousel and can be switched off from  Theme Options as covered earlier.

 

announcement

We recommend you use Poedit to translate the theme into your desired language. The theme has been fully tested with Poedit for translation capability and you will find lang files (.po/.mo) in /adrenalin/languages/.

For frontend content translations, we recommend WPML. The theme has been fully tested with WPML.

Thanks again for purchasing Adrenalin. We're constantly expanding and refining our documentation so be sure to head over to http://commercegurus.com for lots more tips and tutorials on managing your Adrenalin powered eCommerce website.

Please do not hesitate to contact our support team 24*7*365 on support@commercegurus.com

Thanks!