Moodshop WordPress Theme

Detailed Documentation

For support please check out our Earththeme SUPPORT

INTRODUCTION


We would like to thank you for purchasing Moodshop! We are sure that you have made an excellent choice in selecting it. You also have agreed that this item is unique among tons of Premium WordPress themes. Before getting started, please make sure that you always check out our Moodshop WordPress Theme documentation files. We offer all kinds of useful information that you need to use for your purchased item. Besides, Knowledgebase, Articles, Forum Search in our Free support center are available for you to fully satisfy your questions. Thank you, we hope you enjoy our theme. Moodshop can only be used with WordPress and we assume that you already have WordPress installed and ready to go. If you do not, please follow the below WordPress information section to see our section on WordPress to help you get started.

Moodshop is truly a sleek, outstanding and modern WordPress theme specially designed for the need of selling footwear products in particular and eCommerce product in general. MoodShop’s design owns a very unique visual attractiveness and it is absolutely ideal for fashion, watches, jewelry and so many more

To install this theme, you must have a working version of WordPress already installed. If you need help installing WordPress, follow the instructions in WordPress Codex. Below are all the useful links for WordPress users:

To use Moodshop, your server must be running WordPress 4.3 or higher, PHP5.5 or higher, and mysql 5 or higher. Below is a list of items you should ensure your host can comply with.

THEME INSTALLATION


To install Moodshop you must have a working version of WordPress already installed. Make sure your installed Wordpress version is 4.3 or higher. You also need to have PHP 5.5 or higher versions and MySQL 5.0 to function correctly. If you need help installing WordPress, follow the instructions in WordPress Codex

When you purchase Moodshop, you need to download our theme package on from Themeforest.

Extract our full package, then you will see all the files and folders, including 02 .zip files and 03 folders. Below is a full list of everything that is included when you download our theme, along with a short description of each item.

  • Moodshop.zip - This is the theme file you need to add to install theme
  • Moodshop-child.zip - The child theme just for users who want to make code changes
  • Plugins folder - Contains the necessary plugins used for Moodshop theme
    1. Moodshop-shortcodes.zip - A plugin which includes all shortcodes for theme which helps you build your own pages
    2. js_composer.zip - Visual Composer - the most popular page builder for WordPress
    3. K2T-portfolio.zip - Allows you to create portfolio to show your works
    4. Revslider.zip - The Revolution Slider which creates beautiful image sliders for your site
  • Documentation folder - Contains the document providing you with basic guides to use Moodshop theme
  • Sample-Data folder - Contains 01 .xml file and 01 .zip file.
    1. Moodshop.wordpress.xml - Includes all dummy data
    2. Home2-Moodshop.zip - Includes Revolution slider setting data of Homepage 2

Following some steps below, you can completely install Moodshop in few minutes.

1. Are You Sure You Want To Do This?

If you get the “Are You Sure You Want To Do This” message when installing Moodshop via WordPress, it means you have an upload file size limit. Install Moodshop via FTP if this happens, or call your hosting company and ask them to increase the limit.

2. Upload size limit

If you get this message when you install our theme on localhost, here is a solution for you:

INSTALL DEMO DATA


There are also 02 different ways to help you import Moodshop demo content. However, each way has its own purposes which are worth noticing:

Please Note These Important Items about The Demo Content

Images - Our demo images are not included because they are licensed stock items that are not allowed to be shared. So, they will be modified by placeholders, you need to contact authors to get permission in case you want to use them in your commercial or non-commercial projects.

Below are the detailed guides for each method:

The easiest way to import our demo content is to use our One Click Importer. To import our demo content, please see the steps below.

The first way:

  • Step 1: Login into your WordPress Dashboard

  • Step 2: Go to Moodshop >>> Moodshop Welcome

  • Step 3: Scrolling to bottom, you will see Sample Data tab, click to Install to install sample data.
  • Step 4: The process of importing dummy content may take some minutes, so you don't interrupt/cancel the importing process.

  • Step 5: Besides, you can see Plugins Required tab and Plugins Recommended tab. These tabs include the required plugins or the recommended plugins
    1. Unyson plugin: A free drag & drop framework that comes with a bunch of built in extensions that will help you develop premium themes fast & easy.

    2. Visual Composer: The most popular page builder for WordPress

    3. Moodshop-shortcodes: A plugin which includes all shortcodes for theme which helps you build your own pages

    4. Moodshop Toolkit: Including Moodshop core modules and functions.

    1. Revolution Slider: The Revolution Slider which creates beautiful image sliders for your site

    2. WooCommerce: An e-commerce toolkit that helps you sell anything. Beautifully.

    3. YITH WooCommerce Wishlist: YITH WooCommerce Wishlist allows you to add Wishlist functionality to your e-commerce.

    4. Instagram Feed: Display beautifully clean, customizable, and responsive Instagram feeds

    5. Contact form 7: Just another contact form plugin. Simple but flexible.

  • Step 6: Done! You can go to visit your site

The second way:

  • Step 1: Login into your WordPress Dashboard

  • Step 2: Go to Tool >>> Demo Content Install, click to Install to install sample data.

  • Step 3: The process of importing dummy content may take some minutes, so you don't interrupt/cancel the importing process.

  • Step 4: Done! You can go to visit your site

This is the second way for you to import our demo content. Continue reading below to learn how to manually import demo content.

Check The Following Plugins Before Import

  • Unyson plugin: A free drag & drop framework that comes with a bunch of built in extensions that will help you develop premium themes fast & easy.

  • Visual Composer: The most popular page builder for WordPress

  • Moodshop-shortcodes: A plugin which includes all shortcodes for theme which helps you build your own pages

  • Moodshop Toolkit: Including Moodshop core modules and functions.

  • That are required plugins to use this theme, besides there are some recommended plugins including Revolution Slider, Contact Form 7, Instagram Feed, WooCommerce and YITH WooCommerce Wishlist

How to Install Plugins

The first way

Once you activate Moodshop, you will see a notification message to install and activate the required and recommended plugins

  • Step 1: Click to Begin installing plugins

  • Step 2: Select All the plugin >>> Install, then click to Apply

  • Step 3: Click to Activate to enable the plugins you want to use

The second way

Once you activate Moodshop, you navigate to Moodshop Welcome to install these required and recommended plugins

  • Step 1: Navigate to Moodshop >>> Moodshop Welcome

  • Step 2: Click to Plugins Required, then click to Install to start install these required plugins

  • Step 3: Click to Plugins Recommended, then click to Install to start install these recommended plugins

Where To Find Demo Files

But before moving straight to the point, there are some notes worth checking:

  • Make sure you have installed all recommended plugins before importing sample data.
  • In /Sample Data/ folder of our package, you can find 01 .xlm file which are:
    1. Moodshop.wordpress.xml All Data - sample demo data of some pages from our demo.
    2. Home2-Moodshop.zip Revolution Slider Settings of Homepage 2
  • The import process may take several minutes due to large data and your server capacity. If your server setting "Max Execution Time" is too low, increase it (as your hosting provider). Please do not close the browser until it finishes. If it fails, you can run this process again until seeing the "Success Message".
    Demo Images are not installed due to some copyrighted licenses
  • If you have to run the process more than once, menu items may be duplicated. Just go to Appearance > Menus and edit/delete Menu items
  • Feature images are not imported (We use licensed photos on our demo page). Instead you will see placeholder images.

How To Import XML Files

To install sample data, please following these steps below:

  • Step 0 - Make sure you have installed Gamerpro theme and all required & recommended plugins

  • Step 1 - Go to Tools >>> Import, then click to "Install now" in WordPress and wait until installation is finished

  • Step 2 - After having been completely installed, you continue to click on Run Importer
  • Step 3 - Go ahead and click to "Choose File" button and import Gamerpro-wordpress-import.xml file. Don't cancel the importing process
  • Step 4 - When you see the message "All done. Have fun!", you will know that the import process is done. Note: you may need to re-import the second time if the data is large.

  • And now you finished!

  • Step 5 - Done, then you have to set Homepage, Menu, Widgets for your site

NOTE: You can get the .xml file by going to Tools >> Export >> Choose file and click "Download Export File". In the screenshot above, we have exported all content demo data. Then we got the file named "content-export.xml"

How To Import Revolution Slider

To install revolution slider, please following these steps below:

  • Step 1: First, go to Revolution Slider >> Import Slider
  • Step 2: Choose .zip file to upload and import. Click "Import Slider" to finish!

  • Step 3: In case you want to export slider from a website, you can go to Revolution Slider. And then hover to the slide that you might want to export data. Click to the down arrow sign >> Export Slider

HOW TO


This is necessary steps for you to setup your site

1. How To Add A New Post

To create a new post, you follow the below steps:

2. How To Add A Gallery Post

To create a gallery post, you follow the below steps:

3. How To Add A Video Post

To create a video post, you follow the below steps:

4. How To Add An Audio Post

To create an audio post, you follow the below steps:

5. How To Add A Quote Post

To create an quote post, you follow the below steps:

1. How To Create A Blog Page

2. How To Setup Blog Category Page

To setup for your blog page, please go to Theme Options and follow the below steps. All the changes that have been made in this 'Blog' section of Theme Options will effect the entire website. That means if you make any adjustments in a certain page, it will overwrite options in Theme Options.

Front-end setttings

  • Fashion Category Blog Page
  • Footwear Category Blog Page
  • To create a homepage, please follow the below steps:

    Sample Codes For Homepages

    Here we provide you 02 demo pages, each comes with different style and purpose:

    Below is an example of WordPress theme with direct instruction for every section. This captures some main components in contributing a web page:

    Our item comes with flexible off-canvas sidebar which can be customized in theme options. See our following guideline to be clear how to add and change it. Off-Canvas sidebar is sidebar that can slide in and slide out of the page from both the left and the right to show all widgets in front-end page. We will instruct you how to add and customize the flexible sidebar from scratch.

    To install revolution slider, please following these steps below:

    With Drag & Drop header builder, Moodshop will help you create these stunning header in munites.

    What is Header Builder?

    Header Builder is a unique Moodshop addon allowing you to modify website header using visual drag & drop builder. Following the below steps to know more details about Header Builder and how to create a new header.

    Layout

    TitleBar

    Front-end setting

    Styling

    Blog

    This is all settings for blog category page. All the changes that have been made in this 'Blog' section of Theme Options will effect the entire blog category page. That means if you make any adjustments in a category certain page, it will overwrite options in Theme Options.

    Blog cateory page

    Front-end setttings

  • Accessories Category Page
  • Fashion Category Page
  • Single

    NOTE: Similar to the 'Blog' section, all the changes that have been made in this 'Single' section of Theme Options will effect the entire website. That means if you make any adjustments in a certain page, it will overwrite options in Theme Options.

    Front-end settings

    WooCommerce

    Page Layout

    • Choose header type: There are 1 header type for you to choose. You can any header type for specific page.

    • Choose footer type:: There are 2 header type for you to choose. You can any header type for specific page.

    Page Title Bar

    Page Titlebar: If you don't want to fill in the title name above, you can customize your page titlebar here. Beside some simply options, you can notice some special options in Grid:

    • Title bar: Show or hide title bar. Default is show.
    • Titlebar layout: Choose from justify or center for alignment of elements on titlebar.
    • Titlebar font size: Set the size of your text in title area.
    • Top Padding and Bottom Padding: It is a line at the top or bottom of your title area, which is different from padding of content.
    • Background image: select image from "Media" or your computer. The size of image should be 1920x300px. Set your background image position among 9 available positions.
    • Background color: Set your color in title area
    • Background image position: set the position of image background from position list. Default is left top.
    • Background zoom effect: True or False. If you choose True, your background will have zoom effect. Otherwise, set False. Default is False.
    • Background parallax: True or False. If you choose True, your background will have nice paralax effect in title bar.
    • Title opacity: adjust the opacity of titlebar
      1. Shadow opacity: Shadow makes a dark area for titlebar here, highlighting your titlebar name. This is the setting to adjust the opacity of titlebar
      2. Overlay opacity: An effect cover the surface of titlebar area with a coating. This is the setting to adjust the opacity of overlay
      3. Clipmask opacity: This is the setting to adjust opacity of clipmask, an effect cleaves scope of title into small squares.
    • Custom title content: You can create your content for title area instead of filling the title name above, which is the same as customizing post content: you can add image, media or using shortcodes.

    Blog

    You can select a specific category of posts for page. This feature only supports for blog page template

    • Blog categories: You can select specific categories of posts for page
    • Blog style: There are 4 blog styles: Grid, Large, Medium, Masonry
    • Number of columns: You can select the number of columns for page: 2, 3, 4 or 5 columns.
    • Post per page: Enter the number of posts you want to show in each page.

    Post Metadata

    • Show/hide tags: Select if you want to show or hide tags. Default is to show tags
    • Show/hide authorbox: Select if you want to show or hide authorbox
    • Show/hide related post: Select if you want to show or hide related post

    Post Format

    Customize Post format if you choose one of these formats "video, audio, link, quote, gallery":

    • For format "video", you have some options:
      1. Video format url: you can only add link from Vimeo and Youtube
      2. Video source: select video source: video link, upload local file, video embed code.
    • For format "audio", you have some options:
      1. Audio source: select audio source: soundcloud link or upload local file.
      2. Link: insert soundcloud link, or link audio from other websites (option for format "Link" only, please fill in full http:// address).
    • For format "quote", you have some options:
      1. Quote author: fill the author name of the quote.
      2. Author quote url: add author link.
      3. Quote content: fill the quote.
    • For format "gallery", you have some options:
      1. Gallery format: add images, audio, video... from gallery.
      2. Gallery auto play: True or False. If you choose True, your gallery will play in auto. Default is False.
      3. Gallery duration time: fill duration time for your gallery. Default is 5000.
      4. Gallery speed: custom the speed. Default is 300.
      5. Gallery pagination: True or False. If you choose True, your gallery will be paginated. Default is False.
      6. Gallery navigation: True or False. If you choose True, your post will have gallery navigation. Default is True.
      7. Gallery mousewheel using: True or False. If you choose True, the gallery can be used by mousewheel. Default is True.

    You can use row to add elements, shortcodes and build your own pages

    Activate Row

    Add Row and Use Row Layout

    Edit Elements

    To edit Row, Column or Element, you need to click the Pencil icon

    Duplicate Elements

    To duplicate Row, Column or Element, you need to click the Pages icon

    Remove Elements

    To remove Row, Column or Element, you need to click the Trash box icon

    Row Settings

    General options - When you edit row, you can edit general optipons

    Design options - When you edit row, you can edit the design optipons

    Moodshop Grid Member

    This shortcode is used to create Grid member page

    Moodshop Member Items

    This shortcode is used to create Grid member

    Page Navigation

    This shortcode is used to add page navigation

    Moodshop Register

    This shortcode is used to create Moodshop register

    K2T Textbox

    This shortcode is used to add blog listing page

    K2T Textbox

    This shortcode is used to add blog listing page

    Pie Chart

    This shortcode is used to create pie chart. Here are the parameters of this shortcode:

    Shortcodes


    Visual Composer is a very modern and useful feature of Moodshop, it allows users to make a new page in a short time, simplifying shortcodes. If you like the traditional way to create your own page, you can always click to Classic Mode.

    It is very easy to create your own page.

    Step 1:

    Step 2: To custom each row, you choose options in the right of the row.

    2.1. Edit this row:

    1.1. Button

    Here are the parameters of this shortcode:

    1.2. Circle Button

    Here are the parameters of this shortcode:

    1.3. Progress

    Here are the parameters of this shortcode:

    1.4. Pie chart

    Here are the parameters of this shortcode:

    1.5. Icon

    Here are the parameters of this shortcode:

    1.6. Icon Box

    Here are the parameters of this shortcode:

    1.7. Message Box

    Here are the parameters of this shortcode:

    1.8. Heading

    Here are the parameters of this shortcode:

    1.9. Pricing Table

    Here are the parameters of this shortcode:

    1.11. K Event Listing

    Here are the parameters of K2T shortcode:

    1.12. Tabs

    1.13. Testimonials

    Here are the parameters of this shortcode:

    1.14. Images

    Here are the parameters of this shortcode:

    1.15. Countdown

    Here are the parameters of this shortcode:

    1.16. Posts

    Here are the parameters of this shortcode:

    1.17. K2t Google maps

    Here are the parameters of this shortcode:

    1.18. Brands

    Choose Brand then Brand Item Here are the parameters of shortcode Brand:

    1.19. Member

    Here are the parameters of this shortcode:

    1.20. Tour

    Here are the parameters of this shortcode:

    1.21. Blockquotes

    Here are the parameters of this shortcode:

    1.22. Icon list

    Select shortcode Icon list, then choose small Icon inside Icon list.

    Here are the parameters of shortcode Icon list:
    Here are the parameters of shortcode Icon items:

    1.23. Video

    Here are the parameters of this shortcode:

    1.24. Socials

    To increase interact between you and your visitors, Moodshop has 4 different popular social buttons for you to choose: facebook, twitter, google plus and pinterest.

    1.25. Contact form

    Here are the parameters of shortcode Contact form:

    1.26. Accordion and Toggles

    Here are the parameters of shortcode Accordion:

    Here are the parameters of shortcode Accordion Item:

    Here are the parameters of shortcode Toggles:

    1.28. Media

    Here are the parameters of shortcode Media Grid:

    1.29. Blog post

    Here are the parameters of shortcode Blogpost:

    1.31. Post Slider

    Here are the parameters of this shortcode:

    1.32. Call to Action

    Here are the parameters of this shortcode:

    1.33. WooCommerce shortcodes

    Recent Product

    Here are the parameters of this shortcode:

    Featured Product

    Here are the parameters of this shortcode:

    CHILD THEME


    Moodshop comes with a Child Theme. Simply install Moodshop-Child.zip like a regular WordPress theme.

    What is A Child Theme?

    A child theme is a theme that inherits the functionality of another theme, called the parent theme. Child themes allow you to modify, or add to the functionality of that parent theme. A child theme is the best, safest, and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes. Instead of modifying the theme files directly, you can create a child theme and override within.

    Why Use A Child Theme?

    There are a few reasons why you would want to use a child theme:

    • A WordPress child theme allows you to apply custom code changes to your site. Using a child theme ensures that all your customizations will not be overwritten even when you update the parent theme.
    • If you modify code directly from a parent theme, then update the parent theme, your changes will be lost. Always use a child theme if you are modifying core code.
    Refference: Child Theme_codex

    FONT ICONS


    Follow these steps to know how to add different icons fonts to Moodshop:

    Step 1: Copy the icon fonts following the link: theme root / framework / k2ticon / inc / font. An icons fonts standard includes 4 files: your_font.eot, your_font.svg, your_font.ttf and your_font.woff

    Step 2: Open file as link: root theme / framework / k2ticon / css / style.css to inform font-face and the whole css class for the new font. (Note to change the path to adapt). For example:

    @font-face {

    font-family: " your_font ";

    src: url("../inc/font/ your_font.eot");

    src: url("../inc/font/ your_font.eot#iefix") format("embedded-opentype"),

    url("../inc/font/ your_font.woff") format("woff"),

    url("../inc/font/ your_font.ttf") format("truetype"),

    url("../inc/font/ your_font.svg") format("svg");

    font-weight: normal;

    font-style: normal;

    }

    .icon-1 { content: “” }

    .icon-2 { content: “” }

    ….

    Step 3: Open file as the direction: theme root / framework / k2ticon / inc/ list.php and find line 729 to add new class of the new icon fonts

    ‘your_font ‘ => array(

    ‘icon-1’,

    ‘icon-2,

    ‘icon-3’

    )

    Step 4: Open file as the direction: theme root / framework / k2ticon / js / generator.js and find line 56, duplicate line 56-59 and then paste down

    if ( selectedIcons == ‘your_font-icons-list' ) {

    listIcons.hide();

    jQuery( 'ul. your_font -icon-list' ).show();

    }

    Step 5: Open file as the direction: theme root / framework / k2ticon / k2ticon.php, find line 80 to paste the code down

    Step 6: Done!. See the results!

    Note: You can replace "your_font" by your own name

    FINALLY


    Thank you for reading!

    We hope you can create the best website with Moodshop.

    One again, thank you so much for using Moodshop. As i said at the beginning, i'd be glad to help you if you have any questions relating to this theme. No guarantees, but i'll do my best to assist. If you have a more general question relating to the themes.

    Do not hesitant to contact us via email: earthemes@gmail.com or submit ticket via Forum

    Please take a screenshot photo with descriptions about your problem. More details about your problems help us more easier to figure out and respond you sooner.

    *******************Note*********************************************************************************************************

    SCOPE OF SUPPORT

    Our support covers getting setup, trouble using any features and any bug fixes that may arise. Unfortunately we cannot provide support for customizations or 3rd party plugins. If you need help with customizations of your theme, please contact with us with your requirement. Our technical team will help you with some fees.

    SUPPORT SCHEDULE

    Our working time is 8:30am - 5:30pm from Monday to Friday (GMT+7). So if you email us or submit ticket besides this working time, we are really sorry that we are not able to respond you soon. We will try to reply you as fast as we can. Especially if you email or submit ticket at weekend, please be patient and we will respond to you right when we are back on Monday.

    Support forum

    CONTACT

    Facebook

    Twitter

    Google Plus

    Youtube

    Reference WordPress support (installation, development): Learn to HTML, CSS, PHP, Javascript, etc