Ves Vigoss - Free Magento2.0 Theme

Magento Responsive Theme - Userguide

• created: 12/07/2015
• latest update: 12/07/2015
• by: Venustheme
• email: venustheme@gmail.com

THANK YOU FOR PURCHASING OUR THEME!

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

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

Vigoss Theme Introduction

Ves Vigoss is our second free responsive magento 2.0 theme. This free magento 2 theme created with new magento 2.0 UI and integrate bootstrap 3.3.6  layout components. Also, it is inherited from magento 2.0 blank theme

Homepage Image and static block positions:

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 Vigoss install composer is completed.

Update package:

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

Step1: Create root theme Ves_Vigoss

( The root theme Vigoss magento 2 is created in the previous installation - composer installation  )

Step2: Create database

Step3: Install theme

Then, open browser and go to: http://localhost/ves_vigoss 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 Ves Vigoss theme successfully

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: Download  folder quickstart and extracted folder that  webroot

Setp2: Create new database and import database sql file ves_vigoss.sql

Step3:  Change config database name on this file app => etc => env.php

Step4:  edit table "core_config_data",  change config path of record row  "web/unsecure/base_url" and "web/secure/base_url"

1. Vigoss - Theme Source code 

This theme we used 3 modules: Ves Imageslider  , Ves Productlist, Ves Brand

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 - Vigoss</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-vigoss",
    "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 media/preview.jpg

1.5 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>

1.5 Header and Footer

a. Logo

<referenceBlock name="logo">
            <arguments>
                <argument name="logo_file" xsi:type="string">images/logo.png</argument>
                <argument name="logo_img_width" xsi:type="number">230</argument>
                <argument name="logo_img_height" xsi:type="number">72</argument>
            </arguments>
</referenceBlock>

b. Footer Top

c.  Footer Center

1.6 Other Positions

• Ves Imageslider
• Ves Showcase position
• Ves Masstop position
• Ves Masstop1 position
• Ves Massbottom position

2. Backend config

Configure theme:

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

 Then open Design tab >> choose Ves Vigoss in the" Design Theme" options

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.

Layout Update XML tab:  Vigoss homepage content

In case you need to add a new page, click the "Add New Page" button in the top right corner.

1. Image Slider

Step1: Config on Admin / Content / Page / Home page, call this block to position ves-slideshow

Step2: Content block "block-slideshow-bannertop"

2. Banner Top:

Step1: Config on Admin / Content / Page / Home page, call this block to position ves-slideshow

Step2: Content block "block-slideshow-bannertop"

3. Banner Center

Step1: Config on Admin => Content => Page => Home page call this block to Position Ves Ves-showcase

Step2: Content block "block-banner-center"

4. Product carousel

This widget on Ves Productlist module

Go to admin / Content / Widgets

Edit this widget Vigoss - Featured products

5. Ves Brand

Go to Admin/ Ves Brand / Setting Configuration

And add brand list:

6. Tab product carousel

This widget on module Productlist

Go to admin / Content / Widgets:

And edit widget name: "Vigoss - Product tabs"

7. Footer Top

Step1:  Call block static on this file

app => design => frontend => Venustheme => vigoss => Magento_Theme => layout

Step2: Add content block

8. Footer Center

Step1:  Call block static on this file

app => design => frontend => Venustheme => vigoss => Magento_Theme => layout

Step2: Add content block

<div class="page-main">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                 <div class="logo-footer">
                    <a href="#"><img class="img-responsive" src="{{media url="wysiwyg/home-static/logo-footer.png"}}" alt="" /> </a>
                    <p> Venus Page Builder offer tons of features that empower you to create complex layouts within minutes without touching any single code line. </p>
                    <button> <span> PURCHASE NOW </span></button>
                </div>
            </div>
            <div class="col-lg-8 col-md-8 col-sm-6 col-xs-12">
                <div class="row">
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                        <div class="block block-link">
                            <div class="block-title"> <strong><span>Infomation</span></strong></div>
                            <div class="block-content">
                                <ul class="links">
                                    <li class="nav item"><a href="#">About us</a></li>
                                    <li class="nav item"><a href="#">Our Locations</a></li>
                                    <li class="nav item"><a href="#">Contact Us</a></li>
                                    <li class="nav item"><a href="#">Orders and Returns</a></li>
                                    <li class="nav item"><a href="#">Our Company</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                        <div class="block block-link">
                            <div class="block-title"> <strong><span>Account</span></strong></div>
                            <div class="block-content">
                                <ul class="links">
                                    <li class="nav item"><a href="#">Wishlist</a></li>
                                    <li class="nav item"><a href="#">Your account</a></li>
                                    <li class="nav item"><a href="#">Checkout</a></li>
                                    <li class="nav item"><a href="#">Login</a></li>
                                    <li class="nav item"><a href="#">Register</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                        <div class="block block-link">
                            <div class="block-title"> <strong><span>Quick link</span></strong></div>
                            <div class="block-content">
                                <ul class="links">
                                    <li class="nav item"><a href="#">Featured product</a></li>
                                    <li class="nav item"><a href="#">New Arrivals</a></li>
                                    <li class="nav item"><a href="#">Best sellers</a></li>
                                    <li class="nav item"><a href="#">Order and returns</a></li>
                                    <li class="nav item"><a href="#">Sidemap</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

When you finish configuring the pages, you need to configure the static blocks. The procedure is similar: you need to copy the code from the source files and then paste it to the corresponding fields in the Magento admin panel. You need to use a similar table but for the static blocks.

1. From the Left menu select  Content > Blocks.
2. Click the "Add New block" button in the right corner to add a new block.
3. Input the block name and identifier. You can get the block details from the table at the templates Live Demo page (check the Pages Configuration part).
4. Open the block source file and copy the HTML code into the content area.

All block used theme Vigoss

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.

• grunt clean:<theme>. This command removes static files related to your theme in both pub/static and var directories.
• grunt exec:<theme>. This one republishes source files symlinks to pub/static/frontend/<Vendor>/<theme>/<locale>.
• grunt less:<theme> should be used to compile .css files using symlinks from the aforementioned directory.
• grunt watch. This command is designed for the LiveReload extension. It tracks changes in the source files, recompiles .css files, and reloads browser pages.
   

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'
    },
    vigoss: {//your theme name
        area: 'frontend',
        name: 'Venustheme/vigoss',//theme path
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l',
            'css/bootstrap-tiny',
            'css/stylesheet'
        ],
        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

vigoss: {
        area: 'frontend',
        name: 'Venustheme/vigoss',
        locale: 'en_US',
        files: [
            'css/styles-m',//path to root source file
            'css/styles-l',//path to root source file
            'css/bootstrap-tiny',//path to root source file
            'css/stylesheet'//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>

grunt less:<theme>

...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>
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

Thank you for reading!

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