Our brands

Guide Ves Flipcart Magento2

Getting Started

Getting Started

Ves Flipcart 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 Flipcart 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

M2themes 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:

Ves Flipcart 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/flipcart/landing

Purchase It Now

Theme Configuration

Homepage Configuration

Ves Flipcart have 3 different homepages built by Ves Page Builder module.

I. Flipcart Home Page Default:

link demo

II. Flipcart Home Page 2:

link demo

III. Flipcart Home Page 3:

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.

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.

Go to back-end > Ves Pagebuilder > Manager page profile > Edit profile name “Flipcart Home Page 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 > Ves Pagebuilder > Manager page profile > Choose to edit desired homepage > Edit ““Content Carousel” widget.

  1. Flipcart Default Slider 1
  2. Flipcart Default Slider 2

Note: Ves Flipcart 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 page builder profile

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

{{widget type="Ves\BaseWidget\Block\Widget\Image" file="wysiwyg/ves_flipcart/banner-10.jpg" image_size="100%" alignment="left" popup_type="colorbox" link="women.html"}}

+ How To Config In The Backend

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

>> Select your categories and config load ajax for them. config After tab title is clicked for the 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\fresh\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:

+ In the back-end, we used the widget, namely “Simple Content Html Block” on page builder profile

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

+ In the back-end, we used the widget, namely “Simple Content Html Block” on page builder profile

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

+ In the back-end, we used the widget, namely “Simple Content Html Block” on page builder profile

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

In the back-end, we used the widget, namely “Ves Base: Banner Countdown Timer” on page builder profile. To change image slider, please Go to back-end > Ves Pagebuilder > Manager page profile > Choose to edit homepage > Edit “Ves Base: Banner Countdown Timer” widget.

Edit Timer Deals

Header Configuration

Ves Flipcart provides 3 header styles, you can choose one of them here.

Backend config:

To Config Header Default, Go to Admin Panel >> VES THEMESETTINGS >> Header >> General Settings >> Choose ” Default” Header Layout

Code html at this path file

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

Backend config:

To Config Header 2, Go to Admin Panel >> VES THEMESETTING >> Header >> General Settings >> Choose ” Default 2″ Header Layout

Code html at this path file

app\design\frontend\Venustheme\ves_flipcart\Ves_Themesettings\templates\header\default2.phtml

Backend config:

To Config Header 3, Go to Admin Panel >> VES THEMESETTING >> Header >> General Settings >> Choose ” Default 3″ Header Layout

Code html at this path file

app\design\frontend\Venustheme\ves_flipcart\Ves_Themesettings\templates\header\default3.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 Proflies

The frontend show:

How To Config footer profiles in backend

Go to back-end > Ves Themesetting > Footer > Custom HTML click button “Insert Widget

Select Widget : “ Ves Block Builder: Generate Block Builder Profile

Choose Block Id : “Flipcart Footer

 

How To Edit Our Service

Go to back-end > Ves PageBuilder > Manage Block Proflie > Choose Edit Block Flipcart Footer

In the back-end, we used the widget, namely “HTML Block” on page builder profile. To change content our service, please  Choose edit “HTML Block” widget.

Edit Content our service

How To Edit Footer Logo

In the back-end, we used the widget, namely “HTML Block” on Manage block profile. To change Logo , please Go to back-end > Ves Pagebuilder > Manager block profile > Choose to edit Flipcart Footer > Edit “HTML Block” widget.

Edit Logo, text content :

How To Edit Footer Links

In the back-end, we used the widget, namely “Block Links” on Manage block profile. To change links , please Go to back-end > Ves Pagebuilder > Manager block profile > Choose to edit Flipcart Footer > Edit “Block Links” widget.

Edit Text Links, Link url :

How To Change Logo Payment

In the back-end, we used the widget, namely “HTML Block” on Manage block profile. To change Logo , please Go to back-end > Ves Pagebuilder > Manager block profile > Choose to edit Flipcart Footer > Edit “HTML Block” widget.

Edit Title, images logo :

How To Edit Copyright and Custom Links

In the back-end, we used the widget, namely “HTML Block” on Manage block profile. To change Copyright , please Go to back-end > Ves Pagebuilder > Manager block profile > Choose to edit Flipcart Footer > Edit “HTML Block” widget.

Edit Copyright , custom links :

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 > Ves ThemeSettings > General

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

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

On front-end, it is shown like below image:

3. Language Switcher and Currency Switcher tab:

This block setting group custom code in this file

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

Config Footer

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

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

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
3. Product Image Setting

Config Product View Page

– Name config:
– 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 : number items and item show on responsive


– Frontend show:

– Config Upsel product : number items and item show on responsive

– Frontend show:

Blocks Diagram

Static Blocks Diagram

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

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

1. “Flipcart Default Slider 1″, “Flipcart Default Slider 2″, are using widget “Content carousel” on homepage “Vesflipcart Home Page Default”

<p><a href="{{store url="men.html"}}"><img src="{{media url="wysiwyg/ves_flipcart/slide-1.jpg"}}" alt="" /></a></p>
<div class="slider-content a-center">
<h5>Nutrition</h5>
<h1>Plum Organics <br />$0.35 <span>/ounce</span></h1>
<a class="btn" href="{{store url="women.html"}}">Shop Now<i class="fa fa-chevron-right"></i></a></div>

2. “Flipcart Home2 Slider 1″, “Flipcart Home2 Slider 2″, are using widget “Content carousel” on homepage “Vesflipcart Home Page 2”

3. “Flipcart Home3 Slider 1″, “Flipcart Home3 Slider 2″, “Flipcart Home3 Slider 3″, are using widget “Content carousel” on homepage “Vesflipcart Home Page 3”

4. “Sidebar Html Blocks ” show on Sidebar Left in Category page: http://demo4coder/flipcart/fashion.html

<div class="block block-html">
<div class="block-title"><span>Html blocks</span></div>
<div class="block-content">
<p>Marketers/advertisers usually focus their efforts on the people responsible for making the purchase. In many cases, this is an effective approach but in other cases it can make for a totally useless marketing campaign.</p>
</div>
</div>

4. “Button Download App” show button Download on Header

<div><a class="btn btn-default a" title="Download App" href="#">Download App</a></div>

5. “Help Link” show Help link on Header


<div><a class="link-help" title="" href="#"><i class="fa fa-question-circle"></i>Help</a></div>

6. “Quick Link” show Quick Link on Flipcart Home Page 3

<ul>
<li><a href="#">Mobiles</a></li>
<li><a href="#">TV</a></li>
<li><a href="#">Washing Machine</a></li>
<li><a href="#">Cameras</a></li>
<li><a href="#">Gold Coins</a></li>
<li><a href="#">Fans</a></li>
<li><a href="#">Furniture</a></li>
<li><a href="#">Refrigerators</a></li>
<li><a href="#">Laptops</a></li>
<li><a href="#">Bedsheets</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Food</a></li>
<li><a href="#">Lighting</a></li>
</ul>

7. “Categories Product” show Categories list in Categories page

<div>{{widget type="Ves\PageBuilder\Block\Widget\Builder" block_id="9"}}<div>

We used the widget, namely “Categories List” on blocks builder profile. To change categories, please Go to back-end > Ves Pagebuilder > Manager block profile > Choose to edit Categories Product > Edit “Categories List” widget.

Edit Categories List:

8. “Flipcart Custom Links 1”, “Flipcart Custom Links 2”, “Flipcart Custom Links 3” show Custom Links in Flipcart Home Page Default

<div class="ves-widget block block-title">
<div class="block-title">Electronics</div>
<div class="widget-inner block-content">
<div class="pretext-html">10% instant discount</div>
<div class="links-more"><a href="#"><i class="fa fa-long-arrow-right"></i>See more</a></div>
</div>
</div>
<div class="box-content">
<ul>
<li><a href="#">Televisions</a></li>
<li><a href="#">Full HD TVs</a></li>
<li><a href="#">Smart TVs</a></li>
<li><a href="#">Micromax TVs</a></li>
<li><a href="#">Audio &amp; Video</a></li>
<li><a href="#">Home Audio Systems</a></li>
</ul>
<ul>
<li><a href="#">DTH Services</a></li>
<li><a href="#">Headsets with mic</a></li>
<li><a href="#">Mp3 &amp; Media Players</a></li>
<li><a href="#">Video Players</a></li>
<li><a href="#">Computer Speakers</a></li>
<li><a href="#">DJ, Karaoke &amp; Mics</a></li>
</ul>
<div class="images"><img src="{{media url="wysiwyg/ves_flipcart/categories-img-1.jpg"}}" alt="" /></div>
</div>

9. “Flipcart Custom Links 4”, “Flipcart Custom Links 5”, “Flipcart Custom Links 6” show Custom Links in Flipcart Home Page 2

<div class="ves-widget block block-title">
<div class="block-title">Fresh Food</div>
<div class="widget-inner block-content">
<div class="pretext-html">10% instant discount</div>
<div class="links-more"><a href="#"><i class="fa fa-long-arrow-right"></i>See more</a></div>
</div>
</div>
<div class="box-content">
<ul>
<li><a href="#">Fresh Fruit</a></li>
<li><a href="#">Fresh Vegetables</a></li>
<li><a href="#">Fresh Salad Vegetables</a></li>
<li><a href="#">Side Salads</a></li>
<li><a href="#">Milk, Butter &amp; Eggs</a></li>
<li><a href="#">Cheese</a></li>
</ul>
<ul>
<li><a href="#">Dairy Alternatives</a></li>
<li><a href="#">Fresh Meat</a></li>
<li><a href="#">Fresh Chicken &amp; Poultry</a></li>
<li><a href="#">Chilled Fish &amp; Seafood</a></li>
<li><a href="#">Counters</a></li>
<li><a href="#">Chilled Fruit Juice</a></li>
</ul>
<div class="images"><img src="{{media url="wysiwyg/ves_flipcart/categories-img-4.jpg"}}" alt="" /></div>
</div>

10. “Blog Latest” show Blog latest on sidebar right in Blog page

<div class="latest-blog-wrap">{{widget type="Ves\PageBuilder\Block\Widget\Builder" block_id="10"}}</div>

We used the widget, namely “Ves Blog: Latest Post” on blocks builder profile. To edit Blog Latest, please Go to back-end > Ves Pagebuilder > Manager block profile > Choose to edit Blog Latest New > Edit “Ves Blog: Latest Post” widget.

Edit Blog latest carousel layout:

11. “Blog sidebar additional” show Photo Stream and HTML Block on sidebar right in Blog page

<div class="blog-sidebar-additional">{{widget type="Ves\PageBuilder\Block\Widget\Builder" block_id="11"}}</div>

To edit Blog sidebar additional, please Go to back-end > Ves Pagebuilder > Manager block profile > Choose to edit Blog sidebar additional > Edit  widget.

– Edit Photo stream, choose edit “Ves Base: Gallery Images“:

– Edit HTML blocks content, choose edit “Ves Base: Simple Content Html Block“:

12. “Menu Vertical” show Menu Vertical on Header

<div>{{widget type="Ves\Megamenu\Block\Widget\Menu" title="Departments" alias="menu_vertical"}}</div>

We used the Megamenu, namely “Menu Departments” on Ves Megamenu. To edit menu, please Go to back-end > Ves Megamenu > Menu Management > Choose to edit Menu Departments

Edit Menu:

13. “Banner Sidebar Right” show Banner on sidebar right in Product Detail page

<div class="ves-widget widget-images block">
<div class="image-item"><a class="ves-btnlink img-animation" title="Image" href="#"> <img class="img-responsive  left-block " src="{{media url="wysiwyg/ves_flipcart/banner-3.jpg"}}" alt="Image" /> </a></div>
</div>

Extensions

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 > Ves Megamenu > Menu Management like below image and then follow the below instructions. It shows you how to config:

 

1. Horizontal menu:

Menu item” Health & Beauty”

How to config menu item, namely “Health & Beauty” on back-end :

  1. – add submemu
  2. – setting width dropdown: 600px
  3. – Setting Main Content Type: Child menu item
  4. – Setting Child Menu Column: 3 columns

 

 

Menu item” Automotive”

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

– Add submenu

– Add dropdown width: 100%

– Add Main content width : 60%

Setting Main Content Type: Child menu item

Setting Child Menu Column: 3 columns

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

<div>{{widget type="Ves\Megamenu\Block\Widget\Products" widget_title="Latest Products" product_source="latest" categories="20" number_item="8" column="2" enable_owlcarousel="1" large_max_items="2" large_items="2" portrait_items="1" tablet_items="1" tablet_small_items="1" mobile_items="1" number_item_percolumn="1" nav="1" show_name="1" show_price="1" show_new_label="1" show_sale_label="1" show_image="1" image_width="270" image_height="350" show_compare="1" show_wishlist="1" show_addtocart="1"}}</div>

– 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:

Ves Blog

1. How To Change URL link:

Go to Admin Panel > Ves Blog > Configuration

 

 

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

 

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

 

You can config to show blog item on responsive at here

FAQ

General Questions

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