Fruitshop - Business WordPress Theme - Documentation

1. System Requirements

2. Installation & Update

3. Install Needed Plugins

After successful activation of the theme, you need to install the necessary plugins for the site

The installation process may take a while on some hosts, so please be patient. All installations have been completed. Scolling down and click on the link "Return to Required Plugins Inslaller" to activate those installed plugins.

Return to the Dashboard after all plugins have been activated.

All needed installation have done. Follow next steps if you want to install sample data like our demo website.

4. Import demo data

Step 1. In WordPress Dashboard, Go to Theme Option -> Import Demo Content

Step 2. Click to Import Now

- 1 Import now: Import full demo content

- 2 Import without media: Import full demo content but no media

- 3 Import media: Import only media

On Popup lightbox select OK to start then waiting a moment while import sample data

Successful import demo data

Note: In case your server has the same configuration as the request but still can not import successfully with Import now. You can use the Import without media feature and then Import media. You can import many times until successful.

5. Video tutorial

1. General Settings

2. Logo Settings

- Logo: This allow you to change logo

- Favicon: This allow you to change favicon of your website

3. Menu Settings

- Menu Fixed: Menu change to fixed when scroll

- Menu style: Set style for item menu.

3. Blog Setting

4. Layout Settings

- Sidebar Blog: Set sidebar position for your blog. Left, Right, or No sidebar.

- Sidebar select display in blog: Choose a sidebar to display for blog.

- Sidebar Page: Set sidebar position for default page. Left, Right, or No sidebar.

- Sidebar Position on Page Archives:: Set sidebar position for your archives page(category/tag/author page...). Left, Right, or No sidebar.

- Sidebar Single Post: Set sidebar position for your single post. Left, Right, or No sidebar.

- Sidebar select display in single post: Choose a sidebar to display for single post.

- Add SideBar: You can add more sidebar for your site.

5. Typography

- Add Settings: You can add custom css for html tag in area defined in your site.

- Add Google Fonts: You can add more Google fonts to use in your site.

6. Shop Settings

1. Introduction

WPBakery Page Builder (formerly Visual Composer) is a unique plugin, it will help you manage your content at the WordPress sites and create stunning layouts in few minutes without coding. Nowadays many websites have complex grid layouts with columns, tabs, sliders and etc. In the past, to create that type of layouts you should be HTML guru or Shortcodes operator ninja.

But not anymore! WPBakery Page Builder will create and manage complex layouts combined with professionally designed plugins made easy!

2. Plugin Documentation

WPBakery Page Builder Documentation

WPBakery Page Builder (Learn more)

Enable page builder for custom post type

In WordPress Dashboard, You can go to WPBakery Page Builder -> Role Manager. Choose Post types is Custom and check post type that you want to enable page builder and Save Changes to finish

3. Update WPBakery Page Builder plugin

When updating the theme version, if there is a newer update for WpBakery you can remove old version and install new version by install notice line appear. You can see plugin package (js_composer.zip) in folder theme -> plugins folder

4. Activate plugin license

WPBakery was purchased by us for an extended license. As a result, all our buyers can use WPBakery without having to purchase additional personal licenses. The auto-update Activate plugin only applies to the envato account that directly purchases the WPBakery license. But you can still update the latest version of WPBakery Page Builder through the installation message when updating our theme.

1. Header & Footer

Header & Footer is one of our outstanding features. It allows you to create and edit your web page header/footer content with the page builder. You can easily edit or design your own header/footer for your site with a wide range of customizable features.

The First, please sure header / footer editing with page builder is active

In WordPress Dashboard, You can go to Header Page to edit/create header

Go to Footer Page to edit/create footer

Edit/Create Header Page interface

Edit/Create Footer Page interface

To set Header/Footer default for your site. You can go toTheme Option -> Basic Settings -> General

To set Header/Footer for special page(Home page). You can go to edit page area. Find to Page Settings -> General Settings

Video tutorial

2. Mega Menu

The First, please sure Mega Page editing with page builder is active

In WordPress Dashboard, You can go to Mega Page to edit/create content of mega menu

This is the editing/create interface of Mega Menu

After you have a Mega Page, the next step is to go to the Menus to configure the display for a mega item.

Step 1. To Dashboard, you can go to Appearance -> Menus

Step 2. Select menu item to display Mega Menu. 

1. Check Enable Mega Menu

2. Select the Mega Menu to display

3. Save changes to apply

Step 3. This is the front end display interface

Video tutorial

3. Elements (Shortcodes)

List 7up's elements.

Below is the interface of each element

4. Create/Edit page

In WordPress Dashboard you can go to Pages -> All Pages and choose page want to edit. Or you can choose Pages -> Add New to create new page.

Pages template:

Default template: create a page with default space top and bottom.

Visual template: create a page with page builder and no default space top and bottom.

Video tutorial

Edit Page

Create Page

5. Create post/product/portfolio

Create post

In WordPress Dashboard you can go to Posts --> Add New to create new post. Or Posts --> All Posts and choose a post to edit.

Create product

In WordPress Dashboard you can go to Products --> Add New to create new product. Or Products --> All Products and choose a product to edit.

Create portfolio

In WordPress Dashboard you can go to Portfolios --> Add New to create new portfolios. Or Portfolios --> All Portfolios and choose a portfolios to edit.

Note: you can enable page builder for post/product/portfolio to create/edit with Bakery page builder.

6. Meta Data

This is meta data that is present in all post types (post, page, product ...). Used to set page display font-end. You can edit the post, page, product ... to see the settings meta data.

7. Widget

Our product has one more add-on to help you out then more content for your sidebar. You can go to Appearance --> Widgets

List 7up's widget

1. Attribute Filter

Use in shop page to filter products by attributes.

2. Categories Filter

Use in shop page to filter products by categories.

3. List Product

Use display list products.

4. New Project

Use display list portfolio.

1. Choose home page

After importing the demo data. You can choose one of our demo home as your home page.

Step 1: In WordPress Dashboard, Go to Settings -> Reading

Step 2: Click to A static page (select below) and select Home page from list.

Step 3: Click Save Changes to apply.

2. Translate theme/plugin with Loco Translate

Loco Translate provides in-browser editing of WordPress translation files. It also provides localization tools for developers, such as extracting strings and generating templates.

First, you need to install Loco Translate plugin for your site.

Translate Theme

Step 1: In WordPress Dashboard, Go to Loco Translate -> Themes

Step 2: Choose theme want to translate from theme list.

Step 3: Click to New language to add language to translate. Or choose exits language to edit.

Step 4:Choose a language and location and click Start translating to start translate.

Step 5: translate interface

1: Click Sync button to update new pot file. Use when update theme or update pot file in theme-folder -> languages folder.

2: Enter key to find text/string

3: Source text, click to text want to translate.

4: Source text display.

5: Enter text translated.

6: Click Save to finish.

Translate Plugin: Same as translate theme, In WordPress Dashboard, Go to Loco Translate -> Plugins and and sequentially the remaining steps as you are translating the theme.

3. Multi language plugins

Our products are compatible with multi language plugins like WPML, Polylang, QTranslateX

First, make sure you have installed multi language compatible plugins for our products and that translations for languages are available for the categories, products, pages, product categories .... You can read Multi language plugin guide for usage

Theme Option in Multi Language: When using multi language plugin. Theme Option values will be stored independently for each language. So you need to save your settings for each language.

Go to Theme Option, Switch language that you want to settings

Header/Footer/Mega page in multi language: You can translate same as page or copy content and translate in a new Header/Footer/Mega Page and rechoose for each language.

4. Optimization

* Optimize Uploaded Images

Images are one of the heavier elements of your site. There are a few ways you can optimize your uploaded images.

You should specify the maximum image dimensions for thumbnail, medium, and large sized images. That means, if you upload an image 1024px wide, and your content area is only 604px wide, normally the image will be scaled down using CSS. When you specify the maximum width of your ‘large’ images as 604px, it’ll then display the pre-resized, 604px wide image, which will be significantly smaller in size.

* Install A Caching Plugin

The second most effective way (the first being choosing a good web host) to improve your site’s load times is to install a caching plugin. As soon as you install a plugin like W3 Total Cache or WP Super Cache, you’ll be able to tell that your site loads faster.

In simple words, when a caching plugin is active on your site, it servers users cached copies of your pages. It greatly reduces MySQL database access, no. of PHP requests, server access for static resources, and even HTTP requests (in case of combining multiple files into one).

W3 Total Cache is one my most favourite WordPress plugins. It offers a variety of caching features:

- Page Cache

- Minify

- Object Cache

- Database Cache

- Browser Cache

- CDN

Initially, you don’t want everything enabled. You can still safely enable everything except Minify and CDN (unless you want to use a CDN).

Minify breaks some other heavily JS-based plugins unless you specifically tweak it. On the other hand, you should tweak the Browser Cache settings to utilise the full potential of browser caching.

* Try a CDN to Speed Up WordPress

Offloading the static resources of your site, like images, scripts, css files, can speed up your site. Not only those resources will load faster for visitors, if you use a CDN, your primary server will have less load to handle and thus will deliver significantly better performance while serving the rest of your site.

* Enable Gzip Compression

You should serve compressed versions of your site to your visitors, as they’ll be less in size and will generally load a lot faster.

5. Use child theme

Child Themes

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.

Why use a Child Theme?

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

- If you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved.

- Using a child theme can speed up development time.

- Using a child theme is a great way to learn about WordPress theme development.

Child Themes install

You can find child theme package next to the main theme package in the full download(Fruitshop-child.zip). Once you've installed the main theme, you have to install the child theme and start customizing it

The main file

- function.php: You can create new function or php process for your theme or copy a php function in the main theme to child add to edit and customize your way.

- style.css: Allows you to insert the css code into your web page

Template folder

Allows you to change the html structure of the theme components. You can copy any file in folder s7upf_templates into child theme with the same directory structure to edit. Or you also copy all s7upf_templates folder into child theme for comprehensive change.

6. Custom style

In addition to using styles available in theme settings, you can add css codes to customize your look in the following ways:

Use Custom CSS of WPBakery page builder: In WordPress Dashboard, Go to WPBakery Page Builder -> Custom CSS

Use Additional CSS in Customize WordPress: In WordPress Dashboard, Go to Appearance -> Customize -> Additional CSS

Use file style.css in child theme.

1. Change Logo

- First, to change the logo, you need to define the correct header. Note that the home page may be using its own header. You need to check the meta data header page for your home page. Review the Header / Footer section for more details.

- Then go to the header editing interface, find to Logo element and click edit

- Click Save Changes and Update header page to finish

2. Import demo data error

- Check your server and WordPress configuration. Make sure it is correct. You can see System requirement.

- In the case of properly configured but not resolved issues with the Import now feature, you can use the Import without media feature.

- After Import without media all done. You can continue Import media. You can import media many time until success.

- Worst case is after you have done all that still can not solve the problem you please create topic on our forum with your demo account information. We will help you check the problem. You can create topic in Fruitshop forum

3. RTL style missing in child theme

- If you use child theme and have problem with RTL style. You can copy rtl.css in main theme into child theme to fix this issue.

4. Header/Footer not change

- First, to change the logo, you need to define the correct header. Note that the home page may be using its own header. You need to check the meta data header page for your home page. Review the Header / Footer section for more details.

- Disable Session page in Theme Option. Go to Theme Option -> General -> Other -> Session page -> Turn Off

5. Remove Intro Demo

Go to Theme Option -> General -> Other -> Session page -> Show tool panel -> Turn Off