Back to top

How to ask support?

Support for this theme is conducted through our Support Forum.

Please register for an account here and follow the steps reported in this topic to allow us to verify your purchase and ability you to read the support forum, watch videotutorials and open new topics to ask free support.

MayaShop Documentation

Thank you so much for purchasing

MayaShop - Premium Wordpress theme!

This document covers the installation and use of this theme and reveals answers to common problems and issues - I encourage you to read this document thoroughly if you are experiencing any difficulties.

Get started!


 

Getting started

To install this theme you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex - http://codex.wordpress.org/Installing_WordPress

 

Installation

Upload via ftp:

Firstly, unzip the MayaShop_WordPress_Theme.zip file to a directory on your computer. It contains a folder named maya.zip file. Open this archive and upload the sheeva folder to your server via ftp to the   /themes/ directory on your Wordpress installation. (wp-content > themes)

 

Upload via Wordpress admin:

Go to your Wordpress admin, and in the Appearance-panel, choose Add New Themes. Click Add new. Upload the maya.zip. Not upload the MayaShop_Wordpress_theme.zip file, but only the maya.zip file, if you have a "missing stylesheet" issue you are uploading the wrong file!

Installing WordPress  http://codex.wordpress.org/Installing_WordPress

 

Activation

Once you have uploaded the theme, activate your theme in Appearance > Themes. 

Using Themes http://codex.wordpress.org/Using_Themes

 

Install sample content

You can install sample content by importing our live preview settings, that you can find in our support forum.

  1. Go to Appearance > Import/Export
  2. Select the .gz file you downloaded in our forum (don't open this file! only upload it);
  3. Click to import

You can also import all images we used for our live preview (except the images taken by Fotolia with a regular license, we can't redistribuite them)

  1. In our support forum you can find the folder with all images of our live preview
  2. Put this folder in your wp-content/upload

Setting up pages and posts

Setting up the home page

To start with MayaShop Theme you have to:

  • Create a new page, and assign it the template 'home';
  • Under the editor, add the slogan title and subtitle for this page (if you want to show it)

    •  


  • In the Options of the page panel chose if you want to display or not the title of the page, the breadcrumps, the sidebar for this page (if you want to use a sidebar) and the slider you want to display in your front page.

 

It's important that Wordpress is set up to display a static page as home page. You set this in Settings > Reading. Chose 'static page' and select the page you created for the home in the select menu.


 

Adding a slideshow to the home page

The theme has a lot of slideshow-variants to choose from.

  1. In your page, set the slider (or the static image, if you'd like it) that you want in the page, in the "options of the page" panel (the same panel where you can set the layout of the page and the sidebar)

 

Set the Elastic slideshow

  1. Go to Appearance > Theme Options
  2. Open the "Sliders" tab
  3. In "Configure slider" chose the "Slider Elastic" and click on the configure button

Now, in the "Slides" tab you can:

  1. Click to "Add/Edit slide" to create a new slide
  2. Add a title to your slide
  3. Add a subtitle to your slide
  4. Upload the image for the slide
  5. To save, click on the Save changes button

 

Set the Elegant slideshow

  1. Go to Appearance > Theme Options
  2. Open the "Sliders" tab
  3. In "Configure slider" chose the "Slider Elegant" and click on the configure button

Now, in the "Slides" tab you can:

  1. Click to "Add/Edit slide" to create a new slide
  2. Add a title to your slide
  3. Add a textual content to your slide
  4. Upload the image for the slide
  5. Chose if the slide have to link for a category, a url or a page
  6. To save, click on the Save changes button

 

Set the Cycle slideshow

  1. Go to Appearance > Theme Options
  2. Open the "Sliders" tab
  3. In "Configure slider" chose the "Slider Cycle" and click on the configure button

Now, in the "Slides" tab you can:

  1. Click to "Add/Edit slide" to create a new slide
  2. Add a title to your slide
  3. Add a textual content to your slide
  4. Upload the image for the slide
  5. Chose if the slide have to link for a category, a url or a page
  6. To save, click on the Save changes button

 

Set the UnoSlider slideshow

  1. Go to Appearance > Theme Options
  2. Open the "Sliders" tab
  3. In "Configure slider" chose the "UnoSlider" and click on the configure button

Now, in the "Slides" tab you can:

  1. Click to "Add/Edit slide" to create a new slide
  2. Add a title to your slide
  3. Upload the image for the slide
  4. Chose if the slide have to link for a category, a url or a page
  5. To save, click on the Save changes button

In slider settings you can chose the layout of the slider (in our demo we are using the "light" skin) and edit the settings of the slider.

 

Set the LayerSlider slideshow

  1. In Appearance click on the "Layerslider" link

I suggest you to watch this video to learn how to set the LayerSlider: http://www.youtube.com/watch?v=IqluV6LN4Iw

Also this video can be useful for you: http://www.yourinspirationweb.com/tf/support/sheeva/Set-Layer/Set-Layer.html

Here you can also see a live demo of the slideshow: http://codecanyon.net/item/layerslider-the-parallax-effect-slider/922100

Set the Mini Layers slideshow

In this theme you will have two Layers slideshow: one big (width 960pixel) and another small, called "Mini Layers", with text content in the right side, (see it in this page)

Create a new slider: In Appearance click on the "Layerslider" link. Set the size of the slider with a width of 608pixel and an height 0f 280pixel.

I suggest you to watch this video to learn how to set the LayerSlider: http://www.youtube.com/watch?v=IqluV6LN4Iw

Also this video can be useful for you: http://www.yourinspirationweb.com/tf/support/sheeva/Set-Layer/Set-Layer.html

Here you can also see a live demo of the slideshow: http://codecanyon.net/item/layerslider-the-parallax-effect-slider/922100

After this:

  1. Go to Appearance > Theme Options
  2. Open the "Sliders" tab
  3. In "Configure slider" chose the "Mini Layers" and click on the configure button
  4. In "Select the slider" select the Layer Slider you created
  5. Add title and text content that you want to display at the right side, near to the slider.

 

Set the Nivo slideshow

  1. Open the "Sliders" tab
  2. In "Configure slider" chose the "Nivo slider" and click on the configure button

Now, in the "Slides" tab you can:

  1. Click to "Add/Edit slide" to create a new slide
  2. Upload the image for the slide
  3. Add title and text content that you want to display at the right side, near to the slider.

 

Set the Thumbnail slideshow

  1. Open the "Sliders" tab
  2. In "Default Header image type" check "With Thumbnails "
  3. In "Configure slider" choose the "With Thumbnails " and click on the configure button

Now, in the "Slides" tab you can:

  1. Click to "Add/Edit slide" to create a new slide
  2. Add a title to your slide
  3. Add a tooltip content to your slide
  4. Upload the image for the slide
  5. Choose if the slide have to link for a category, a url or a page
  6. To save, click on the Save changes button

In this slideshow you can also add an extratooltip above your image.

  1. Enter the text for your extratooltip
  2. Upload in image (optional, you can add only text)
  3. Choose if the extratooltip have to link for a category, a url or a page
  4. Enter the coords for the extratooltip position

 

Where you can find this coords?

Open the big image with Photoshop (or another software) and with a rule take the coords (in pixel) where you want to put the tooltip:

 

Set the Flash slideshow

  1. Open the "Sliders" tab
  2. In "Configure slider" choose the "Slider Flash" and click on the configure button

Now, in the "Slides" tab you can:

  1. Click to "Add/Edit slide" to create a new slide
  2. Add a title to your slide
  3. Add a tooltip content to your slide
  4. Upload the image for the slide
  5. Chose if the slide have to link for a category, a url or a page
  6. To save, click on the Save changes button

Size of the Flash slider images: Width 960px, height 317px

 

Set the HOME PAGE VERSION 1 (like this page)

The slider: Mini Layer

Size of this slider: width 608pixel, height:270px;

  1. In your home page, set the Mini Layers slider in the "options of the page" panel (the same panel where you can set the layout of the page and the sidebar)

Create a new Mini Layers slider: In Appearance click on the "Layerslider" link. Set the size of the slider with a width of 608pixel and an height 0f 280pixel.

I suggest you to watch this video to learn how to set the LayerSlider: http://www.youtube.com/watch?v=IqluV6LN4Iw

Also this video can be useful for you: http://www.yourinspirationweb.com/tf/support/sheeva/Set-Layer/Set-Layer.html

Here you can also see a live demo of the slideshow: http://codecanyon.net/item/layerslider-the-parallax-effect-slider/922100

After this:

  1. Go to Appearance > Theme Options
  2. Open the "Sliders" tab
  3. In "Configure slider" chose the "Mini Layers" and click on the configure button
  4. In "Select the slider" select the Layer Slider you created
  5. Add title and text content that you want to display at the right side, near to the slider.

 

The content of the page

In this home we are using a shortcode to display the recent products and also a products slider to display the best sellers products. You can have the same content adding this code in the editor of your page (be sure to using the HTML tab, not the "Visual" tab of the editor.): 

<h2>NEW ARRIVALS ON MAYA'S SHOP</h2>
[border]
[recent_products per_page="4" columns="4"]
<h2>BEST SELLERS OF THE MONTH</h2>
[border]
[product_slider category="" orderby="date" order="desc" featured="0" latest="0" best_sellers="1"]

In this home page we are using a sidebar with two widgets: a "testimonial widget" to display a slider with the "excerpt" of the testimonials, and an "icon text widget".

Set the HOME PAGE VERSION 2 (like this page)

The slider

  1. In your home page, set the Layers slider in the "options of the page" panel (the same panel where you can set the layout of the page and the sidebar)
  2. In Appearance click on the "Layerslider" link

I suggest you to watch this video to learn how to set the LayerSlider: http://www.youtube.com/watch?v=IqluV6LN4Iw

Also this video can be useful for you: http://www.yourinspirationweb.com/tf/support/sheeva/Set-Layer/Set-Layer.html

Here you can also see a live demo of the slideshow: http://codecanyon.net/item/layerslider-the-parallax-effect-slider/922100

Page content

Under the editor of the page, we added a slogan title (MayaShop, a nice and fresh perspective to your e-commerce site) and a slogan subtitle (use your WordPress to set your great store online).

In the page of the home version 2 we put the shortcode to display the products. This is the code: 

[items per_page="8" columns="4" orderby="date" order="desc"]

In the "Extra Content" textarea under the editor i added the shortcodes to display a nice call to action. This is the code:

[call_two label_button="SIGN IN NOW" href="#"]
[size px="46"]<strong>35% </strong>[/size] [size px="36"]off everything![/size] Sign in before march 21 to enjoy our special sales!
[/call_two]

Sidebar

We are using a left sidebar with the widget "Woo Commerce featured products" (we change the title with "MUST HAVE" and a "icon text widget"

 

Set the HOME PAGE VERSION 3 (like this page)

The slider

  1. In your home page, set the Uno slider in the "options of the page" panel (the same panel where you can set the layout of the page and the sidebar)
  2. Go to Appearance > Theme Options
  3. Open the "Sliders" tab
  4. In "Configure slider" chose the "UnoSlider" and click on the configure button

Now, in the "Slides" tab you can:

  1. Click to "Add/Edit slide" to create a new slide
  2. Add a title to your slide
  3. Upload the image for the slide
  4. Chose if the slide have to link for a category, a url or a page
  5. To save, click on the Save changes button

In slider settings you can chose the layout of the slider (in our demo we are using the "light" skin) and edit the settings of the slider.

 

Page content

In this home page we are using 4 text columns with an image in each column and a product slider. This is the code of this page (copy and past in your editor, be sure to have the "html" tab and not the "visual" tab): 

[one_fourth]
<h3>MAN ACCESSORIES</h3>
<img class="size-full wp-image-596 alignleft" title="man" src="http://yourinspirationweb.com/demo/maya/files/2012/04/man.jpg" alt="" width="220" height="165" />

Nunc felis urna, mattis non blandit vitae, porttitor ac enim. Nunc scelerisque sagittis sollicitudin nam gravida. <a href="#">Read more</a>

[/one_fourth]

[one_fourth]
<h3>WOMAN ACCESSORIES<h3>
<img class="aligncenter  wp-image-598" title="woman2" src="http://yourinspirationweb.com/demo/maya/files/2012/04/woman2.jpg" alt="" width="220" height="165" />

Nunc felis urna, mattis non blandit vitae, porttitor ac enim. Nunc scelerisque sagittis sollicitudin nam gravida. <a href="#">Read more</a>

[/one_fourth]

[one_fourth]
<h3>LOVE MAYA SHOP</h3>
<img class="aligncenter size-full wp-image-600" title="skin" src="http://yourinspirationweb.com/demo/maya/files/2012/04/skin.jpg" alt="" width="220" height="165" />

Nunc felis urna, mattis non blandit vitae, porttitor ac enim. Nunc scelerisque sagittis sollicitudin nam gravida.<a href="#">Read more</a>

[/one_fourth]

[one_fourth_last]
<h3>BUY IT NOW!</h3>
<img class="aligncenter size-full wp-image-601" title="sport" src="http://yourinspirationweb.com/demo/maya/files/2012/04/sport.jpg" alt="" width="220" height="165" />

Nunc felis urna, mattis non blandit vitae, porttitor ac enim. Nunc scelerisque sagittis sollicitudin nam gravida.<a href="#">Read more</a>

[/one_fourth_last]

[space]
<h3>FROM THE SHOP</h3>
[product_slider orderby="date" order="desc" featured="0" latest="0" best_sellers="0"]

Set the HOME PAGE VERSION 4 (like this page)

The slider

  1. In the "options of the page" panel inside the home page, set the "Elastic slider"
  2. In Appearance > Theme Options > Sliders configure the Elastic slider.

Now, in the "Slides" tab you can:

  1. Click to "Add/Edit slide" to create a new slide
  2. Add a title to your slide
  3. Add a subtitle to your slide
  4. Upload the image for the slide
  5. To save, click on the Save changes button

Page content - The "Features tab"

In this page we have a "features tab". Now i will explain how to use it:

  1. Go in Appearance > Theme Options > Features tab
  2. Enter a name for your features tab and press the button "add features tab"
  3. Copy the shortcode of the tab you created (example: [features_tab name="Maya Shop Features" open="1"])
  4. Past the shortcode in the editor of the page where you want to put the tab.

To set the content of the features tab:

  1. In the left bar, you can see the name of the tab you created. Click it.
  2. Click on "Add new" to create the first tab of your features tab.
  3. Enter the title of the tab and put the content of the tab in the editor. You can add text, images, shortcodes and so on.
  4. In the "Featured Image" panel on the right, upload the icon you want to use for this tab and set this icon as a "featured image"
  5. Publish the post.
  6. Follow the same procedure for each tab you want in your features tab. You can create unlimited tabs!

Sidebar

We are using a right sidebar with 4 "icon text widgets".

 

Set the HOME PAGE VERSION 5 (like this page)

The slider

  1. In the "options of the page" panel inside the home page, set the "Elegant slider"
  2. In Appearance > Theme Options > Sliders configure the Elegant slider.

Now, in the "Slides" tab you can:

  1. Click to "Add/Edit slide" to create a new slide
  2. Add a title to your slide
  3. Add a textual content to your slide. We added a calligraphic text using this code: [special_font size="24"]prices from [size px="42"]$45[/size][/special_font]. You can set the "special font" you want to use in Appearance > Theme Options > Typography.
  4. Upload the image for the slide
  5. Chose if the slide have to link for a category, a url or a page
  6. To save, click on the Save changes button

 

Page content

In this page we are using two products sliders. The code you can copy and past in the editor of your page (be sure to have the tab "html" opened and not the "visual") is: 

<h2>FEATURED PRODUCTS ON MAYA</h2>
[border]

[product_slider featured="0" latest="1" best_sellers="0"]
<h2>BEST SELLERS OF THE MONTH</h2>
[border]

[product_slider featured="0" latest="0" best_sellers="1"]

 

Set the HOME PAGE VERSION 6 (like this page)

The slider

  1. In the "options of the page" panel inside the home page, set the "Nivo slider"
  2. In Appearance > Theme Options > Sliders configure the Nivo slider.

Now, in the "Slides" tab you can:

  1. Click to "Add/Edit slide" to create a new slide
  2. Upload the image for the slide
  3. Add title and text content that you want to display at the right side, near to the slider.

 

Page content

In this page we use only a normal text content and two titles. In the left sidebar we are using the "Popular posts" widget to show the post from the blog.

 

Set the HOME PAGE VERSION 7 (like this page)

The slider

  1. In the "options of the page" panel inside the home page, set the "With thumbnails slider"
  2. In Appearance > Theme Options > Sliders configure the With Thumbnails slider.

Now, in the "Slides" tab you can:

  1. Click to "Add/Edit slide" to create a new slide
  2. Add a title to your slide
  3. Add a tooltip content to your slide
  4. Upload the image for the slide
  5. Choose if the slide have to link for a category, a url or a page
  6. To save, click on the Save changes button

In this slideshow you can also add an extratooltip above your image.

  1. Enter the text for your extratooltip
  2. Upload in image (optional, you can add only text)
  3. Choose if the extratooltip have to link for a category, a url or a page
  4. Enter the coords for the extratooltip position

 

Where you can find this coords?

Open the big image with Photoshop (or another software) and with a rule take the coords (in pixel) where you want to put the tooltip:

 

Page content

In this page we use a product slider and 4 icon sections shortcodes. This is the code you can copy and past in the editor of the page (be sure to have the "html" tab and not the "visual" tab open): 

<h2>FEATURED PRODUCTS ON MAYA</h2>
[border]

[product_slider featured="0" latest="1" best_sellers="0"]

[border]

[section icon="checkbox-checked" title="Your title" title_size="h4"]Lorem ipsum dolor sit amet, consectetur adipiscing lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit enim libero, quis tincidunt arcu.[/section]

[section icon="phone-black" title="Your title" title_size="h4"]Lorem ipsum dolor sit amet, consectetur adipiscing lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit enim libero, quis tincidunt arcu.[/section]

[section icon="card-black" title="Your title" title_size="h4"]Lorem ipsum dolor sit amet, consectetur adipiscing lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit enim libero, quis tincidunt arcu.[/section]

[section icon="chart-bar" title="Your title" title_size="h4" last="1"]Lorem ipsum dolor sit amet, consectetur adipiscing lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit enim libero, quis tincidunt arcu.[/section]

 

Set the HOME PAGE VERSION 8 (like this page)

The slider

  1. In the "options of the page" panel inside the home page, set the "Flash slider"
  2. In Appearance > Theme Options > Sliders configure the Flash slider.

Now, in the "Slides" tab you can:

  1. Click to "Add/Edit slide" to create a new slide
  2. Add a title to your slide
  3. Add a tooltip content to your slide
  4. Upload the image for the slide
  5. Chose if the slide have to link for a category, a url or a page
  6. To save, click on the Save changes button

 

Page content

In this home page we use a shortcode to display the products and also a shortcode that display a slider with the testimonials. The code you can put in your editor (be sure to have the "html" tab open and not the "visual" tab) is: 

[items per_page="10" columns="5" orderby="date" order="desc"]

<h1 style="text-align: center;">OUR <span>CUSTOMERS</span> SAYS..</h1>

[border]
[testimonials_slider speed="500" timeout="7000"]

 

Set the HOME PAGE VERSION 9 (like this page)

The slider

  1. In the "options of the page" panel inside the home page, set the "Cycle slider"
  2. In Appearance > Theme Options > Sliders configure the Cycle slider.

Now, in the "Slides" tab you can:

  1. Click to "Add/Edit slide" to create a new slide
  2. Add a title to your slide
  3. Add a textual content to your slide
  4. Upload the image for the slide
  5. Chose if the slide have to link for a category, a url or a page
  6. To save, click on the Save changes button

 

Page content

In this page we are using a shortcode to display the products. The code is: 

<h2>NEW ARRIVAL - WINTER COLLECTION</h2>
[product_slider style="traditional" category="" orderby="date" order="desc" featured="0" latest="1" best_sellers="0"]

In the Extra content textarea we added the icon sections shortcodes. This is the code we are using: 

[section icon="cart" size="48" title="Shopping Cart"]Quisque mi tellus, semper vitae consequat at, volutpat sit amet odio. Cras condimentum rutrum mattis. [grey_cta href="#"]Read more[/grey_cta][/section]

[section icon="gift" size="48" title="Gift Card"]Quisque mi tellus, semper vitae consequat at, volutpat sit amet odio. Cras condimentum rutrum mattis. [grey_cta  href="#"]Read more[/grey_cta][/section]

[section icon="mphone" size="48" title="Our news"]Quisque mi tellus, semper vitae consequat at, volutpat sit amet odio. Cras condimentum rutrum mattis. [grey_cta  href="#"]Read more[/grey_cta][/section]

[section icon="open" size="48" title="Open 24h" last="1" ]Quisque mi tellus, semper vitae consequat at, volutpat sit amet odio. Cras condimentum rutrum mattis. [grey_cta  href="#"]Read more[/grey_cta][/section]

Note: The last icon section need to have the _last attribute!

Sidebar

In the sidebar we are using the "Woo Commerce best sellers products" widget.

Set the BACKGROUND OF THE PAGE

In Appearance > Theme options > colors you can set the background of the body. In MayaShop there are 50+ background and patterns that you can use, and you can also use the background uploader if you want to upload your custom background.

Set the footer

You can set how many rows use for your footer and set the style for the footer layout.

  1. Go to Appearance > Theme Options > General > Footer
  2. Chose style of footer: Two Columns (small, with text on the right and on the left side); Centered Footer (small, with centered text); Big Footer + Centered or Big Footer with Two columns (you set how many widget areas and add a small footer for your copyright info and socials, like our demo)
  3. Set how many widget areas and how many widgets to add (In our demo we have 1 widget area and 4 widgets) you want to set
  4. Write the text for the centered footer or for the two columns footer (we used the two columns footer)
  5. If you have it, enter your Google Analytics code in the textarea
  6. Go to Appearance > Widgets and put the widget in the sidebar 'Footer Row X'. You will find a sidebar called 'Footer Row' for each widget area you created for the footer.

 

Shortcode to display the social icons

[social type="facebook" href="#"]
[social type="rss" href="#"]
[social type="twitter" href="#"]
[social type="youtube"  href="#"]
[social type="delicious" href="#"]
[social type="vimeo"  href="#"]
[social type="flickr" href="#"]
[social type="stumble" href="#"]
[social type="linkedin" href="#"]
[social type="skype" href="#"]
[social type="lastfm" href="#"]
[social type="myspace" href="#"]
[social type="tumblr" href="#"]
[social type="digg" href="#"]
[social type="quora" href="#"]
[social type="dribble" href="#"]
[social type="forrst" href="#"]
[social type="google" href="#"]
[social type="ember" href="#"]

Shortcode to display the SMALL social icons

[social type="facebook" size="small" href="#"]
[social type="rss" size="small" href="#"]
[social type="twitter" size="small" href="#"]
[social type="youtube" size="small" href="#"]
[social type="delicious" size="small" href="#"]
[social type="vimeo"  size="small" href="#"]
[social type="flickr" size="small" href="#"]
[social type="stumble" size="small" href="#"]
[social type="linkedin"size="small"  href="#"]
[social type="skype" size="small" href="#"]
[social type="lastfm" size="small" href="#"]
[social type="myspace" size="small" href="#"]
[social type="tumblr" size="small" href="#"]
[social type="digg" size="small" href="#"]
[social type="quora" size="small" href="#"]
[social type="dribble" size="small" href="#"]
[social type="forrst" size="small" href="#"]
[social type="google" size="small" href="#"]
[social type="ember" size="small" href="#"]

Shortcode to display the credit card icons

[credit cards="paypal,visa,mastercard,amex,cirrus"]

Shortcode to display the newsletter form

[newsletter_form label="Your email address" label_submit=">"]

In the home version V we use a footer with 4 widget areas. In this areas we used:

  • The Recent Posts widget
  • The twitter widget
  • The Custom menu widget, to add a menu links in the footer
  • Woo Commerce Featured Products Widget.

 

Setting up the blog page

  1. Go to Page > Add new to create a new page
  2. Give it a title, for example "Blog"
  3. Set page template to "Blog" in the Page Attributes panel
  4. Click publish

You do not need to enter any content on this page. This will be your blog index page, and will list your blog posts in chronological order.

You can customize the layout and appearance of the blog page in Appearance > Theme options > General > Blog Settings:

  • Chose the style for the blog: big image, small image or elegant style
  • Turn on/off author, comments, categories, social icons from the meta panel of the articles
  • Select which categories you want to hide from the blog and from the almost categories widget in the blog's sidebar.
  • Enter the text for the 'read more' button.

NOTE: In Appearance > Widget you can find the preset sidebar for the blog page. Drag and drop the widgets in the Blog sidebar to customize the sidebar of your blog.

 


Setting up a faq page/post

Faq page is made by custom post types and is very easy to set.

  1. Make a new page, and give it a title (like 'FAQS');
  2. Enter the shortcode [faq] in the editor of the page;
  3. Publish.
Then you can create your Faqs:
  1. In the left, you can see the 'Faqs' section. Click to 'add new';
  2. Write the title for your Faq (the question);
  3. Enter the text in the editor (is the reply to the question)
  4. Add category for the faq. Is optional, you can add a category if you want to have different faqs pages and show in each page a different category of FAQS.
  5. Publish.

Follow the same procedure for all your faqs.

In our live preview, in the Faq page we have the faqs and a shortcode with a call to action for the customer support. The code is: 

[faq]

[border]

[call title="Not found the <span>answer?</span>" incipit="feel free to contact our customer service for free support" phone="800.034.881"]

 

Have different pages with different FAQS

  1. When you add a new faq, add a category for this faq
  2. In "Faq Categories" you can find the "slug" of the category to use in the shortcode.
  3. Instead to use the [Faq] shortcode, use the shortcode [faq category=""] and inside the "" enter the slug of the category you want to chose (example: [faq category="shipping-questions"]).

In this way you can create unlimited faqs page to display different faq categories. You can also use more categories in the shortcode, using the "comma": [faq category="shipping,discount"]

 


Setting up a testimonials page

Creating a testimonial page

  1. Create a new page by going to Page > Add new;
  2. Give the page a title;
  3. In the editor, add the shortcode [testimonials] to display all testimonials;
  4. Publish post.

 

Creating testimonial posts

  • Create a new post by going to Testimonials > Add new;
  • Enter a title;
  • Enter content in the wysiwyg editor;
  • Select the image of the testimonial using the featured imagepanel;
  • Optional: enter the url of the testimonial's site;
  • Publish post.

 


Setting up a contact page

Creating a contact form

In this theme you can create unlimited contact form.You can create a default contact form, like the form in our live preview, or a custom form.

Create a custom contact form

  • Go to Appearance > Theme Options > Contact forms
  • Enter a name for your contact form and click add form;
  • In Configure contact form select the form and click configure;
  • Now in the field Shortcode of form you can see the shortcode for this contact form. Copy and past it in the editor of the contact page;
  • In the section Contact Form Configuration for main-form you can set your e-mail address and the body of the e-mail, error and success messages and so on;
  • In Customize Contact module you can set your custom contact form. You can add fied, chose the order, change labels and so on. When you add a new field, be sure to add the value %field% in the body of the e-mail (Contact Form Configuration). For example, if you add a field phone, in the body you have to add %phone%.

Create a default contact form

  • Go to Appearance > Theme Options > Contact forms
  • In the field Add example form enter a name for your contact form and click create form;
  • Now in the field Shortcode of form you can see the shortcode for this contact form. Copy and past it in the editor of the contact page;
  • In the section Contact Form Configuration for main-form you can set your e-mail address and the body of the e-mail, error and success messages and so on;

NOTE: If you'd like to use left floated input fields you could add the class [code]full[/code] to each field: click to "Edit" and add [code]Full[/code] in the Class form, as shown in the pictures below.


 

Creating a contact page

  1. Create a new page by going to Page > Add new;
  2. Give the page a title (like Contact);
  3. In the editor, add the shortcode of the contact form to display the form
  4. Publish page.

Set the SHOP

This theme is based on the powerful Woo Commerce plugin. Is also compatible with theJigoShop plugin. Chose your favourite plugin (i suggest you WooCommerce), search it in your plugin area, install and active it.

In our support forum there are a complete videoscreencast that can help you to set your store: how to create product's categories, how to add products and change the style of your product page (and the style of the products thumbnails) and so on.

Back to top

Shortcodes

This is a list of some shortcodes of this theme. Insert this code in your page. To view all shortcodes availables, take a look to this page.

Miscellaneous

Border (use it to separate the content with a border)

[border]

Space (use it to add some space between the elements)

[space]

Clear (use it after columns and icon boxes)

[clear]

Call to action

[call title="Not found the answer?" incipit="feel free to contact our customer service for support" phone="800.034.881"]

Call to action "Subscribe"

[call_two label_button="SIGN IN NOW" href="#"][size px="52"]35% [/size] [size px="48"]off everything [/size] Sign in to our list before march 21![/call_two]

Typography

Dropcap

[dropcap]your text[/dropcap]

Quote text

[quote]your text[/quote]

Highlight text

[highlight]your text[/highlight]

Set the size of the text

[size px="32"]this text is 32px [/size]

Enter a text using the "special font" (you can set it in the typography panel)

This is my [special_font size="18" unit="px"]special font![/special_font]

Enter a text using the font used for the logo (you can set it in the typography panel)

[logo size="25px"]Maya Shop[/logo]

Styled lists

[list type="star"]
<li>item</li>
<li>item</li>
<li>item</li>
[/list]

Symbols: Star / arrow / check / add / info

Alert boxes

Success box

[success]your text[/success]

Arrow box

[arrow]your text[/arrow]

Alert box

[alert]your text[/alert]

Error box

[error]your text[/error]

Notice box

[notice]your text[/notice]

Info box

[info]your text[/info]

Buttons

Custom buttons

[button_icon icon="arrow|arrow-left|calc|gift|offer|remove"]your text[/button_icon]

Custom buttons with left icons

[button_icon icon="arrow|arrow-left|calc|gift|offer|remove" sense="rtl"]your text[/button_icon]

Big colorful buttons

[button color="green|blue|magenta|red|orange|yellow" width="large" href="#"]your text[/button]

Small colorful buttons

[button color="green|blue|magenta|red|orange|yellow" width="small" href="#"]your text[/button]

Icon boxes

Icon boxes

[section icon="bag" title="your title"] your text [/section]

Icons: Tick / bag / pictures / letter / box / bubble / bulb / calendar / cart / chart / clipboard / coffee / diagram / doodles / gear / info / globe / gift / label / moleskine / monitor / mphone / news / open / pc / pencil / phone / postit / qmark / refresh / shopbag / statistics / testimonial

Icon boxes (black style)

[section
icon="card-black"
title="Your Title"
title_size="h4"]
your text
[/section]

Icons: card-black / brush-black / monitor-black / chart-bar / box / case / chart-line / bookmark / checkbox-checked / phone-black / contact / info /

Tabs, Toggles & Table

Tabs

[tabs tab1="Tab 1" tab2="Tab 2" tab3="Tab 3"]
[tab id="tab1"]This is tab1[/tab]
[tab id="tab2"]This is tab2[/tab]
[tab id="tab3"]This is tab3[/tab]
[/tabs]

Toggle

[toggle title="This is title"]Your Content...[/toggle]

Price box

[price title="Standard Plan" price="45.0 $" href="#" buttontext="More info" color="white"]
<li>Morbi est elit, imperdiet sit amet</li>
<li>Lorem ipsum seget, egestas in leo.</li>
<li>Morbi est elit, imperdiet sit amet</li>
<li>Lorem ipsum seget, egestas in leo.</li>
[/price]

Table

[table color="white"]
<table style="width: 100%;" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="width:20%"></th>
<th style="width:20%">Free</th>
<th style="width:20%">Mini</th>
<th style="width:20%">Standard</th>
<th style="width:20%">Premium</th>
</tr>
</thead>

<tbody>
<tr>
<th class="features">Features 1</th>
<td>1</td>
<td>unlimited</td>
<td>[x]</td>
<td>-</td>
</tr>
</tbody>
</table>
[/table]

Media

Youtube video

[youtube width="640" height="385" video_id="wSBIcNmCAX0"]

Vimeo video

[vimeo width="640" height="360" video_id="3109777"]

Dailymotion video

[dailymotion width="640" height="360" video_id="xgis0k"]

Dailymotion video

[dailymotion width="640" height="360" video_id="xgis0k"]

Nivo slideshow

[slider effect="random" width="640" height="380"]
wp-content/themes/bolder/images/nivo-slider/001.jpg
wp-content/themes/bolder/images/nivo-slider/002.jpg
wp-content/themes/bolder/images/nivo-slider/003.jpg
wp-content/themes/bolder/images/nivo-slider/004.jpg
wp-content/themes/bolder/images/nivo-slider/005.jpg
[/slider]

Effects: sliceDown / sliceDownLeft / sliceUp / sliceUpLeft / sliceUpDown / sliceUpDownLeft / fold / fade / random / slideInRight / slideInLeft / boxRandom / boxRain / boxRainReverse / boxRainGrow / boxRainGrowReverse

Images styling

To stylize your images, add lightbox effect and so on:

[image size="small" lightbox="true"]http://url.to/image.jpg[/image]

  • size (“small”, “medium”, “large” or “fullwidth”, medium by default)
  • link (image link – optional)
  • target (“_blank”, “_parent”, “_self”, or “_top” – optional)
  • lightbox (“true” or “false”, “true” by default
  • title (lightbox caption – optional)
  • align (“left” or “right” – optional)
  • group (group name to make lighbox gallery)
  • width (image width – optional)
  • height (image height – optional)
  • autoheight (“true” or “false” for auto height the image, false by default – optional)

Widgets

Recent posts

[recentpost items="3"]

Popular posts

[popularpost items="3"]

Google map

[googlemap src="" width="300" height="280"]

Social icons

[social type="facebook|rss|twitter|youtube|yahoo|vimeo|flickr|blogger" href="" title=""]

Testimonial slider

[testimonials_slider speed="500" timeout="7000"]

Newsletter form

[newsletter_form action="" method="GET|POST" name="fullname" email="email" name_label="your name" email_label="your name" submit="Subscribe"]

Shop Shortcodes

Display products in the page

[items per_page="5" columns="5" orderby="date" order="desc"]

Display featured products in the page

[featured_products columns="5" orderby="date" order="desc"]

Display recent products in the page

[recent_products per_page="5" columns="5" orderby="date" order="desc"]

Display best sellers products in the page

[best_sellers per_page="5" columns="5"]

Display a product slider in the page

[product_slider category="" orderby="date" order="desc" featured="0|1" latest="0|1" best_sellers="0|1" style="ribbon|traditional"]

Back to top

Unlimited sidebar

In this theme you find 6 preset sidebar:

  1. Default sidebar
  2. Blog sidebar
    3. >
  3. Testimonials sidebar
  4. Shop sidebar

The default sidebar is the preset sidebar that you can find in your pages when you set a page with "sidebar right or left" layout without to select a sidebar to assign.Put a widget in the default sidebar to display it in your page instead of the static wordpress sidebar with blogroll,search and so on.

You can also create unlimited sidebar:

  1. Go to Appearance > Theme Options > Sidebars
  2. Enter a name for your custom sidebar
  3. Click to add sidebar
Then go to Appearance > Widget and you can find the sidebar, and drag/drop the widgets.

 

Custom widgets

7 custom widgets are provided with the theme. These are:

  1. Text with images: to show a section with image and text in your sidebar;
  2. Testimonials: a slider with latest testimonials;
  3. Google map: to display a custom google map;
  4. Popular post: to display the popular post;
  5. Recent post: to display the recent post;
  6. Almost all categories to hide some categories from the blog;
  7. Last tweets to display latest tweets
Back to top

Localization

This theme is ready for localization via .po/.mo files, and works with the WPML plugin.

If you are not familiar with translating Wordpress themes, I recommend reading this article: http://codex.wordpress.org/Translating_WordPress

Change the language of MayaShop for dummies

  1. Check the values of your wp-config, the language of this file must match to your translation;
  2. Find the folder languages of the theme
  3. Duplicate default.po
  4. Rename your copy of default.po example: fr_FR.po for France, en_EN.po for English, he_HE.po for hebraic, and so on.
  5. Download POEdit
  6. Open your file with the POEdit software
  7. Translate your file
  8. In File click on Preferences and tick Automatically generate mo
  9. Save your file
  10. Send the new .mo and .po via FTP to your server in the folder languages of the theme
Back to top

Setting up the menu

This theme uses wp-nav-menu for building menus. You find this in Appearance > Menus.

For more info on how to setup your menu in wp 3.0, see http://codex.wordpress.org/Appearance_Menus_SubPanel

 

Building the menu

  1. Go to Appearance > Menus
  2. Enter a name for your menu
  3. Click on Create Menu


  4. Now in the Theme Location select the menu you just created
  5. Click on Save


  6. Now tick the pages you want to add to menu and click Add to Menu

When you added all pages to your menu, you can drag/drop and order pages.


Building the megamenu

Before you have to add the pages to your menu. After this, if you want to assign the megamenu style to the page, you have to use the CSS CLASSES megamenu. (To have it open the Screen Options tab on the top right and tick Css Classes):

 

To set the number of columns you want to create in your megamenu, you have to add columns-N (N is the number of columns) after the megamenu class. By default the megamenu have 3 columns. You can use min 1 column and max 5 columns.

megamenu columns-5

 

In our forum you can find a video that can help you to set the megamenu exactly our demo.

Set the top bar and add text, twitter or links

In the left side of the top bar you can enter a static text or display a twitter slider with your latest news. You can set this in Theme Options > General > Header.

In the right side of the top bar, near to the cart ribbon, you can add a custom menu. How? Go in Appearance > Menu, create a new menu and in the "Theme Localization" panel chose this menu for the "Navigation in the top bar". The "Login/register" links are by default in the top bar, if you want to turn off this links you can do it in Theme Options > General > Header.

Note!

  1. To have the "My account" link in the top bar when the user is logged, add the page "my account" in the menu, in the screen options tab (top right) tick "CSS Classes" and then add this code: not__logged_in.
  2. To have the login/register page when the user click on login or register in the top bar, go in Woocommerce -> Settings -> Customer Accounts -> and check "Allow unregistered users to register from "My Account".

 

Back to top

Version 1.0

  1. Initial release.