Our brands

Guide Ves Gandesport Magento2

Getting Started

Getting Started

Ves Grandesport 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? Ves Grandesport 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

Ves Grandesport 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: Venustheme – Developer Guide For Magento 2

Compatibility:

Venus theme is fully compatible with Magento Community Edition 2.0.0, 2.0.2, 2.0.4, 2.0.6, 2.0.7, 2.1.0, 2.1.x

Demo Link: http://demo4coder.com/grandesport/landing

Purchase It Now

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 default.xml the 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 filesLet 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/grandesport_child/theme.xml )

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

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

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

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

{
	"name": "venustheme/theme-frontend-grandesport-child",
    "description": "N/A",
    "require": {
        "php": "~5.6.0|7.0.2|~7.0.6",
        "magento/theme-frontend-grandesport": "100.1.*",
        "magento/framework": "100.1.*"
    },
    "type": "magento2-theme",
    "version": "100.1.0",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
 }

Please go to Admin -> Content -> Configuration

Then open Design Configuration -> choose Grandesport child


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

php bin/magento setup:static-content:deploy

Homepage Configuration

Ves Grandesport have 6 different homepages built by Ves Page Builder module.

I. Grandesport Home Page Default:

link demo

II. Grandesport Home Page 2:

link demo

III. Grandesport Home Page 3:

link demo

IV. Grandesport Home Page 4:

link demo

V. Grandesport Home Page 5:

link demo

VI. Grandesport Home Page 6:

link demo

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

To configure the home page for other store, please select your Store View and select the desired page in the CMS Home Page field

Go to back-end > Venustheme > Ves Pages Builder > Edit profile name “Grandesport_layout1_home”

At here we called Blocks Builder Profile you can check and edit them in admin > Venustheme > Ves Pages Builder > Manage Elements

In the back-end, we used the widget, namely “Ves Image Slider”. To change image slider, please Go to back-end > Venustheme > Ves Pages Builder > Manage Elements > Choose to edit desired block (ex: Grandesport_home1_widget_slidershow) > Edit “Ves Image Slider” widget.

add class grandesport-slider to the image is received style in Grandesport theme.

  1. Grandesport_layout1_home_imageslider_1
  2. Grandesport_layout1_home_imageslider_2
  3. Grandesport_layout1_home_imageslider_3

Note: Ves Grandesport Image Slider are using CMS static block. Hence, if you want to change image slider, please go to Admin Panel > Content > Blocks > Choose Desired CMS Static Block you want to edit.

+ In the back-end, we used the widget, namely “Single Image” on block builder profile

+ You can edit widget and change image in this popup by choosing “Edit” Button

add class grandesport-image to the image is received style in Grandesport theme.

Enable Image Description: Yes and add description into textarea Image Description

in Shortcode you can see:

{{widget type="Ves\BaseWidget\Block\Widget\Image" file="wysiwyg/ves_grandesport/store2/home-banner/6.jpg" image_size="100%" alignment="center" html="PGgyIHN0eWxlPSJmb250LXN0eWxlOiBpdGFsaWM7Ij53ZWFyPC9oMj4KPGgxPjxzcGFuPnVudGltYXRlPC9zcGFuPjwvaDE+CjxoMiBzdHlsZT0iZm9udC1zdHlsZTogaXRhbGljOyI+ZmVlbDwvaDI+CjxoMj51bnRpbWF0ZTwvaDI+CjxhIGNsYXNzPSJidXR0b24gYnRuLWxnIiB0aXRsZT0iU2hvcCBOb3chIiBocmVmPSIjIj5TSE9QIE5PVyE8L2E+" popup_type="colorbox" link="#"}}

Config image banner with row-success (the banner will overwrite the content above)

config in Page builder profile:

select Row style: Success

Config image banner with other style

to config you add the class grandesport-image-v1 in block builder profile:

Config in block builder profile (Manage Elements):

Add the class: grandesport-html to the block is received style in Grandesport theme.

5.1 Banner HTML with grandesport-html-v1 class

Add the class grandesport-html-v1 for block builder

+ How To Config In The Backend (in block builder profile: grandesport_home1_widget_product, grandesport_home1_product_tab)

>> In the back-end, we used the widget, namely “Product list: Tabs by categories”. To config product carousel, please open the widget “Product list: Tabs by categories” and edit it

Add the class: grandesport-product to the block is received style in Grandesport theme.

Select your categories OR add the class hidden-etabs if you only select one categories.

Select your categories and config load ajax for them. config “After tab title is clicked” for categories without first item (position smallest)

>> you can re-select source for widget.

>> In this widget,  we use default template in the following path file: app\design\frontend\Venustheme\grandesport\Ves_Productlist\templates\widget\owlcarousel\items.phtml

+ Config Item Settings to Show/Hidden the elements:

+  Config Carousel Settings: select Type and count Number Item in the widget.

+  You can config the number of row, and product items on each device responsively:

+ Config to show/hidden navigation:

Product with other style

Add the class grandesport-product-v1 for block builder

How To Config in the back-end (block builder: grandesport_home1_widget_categories, grandesport_home4_widget_categories, grandesport_home5_widget_categories, grandesport_home6_widget_categories)

Add the class: grandesport-categories to the block is received style in Grandesport theme.

How To Config in the back-end (block builder: grandesport_home1_widget_brand)

Add the class: grandesport-brand to the block is received style in Grandesport theme.

How To Config in the back-end (ex: grandesport_home2_widget_blog)

Add the class: grandesport-blog to the block is received style in Grandesport theme.

Config:

Set the number post items on each device responsively and config show/hidden navigation:

Post Settings: config to show/hidden elements in this widget.

How To Config in the back-end (block builder: grandesport_home4_widget_ourservice)

Add the class: grandesport-ourservice to the block is received style in Grandesport theme.

How To Config in the back-end (block builder: grandesport_home4_newsletter)

Add the class: grandesport-newsletter to the block is received style in Grandesport theme.

How To Config in the back-end (block builder: grandesport_home6_explore)

Add the class: grandesport-explore to the block is received style in Grandesport theme.

In page builder, you can choose “setting” button to make space for each row

In the “Row Setting” >> Open “Layout” Tab >> Add css margin or padding like below image

Header Configuration

Grandesport provides 2 header styles, you can choose one of them here.

Header1:

header2:

>> How To Config Header for storeview

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

  1. Default: default.phtml (header default)
  2. Default2: default2.phtml (header 2)

Code HTML at this path file

app\design\frontend\Venustheme\grandesport\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

Footer Profiles

Grandesport provides 1 footer blockbuilder with 3 color styles

Style 1

 
Style 2

 
Style 3

How To Config footer profiles in backend

Go to back-end > VENUSTHEME > Ves Theme Settings > Footer > enter your block

Go to back-end > VENUSTHEME > Ves Pages Builder > Manage Elements : Grandesport_Layout1_FooterTop

Admin Theme Settings

Config Generals

In this tab, you are able to:

– Choose maximum page width on dropdown 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 Theme Settings > General

Ves Grandesport 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 6 skins in Ves Grandesport theme: Default (Orange), blue, green, red, pink and yellow you can view it in folder:

..\Venustheme\grandesport\Ves_Themesettings\web\css\skins\

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 custom top link.

 

3. Search tab: (When not use Ves Autosearch module)
– Enable: Yes or No
– Custom style
– Add maximum width of 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\grandesport\Magento_Theme\templates\html\setting.phtml

How it is show on front-end:

    
    <?php
    $id = $block->getIdModifier() ? '-' . $block->getIdModifier() : '';
    $currency_custom = $this->getChildHtml('currency_custom');
    $store_language = $this->getChildHtml('store_language_custom');
    ?>
    <?php if($currency_custom || $store_language): ?>
    <div class="setting-links" id="setting-links<?php echo $id?>">
        <div class="actions dropdown options setting-links-options">
            <div class="action toggle switcher-trigger" id="setting-links-trigger<?php echo $id?>">
                <?php echo __('Settings'); ?>
            </div>

            <ul class="dropdown setting-links-dropdown" data-mage-init='{"dropdownDialog":{
            "appendTo":"#setting-links<?php echo $id?> > .options",
            "triggerTarget":"#setting-links-trigger<?php echo $id?>",
            "closeOnMouseLeave": false,
            "triggerClass":"active",
            "parentClass":"active",
            "buttons":null}}'>
                <?php if($currency_custom): ?>
                <li class="switcher-currency-wrapper">
                    <?php echo $currency_custom ?>
                </li>
                <?php endif; ?>
                <?php if($store_language): ?>
                <li class="switcher-language-wrapper">
                    <?php echo $store_language ?>
                </li>
            <?php endif; ?>
            </ul>
            
        </div>
    </div>
    <?php endif; ?>

 

5. Sticky Header tab:

Config “Scroll To Fixed” header ( keep header when scrolling window). You can choose all sticky elements (all header )or choose specify 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

frontend show:

Config Footer

Venustheme allows you to config various footer sections: Footer top, Footer center, Footer Bottom

app\design\frontend\Venustheme\grandesport\Ves_Themesettings\layout\default.xml

 

<!-- Footer Container -->
    <referenceContainer name="footer-container">
        <container name="footer" as="footer" label="Page Footer" htmlTag="div" htmlClass="ves-footer">
            <container name="footer-top" label="Footer Top" htmlTag="div" htmlClass="footer-top">
                <block class="Ves\Themesettings\Block\Html\Footer" name="ves.footer.top" template="Ves_Themesettings::html/footer/footer-top.phtml"/>
            </container>
            <container name="footer-center" label="Footer Center" htmlTag="div" htmlClass="footer-center" after="footer-top">
                <block class="Ves\Themesettings\Block\Html\Footer" name="ves.footer.center" template="Ves_Themesettings::html/footer/footer-center.phtml"/>
            </container>
            <container name="footer-bottom" label="Footer Bottom" htmlTag="div" htmlClass="footer-bottom" after="footer-center">
                <block class="Ves\Themesettings\Block\Html\Footer" name="ves.footer.bottom" template="Ves_Themesettings::html/footer/footer-bottom.phtml"/>
            </container>
            <remove name="form.subscribe"/>
            <block class="Magento\Framework\View\Element\Template" name="report.bugs" template="Magento_Theme::html/bugreport.phtml" />
        </container>
    </referenceContainer>
<!-- End Footer Container -->

 

You can configure the options related to the footer section in Ves Themesettings > Footer

– General Settings:

+ You can custom style if use value Yes, change text color and link color on footer

+ You can style background color or set background image, patent for footer by option “Outer Container”

+ You can enable or disable text copy right, and you can custom text copy-right at option “Copyright”

 

– Footer Top setting:

+ You can enable or disable position

+ You can choose static block or custom html redirect on text editor

+ You can custom style if use value Yes: Text color, Link color, Link hover color

+ You can style “Outer Container”, ” Inner Content” – Main content at here

 

– For Footer Center Setting, Footer Bottom setting, you can config it like Footer Top setting. But in case the theme do NOT have, please set “Enable Footer Center” or “Enable Footer Bottom” to : NO

 

Config Category page

Venus theme provides several types of category layout. You can choose one as your choice.

+ Go to the Admin Panel > Products > Inventory > Categories.

+ Select “Default Category” in the treeview area at the left side.

+ Click “Add Subcategory” button, then input Category name, Description, etc. Notes: set the options “Is Active” to “Yes”, “Include in Navigation Menu” to “Yes” in “General Information” tab.

 

+ In “Display Settings” tab, There are 3 options for you to show in category page, you can choose to show what you want

  • Products only
  • Static block only
  • Static block and products

 

+ You can change layout category on Design tab:

 

+ Change number column product in each layout design:

you insert code in Layout Update XML

	<referenceBlock name="category.products.list">
        <action method="setTemplate">
            <argument name="template" xsi:type="string">Magento_Catalog::product/list-col2.phtml</argument>
        </action>
	</referenceBlock>
	

+ Click “Save Category” button, to update your changes.

Go to Admin Panel > Ves Themesetting > Category page:

1. General tab:

– Show name, description, image of category

– Show Top toolbar and Bottom Toolbar

2. Product settings tab:

– Show element for each product item:

+ Config to select element of each product: name, description, price, review, lable sale or new, ect

+ Config format button add to cart, quickview, add to wishlist, add to compare

+ Config product image: image size, swap image

Config Product View Page

– Other elements:

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

+ Specify you can change position of thumnail slider: horizonal or vetical, 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, Upsel product: number items and item show on responsive

– Frontend show:

Config Cart Page

Config in admin panel > VENUSTHEME > Ves Theme Settings > Cart Page:

 

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

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

 

Config Contact Page

Link page: demo4coder.com/grandesport/contact

How To config: Go To admin > VENUSTHEME > Ves Theme Settings > 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\grandesport\Magento_Contact\templates\form.phtml

 

 

 

Blocks Diagram

Static Blocks Diagram

This is all CMS static blocks we are using on the theme Ves Grandesport.

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

 

1. “Grandesport_layout1_home_imageslider_1”, “Grandesport_layout1_home_imageslider_2”, “Grandesport_layout1_home_imageslider_3” are used on Pagebuilder Element: “Grandesport_layout1_widget_slidershow”

“Grandesport_layout1_home_imageslider_1”:

<a href="#"><img src="{{media url="wysiwyg/ves_grandesport/store1/slidershow/1.jpg"}}" alt="" /></a>
<div class="slidershow-info slidershow-info-v1"><a class="button btn-darked btn-lg" title="Shop Now!" href="#">SHOP NOW!</a></div>

“Grandesport_layout1_home_imageslider_2”, “Grandesport_layout1_home_imageslider_3”:

<a href="#"><img src="{{media url="wysiwyg/ves_grandesport/store1/slidershow/2.jpg"}}" alt="" /></a>
<div class="slidershow-info">
	<h2>Nike Woman's Flyknit Shoes</h2>
	<a href="#" title="Shop Now!" class="button btn-lg"><i class="fa fa-shopping-cart"> </i>SHOP NOW!</a>
</div>

Showing in front-end (the slidershow in demo 1):

 

2. “Grandesport_layout2_home_imageslider_1”, “Grandesport_layout2_home_imageslider_2”, “Grandesport_layout2_home_imageslider_3” are used on Pagebuilder Element: “Grandesport_layout2_widget_slidershow”

3. “Grandesport_layout3_home_imageslider_1”, “Grandesport_layout3_home_imageslider_2”, “Grandesport_layout3_home_imageslider_3” are used on Pagebuilder Element: “Grandesport_layout3_widget_slidershow”

4. “Grandesport_layout4_home_imageslider_1”, “Grandesport_layout4_home_imageslider_2”, “Grandesport_layout4_home_imageslider_3” are used on Pagebuilder Element: “Grandesport_layout4_widget_slidershow”

<a href="#"><img src="{{media url="wysiwyg/ves_grandesport/store4/slidershow/1.jpg"}}" alt="" /></a>
<div class="slidershow-info">
<h1>2016</h1>
<h3>the difffrence between<br>
impossible & possible</h3>
<a class="button hidden-xs" title="Shop Now!" href="#">SHOP NOW</a></div>

 

5. “Grandesport_layout5_home_imageslider_1”, “Grandesport_layout5_home_imageslider_2”, “Grandesport_layout5_home_imageslider_3” are used on Pagebuilder Element: “Grandesport_layout5_widget_slidershow”

<a href="#"><img src="{{media url="wysiwyg/ves_grandesport/store5/slidershow/2.jpg"}}" alt="" /></a>
<div class="slidershow-info">
<div class="container">
<h2><span>sport car <br /> modern</span></h2>
<p>everything</p>
<h4><span>under $9.900<span></span></span></h4>
<a class="button btn-lg" title="Shop Now!" href="#">SHOP NOW</a></div></div>

 

6. “Grandesport_layout6_home_imageslider_1”, “Grandesport_layout6_home_imageslider_2”, “Grandesport_layout6_home_imageslider_3” are used on Pagebuilder Element: “Grandesport_layout6_widget_slidershow”

<a href="#"><img src="{{media url="wysiwyg/ves_grandesport/store6/slidershow/2.jpg"}}" alt="" /></a>
<div class="slidershow-info slidershow-info-v2"><div class="container">
<a class="button btn-lg" title="Shop Now!" href="#">SHOP NOW</a></div></div>

 

7. “Grandesport_popup” content popup when load page

{{widget type="Ves\BaseWidget\Block\Widget\Html" title="Join Venustheme's Club" html="SHVycnkuLi4gb2ZmZXIgZW5kcyBzb29uIQo8aDU+R2V0IEFjY2VzcyBUbyA2MCsgTWFnZW50byB0aGVtZXMgZm9yIG9ubHkgJDg0PC9oNT4KPGEgY2xhc3M9ImJ1dHRvbiIgdGl0bGU9IkpvaW4gTm93ISIgaHJlZj0iaHR0cDovL3d3dy52ZW51c3RoZW1lLmNvbS8iPkpPSU4gTk9XITwvYT4="}}

config in Admin panel > Venustheme > Ves Theme Settings > General > Popup Promotion Settings

8. “grandesport_header_contact” show in header default

<span>For help & Advice call</span> <label>(800)</label> 333-38-27-00

9. “grandesport_header2_contact” show in header 2

<div><label>(800)</label> 333-38-27-00<p>Phone number:</p> </div>
<div><label>(495)</label> 604-12-00<p>Fax:</p> </div>

Widgets Diagram

Widgets in the Grandesport theme

In admin panel > Content > Elements > Widgets

  1. Grandesport_sidebar_categories
  2. Grandesport_sidebar_productlist
  3. Grandesport_category_banner

Extensions

Ves Blog

1. How To Change URL link:

Go to Admin Panel > Venustheme > Blog Management > Blog Settings > General Settings

Config RSS Feed: enable/disable it in the pages

 

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

Show on frontend:

In the case, the post page will show elements: Breadcrumbs, image, title, description, comment count, create time, socials and hits.

>> Config comment in detail post

>> Config related posts block in detail post

 

3. Config show/hidden elements in Category page

Show on frontend

 

4. How To Change page layout for each blog category

Go to Admin Panel > Venustheme > Blog Management > Manage Blog Category > 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 > Venustheme > Blog Management > Manage Blog Category > Edit 1 category or add new category > Design tab:

 

You can config to show blog item on responsive at here

List view mode: htpp://demo4coder.com/grandesport/blog/customer-stories.html

Grid view mode: http://demo4coder.com/grandesport/blog/best-practice.html

 

Ves Megamenu

Ves megamenu provides powerful and most advanced menu, we’re going to describe detailed instructions how to use this powerful menu features as our demo site.

For general menu settings, please go to Admin Panel > Venustheme > Menu Management like below image and then follow the below instructions. It shows you how to config:

 

1. Horizontal menu:

Note:
– You can review “Structure Preview” to easy config the module.
– You must press “Update” button after each amendment.

 

Menu item “HOME”

How to config menu item, namely “Home” on back-end :

  • Enter Name for item menu
  • Add class “full-width” to fullwidth or Setting width dropdown
  • Setting Main Content Type: Child menu item
  • Setting Child Menu Column: 3 columns

 

Menu item “PRODUCTS”

 

How to config menu item, namely “Products” on back-end

– Add Header block width html content:

<div class="pull-left">
 <ul class="links">
  <li>Recommended:</li>
  <li><a href="#">Configurable</a></li>
  <li><a href="#">Galaxy S3</a></li>
  <li><a href="#">Galaxy S4</a></li>
  <li><a href="#">iPhone 5</a></li>
 </ul>
</div>
<div class="pull-right">
 <ul class="links">
  <li><a href="#">Galaxy S4</a></li>
  <li><a href="#">iPhone 5</a></li>
 </ul>
</div>

 

– Add left block width: 25% and content:

<img src="{{media url="wysiwyg/ves_grandesport/all/megamenu/5.jpg"}}" alt="" width="370" height="320" />
<h4 class="block-title">Featured Category</h4>
<p>This is a custom block ready to display any content. You can add blocks to any category in the catalog...</p>
<br>
<a href="#">View Category <em class="fa fa-angle-double-right"> </em></a>

 

– Add Main content width : 50%

Setting Main Content Type: Child menu item

Setting Child Menu Column: 3 columns

 

– Add Right Block width 25% and widget to content:

<div>{{widget type="Ves\Megamenu\Block\Widget\Products" widget_title="Latest Products" product_source="latest" categories="20" number_item="2" column="1" enable_owlcarousel="1" number_item_percolumn="1" autoplay="1" autoplay_timeout="3000" autoplay_hoverpause="1" nav="1" loop="1" show_name="1" show_price="1" show_review="1" show_image="1" image_width="270" image_height="290"}}</div>

 

– Add Bottom block width html content:

<div class="pull-left">
 <ul class="links">
  <li>Recommended:</li>
  <li><a href="#">Configurable</a></li>
  <li><a href="#">Galaxy S3</a></li>
  <li><a href="#">Galaxy S4</a></li>
  <li><a href="#">iPhone 5</a></li>
 </ul>
</div>
<div class="pull-right">
 <ul class="links">
  <li><a href="#">Galaxy S4</a></li>
  <li><a href="#">iPhone 5</a></li>
 </ul>
</div>

 

Menu Item “SHOP”

How to config menu item, namely “Shop” on back-end

– Add submenu

– On each submenu of “Shop”, Main Content dropdown, add width Ves-Megamenu:Product

<div>{{widget type="Ves\Megamenu\Block\Widget\Products" product_source="latest" categories="11" number_item="3" column="3" number_item_percolumn="1" show_name="1" show_price="1" show_review="1" show_image="1" image_width="270" image_height="290"}}</div>

You can change “categories” for each submenu item. ex: categories=”11″ (category width ID=11)

 
 

2. Vertical menu with Alias: menu-vertical (in demo 3):

 

How to config Vertical Menu on back-end

 

3. Vertical menu with Alias: sidebar-categories-vertical (in category page):

 

How to config Vertical Menu on back-end

 

 

How To Create Simple Menu & Change Top Menu – Magento 2 Mega Menu Tutorials

How To Create 6 Menu Types – Drag & Drop Magento 2 Mega Menu Tutorials

How To Style Your Menu without editing css file – Magento 2 Mega Menu Tutorials

 

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