Introduction ========== We would like to thank you for purchasing BigShop! We are very pleased that you have chosen BigShop for your website, you will not be disappointed! Before you get started, please be sure to always search our Documentation. We outline all kinds of good information, and provide you with all the details you need to use BigShop. The theme can only be used with WordPress and we assume that you already have WordPress installed and are ready to go. If you do not, please go to [wordpress.org](http://wordpress.org) to download and install the latest version of Wordpress. ----------------------------- WordPress Information ===================== 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](http://codex.wordpress.org/Installing_WordPress). Below are all the useful links for WordPress information. - [WordPress Codex](http://codex.wordpress.org/Installing_WordPress) – General info about WordPress and how to install on your server. - [First Steps With WordPress](http://codex.wordpress.org/First_Steps_With_WordPress) – General info about multiple topics about WordPress. - [FAQ New To WordPress](http://codex.wordpress.org/FAQ_New_To_WordPress) – The most popular FAQ’s regarding WordPress. Licensing Plugins ================= There are two licensing plugins used in the theme: **Visual Composer**. We purchased them from codecanyone.net and included them in the theme package. We did not include the license key for each of them. If there is any update, we are accountable for updating the theme with the newest version of plugins. In fact, the license key will not help you anything even updating plugins to the newest version. Only direct buyers can do this. Because we provide those with the theme; therefore, we will take care of updating them for our customers. Files included in the package ========================= When you purchase our theme from ThemeForest, you need to download the theme package from your themeforest account. Navigate to your downloads tab on ThemeForest and find BigShop. Click the download button to see the two options. The **All files & documentation** contain everything, the **Installable WordPress** Theme is just the installable WordPress theme files. Below is a full list of everything that is included when you download the main files, along with a brief description of each item. - `bigShop.zip`: main theme file that need to be uploaded to host to install BigShop theme. - `bigShop-child.zip`: basic child theme of BigShop theme. It is created for people who want to customize code of the theme. - `demo-content.xml`: this file contains all sample content which will help you to have a first look of how we use BigShop theme. - `theme-options.txt`: theme option backup file. You'll need this to restore the default theme options that setup for demo website. - `widgets-data.wie`: this file contains all widgets which are exported from our demo. - `Sliders`: this folder contains sliders which are exported from our demo. - `Documentation`: documetation folder that contains documentation files. - `Plugins`: this folder contains the BigShop Demo Content plugin. ------------------------------ Installation ========= Step 1 - Install theme ------------------------- After you download the package from ThemeForest, please unzip it. You'll see a file called `BigShop.zip`, which is the main file needed to upload and install. You can either choose to upload or installl the theme using **WordPress theme install** or **FTP** function. **Install theme using WordPress install function** - Go to `Appearance > Themes` and click **Add New** - Select **Upload** - Click **Browse** and select the `BigShop.zip` file - Click **Install Now** - When upload and installation progresses are completed, click **Activate**, or go to `Appearance > Themes` and activate the **BigShop** theme **Upload and install using FTP** If you get any fail when install theme by Wordpress install function, we recommend to use FTP: - Unzip the `bigShop.zip` file, you'll get a folder `BigShop` - Use a FTP client like [FileZilla](http://filezilla-project.org/) and upload that folder to `wp-content/themes` folder on your host - Go to `Appearance > Themes` and activate the **BigShop** theme Step 2 - Install plugins ---------------- After installing the BigShop theme, you'll see a notification on the header of the page that says the theme needs some plugins to function properly. The BigShop theme **requires** following plugins: - [Meta Box](https://wordpress.org/plugins/meta-box/): plugin for creating meta boxes for posts, pages,... It is free and available on WordPress.org - [Woocommerce](https://wordpress.org/plugins/woocommerce/): it is a powerful, extendable eCommerce plugin that helps you sell anything. - [WPBakery Visual Composer](http://vc.wpbakery.com/): it is Drag and Drop Frontend and Backend Pagebuilder Plugin for Wordpress. The BigShop theme **recommends** following plugins: - [Revolution Slider](http://revolution.themepunch.com/):is an all-purpose slide displaying solution that allows for showing almost any kind of content with highly customizable, transitions, effects and custom animations. Due to its visual oriented interface and countless options, Slider Revolution is suited for beginners and pro’s alike! - [YITH WooCommerce Wishlist](https://wordpress.org/plugins/yith-woocommerce-wishlist/): plugin that is responsible for adding all Wishlist features to website. This one need **Woocommerce** to work. - [YITH WooCommerce Compare](https://wordpress.org/plugins/yith-woocommerce-compare/): allows you to compare more than one products of your shop in a complete table. This one need **Woocommerce** to work. - [Contact Form 7](https://wordpress.org/plugins/contact-form-7/): plugin for creating contact forms. It is free and available on WordPress.org - [MailPoet Newsletters](https://www.mailpoet.com/): Send newsletters post notifications or autoresponders from WordPress easily, and beautifully of course. BigShop is working perfectly with these plugins. It automatically adds more styles to them to make the design match the theme. To install these plugins: - Click **Begin installing plugins** - You'll be redirect to a page where all needed plugins are listed. Just click on **Install** below each plugin's name - After installing, if it's required to activate the plugin, just activate ![install plugins](images/install-plugins.png) Step 3 - Config plugins ----------------------- After finishing to install these plugins, you need to change the size of product images for catalog. - Go to `Woocommerce > Settings > Products > Display`, under the Product Images section, you will find Catalog Images, Single Product Images, and Product Thumbnails. - Catalog Image is for your images on the shop page and for shortcodes. Single Product Image is for your images on the single product pages. Product Thumbnail is for your smaller product thumbnails for widgets. - Change the size of Catalog Image to 400 x 400, Single Product Image to 600 x 600, Product Thumbnail to 180 x 180. ![plugins settings](images/woocommerce-settings.png) One click import demo content =================== Before importing the available content, make sure you have installed and activated all the required plugins. Please take a look at **Step 2 - Install plugins** to know how to install and active plugins. Install BigShop Demo Content plugin ---------------------------------------------------- - **Install a Plugin using Upload Method** - Go to `Plugins > Add New`. - Click to `Upload Plugin`. - Click to `Choose File`, browse `bigshop-demo-content.zip` in plugins folder of package theme and upload it. - Click to `Install Now`. - Click on `Activate the plugin`. - **Install a Plugin using FTP Manager** - You can use a FTP client like [FileZilla](http://filezilla-project.org/). - Unzip the `bigshop-demo-content.zip` file, you'll get a folder `bigshop-demo-content`. - Upload that folder to `wp-content/plugins` folder on your host. - Go to `Appearance > Plugins` and activate the **bigshop-demo-content** plugin. Import demo content ----------------------------------- To import available demo content, just go to `Appearance`>`Theme option data` and click on Import `Demo Content button.` - After installing demo content, your website won’t look like the live preview. You’ll still need to config a few more things in your website. - ![One Click Import](images/one-click-import.png) The final setup ------------------- 1. **Custom Menu:** The import function of Wordpress doesn't support to import setting of widget **Custom Menu**, you have to edit all of them and select the menu you want to show. We will list all **Custom Menu** widget you have to edit manually. Firstly, go to `Appearance > Widgets`: - **Topbar Right**: select **Categories** menu. - ![topbar right](images/topbar-right.png) - **Footer 2**: select **Information** menu. - ![footer 2](images/footer-2.png) - **Footer 3**: select **Services** menu. - ![footer 3](images/footer-3.png) 2. **Contact Form 7:** - Go to `Contact`>`Contact forms`>`Edit Contact form`>`Mail`: - Contact Form 7 : There are several things you need to change here such as the email addresses...(as red-made in the screenshot): - ![contact-form](images/contact-form.png) Manual import demo content =================== Step 1 - Import demo content ---------------------------- - Go to `Tools > Import` - Select **WordPress** from the list - If you haven't installed the **WordPress import plugin**, a popup window will appears and ask you to install it. Just click **Install Now**. When the installation progress is completed, click **Activate Plugin & Run Importer**. If you have installed this plugin, skip to next step. - Click **Browse** and select `demo-content.xml` file from the download package - Click **Upload file and import** - When you are asked to import author, you can create new author or import to existing author. You also should check the checkbox **Download and import file attachments**. ![import](images/import-data.png) ![install plugin importer](images/install-plugin-importer.png) ![select demo content](images/select-import-data.png) ![install plugin importer](images/install-plugin-importer.png) ![select demo content](images/select-import-data.png) After completing all above steps, go to `Posts`, `Pages`, `Products` to see imported data. Step 2 - Import Widgets Data ------------------- - Install and activate the [Widgets Importer/Exporter](https://wordpress.org/plugins/widget-importer-exporter/) plugin. - Go to `Tools > Widget Importer & Exporter`, click **Choose file ** button and select `widgets-data.wie` file from the download package. - Click to **Import widgets**. ![import widgets](images/import-widgets.png) Step 3 - Import Revolution Sliders ---------------------------------- - Go to Revolution Slider. - Click Import Slider button on the bottom right. - Click Choose file and select a slider in Slider folder from the download package. - Click Import Slider button to start importing. It usaually takes seconds to finish. ![slider](images/import-rev-slider.png) Step 4 - Import Theme Options ---------------------------------- - Open the `theme-options.txt` file from from the download package. - Copy all content inside this file. - Go to `Appearance > Theme Options > Backup - Restore`, and paste the text file’s contents into the ‘Backup Settings’ field. - Click the **Import Options** button to start importing theme opitons. ![import theme options](images/import-theme-options.png) Step 5 - Setup homepage and blog page ------------------------------------- After install demo content, you'll see a page `Front Page`. This page will be used as the homepage of the website. To set it as homepage, please go to `Settings \ Reading`, under **Front page displays**, please chose **A static page (select below)** and select **Front Page** for **Front page** and **Blog** page for **Posts page**. ![setup front page](images/setup-front-page.png) Step 6 - Setup Menu -------------- Although the theme is working now and it shows menu, but because we haven't created a menu for primary location, the theme will display all pages by default. When you import the demo data, WordPress automatically create menus for you. These menus are the same as our demo. **Main Menu(Primary Menu)** - Go to `Appearance > Menus` - Select **Main Menu(Primary Menu)** and click **Select** button to edit it. - Scroll to bottom of page and check **Primary Menu** for **_Theme location_** - Click **Save Menu** ![main menu](images/main-menu.png) **Product Categories Menu** - Go to `Appearance > Menus` - Select **Product Categories** and click **Select** button to edit it. - Scroll to bottom of page and check **Product Categories** for **_Theme location_** - Click **Save Menu** ![footer menu](images/categories-menu.png) **Footer Menu** - Go to `Appearance > Menus` - Select **Footer Menu** and click **Select** button to edit it. - Scroll to bottom of page and check **Footer Menu** for **_Theme location_** - Click **Save Menu** ![footer menu](images/footer-menu.png) **Mobile Menu**: The BigShop theme allows you to select what menu will be used as menu for mobiles. By default, it will use the **Primary Menu** as mobile menu. But if you want to display another menu on mobles or small screen devices: - Go to `Appearance > Menus` - Select **Mobile Menu** and click **Select** button to edit it. - Scroll to bottom of page and check **Mobile Menu** for **_Theme location_** - Click **Save Menu** ![mobile menu](images/mobile-menu.png) **Note**: The import funciton of Wordpress doesn't support importing mega menu. So the **Main Menu** menu which are imported will display as normal menu. If you want to have same mega menus as our demo, you need to follow **Setup Mega menu** guide blow. Step 7 - The final step ----------------------- 1. The import function of Wordpress doesn't support to import setting of widget **Custom Menu**, you have to edit all of them and select the menu you want to show. We will list all **Custom Menu** widget you have to edit manually. Firstly, go to `Appearance > Widgets`: - **Topbar Right**: select **Categories** menu. - ![topbar right](images/topbar-right.png) - **Footer 2**: select **Information** menu. - ![footer 2](images/footer-2.png) - **Footer 3**: select **Services** menu. - ![footer 3](images/footer-3.png) 2. **Contact Form 7:** - Go to `Contact`>`Contact forms`>`Edit Contact form`>`Mail`: - Contact Form 7 : There are several things you need to change here such as the email addresses...(as red-made in the screenshot): - ![contact-form](images/contact-form.png) Create New Menu =============== Following these steps to create a menu: - Go to `Appearance > Menus` - Click the **create a new menu** link to create new menu. - Select items from the left meta boxes and click **Add to Menu** - On the right, feel free to drag and drop menu items to organize them - When you're done moving menu items, check **Primary Menu** for **Theme locations** at the bottom of the page - Click **Save Menu** ![edit menu](images/edit-menu.png) Setup Mega menu =============== ###Config Mega Menu The BigShop theme adds some options to the menu item. They allow you to config mega menu. Click the arrow icon next to any menu item to expand options. - **(1)**: Turn on or off the mega menu item. Only top level items can enable the Mega Menu. - **(2)**: Set the width of mega menu. It is optional. The default value is 100%. It affects on the top level items only. It usually used to set the width of vertical mega menu. - **(3)**: Pick an icon for the menu item. - **(4)**: Select the width of submenu column. This option affect to the second level items only. - **(5)**: The text area allow you to put any custom content for menu item, like HTML or shortcodes. It affects on second level items and third level items only. ![edit menu](images/menu-levels.png) ###Menu's special CSS classes Beside options for mega menu configuration, the theme also support some special CSS class name: - `new`: display the NEW badge on menu items - `hot`: display the HOT badge on menu items - `sep`: display menu item as a separator line. It affect on second level items only and inside mega menu only. - `hide-text`: hide the link label. It affect on second level items only and inside mega menu only. ###Example Here is the instruction you can follow if you desire you set up a mega menu for your site. We take Men menu as an example. You can do similarly with other menus. Imagine that we have Menu three and inside of it, we need to have four sub-menu. So each of the sub-menu will takes up 1/4 the total width. - First follow the path `Appearance>Menus` - Go to Men (level 1) tick to choose Mega Menu. ![Men menu setting](images/men-menu.png) - Go to Sport (level 2), then in the Column Width box choose 1/4. ![Sport sub menu](images/sport-submenu.png) - Go to Boots Shoes (level 2), then in the Column Width box choose 1/4. - Go to Sandals (level 2), then in the Column Width box choose 1/4 too. - Do the same with the last one called Shop Layout. The width ratio for this should be 1/4 too After completing the above steps, you would see the result as shown in the screenshot below. ![Example for setting up mega menu](images/example-megamenu.png) Visual Composer Basics ====================== It has very simple and intuitive interface, but before getting started, you may find it useful to get accustomed with its documentation: [Visual Composer Documentation](https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress?title=Visual_Composer) In BigShop theme, we also create some new elements and add some new parameters to exists elements of Visual Composer. It will help you a lot to build your HomePage easier. Following we will go through some popular elements of Visual Composer and all of new elements that BigShop theme brings to you. ### Products Tabs Carousel This element is used to display a products carousel and categories tabs on your page. It contains following parameters: - **Title**: enter the title for this element. - **Products**: select which product will be display: recent, featured, best selling, top rated or on sale. - **Categories**: select categories to show categories tabs. - **Total Products**: enter the number of how many product do you want to get. - **Order By**: select the product's field to be used to order products. - **Order**: select the order of products: Ascending or Descending - **Slider autoplay**: enable it if you want the carousel slider auto play. - **Hide prev/next buttons**: enable to hide the arrows of carousel slider. - **Extra class name**: enter extra class names if you want to apply your own style rule. - ![Products tabs carosel setting](images/products-tabs-carousel.png) ### Category Products Carousel This element is used to display a products carousel by a category on your page. It contains following parameters: - **Title**: enter the title for this element. - **Products**: select which product will be display: recent, featured, best selling, top rated or on sale. - **Category**: select the product category to get products from it. - **Category image**: select a category image. - **View More Text**: enter the view more text. - **View More Link**: enter the view more link. - **Total Products**: enter the number of how many product do you want to get. - **Order By**: select the product's field to be used to order products. - **Order**: select the order of products: Ascending or Descending - **Slider autoplay**: enable it if you want the carousel slider auto play. - **Hide prev/next buttons**: enable to hide the arrows of carousel slider. - **Extra class name**: enter extra class names if you want to apply your own style rule. - ![Products tabs carosel setting](images/category-products-carousel.png) ### Products Carousel This element is used to display a products carousel by a category or categories on your page. It contains following parameters: - **Title**: enter the title for this element. - **Products**: select which product will be display: recent, featured, best selling, top rated or on sale. - **Categories**: select a product category or product categories to get products from it. - **Total Products**: enter the number of how many product do you want to get. - **Order By**: select the product's field to be used to order products. - **Order**: select the order of products: Ascending or Descending - **Slider autoplay**: enable it if you want the carousel slider auto play. - **Hide prev/next buttons**: enable to hide the arrows of carousel slider. - **Extra class name**: enter extra class names if you want to apply your own style rule. - ![Products carosel setting](images/products-carousel.png) ### BigShop Products This element is used to display products by a category or categories on your page. It contains following parameters: - **Title**: enter the title for this element. - **Products**: select which product will be display: recent, featured, best selling, top rated or on sale. - **Categories**: select a product category or product categories to get products from it. - **Total Products**: enter the number of how many product do you want to get. - **Order By**: select the product's field to be used to order products. - **Order**: select the order of products: Ascending or Descending - **Slider autoplay**: enable it if you want the carousel slider auto play. - **Hide prev/next buttons**: enable to hide the arrows of carousel slider. - **Extra class name**: enter extra class names if you want to apply your own style rule. - ![Bigshop products setting](images/bigshop-products.png) ###BigShop Images Carousel Beside the default Images Carousel of Visual Composer, we create another this element because we see the default element of Visual Composer does not work correctly in mobile. We use this element to show client's logos in our demo. It contains following options: - **Images**: uploads your images. - **Image size**: enter the image size you wish to display images in. - **Custom links**: enter link for images, each link in a single line. - **Custom link target**: select target to open a link. - **Slides per view**: set numbers of slides you want to display at the same time. - **Slider autoplay**: select this option if you want slider to auto play. - **Hide prev/next buttons**: select this option if you want to hide navigation buttons. - **Extra class name**: enter extra class names if you want to apply your own style rule. - ![Bigshop images carousel setting](images/bigshop-images-carousel.png) ###Banner This elements is used to display a banner on your page. It contains following parameters: - **Background image**: upload an image to used as a background of your banner. - **SubTitle**: add subtitle for the element. - **Title**: add title for the element. - **Description**: enter a short description for section. - **Stars**: Enter number of stars. (Minimum to 0 and Maximum to 10). - **Button text**: text for the button. - **Button link**: an URL for the button to target at when click on. - **Extra class name**:If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. ![Banner setting](images/banner.png) ###Product Categories Banner. This elements is used to show product categories banner on your page. It contains following parameters: - **Category Image 1**: choose the first product category image from the library. - **Category 1**: select the first product category. - **Category Image 2**: choose the second product category image from the library. - **Category 2**: select the second product category. - **Category Image 3**: choose the third product category image from the library. - **Category 3**: select the third product category. - **Category Image 4**: choose the fourth product category image from the library. - **Category 4**: select the fourth product category. - **Extra class name**: If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. - ![Product categories banner setting](images/product-categories-banner.png) ###Icon Box This element is used to present a single service or small paragraph with an icon. It contains following options: - **Icon**: select icon for this box. - **Border Cycle**: choose style for icon. - **Title**: enter the box's title. - **Extra class name**: enter extra class names if you want to apply your own style rule. - ![Icon box setting](images/icon-box.png) ###Image Box This element is used to present a single service or small paragraph with an image. It contains following options: - **Image**: choose an image from the library. - **Title**: enter the box's title. - **Title**: enter the box's sub title. - **Extra class name**: enter extra class names if you want to apply your own style rule. - ![Image box setting](images/image-box.png) ------------------------------ Theme Options ============= BigShop theme comes with unique, creative and easy-to-use Theme Options page. You can change all theme options in one place! ![theme-options](images/theme-options.jpg) All options have full description so you can know what you are doing. Just click and save! Post Format =========== [Post Formats](http://codex.wordpress.org/Post_Formats) is theme feature which is a piece of meta information that can be used by a theme to customize its presentation of a post. In short, with a theme that supports Post Formats, a blogger can change how each post looks by choosing a Post Format from a radio-button list. BigShop theme supports the following post formats: - `gallery` - A gallery of images, which will be displayed in a responsive image slider, powered by Flexslider. - `link` - A link to another site. - `image` - A single image, which will be shown above post title. - `quote` - A quotation. - `video` - A single video, which can be any video from Youtube, Video or other video websites. Support URL or embed code. The video will be displayed above post title. - `audio` - An audio file, which can be any video from Youtube, Video or other video websites. Support URL or embed code. The video will be displayed using a powerful HTML5 audio player provided by Wordpress as default player. Using post format in BigShop lets you differentiate post from each other and make the blog page / single page looks more beautiful. [Go to blog page](http://demo.themealien.com/-aa-/blog/) to see how post formats look. When you edit a post, select a format you want to apply to that post on the **Format** meta box on the right: ![formats](images/post-format-box.png) When you choose a format, a corresponding meta box will appear **below** the content editor, here's the list of them: ![formats](images/post-formats.png) All you need to do is just enter **all** information in the fields in these meta boxes. This information will be used to decorate the post. For example: gallery post format will uses uploaded images to show a slider above post title, a video post will display a video player above post title, etc. ------------------------------ Translation ========= ###Tell WordPress which language file to use. If you don’t use WordPress in your native language so far, you have to tell WordPress which language to use to activate the theme translation. You can do this by editing the wp-config.php file (the file is located in the main directory of your WordPress files) and defining the WPLANG constant. You have to set your language code there, for example fr_FR for French translation. ust add the line below to your wp-config.php or change it if it already exists: `define ('WPLANG', 'fr_FR');` ###First Method: Using Codestyling Plugin The easiest way to translate your theme locally is by using the [Codestyling Localization](https://wordpress.org/plugins/codestyling-localization/) plugin. After you have installed and activated the plugin, simply go to `Tools > Localization` (shown in your language) and translate the theme from your WordPress backend following the [plugin instructions](http://www.code-styling.de/english/development/wordpress-plugin-codestyling-localization-en) ###Second Mothod: Using Poedit Poedit is a common program which you can use to translate the theme. It’s available for free on [poedit.net](http://www.poedit.net/). After you have installed Poedit, you can open it and select `File > New Catalog from POT file`. Then select the .pot file from the theme you wish to translate which you can find in the `/lang/` folder of theme. Then go through every line of text and translate it to your native language. Afterwards you can save the catalog with your language code (for example `es_ES.po`). Normally Poedit automatically creates the .mo file and saves it, too. The last step you have to do is to upload your created language files to the language folder of your theme using FTP. ------------------------------ Child Theme =========== BigShop is fully child theme compatible. We have attached a basic child theme to the download package which contains the minimum of required files. If you are planing any code customizations we highly recommend to do this inside the child theme! Learn more about child themes [here](http://codex.wordpress.org/Child_Themes) ------------------------------ FAQs ==== 1. **How to change the default logo to other?** Go to `Appearance > Theme Options > Header`, the option for change logo is there. 2. **How to change the color of theme?** Go to `Appearance > Theme Options > Style`. There are options to pick color form pre-defined colors or pick your favorite color. 3. **Does BigShop theme support child theme?** Yes, it does. Please see details in above section. ------------------------- Need Helps ========= If you need help, please do not hesitate to contact us! To grant best support we set up a support forum at [http://themealien.com/support](http://themealien.com/support). Channeling all requests at one place keeps and makes it simple, easier and even more effective for every customers to get quick help. All issues, requests and questions can be discussed and answered at one place. Please note, you will only get access to our forums with a valid purchase key! <!--se_discussion_list:{"wW7PSNNCDYXHMrbt0aih5kUL":{"selectionStart":8375,"type":"conflict","selectionEnd":7588,"discussionIndex":"wW7PSNNCDYXHMrbt0aih5kUL"}}-->