Thank you for purchasing Grotte.

Grotte is a dedicated WooCommerce shopfront theme for who ever wants to add some sweetness and a bold memorable experience to their shopping sites. With the brand new "Buy For Me" feature, Grotte helps you to create a massive impression on your visitors and also improve your marketing strategy. This document includes the necessary information about using it.

Please do share any thoughts or comments with us. We'd like to hear from you!

If you need help, please do not hesitate to ask us. We'll be ready to reply you on our ThemeForest comments page.

Extract the zipped package that you downloaded from ThemeForest. You'll find a file named "grotte.zip" in "Theme" folder. Now there are 2 ways to start using it:

1) Extract the "grotte.zip" file and upload the extracted folder to the ".../wp-content/themes/" folder on your server.

2) On WordPress admin panel, go to "Appearance > Themes" and click the "Add New" button at the top of the page. Then click "Upload Theme" button. Pick "grotte.zip" file and click "Install Now" button.

After uploading the theme, you need to activate it. Go to "Appearence > Themes" page and click Grotte's "Activate" button. And you're done.

Please visit this document to find out about importing the demo content.

If you face any problem, please visit ThemeForest Knowledgebase to learn how to install a WordPress theme.

Grotte has 4 locations for a menu: Primary Menu, Header Menu, Page Menu and Footer Menu.

For menu setup, go to "Appearance > Menus" page. Choose your items you want to show in menu from the left side. Don't forget to check "Primary Menu", "Header Menu", "Page Menu" or "Footer Menu" box to see your menu in correct place. And finally click "Save Menu" button to get it done.

Menu Item Classes

You can use these class names to show "NEW", "HOT" and "SALE" badges on your menu items:

grotte-new-badge
grotte-hot-badge
grotte-sale-badge

You must activate the class fields to use them. Navigate to "Appearance > Menus" and see the button named "Screen Options" at the top right of the screen. Click it, then check the "CSS Classes" box. Now you'll see a text field has appeared which has the title "CSS Classes (optional)" on your menu items. Write your class name there.

To read more about WordPress Menus: WordPress Menu User Guide

If you install the Max Mega Menu plugin, navigate to "Mega Menu" section on your admin panel and choose "Don't output CSS" on "General Settings > CSS Output" section to let the theme shape your menu style.

By default, WordPress shows your blog posts on your homepage. Luckly, Grotte has a page builder to let you create a nice homepage by inserting the shortcodes on your customizer. Please follow the steps below to prepare your homepage:

1. Navigate to "Page > Add New" and create a page named Blog. Click "Publish".
2. Navigate to "Page > Add New" and create a page named Homepage. Select Grotte Homepage template from "Page Attributes" pane. Click "Publish".
3. Navigate to "Settings > Reading" and choose "A static page (select below)" on "Front page displays" section. Select Homepage from "Front page" drop down and Blog from "Posts page" drop down. Click "Save Changes".

Now you're ready to design your homepage.

Navigate to "Appearance > Customize > Homepage Builder" and see the rows, layout options and shortcode fields. Grotte page builder has 7 rows and 8 different column options for each row. This means you can create hundreds of unique homepages! You can leave blank the rows you don't want to use. Blank rows will not be shown.

So where are the shortcodes to use? Please see 9. Shortcodes.

Grotte has its own slider plugin. Follow the steps below to start using it!

Firstly, you need to install the "New Grotte Slider" plugin. You'll already realize the "This theme recommends the following plugin: New Grotte Slider." notice when you activate Grotte theme.

1. Click "Begin installing plugin".
2. Click "Install" under the "New Grotte Slider" title.
   The "Install" button will appear when you rollover the title.
3. When you see the "Return to Required Plugins Installer" link appeared, it means you're done! But don't forget to activate the plugin.
   
   You'll realize that a button named "New Grotte Slider" is placed on your admin panel menu now. If you can't see it, just click to "Dashboard" or somewhere else to refresh the view.

Now, let's create our first slide:

1. Click "New Grotte Slider > Add New Slide".
2. Just fill in the fields (Title, URL etc.).
3. Don't forget that you should use the same group name for the slides/posts you want to see in the same slider. (It's the same procedure with tagging a blog post.)
4. Click "Publish" and your slide is ready!

You can repeat the steps above to create all the slides you want. Now it's time to place our slider to the site:

1. Navigate to "Appearance > Customize > Slider Settings".
2. Place this code to the "Slider Shortcode" box: [new_grotte_slider group="your_group"]
   Don't forget to replace the your_group part with your own group name.

That's all!

When you choose "Fullwidth" for slider, it makes the container fullwidth, not the image. So, you should try to upload a bigger image or use a plugin like Regenerate Thumbnails to resize the uploaded images if they're already big enough.

By the way, don't forget to set a high image width for slider. Navigate to "Appearance > Customize > Slider Settings > Slide Image Width" and you'll find the necessary information there. You should upload your images into the media library (or use Regenerate Thumbnails) AFTER you set the slide width value. So the process ordering is like that:

1. Set the slide image width. (Slide Image Width)
2. Choose "Fullwidth" option for slider. (Style)
3. Upload your images into the media library.
4. Create your slides.

And you're done.

Please see WooCommerce Documentation to learn everything about WooCommerce.

This does not mean that we'll not help you with WooCommerce. Please feel free to ask us anything about WooCommerce usage.

You know the classic "Send to A Friend" button, right? Now take that button and turn it into a great sharing & marketing experience. That's what Grotte's "Buy For Me" feature does. This is a brand new WooCommerce feature developed by Burnhambox and launched by Grotte for the first time.

Instead of a basic e-mail which includes a link, your visitors can send the product itself to anyone with this feature. Here's how it works:

An e-mail preview window shows up when you click the "Buy For Me" button of a product. Here you see the product with the image, title and price. Now you choose a nice color scheme, write your message, prepare your button and send it to anyone. By the way, we're delicate enough to put an option for hiding the product price :)

Be quick, see it in action!

Here's a list of plugins those Grotte will be happy with:

• Accordion Shortcodes
• Breadcrumb NavXT
• Burnhambox - Grotte Shortcodes (Included)
• New Grotte Slider (Included)
• Contact Form 7
• Instagram Slider Widget
• MailChimp for WordPress Lite
• Max Mega Menu
• WooCommerce (Required)
• WooCommerce Grid / List toggle (Required)
• YITH WooCommerce Quick View
• YITH WooCommerce Wishlist

NOTE 1: If you install the Max Mega Menu plugin, navigate to "Mega Menu" section on your admin panel and choose "Don't output CSS" on "General Settings > CSS Output" section to let the theme shape your menu style.

NOTE 2: If you install the Breadcrumb NavXT plugin, you can use <i class="fa fa-angle-right"></i> for Breadcrumb Separator. (Settings > Breadcrumb NavXT > Breadcrumb Separator)

When you face a problem or need support for the plugins those are not included or not required by Grotte, please visit the sites or support systems of the plugin creators. But of course we're open for small things like the Breadcrumb tip above :)

You can use shortcodes on your posts, pages and homepage.

Product Category

[grotte_product_cat category=clothing number=4 heading=true viewall=true]

Make it viewall=false the hide the "VIEW ALL" button.
Make it heading=false the hide the category title & description.

All Product Categories

[grotte_product_cat_all number=4 heading=true]

Make it heading=false the hide the category title & description.

Image

[grotte_image src="https://full_image_url_here" link="https://full_link_here" opennew="false"]

Make it opennew=true to open the link in a new window. You may leave blank the link value.

Header & Teaser

[grotte_header_and_teaser header="Header Here"]Teaser lorem ipsum dolor.[/grotte_header_and_teaser]

Recent Blog Posts

[grotte_recent_posts]

Recent Products
Lists recent products – useful on the homepage. The ‘per_page’ shortcode determines how many products to show on the page and the columns attribute controls how many columns wide the products should be before wrapping.

[recent_products per_page="12" columns="4"]

Featured Products
Works the same as recent products but displays products that have been set as “featured.” In this example, the shortcode is saying: Show 12 featured products in 4 columns.

[featured_products per_page="12" columns="4"]

Single Product
Show a single product by ID or SKU.

[product id="99"]
[product sku="FOO"]

Multiple Products
Show multiple products by ID or SKU. Make note of the plural 'products'.

[products ids="1, 2, 3, 4, 5"]
[products skus="foo, bar, baz" orderby="date" order="desc"]

Product Category
Show multiple products in a category by slug.

[product_category category="appliances"]

Product Categories
Display product categories loop.

[product_categories number="12" parent="0"]

Set the parent paramater to 0 to only display top level categories. Set IDs to a comma separated list of category IDs to only show those.

Sale Products
List all products on sale.

[sale_products per_page="12"]

Best-Selling Products
List best-selling products.

[best_selling_products per_page="12"]

Top-Rated Products
List top-rated products.

[top_rated_products per_page="12"]

For more information, please see WooCommerce Shortcodes.

Basic usage:

[accordion]
[accordion-item title="Title of accordion item"]Drop-down content goes here.[/accordion-item]
[accordion-item title="Second accordion item"]Drop-down content goes here.[/accordion-item]
[/accordion]

All features:

[accordion openfirst="false" openall="false" clicktoclose="true" scroll="false" autoclose="true"][/accordion]

For more information, please see this page: Accordion Shortcodes

You can use Accordion Shortcodes for your "Frequently Asked Questions" page for example.

Grotte has a very well organized customizer which almost is a user guide itself. It uses the native customizer of WordPress. So navigate to "Appearance > Customize" and start to personalize your theme!

Here is a full list of setting sections:

1. Homepage
2. WooCommerce Settings
3. Colors
4. Header
5. Slider Settings
6. Blog Settings
7. Show/Hide Blog Elements
8. Footer
9. Google Maps
10. Translation
11. Custom CSS
12. Favicon

Grotte has 6 layout options for Shop pages:

• 2 Columns
• 2 Columns + Sidebar
• 3 Columns
• 3 Columns + Sidebar
• 4 Colums
• 4 Columns + Sidebar

Navigate to "Appearance > Customize > WooCommerce Settings" and choose the one you wish.

And 2 layout options for Blog pages:

• 1 Column
• 1 Column + Sidebar

You can show/hide sidebar from "Appearance > Customize > Blog Settings". You'll see two checkboxes over there: "Show Sidebar on Blog Post Pages" and "Show Sidebar on Blog Page". By so, you have a chance to set them separately.

If you don't see the sidebars on your site, ensure that you have active widgets on "Appearance > Widgets" page. If not, you can add widgets by drag & drop function to your sidebars.

Grotte supports 5 post formats: Standard, Gallery, Video, Aside and Link.

On "Posts > Add New" page, choose your post format from the right side of the panel and then place your content naturally.

By the way, no worries about formatting the content. Grotte is compatible with WordPress native content window and will do everything automatically. For example, if you want to add a gallery, just do it by "Add Media > Create Gallery" in classic way. Then when you have a look at your site, you'll see that the gallery you just added is shaped very well in a slider!*

*Ensure "Instead of Featured Image" or "Both" option is selected under "Blog Settings > Gallery Position" on customizer.

One of the most powerful features of Grotte is letting you to set up the "Featured Image" dimensions. By default, all of the images are resized to 1160 px width and not cropped from height. Change these settings as you wish.

Note that these settings will be applied to newly added images only! Or you may prefer to use a plugin like Regenerate Thumbnails to avoid re-uploading images.

Grotte has 12 custom widgets and 3 widget areas: WooCommerce Sidebar, Blog Sidebar and Footer Widgets. You can place any of your widgets in anywhere you want.

Popular Posts Widget: Some posts are crowded ha? This widget will find and display them.
Recent Posts Widget: Display a couple or two of your latest posts.
Selected Posts Widget: Display the posts you've selected. Very useful for the posts you want to put forward.
Category/Tag Posts Widget: Display the posts belong to a specific category or tag.
Recent Comments Widget: Display the latest comments your visitors have dropped.
Image Widget: Go ahead and place a nice image with a header, button, caption and text. You can link it to anywhere too.
Tags/Categories Widget: A well styled list of your tags or categories.
Search Widget: You can search for anything on your site. Can you believe it? :)
Social Widget: Place your social account icons in a sleek list.
Find us on Facebook Widget: Show your Facebook page's lovers.
Ads Widget: A widget for your Ads. Just place your code and you're done.
Empty Space Widget: Just place an empty space between your widgets if you wish. It's very handy!

Translation is extremely easy with Grotte. Just go to "Appearance > Customize" on WordPress admin panel, find "Translation" section and start to translate!

Note that you still have to use the language files for WooCommerce and the other plugins.

All the images/photographs used in our demo site and all the rights of them belong to their creators/owners.