Introduction

Thank you very much for purchasing our Highnote Wordpress Theme.

Highnote Wordpress Theme is developed precisely for beat producers & beat makers who wants to set up their online beat store using Wordpress. Using Highnote Wordpress theme you can set up your new store with in the matter of minutes.

Highnote theme comes with powerful customization options in the backend using which you can make changes with in few mouse clicks. No coding experience needed!

Our theme is powered by the free version of Easy Digital Downloads plugin from the backend. Using Easy Digitals Downloads you can upload the beats, prices and the downloadable files. All the features available in the free version of EDD is supported by Highnote.

If you need some advance features for your ecommerce you can check with the paid version of EDD and also the extensions that fits your needs. You can check their official website to find out more. However, we believe the free basic version is all that you will need.

This theme installation document is simple and straighforward. We hope you find this documentation helpful to set up your first beat selling store.

Theme Requirements:

Make sure you have the latest version of WordPress installed. You can do so by checking the updates tab from your current WordPress dashboard if there are any updates available for your WordPress. Although our theme works with 5.3 and above versions of WordPress, it is recommended to have the latest version of WordPress. You can download the latest version of WordPress here.

Theme Installation

You must have the latest version of WordPress installed on your server before installing the Highnote theme.

Install Via FTP:

  • Step 1 – Log into your FTP client to access your host web server.
  • Step 2 – Browse to find the .zip file of the theme on your computer and unzip it.
  • Step 3 – Upload the folder highnote to wp-content/themes/ folder.
  • Step 4 – Activate the newly installed theme by going to Appearance > Themes and clicking the Activate button.

For more information about installing the theme using FTP, visit: http://codex.wordpress.org/Using_Themes#Adding_New_Themes

Install Theme Using WordPress Dashboard

  • - Go to Appearance > Theme
  • - Click "Add New" and select the "Upload" option
  • - Upload the "highnote.zip" file
  • - Activate

Install Plugins

All of the plugins related to this theme are listed with the theme installation. Remember, these plugins need to be installed compulsary to have the theme fully functioning like in our demos.

Recommended Plugins

Below are the list of plugins that needs to be installed with our theme. You can directly install the plugins as shown in the image below or do it manually one by one.

You can directly install the plugins as shown in the image below or do it manually one by one. Click "Begin installing plugins" to get started.

Being Installing Plugins
  • - Select "Install" from the Bulk Action dropdown
  • - Click "Apply" button to install the recommended plugin.

The plugins will be download and installed on your server.

Bulk Install Plugins

Once the plugins are installed, they need to be activated.

Go to Appearance > Installed Plugins

Bulk Activate Plugins
  • - Select the plugins that needs to be activated.
  • - Select the "Activate" option from the dropdown.
  • - "Apply" to activate the plugins.

Install highnote-player plugin

It is highly recommended to install this plugin before importing the demo data. Please make sure you have this plugin installed and active.

Go to Plugins > Add New

  • - Click Upload Plugins and upload the highnote-player.zip file. You can find this file in the downloaded folder along with the theme.
  • - Activate the plugin once the installation is complete.

Demo Import

An easy way to set up your store is to replicate the demo datas from our demo sites. And then you can edit and make the necessary changes easily. Our theme supports the demo import feature. Using demo import you can import all the contents from our demo setting to your fresh WordPress installation. Once the demo installation is complete on your server, your store will look exactly like the ones we have in our demo.

Go to Appearance > Import Demo Data

  • - Select the demo that you want to import and Click Import Demo Data
  • Import demo data
  • - Click "Continue & import" to confirm.

Please reload your front page to confirm the import. A successful import should look exactly to one of the demos that you selected. For a successful import you need to have Highnote theme installed and activate along with the recommended plugins.

Theme Customization

Highnote theme is developed in a way to provide as much customization as possible. This theme is focused on the making the edits and changes based on your needs with out ever touching a single code. The homepage of the theme is divided into several sections which can be customized as needed.

"Customize" give you an ability to live preview changes on the site while "Theme Option" give you an ability to go through the different options and make section specific changes.

Go to Appearance > Customize

Theme customizer

You can then select each sections of the theme listed there and make the changes as per your need.

List of common options

There are some common options that are repeated among most of customization sections. The have the same function in each sections so we are going to cover those commin options here

  • Container width(px) : You can set the width of each section in pixels. One section can be wider than the others. Please adjust accordingly.
  • Text Align (Heading) : Refers to the alignment of the heading text. You can have it set to left, center or right.
  • Background Color :Refers to the background color of the section.
  • Background Image :S et the background image of any section. The background image will appear underneath the background color. You can adjust the opacity of the background color to make the background image visible.
  • Text Color:Refers to the text color of the section.

Header Slider

You can also add a slider to the homepage. In order to add a slider you need to enable the slider first. Once the slider is enabled, you can add images, texts and pick up the animation styles.

Go to Appearance > Customize > Header Slider Settings section

How to add a new slider

Show Header Slider: Use this to enable/disable your slider.

Slider Animation: Select the animation effects for your slider.

Slide Image: Image that will appear on your slide

Slide Heading: Heading text for your slider

Description: Some description that appeads below the slide heading

Button Text: What text to show on the button.

Button Link: Internal or External link from the button.

Header Background

Go to Appearance > Customize > Header Background Image section.

This section lets you add header background image for different pages of the theme. You can either upload a single header image for all the pages using the global header or upload different images for each pages listed below.

  • - Global
  • - Blog
  • - Single
  • - Archive
  • - Search
  • - 404 Page

General Settings

Go to Appearance > Customize > General Settings

This section contains general option for the theme.

Accessibility Options:

Enable accessibility option by enabling the follow options below:

  • - Show Skip to Content
  • - Main Menu Bar Above Content
  • - Underline Links While Hover
  • - Keyboard Navigation

Show Shopping Cart On Main Menu Bar : Enable this option if you want to display the shopping cart on your top main navigation. This is the same shopping cart that appears on your music player.

Main Menu Style (On scroll): Regular hides main menu while scrolling. When fixed is selected the navigation will stay fixed at the top while scrolling.

Main Menu Appearance

main_menu_appearance_image

Choose how to display the menu in mobile screen.

Sidebar display option

general_sidebar_align_image

There are 3 differen ways you can manage the sidebar on the pages in the theme. You can either set the sidebar to left or choose not to display sidebar or display it to the right.

Hide/Show sidebar in different screen

general_sidebar_display_option_image

The sidebar of the theme can be shown/hidden on smaller screens. You can enable/disbale the sidebar in the smaller screens.

Site Identity

This is the section where you can upload your site logo, fav icon and your branding.

Go to Appearance > Customize > Site Identity

Logo : Upload your site logo.

Site Title : You can use your store name here if you want to use text based logo.

Tagline :A tag line for your store, if you have.

Site Icon :Upload a fav icon to your store.

Colors

Go to Appearance > Customize > Footer Settings

You can select the theme background , text , link, hover and button color of this theme. The changes will be reflected throughout the website but can be overridden on the sections where those sections have their own color options. In general the homepages sections have their own color options so any changes made in this sections applies to all the other pages and properties of the theme.

Theme Text Color :This color applies to all the texts inside the theme.

Link Text Color : Color of overall links available in the theme.

Link Text Hover Color :The color of the link text at hover state.

Button Background Color :Set the background color for the button. This works only for the button backgroung.

Button Text Color :Set the color of the text on the button. This color applies to text only.

Button Background: Hover Color :The color applies to the hover state of the button background. It doesn't have any connection with the text color on the button.

Button Text: Hover Color :The color applies only to the button text hover color.

Posts Page Settings

You can configure how the post excerpt will appear on the category/archive pages. This applies to the blog section of the theme.

Go to Appearance > Customize > Post Page Settings

Post page navigation

post_page_navigation_image

Our theme comes with two options for posts page navigation. Choose any one of them as per your requirement.

Configure Read More button

read_more_image

Enter a text for Read More button, if left blank read more link won’t be displayed.

Featured Post

featured_post_image

Let your post standout using this featured post option. Select a post from the dropdown list to set it as a featured post.

Blog Layout Style

blog_layout_image

Use this option to choose blog display layout.

Blog Content Layout

blog_content_layout_image

With this option you can hide/show and arrange the order of display of post title, thumbnail, metadata and content.

Typography

Go to Appearance > Customize > Typography

Set the font family and the font properties through out the theme. This applies to the every section of this theme.

  • Font Family : Select the font family from this option.
  • Font Size : Increase or Decrease the font size using this option.
  • Line Height :The vertical spacing between two or more sentences in a paragraph.
  • Letter Spacing : The spacing between two characters in a word.

General

Typography(body) : Font family for the whole body of the page. This includes every html tags in the page.

Typography(paragraph) :Select your font family and font properties to the paragraphs of the theme.

Headings

Set the font family and font properties for h1,h2,h3,h4,h5 and h6 heading through out the theme. You can also set different font size and line height for smaller screen sizes.

Slider And Banner Headings

Set the font family, font variant, size, line height and letter spacing for the headings and subheadings for banner and sliders. You can also set different font size and line height for smaller screen sizes.

Front Page Section Headings

Set the font family and properties for the headings of every sections in the homepage. The font family selected will be applied to all the headings and sub headings of the homepage.

Highnote Beat Player

Go to Appearance > Customize > Highnote Beat Player

Highnote beat player has powerful customization option that can be used to customize the player look and feel as per your needs. You can enable/disbale different elements of the player with a single click.

Add To Cart Style

You can select either dropdown or pop up style for your add to cart in the player.

Style = Dropdown

Add to cart style dropdown

Style = Popup

Add to cart style popup

Show Search: Enable/Disable search option in the player. You can use search to find the related tracks according to your search queries.

Show Shopping Cart: Use this option to show/hide shopping cart in the player. This is the same player that appears on the top.

Show Filters: Enable/Disable filters on the player. The filter can be used to list out tracks according to category, gerne or tags.

Options in music player

Select Screen: Using this option you can select either of the monitor, tablet or mobile view of the screen. Once you have selected the screen view, you can choose what columns to show and hide on the player. Time, BPM, Tags, Share and Download are the five different columns that you can select to display/hide in the different screen sizes respectively.

It becomes impractical to display all of the columns in the mobile screen so you can choose which columns to display and which ones to hide in the mobile screen while enable them all for the bigger screen sizes.

Screen option

Beats Player Width(%) : You can set custom width for the columns in the player. This will override the default width of the columns in the player. You can select the screen sizes and then set the width for the selected columns.

columns width option

FrontPage Settings

Go to Appearance > Customize > FrontPage Settings

The front page or the homepage of the theme contains different sections that are rich in features. You can control each section from the backend and customize them as per your needs.

Front Page Section Order

Go to Appearance > Customize > FrontPage Settings > Front Page Section Order

You can set the order of the different sections on the homepage. Drag and drop a section above/below another to set up the new order so that the particular section will be displayed accordingly on the homepage.

Show/Hide sections on the homepage

Use the eye icon to toggle section visibility and hamburger icon to arrange the position of sections.

Show hide sections on homepage

Drag and Drop to set the orders of the sections

Simple drag and drop each sections above or below the other sections. You decide in what order the sections appear in the homepage.

Drag and Drop sections

About

Go to Appearance > Customize > FrontPage Settings > About

section_background_image

Section Heading: Change the heading text of the about section.

Section Sub Heading: You can add your own sub heading

Section Description: Add some lines of description in the about section

Change Image on the about section

Upload Featured Image: Use the "Select image" button to select and upload the featured image on the section. this will replace any existing image on the section.

Button Label : Text that you want to add on the button.

Button link : Add a link to the button. If you add "https://www.google.com" then, clicking the button will take you to google.com

Beats Player Section

Go to Appearance > Customize > Front Page Settings > Beats Player Section

Music player shortcode and external code

Highnote Player Shortcode: You can use this codecode to display the player anywhere in your site. Copy and past this shortcode to any desired pages or post to show your player there.

External Store Code : Paste your beatstart store embed code here if you want to display your beatstart store in the front end. The default theme player will be replaced by 3rd party store like beatstars.

Removing the 3rd party embed code will automatically display the theme default music player on the front end.

Contact Section

Go to Appearance > Customize > Front Page Settings > Contact Section

The heading and description of this section can be edited using the customizer as shown in the image below.

Contact Section options

To display a contact form in this section you need to create a new contact form using the Contact form 7 plugin. Copy the shortcode of the new form your created and paste it in the text box under "Contact Form 7 Shortcode".

Contact form 7 code

FAQs Section

Go to Appearance > Customize > Front Page Settings > FAQs

Add unlimited FAQs using this section.

FAQs Section options

You can edit the existing demo FAQs and add your own new questions/answers.

Add a newFAQ

Add a new faq
  • - Click "Add New FAQ" button.
  • - Add the question and answer
  • - Publish to save.

Check the "Expand Question" option if you want to expand the particualy FAQ by default.

Features Section

Go to Appearance > Customize > Front Page Settings > Features Section

You can edit the existing features, delete or add new ones if you need.

Feature section details

Add a New Feature

  • - Click "Add New Feature" button
  • - Add your Title, Feature Iocn, Feature Sub title and description
  • - Publish to save.

Offer Section

Go to Appearance > Customize > Front Page Settings > Offer

Offer Section description

Section heading and Description

Pricing Table Section

Go to Appearance > Customize > Front Page Settings > Pricing

Highnote theme consists of its own pricing section.

Pricing Table description

Section Heading and Description

You can edit the existing pricing table, delete or add new tables.

Add a new table

  • - Click "Add New Table" button
  • - Enter title, sub title, currency, price and features.
  • - Publish to save

Copy the code from below and paste it in the feature sections and make the necessary adjustments.

<i class="fas fa-check"></i>Unlimited Downloads <i class="fas fa-check"></i>Unlimited units <i class="fas fa-check"></i>Non-Exclusive Rights <i class="fas fa-check"></i>Keep 100% Royalties <i class="fas fa-check"></i>Instant Delivery

Testimonial Section

Go to Appearance > Customize > Front Page Settings > Testimonial

Add testimonials from your clients and customize how they appear in the theme.

Section Heading and Description

Testimonial Section Titles

Testimonal, Client Name & Company Name

Testimonial Section Options

Add a new Testimonal

  • - Click "Add New Testimonial"
  • - Enter Client's name, Testimony and Company name
  • - Publish to save

How to add a beat to your store

Go to Dashboard > Beats > Add New

The theme is powered by Easy Digital Downloads from the backend. Using Easy Digital Downloads dashboard you can upload beats, add price, adding downloadable files.

A tagged sample file needs to be uploaded that will appear in the player.

Manually upload the license along with the downloadble beats file and then upload it as a .zip folder. When someones pays for beat they will receive the respective beat and license accordingly.

Beats Player Width(%) : You can set custom width for the columns in the player. This will override the default width of the columns in the player. You can select the screen sizes and then set the width for the selected columns.

Upload beats part 1

Enter Beat Name: Enter your beat name here.

Sample Upload(Tagged Mp3): Click "Upload a File" button to upload your sample file. This file is the one that will play on the player.

Tempo & Produced by: Add the tempo and the producer name.

Beats Pricing Option

You can assign the license names and the respective pricing of the file types.

Check "Enable Variable Pricing" to enable the pricing options.

Beats pricing

Add option names and the respective prices for the each option. For an example in the image above the MP3 lease cost $10 while the WAV lease cost $20. You can set your option name and price accordingly.

Uploads license and beat files

Give a friendly name to the file name. Click the "upload a file" button to upload your .zip file. This file normally contains clean beat file along with the license. Please arrange yours accordingly.

Upload beats files for download

Price Assignment: You can select the respective pricing option from the drop down. The options are the one that you created in the beats pricing option. This way your uploaded files will be automatically linked with the prices that you have assigned in the above steps.

Special notes to customers

Beat Note: Special notes or instructions for this product. These notes will be added to the purchase receipt.

Beat category

Beat Category: You can assign your beat to the respective category. This will also be helpful to filter the beats in the player. You can also create a new category with the "Add New Beat Category" option.

Beat Tags and Genre

Beat Tags & Beat Genre: Add tags and genre for your beats.

Beat Image: Set up the artwork for the beat. This will appear on the player. Use the "Set Beat Image" option to select and upload the artwork.

Hit the "Publish" button to publish the beat.