Our brands

Guide Ves Mesa Magento2

Getting Started

Getting Started

Mesa comes with modern, elegant, professional product-oriented design, the theme lets you showcase your items at it’s best.

Are you seeking theme for Magento 2? Mesa is designed for Magento 2 with tons of improvements in performance and scales. Also, it delivers engaging and rich user experience on any devices. Thus customer can shop anytime anywhere

Mesa is one of our responsive Magento 2 themes. This Magento 2 theme created with new Magento 2 UI and integrate bootstrap 3.3.6 layout components. Also, it is inherited from Magento 2 blank theme

Advanced Guide: Developer Guide For Magento 2

Compatibility:

Mesa is fully compatible with Magento Community Edition 2.0.0, 2.0.x, 2.1.0, 2.1.x

Demo Link: http://server1.demo4coder.com/mesa/landing

Purchase It Now

Installation & Update

Theme Installation

In this tutorial, we will show you how to install theme step by step.

Step1: Decompress the theme package (ex: ves_theme_name_full.zip) into your PC.
Then upload and decompress the file “Theme Files/magento 2.x.x/theme_files.zip” into webroot folder (which you setup magento 2 before):

theme_file_decompress-1

Step2: Upload the file [theme_name]_media.zip in to webroot and decompress it. The file stored sample images of the theme.

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

Step4: You should 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 “Theme_name_FULL.json” then click on install configuration button

Step6: Choose default theme

Magento 2.0.x:

>> Go to admin > Stores > Configuration > General > Design > Choose design theme “Venustheme – theme name”

Magento 2.1.x:

>> Go to admin > Content > > Configuration > General > Design > Choose design theme “Venustheme – theme name”

Step7: Config default homepage layout

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

Quick-start package Installation

Step 1: Decompress theme package, we will get the folder “Quick Start Files”. In the folder we get a sub folder (ex: magento 2.0.x or magento 2.1.x). At here we use 2.1.x

The theme quickstart package we will have there files and folders as this:

 

Step 2: Create new database and import the file “Quickstart Files/magento 2.1.0/database_magento210.sql or /database.sql” into the database which you just created.

Step 3: Upload and decompress the file [THEME]_magento210_quickstart.zip into webroot folder of your site.

Step 4: Go to site url in web browser. Setup steps by steps. In setup config database we input the database name which you created and imported sql file on step 2.

Or you setup via SSH command:

php bin/magento setup:install --base-url=http://yourdomain.com/ \
--db-host=localhost --db-name=magento_database_name --db-user=database_username --db-password=database_password \
--admin-firstname=Magento --admin-lastname=User --admin-email=admin123@gmail.com \
--admin-user=admin123 --admin-password=admin123 --language=en_US \
--currency=USD --use-rewrites=1 --backend-frontname=myadmin

–base-url: is your site domain which you want to setup

–db-name: is database name which you created and imported sample database

–db-user: is database user name to connect to the database server

— db-password: is database password of –db-user

–admin-email: is email of admin

–admin-user: is admin user name which you want to create

–admin-password: is admin password

–backend-frontname: is admin route which you want to make for your site. For example: http://yourdomain.com/myadmin

More information about setup via command you can view at here: http://devdocs.magento.com/guides/v2.0/install-gde/install/cli/install-cli-install.html

Note: If you have problem when run setup quickstart (maybe 500 error). Because the files and folders in your server are having wrong permission. We should change permission for them. Try to use ssh commands:

 

chmod -R 0777 pub/ var/ app/etc/

chmod -R 0777 pub/ var/ app/etc/
chmod -R 0755 index.php setup/

 

Theme Configuration

Child Theme Configuration

Please create child theme folder in app/design/frontend/company_name/theme_name
ex:
etc/view.xml:-This file is used to specify product image dimensions, thumbnails etc.Magento_Theme:- This directory is used to override existing Magento’s theme files.Magento_Theme/layout/default.xml:- By default, Magento2 assumes that your theme’s logo file should be: /web/media/logo.svg If you want some other file for logo, then you must declare it in thedefault.xml file.This file is also used to override default theme’s settings.media/preview.png:- The preview of the current theme.web:- This directory contains all the theme’s static data like images, styles, javascript, fonts etc.registration.php:- This file is required to register our theme to Magento2 system.theme.xml:- This is a compulsory file that defines our theme name, its parent and optionally theme’s preview image.composer.json:- If you plan to distribute the theme using a composer package will make it easier for people to install the custom theme, you can specify any required packages in which composer can install/update for the user to ensure the theme installs correctly.Creating theme files, Let us now create our files one by one.Creating theme files, Let us now create our files one by one.theme.xml ( app/design/frontend/Venustheme/mesa_child/theme.xml )

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
   <title>Mesa Child</title> <!-- your theme's name -->
   <parent>Magento/blank</parent> <!-- the parent theme -->
   <media>
        <preview_image>media/preview.jpg</preview_image> <!-- theme's preview image -->
   </media>
</theme>

registration.php ( app/design/frontend/Venustheme/mesa_child/registration.php )

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Venustheme/mesa_child',
    __DIR__
);

composer.json ( app/design/frontend/Venustheme/mesa_child/composer.json )

{
 "name": "magento/theme-frontend-mesa_child",
 "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.2",
 "license": [
 "OSL-3.0",
 "AFL-3.0"
 ],
 "autoload": {
 "files": [
 "registration.php"
 ]
 }
 }

Please go to Admin -> Content -> Configuration

Then open Design Configuration -> choose Mesa child


* Important: After you choose a new theme or new theme child, you need reindex data and run the command below via SSH:

php bin/magento setup:static-content:deploy

Homepage Configuration

Mesa has 8 extensions with 6 homepages built by Ves Page Builder module.

 

#Overview:

To configure the default home page for your store, go to Store > Configuration > General > Web > Default Pages tab, select the desired page in the CMS Home Page field and save the configuration.

Go to back-end > VenusTheme > Ves Page Builder > Edit profile name “Mesa Homepage Default

In the back-end, we used the widget, namely “Content Carousel” on page builder profile. To change image slider, please Go to back-end > VenusTheme > Ves Page Builder > choose “Manager Elements” > Edit block profile “Mesa Slider 1”.

  1. Mesa Slider 1
  2. Mesa Slider 2
  3. Mesa Slider 3
  4. Mesa Slider 4




ex: content for “Mesa Slider 1“:

<p><a href="{{store url="women.html"}}"><img src="{{media url="wysiwyg/ves_mesa/slider/slider1.jpg"}}" alt="Slider 1" /></a></p>
<div class="slider-content v1">
<h3 style="color:#31bac2">Explore</h3>
<h2 style="color:#a05e81">School <br>
Books</h2>
<p class="hidden-md hidden-sm hidden-xs">Available for All Classes</p>
<a class="action primary white" href="#">SHOP NOW</a></div>

 

 

Back-end Setting:

 

Mesa Image V2:

Back-end Setting:

Mesa Image V3:

Back-end Setting:

Mesa Image V4:

Back-end Setting:

Mesa Image V5:

Back-end Setting:

Mesa Image V6:

Back-end Setting:

Mesa Image V7:

Back-end Setting:

Config in admin in Pages Builder Elements profile “Mesa Blog”.



 

Back-end Setting:

please Go to back-end > VenusTheme > Ves Pages Builder > Manage Elements > Edit page builder element profile “Mesa Product List”.

 

Mesa Product V1:

 

Back-end Setting:
please Go to back-end > VenusTheme > Ves Pages Builder > Manage Elements > Edit page builder element profile “Mesa Product”.

 

Mesa Product V2:

Back-end Setting:
please Go to back-end > VenusTheme > Ves Pages Builder > Manage Elements > Edit page builder element profile “Mesa Product V2”.

Mesa Product V3:

Back-end Setting:
please Go to back-end > VenusTheme > Ves Pages Builder > Manage Elements > Edit page builder element profile “Mesa Product V3”.

Mesa Product V4:

Back-end Setting:
please Go to back-end > VenusTheme > Ves Pages Builder > Manage Elements > Edit page builder element profile “Mesa Product V4”.

Mesa Product V5:

Back-end Setting:
please Go to back-end > VenusTheme > Ves Pages Builder > Manage Elements > Edit page builder element profile “Mesa Product V5”.

Mesa Product V6:

Back-end Setting:
please Go to back-end > VenusTheme > Ves Pages Builder > Manage Elements > Edit page builder element profile “Mesa Product V6”.

 

Mesa Product V7:

Back-end Setting:
please Go to back-end > VenusTheme > Ves Pages Builder > Manage Elements > Edit page builder element profile “Mesa Product V7”.

Footer Profiles

Footer manager:

Admin -> VenusTheme -> Ves Pagebuilder -> Manage Elements:

Design in: VenusTheme -> Ves Pagebuilder -> Manage Elements -> edit item pages builder element “Mesa Footer”:

Mesa footer v2

Design in: VenusTheme -> Ves Pagebuilder -> Manage Elements -> edit item pages builder element “Mesa Footer V2”:


Mesa footer v3

Design in: VenusTheme -> Ves Pagebuilder -> Manage Elements -> edit item pages builder element “Mesa Footer V3”:


Mesa footer v4

Design in: VenusTheme -> Ves Pagebuilder -> Manage Elements -> edit item pages builder element “Mesa Footer V4”:

How To Choose footer profiles

Go to back-end > Ves Themesetting > Footer > enter your block

Config Generals

In this tab, you are able to:

– Choose maximum page width on drop-down or change value input

– Choose skin color store view

– Choose director support LTR or RTL Languages

– Enable or disable panel tool

– Config body background, padding

– Add custom google font for body

– Config color text body, text link, text link hover

– Config button color, background, and hover, focus

 

Please Go to Admin Panel > VenusTheme > Ves ThemeSettings > General

Mesa provides Custom Page Width (960px, 1024 px, 1280px, 1360px, 1440px, 1680px,…), and Maximum Page Width mode, you can choose the one that you prefer. You can apply this option to any home versions.

We created 15+ skins in Mesa: You can view it in folder:

..\Venustheme\gosmart\Ves_Themesettings\web\css\skins\

Config Contact Page

Link page: demo4coder.com/mesa/contact

How To config: Go To VenusTheme > Ves Themesetting > Contact page:

 

+ Contact Form tab:

 

+ Google map tab:

– You can change address, Longitude, Latitude

– You can add contact information: email, address, telephone, fax, custom HTML About us, etc…

 

+ Edit Form :

You can edit form at this path file:

app\design\frontend\Venustheme\mesa\Magento_Contact\templates\form.phtml

 

 

 

Header Configuration

Mesa provides 6 header styles, you can choose one of them here.

#Header1:

#header2:

#header3:

#header4:

>> How To Config Other Header for storeview

To Config Other Header, Go to Admin Panel >> VenusTheme >> VES THEMESETTING >> Header >> General Settings >> Choose Your Header Layout

  1. Default: default.phtml (header default)
  2. Default1: default1.phtml (header 1)
  3. Default2: default3.phtml (header 3)
  4. Default2: default4.phtml (header 4)

Code HTML in this path file

app\design\frontend\Venustheme\blackstore\Ves_Themesettings\templates\header\default.phtml

To change Logo, Go to Admin Panel > Content > Configuration > Edit theme_name

After that, you need to open “Header” Tab > Upload your logo(GIF, PNG, JPG, or SVG file type) with the uploader

Admin Theme Settings

Config header

1. General tab: Choose Header Layout: “Default”

2. Top Link tab: Show link my account, sign in, create an account, and custom link

You can add a custom top link.

 

3. Search tab:
– Enable: Yes or No
– Custom style
– Add maximum width of the search box
– Change format button search

 

4. Language Switcher and Currency Switcher tab:

This block setting group custom code in this file

app\design\frontend\Venustheme\gosmart\Magento_Theme\templates\html\setting.phtml

How it is shown on front-end:
5. Sticky Header tab:

Config “Scroll To Fixed” header ( keep header when scrolling window). You can choose all sticky elements (all header )or choose to specify an element

6. Top cart tab:

– There are 4 options for you to show Top Cart, you can choose to show what you want

  • Text Only
  • Icon Class Only
  • Text + Icon Class
  • Icon Class + Text

Config Product View Page

– Other elements:

+ Config enable / disable elements by change value Yes / No

+ Specify you can change a position of thumbnail slider: horizontal or vertical, Top or bottom

– Config show tab- Custom tab

+ Tab By Product Attribute Code

+ Tab By CMS Block

+ Tab By Static Html Content

– Config Related Products: number items and item show on responsive

Back-end Setting:

Frontend result:

– Config Upsell product:

Back-end Setting:

Frontend result:

Config Cart Page

Config in admin panel > Ves Themesetting > Cart page:

 

+ Config number product for cross-sell on cart page:

Front-end showing

Note: config show / hidden element (name, price, review…) as related, upsell

 

Blocks Diagram

Static Blocks Diagram

This is all CMS static blocks we are using on the Mesa.

To Open Cms Static Blocks, Go To Admin Panel > Content > Blocks

 

1. Mesa Text Welcome

HTML Shortcode:

<p>Hello Mate!! Please go to <a href="{{store url="customer/account"}}">My Account</a> or <a href="{{store url="customer/account/logout/"}}">Sign out</a></p>

2. Mesa Block header 2

HTML Shortcode:

<p><a href="{{store url="#"}}">Customer Care</a> <a href="{{store url="#"}}">Our Blogs </a> <a href="{{store url="#"}}">Compare List</a>
 <a href="{{store url="#"}}">Our Offers</a> <a href="{{store url="customer/account/create/"}}">Signup</a>
 <a href="{{store url="customer/account/login/"}}">Sign in</a>
</p>

3. Mesa Banner Sidebar

HTML Shortcode:

<p><img class="img-responsive" src="{{media url="wysiwyg/ves_mesa/banner.jpg"}}" alt="" /></p>

4. New Products

HTML Shortcode:

<p>{{widget type="Ves\Productlist\Block\Widget\Tab" addition_class="v2" tabs="YToyOntzOjE4OiJfMTQ1NTg2NzQxMzE2Ml8xNjIiO2E6NTp7czo5OiJzb3VyY2VfaWQiO3M6NjoibGF0ZXN0IjtzOjEwOiJpdGVtX3RpdGxlIjtzOjEyOiJOZXcgUHJvZHVjdHMiO3M6MTA6Iml0ZW1fY2xhc3MiO3M6MDoiIjtzOjk6ImFqYXhfdHlwZSI7czoxOiIwIjtzOjg6InBvc2l0aW9uIjtzOjE6IjEiO31zOjc6Il9fZW1wdHkiO3M6MDoiIjt9" conditions_encoded="a:1:[i:1;a:4:[s:4:`type`;s:50:`Magento|CatalogWidget|Model|Rule|Condition|Combine`;s:10:`aggregator`;s:3:`all`;s:5:`value`;s:1:`1`;s:9:`new_child`;s:0:``;]]" enable_animate_tab="1" animation_speed="normal" collapsible="0" cycle="false" transition_in="fadeIn" transition_in_easing="swing" transition_out="fadeOut" transition_out_easing="swing" event="click" show_name="1" show_name_single_line="0" show_short_description="0" show_price="1" show_review="0" show_countdowntimer="0" show_new_label="0" show_sale_label="0" show_image="1" image_width="74" image_height="90" aspect_ratio="0" alt_image="1" alt_image_column="position" alt_image_column_value="2" show_compare="0" show_wishlist="0" show_addtocart="0" show_quickview="0" layout_type="owl_carousel" number_item="12" number_item_perpage="3" lg_column_item="1" md_column_item="1" sm_column_item="1" xs_column_item="1" bnav="0" bdots="0" number_item_percolumn="3" custom_item_height="400px" large_max_items="1" large_items="1" portrait_items="1" tablet_items="1" tablet_small_items="1" mobile_items="1" autoplay="1" autoplay_timeout="4000" dots="0" nav="0" nav_next="" nav_pre="" rtl="0" loop="1" lazyload="0"}}</p>

5. Mesa Vertical Menu

HTML Short code:

<p>{{widget type="Ves\Megamenu\Block\Widget\Menu" title="Categories" alias="menu-categories"}}</p>

Extensions

Blog Extension

1. How To Change URL link:

Go to Admin Panel > Stores -> Configuration > Venus Theme Extension > Ves Blog

2. Config show/hidden elements in post page (detail post)

Show on frontend:

 

3. Config show/hidden elements in Category page

Show on frontend
Blog Page Grid

Blog Page List

 

4. How To Change page layout for each blog category

Go to Admin Panel > Ves Blog > Categories > Category Management > Edit 1 category or add new category

On Design tab: you can choose page layout for category

 

5. How To Custom Category Blog Page: Show grid, list or Masonry View Mode

Go to Admin Panel > Ves Blog > Categories > Category Management > Edit 1 category or add new category > Design tab:

 

Megamenu

Mesa 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 powerful Menu. No coding is required. Follow these steps to create a module:

 

Front-end:

Vertical menu:

Back-end:

– Create new Menu item:

– General Information:

– Header:

– Left Block:

– Main content:

– Right block:

– Bottom block:

– Custom design for a menu item:

Top
Do NOT follow this link or you will be banned from the site!