Ves Bestmart- Responsive Magento 2.0 Theme

Magento Responsive Theme - Userguide


THANK YOU FOR PURCHASING OUR THEME!

Here are some basics on installing, configuring and customizing the Venustheme,

BEFORE WE GO

The theme and the sample data is provided "as is". Customizing code and other design related issues can be done as freelance work on a $50-100$ hourly rate only with Paypal and/or Skrill, if Venustheme's available. If you are new to Magento, please understand I cannot fix your site for free. Venustheme would love to help everyone but there is no time. I suggest reading documentation available online regarding using Magento, server requirements, etc.

If you like this theme please rate it.

Have a wonderful rest of your day!

Venustheme Team

LAYOUT & MODULE POSITION:

# Homepage 1:

 

 

# Homepage 2 :

 

 

Before you install Magento 2, make sure your system meets or exceeds the following requirements:

  1. Operating systems : Linux distributions such as RedHat Enterprise Linux (RHEL), CentOS, Ubuntu, Debian, and so on
  2. Composer (latest stable version)
  3. Apache 2.2 or late
  4. PHP
    • 5.6.x
    • 5.5.x
  5. Required PHP extensions:
    •     PDO/MySQL
    •     mbstring
    •     mcrypt
    •     mhash
    •     simplexml
    •     curl
    •     gd2, ImageMagick 6.3.7 (or later) or both
    •     soap
  6. MySQL 5.6.x
  7. Mail Transfer Agent (MTA) or an SMTP server
  8. Optional but recommended:
    •     php_xdebug2.2.0 or later (development environments only; can have an adverse effect on performance)
    •     PHPUnit (as a command-line tool) 4.1 or later

I’m not going to list them here. In the future if they change, please check the Magento 2 documentation for those prerequisites

Install composer

You can use Composer to install Magento 2. It is a tool for dependent management in PHP which allows you to declare the dependent libraries your project needs and install them for you. Composer enables you to manage Magento 2, extensions, and their dependencies.

Here are the key advantages for using Composer:

  1.     Easy to integrate third-party components into the code base
  2.     Component-based architecture with robust dependency management
  3.     Reduce extension conflicts and compatibility issues
  4.     Versioned dependencies, semantic versioning
  5.     Supports PHP Framework Interoperability standards
  6.     An alternative to Pear packaging system


Now, download Composer and run its latest version. For more details on further configuration when installing composer, please visit this Composer installation documentation.
Follow the 6 steps below to start Composer installation

Install Composer via this link: https://getcomposer.org/download/

Download and run Composer-Setup.exe

Click on NEXT to continue

 

Select the path where php.exe is located with xampp: C:/xampp/php/php.exe and then click on NEXT

 

Choose Install

 

Finish: If you see the window is the same as the following one, you installed Composer successfully.

View more this video .

 

Install Componser to magento2

Get Magento 2.0 code from GitHub repository: https://github.com/magento/magento2

Copy the source code to htdocs folder of localhost

 

To run Composer for the first time and install your packages simply run:

Right Click on the file: Composer.json >> choose Composer Install

 

The cmd screen will display as below. You will have to wait for a while and Theme install composer is completed.

 

Update package:

The cmd screen will display as below. You will have to wait for a while

 

 

 

 


Step1: upload and decompress into webroot folder (which you setup magento 2 before) the file themes.zip in the file which you downloaded

 

Setp2Upload and decompress into webroot folder the file ves_bestmart_media.zip

 

 

Step3:  Go to your site. It will require you run command code to setup upgrade

 

Step4:  Run there command codes in terminal (SSH)

php bin/magento setup:upgrade --keep-generated

php bin/magento setup:static-content:deploy

 

Step5:  Go to admin > Ves Setup > Import > Choose profile "Ves_Bestmart_FULL.json" then click on install configuration button

 

Step6:  Choose default theme

>> go to magento admin panel >> Content >> configuration

 

Then open Design Configuration >> edit "Venustheme - Bestmart"


 

>> Go to admin > Stores > Configuration > General > Web > Default Pages > Choose default cms homepage

 

Quickstart package is to minimize time and effort in installing the theme as per Demo site. Kindly note that, with Quickstart, all your existing data will be overwritten.

Thus, we recommend using Quickstart for your first installation or just in case you want to refresh your site to the very beginning.

Step1: Decompress quickstart pakage into webroot folder

( The quickstart is file "theme_name_quickstart.zip" in the file which you downloaded. For example: ves_bestmart_quickstart.zip )

 

Step2: Create database:

 

 

Step3: Import database

( Decompress the file "theme_name.zip" we will get the file "sql/database.sql", import the file into database which you created before )

 

To import database file, you should go to phpmyadmin of your site > click on your database which you created before > click on top bar button "Import".
Browse the database.sql in the folder sql above, then run import sql file

 

Step4: Install theme

Then, open browser and go to: http://localhost/site_name to start to install theme

Installation Run:

Follow these below steps to run Installation process

>> Choose Start Readiness Check. After Start Readiness Check is completed, select Next

>> you need to click on ” Start Readiness Check” first,  then it will be like the below image

>> Enter server and database in step 2 and then click on Next

 

>> Put your website link and continue to click on Next

 

>> Customize your store: you can choose time Zone, Currency and Languages

 

>> You need to Create Admin Account. Enter your information and move to the next step

 

>> In this step, you should click on the button: Install Now

 

>> It will take some minutes to complete this installation process. If your window is the same as below, CONGRAT! You install theme successfully.

1. Bestmart- Theme Source code

 

This theme we used 9 modules:

- Ves Megamenu

- Ves Productlist

- Ves All

- Ves Themesettings

- Ves Page Builder

- Ves Blog

- Ves Brand

- Ves Setup

 

1.1 theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
     <title>Venustheme - Bestmart</title> <!-- your theme's name -->
     <parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme -->
     <media>
         <preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image -->
     </media>
 </theme>

 

1.2 compser.json

{
    "name": "magento/theme-frontend-bestmart",
    "description": "N/A",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0",
        "magento/theme-frontend-blank": "100.0.*",
        "magento/framework": "100.0.*"
    },
    "type": "magento2-theme",
    "version": "100.0.1",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

 

1.3 registration.php

 

1.4 etc/view.xml : Config all size of theme image


For example:

<image id="bundled_product_customization_page" type="thumbnail">
                <width>100</width>
                <height>130</height>
            </image>
            <image id="cart_cross_sell_products" type="thumbnail">
                <width>270</width>
                <height>350</height>
            </image>
            <image id="cart_page_product_thumbnail" type="small_image">
                <width>100</width>
                <height>130</height>
            </image>
            <image id="category_page_grid" type="small_image">
                <width>270</width>
                <height>350</height>
            </image>

 

 

2. Backend config

Configure theme:

In order to configure theme, please go to magento admin panel >> Content >> configuration

 

 

Then open Design Configuration >> edit Bestmart theme

 

Choose "Venustheme - Bestmart"

 

 

Config Homepage default:

 

From the left menu select Content > Pages. Here you can find all the store pages. Home page, About Us and Customer Service... should already be available, so you don't need to add them. You only need to update the pages HTML and XML content. Open any of them in order to get the access to the content.

 

 

Open the page and select the Content tab. It contains the HTML code of the page. You can take the page HTML code from the appropriate source file. You can see the list of source files included in the "Template Settings" section on your templates preview page. Copy the code from the source file and paste it to the content area.

When you are done with the HTML code, switch to "Design" tab. It contains the page XML code. XML code allows you to add Magento static blocks and widgets to the page. The XML code should be copied the same way as the HTML from the source file. Copy the XML code to the "Layout Update XML" area.

Don't forget to select the valid "Layout" option.

 

1.5 Header and Footer

# Header


 

Choose layout header: go to Admin -> Store -> Configuration -> Ves Themesettings

 

 

# Footer:

 

 

Design in: Admin -> Ves Pagebuilder -> Manage Block Profile:


 

Design in: Ves Pagebuilder -> Manage Block Profile -> edit item block builder "Cropshop Footer":

 

 

 

Config layout footer: go to Admin -> Store -> Configuration -> Ves Themesettings -> Footer

 

 

Home page layout:

 

 

1. Widget Content Carousel:

 

 

Config on Admin / Ves PageBuilder / Manage Page profile / edit Profile Pagebuilder item / Design

 

 

Edit widget:

 

 

 

 

 

2. Single Image Widget:


 

Back-end Setting:

 

edit Page Builder Profile item


 

3. Product List Carousel

 

Page Builder Widget:

 

 

 

Add class prefix style for row:

 

 

 

 

 

Set row "no-margin"

 

Set column -> no-padding

 

 

 

Widget setting:

 

 

4. Products list style 2:

 

Back-end Setting:

add class for block Products List style2:


 

5. Our service Widget:

 

 

Back-end Setting (in Page Builder Widget):

 

 

 


 

6. Tesimonial Widget:

 

Back-end Setting (in Page Builder Widget):

 


 

 

Widget config:

 

 

Venusthemes includes the fantastic Megamenu in an additional module called Ves MegaMenu.The Megamenu module comes with a custom admin interface through which you can create powerfull Menu. No coding is required. Follow these steps to create a module:

 

Front-end:

 

Back-end:

 

- Create new Menu item:

 

- General Information:

 

- Header:

 

 

- Main content:

 

 

- Bottom block:

 

- Design Menu item:

 

- Dynamic Content Tab:

 

 

* Note: After create Dynamic Content Tab for Menu item. Create child menu item and add widget product list

 

* Please view video guide at link below:

https://www.youtube.com/watch?v=1XW3FHBwS4A

Admin => Stores => Configruration => Ves Theme Settings

 

1. General Settings


 

Direction: You can choose dir for your store view "left to right" or "right to left". RTL is suitable for right to left languages like Persian (Farsi), Hebrew and Arabic, so if your Magento store is a multilingual website with right to left languages included or a store which right to left language is its default language, Ves Value is for you and you can use it easily and free.

 

2. Header

 

General:

Header Layout:  You can choose layout of header form dropdown ( header, header-v2, header-v3...). Local add and custom this

Sticky Header: if enabled, the main menu does not disappear when the user scrolls down the page.

 

3. Footer

 

4. Categories Page

 

Number of Columns: number of products displayed in a single row, if the Maximum Page Width is set to 1024 pixels (which is the lowest predefined value of the page width).

Equal Height of Grid Items (Products): if enabled, all grid items will have the same height. This option is limited to product grid in category view and will not be applied to product sliders.

Equal Height Type: choose all grid items will max hieght of product or min height of product.

Product Hover Effect: enable/disable effect which is visible the product: block is emphasized with frame and shadow.

Disable Hover Effect Below...: product Hover Effect will be disabled if width of  the browser viewport is below selected value.

5. Product Page

 

6. Contact Page

 

1 . Choose layout for categories page:

Go to Admin -> Products -> Categories -> edit Categories item -> Custom Design -> choose Page Layout your want to use:

2 . Choose layout for product detail page:

Go to Admin -> Products -> Catalog-> edit Categories item -> Custom Design -> choose Page Layout your want to use:

How to install and configure Grunt in Magento 2

Although Magento 2 introduces built-in Grunt tasks, there are still several steps you have to perform before using it:

First of all, you should install Node.js.

Then, it’s necessary to install Grunt CLI tool globally:

npm install -g grunt-cli

as well as Grunt in your Magento 2 directory:

cd <your_Magento_instance_directory>
npm install grunt --save-dev

Now, it’s time to work with the node.js project dependency for your Magento 2 instance: you have to refresh (or install) it:

cd <your_Magento_instance_directory>
npm install
npm update

 


Magento 2 Grunt Commands

Use the Grunt commands described below to perform different customization tasks in your Magento 2 project. All commands should be run from the installation directory of Magento 2.

 

How to clean CSS cache in Magento 2

To clean CSS cache or refresh less files, use the following command:

php bin/magento setup:static-content:deploy

Alternatively, you can use dev mode during development:

Clear the var/generation and var/di directories

Run the mode:

php bin/magento setup:mode:set developer

 

 

How to add new theme name to run Grunt in Magento 2?

The next step requires adding your theme to Grunt configuration. In the dev=> tools => grunt => configs => theme.js file add new config for theme Yume

luma: {
        area: 'frontend',
        name: 'Magento/luma',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    },
    cropshop: {//your theme name
        area: 'frontend',
        name: 'Venustheme/bestmart',//theme path
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l',
            'css/bootstrap/bootstrap',
            'css/bootstrap/theme',
        ],
        dsl: 'less'
    },

 

Magento 2 LESS compilation with Grunt on Windows

First of all, you should install Grunt in in your Magento 2 project. Then, it i necessary to:

Add a theme to Grunt configuration. Add your theme to module.exports in dev=> tools => grunt => configs => theme.js

bestmart: {
        area: 'frontend',
        name: 'Venustheme/bestmart',
        locale: 'en_US',
        files: [
            'css/styles-m',//path to root source file
            'css/styles-l',//path to root source file
            'css/bootstrap/bootstrap',//path to root source file
            'css/bootstrap/theme',//path to root source file
        ],
        dsl: 'less'
    },


Run CMD as an admin and go to the root directory of your Magento 2 project via cmd
Enter the following command :

grunt exec:<theme name>
grunt less:<theme name>

...And this one:

grunt watch

Changes your Less file.
Refresh browser. As mentioned above, it is possible to see all changes without refreshing your browser with the aid of the LiveReload extension.

Patches for Master branch users are listed in the full article about Magento 2 Grunt. For further information, follow the this

  1. Add your theme to Grunt configuration. To do this, in the dev=> tools => grunt => configs => theme.js file, add your theme to module.export
  2. Run cmd as Administrator
  3. Go to your root directory of your Project using cmd
  4. Run below command :-
    • grunt exec:<theme name>
  5. after that Run this command :-
    • grunt watch
  6. Now make changes in your Less file.
    • example: _theme.less
  7. Refresh browser and see the changes.

 

 

How to Update Magento 2

This part of the Magento 2 tutorial describes how to update the software without reinstalling it. Being crucial for getting all the latest code changes, the procedure requires doing everything in an development environment.

This step requires diffing and merging composer.json.old with composer.json installed with the Magento 2 software. These actions are possible with the aid of the following command:

composer update

After manipulations with composer.json, you should update the Magento 2 database. Run the command below:

php bin/magento setup:upgrade

 

How to get Reindexing

Use the following command to perform reindexing:

php bin/magento indexer:reindex

 

 

 

How to update Magento 2 theme?

 

Thank you for reading!

We hope you can create the best website with our themes.

Follow us on twitter or join my facebook page to get noticed about all theme or modules updates and news!

If you have any questions that are beyond the scope of this help file, please feel free to contact us.