Our brands

Guide For Venus Magento 2 Themes

Getting Started

Getting Started

template magento 2
venustheme guide
ves guide

Installation & Update

Theme Installation

In this tutorial, we will show you how to install theme step by step. We will take Ves Oshop ( one of our themes) as an example. For other themes, you can do the same way.

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

theme_file_decompress-1

Step2: Upload the file [theme_name]_media.zip (ex: ves_oshop_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 “Ves_Oshop_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 – oshop”

Magento 2.1.x:

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

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.7 or magento 2.1.0). At here we use 2.1.0

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_magento21o.sql or /database.sql” into the database which you just created.

Step 3: Upload and decompress the file [THEME]_magento210_quickstart.zip (ex: ves_oshop_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.

– Setup steps by steps as the guide: http://www.venustheme.com/how-to-install-magento-2-clear-detail-oriented-guide-to-set-up-magento-2-0-easily/

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 [email protected] \
--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 Customization

Theme Version Update

Upgrade version 2.2.0

Magento 2.1.x :

shortcode of widget product:

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:``;]]"

Magento 2.2.0

shortcode of widget product:

conditions_encoded="^[`1`:^[`type`:`Magento||CatalogWidget||Model||Rule||Condition||Combine`,`aggregator`:`all`,`value`:`1`,`new_child`:``^]^]"

Please go to admin / Venustheme / Manage Elements / Edit element product / Edit widget product tab: and view shortcode and change it the same:

Theme Configuration

Homepage Configuration

Introduction

Venustheme are using Ves Pages Builder extension to build homepage demo layout. The extension are using bootstrap 3 to layout and style for elements (some base widgets: button, carousel, link, accordion, tabs,…). With the extension admin user can add/edit layout for any cms page (ex: homepage, about us, portfolio, contacts us, gallery, lookbook, hot deals, promotion page, our teams, FAQ, …). Venustheme are using the extension to build homepage and footer layout profiles.

Follow bellow sites and tutorials to learn more about the extensions:

– You should go to admin > Stores > Configuration > General > Web > Default Pages > Cms Home Page.- Choose the cms homepage which was built by ves page builder, then save the config and clean cache.

– You should go to admin > Ves Page Builder > Pages Builder  > Manage Page Profile. Edit the homepage profile which you want to custom. At here you can create new homepage layout as you want.

– Then you add the page builder information and design the layout in “Design tab”

Page information: Config page title, url key (the url key will been used to link to same cms page), store view, status,…

 

Design: The tab will allow we design layout for main content of cms page with bootstrap layout

Note: you should config layout columns for each screen sizes by click on “Design In” options.

 

CMS Page Information: Config layout, design, custom design for cms page which the page builder will been linked to.

 

Settings: advanced config for the page builder profile

 

Custom Style/ JS: allow you add custom css code, js code for the page builder profile.

– After save a CMS Page was created:

– Edit the page builder profiles which you want to mix. The pages builder extension allow you show short code of row, widget, we can copy the shortcode to paste into your default homepage builder profile.Edit row short code.

 

Edit widget shortcode

 

– You should edit the homepage page builder profile which your current store are using. Then add row and insert shortcode which you copied on other page profile, or add widget and add widget short  code which you copied

 

– Save the page builder profile.

– Go to admin > Ves Pages Builder > Block Builder > Manage Block Profile. Then add/edit footer profile

– You can change design layout same as page builder profile.

– To change footer layout profile you should go to admin > Ves Theme Settings > Footer. At here Venustheme are providing 3 footer positions: footerTop, footerCenter, footerBottom.
Venustheme defined there position in the file: app/design/frontend/Venustheme/theme name/Ves_Themesettings/layout/default.xml  and call to .phtml files in the folder: app/code/Ves/Themesettings/view/frontend/templates/html/footer/

– Enable the position which you want (we use footerTop). Then insert widget shortcode in text editor (you should hide editor to see the shortcode in textarea). The widget shortcode will call to block builder profile.

Ex:

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

 

Type : “Ves\PageBuilder\Block\Widget\Builder”

block_id : id of block builder profile which we created in Ves Page Builder > Manage Block Profile

Note: You should wrap shortcode in <div> tag, it will fix some break html tag (because if dont have div the text editor will add wrong <p> tag)

Deals Configuration

In venustheme we are using option “Enable Countdown Timer” to show countdown timer for products have special prices (deal products). The option we are using on widget products list in pages builder, and theme settings. So, we can  show countdown timer for products in carousels on homepage, products in category page, related products, upsell products.

preview_deal

1. To config product as deal:

Go to admin > Products > Catalog > Edit product. Click on link “Advanced Pricing” under Price option, a popup will show to input special price, special price from, to date. You should input special price, and Special Price to date (required to date to show countdown timer):

advanced_pricing

2. Config deal on widget products list carousel: 

– Go to admin > Ves Pages Builder > Manage Page Profile > Edit homepage profile of the current theme. Then add/edit the widget “Product List: Tabs By Rules” or “Product List: Tabs By Categories”

deal_in_widget

– Enable option as this:

deal_in_widget2

3. Config deal on product list(related products, upsell products, crossel product), widget(new product)

– Go to admin > Ves Theme Settings > Product Listing > Product Settings. Enable option “Enable Countdown timer”

product_list_setting

4. Config Deal for Product in Category page

– Go to admin > Ves theme settings > Category Page > Enable option “Enable countdown timer”

category_setting

 

Config New And Sale Labels

Venustheme allow you show new and sale labels on each product item on frontend. You should config enable option “Enable New Label”, “Enable Sale Label” in ves theme settings (product listing, product page, category page) and in Product List widgets in pages builder profile (Product List: Tabs by rules/categories)

1. Config product as new (to show new label):

– Go to admin > Products > Catalog > edit products which you want to show new label.

– Go to section “Autosetting”, config new product from date, to date to show new label for the product from date to date.

config_new_product

2, Config product have sale label

– Go to admin > Products > Catalog, edit products which you want to show sales label.

– Edit special prices for the product.

advanced_pricing

 

Custom Tabs Configuration

Venus Theme provides several types of Custom Product Tabs. You can add the custom tabs in Admin > Ves Theme Settings > Product Page > Tabs.
– Product Custom Attribute Tabs: You can input attribute code and tab title.
– Product Custom Tabs: You can select cms static block or input custom content in text editor

config_custom_tab

 

New theme settings update custom tabs as this:

config_custom_tab

Tabs by product attribute code: You can input attribute code and category ids, product skus.
Tab by cms block: You can input static block’s id and category ids, product skus.

category ids, product skus: allow custom tabs show on categories or products which matched with the setting.

Translate Configuration

Venustheme provide the translate csv file (for english language) in the folder: app/design/frontend/Venustheme/theme name/i18n/en_US.csv

If you want to translate there static text in theme, you should edit in the file or translate the file to other language.

– You should download and setup language package for magento 2 site before. Download the language pack at here: https://crowdin.com/project/magento-2

– Or you can run the ssh command to build the language csv file in the theme and translate it.

php bin/magento i18n:collect-phrases --output="app/design/frontend/Venustheme/theme_name/i18n/language_code.csv" app/design/frontend/Venustheme/theme name

For example:

php bin/magento i18n:collect-phrases --output="app/design/frontend/Venustheme/flashshop/i18n/en_US.csv" app/design/frontend/Venustheme/flashshop

 

More information about the command at here: http://devdocs.magento.com/guides/v2.1/config-guide/cli/config-cli-subcommands-i18n.html

– Then you can translate the text in csv file.

More information you can view at here: http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/translations/xlate.html

 

Admin Theme Settings

Config General

Go to admin > Ves ThemeSettings > General

 

General settings

 

General Options:

– Maximum Page Width: The option to config width of all container class on frontend. You can choose fixed value or input a custom value (with px)

960 px
1024 px
1280 px
1360 px
1440 px
1680 px
Custom width…

– Maximum Page Width: the option will show when you choose “Maximum Page Width” = “Custom Width…”. Input the custom container width with value as you want. Ex: 1200px

Skins: There skin color which were supported in the current theme. There skin options were loaded css file in the folder: app/design/frontend/Venustheme/theme name/Ves_Themesettings/web/css/

how to add skin for theme?

– Layout: To fix frontend page layout. Default not choose.

Boxed Desktop Large – will add css class “boxed-lg”  in body tag on frontend

Boxed Desktop Medium – will add css class “boxed-md”  in body tag on frontend

Direction: Config direction “Left to right” or “Right to left” for content on frontend. It will add class on html tag on frontend.

Ajax Cart Settings: The option to allow display product image on ajax result popup after add the product to cart.

 

Body Settings

–  Body Classes: Define custom css class for <body> tag. We use the option to style for some demo of venus theme. We can input one or more css classes

– Background Color: Custom background color for all elements under body tag

– Background Image: Upload image to show as background image for body tag

– Background Attachment and Background Position: Will generate css code for background attributes

– Pattern: If you dont want use background image option you can use pattern image to set background image for body tag.

– Top Padding and Bottom Padding: will generate css code to set padding top, bottom for body tag.

Panel Tool – enable: Show/hide panel settings tool on frontend

 

Font Settings

Define custom fonts for elements under body tag. Font settings have 2 section “Body Font” and “Custom Font”, they defines custom fonts for some selected elements.

Body Font: You can input font size, font weight, and font family for elements under body tag. With Font Family, you can use custom font (Default), load google font or choose our fixed fonts.

Custom Font: The option to allow you define font family, font weight, font size for selected elements – Font targets

Color

In the section, you can override color for text, link, button and when hover on links, hover on button

Config Header

 

General Settings

Header Layout: You can change layout for header which there layouts were supported in the theme. There options are calling to header layout .phtml files in the folder: app/design/frontend/Venustheme/<theme>/Ves_Themesettings/templates/header/

– Static Block ID: Choose the static block id (ex: you want to show phone info or banner on header) which you want to show it on header (the block was referenced default in Venustheme with block name: custom_block ) Default venustheme dont load the static block on header.

Custom Style: Enable the option, you can override text color, link color, hover link color for header.

– Outer Container: Enable the option to custom header background image, color, padding, margin (It will generate css code for class: .page-header)

Ex:

.page-header{
	color: #000;
	background-color: #fff;
}

Inner Container: Enable the option to custom background color, padding for header inner container (.page-header .ves-inner)

Ex:

.page-header .ves-inner{
  background-color: #fff;
  padding-top: 5px;
  padding-bottom: 0px;
}

 

Top Links

Enable/disable top links block, and define custom top links.

Add Custom Links: Title, link, Target, Class

Search Box

Enable/disable search form on header. Custom color, background for search box, or config text and icon for search button.

Custom Style: Enable you can override background color, hover background color, text color for search box

Search button: Config button text and icon class, button format.

 

Language Switcher

Config enable/disable language switcher block on header.

Template: Select box, Flags

Language label: show/hide language label text

Label color: override color for language label

 

Currency Switcher

Config enable/disable currency swticher block on header.

Template: Select box, Flags

Currency label: show/hide currency label text

Label color: override color forcurrency label

 

Sticky Header

Enable/disable sticky header. Enable to allow header keep on top when scroll down..

Custom Style: Enable to override color, background color, link color, text color for elements under sticky header

Elements: Choose all elements or specify elements will show on sticky header (when scroll down)

 

TopBar

Enable/disable top bar blocks. The topbar block was defined in the header.phtml file as this:

<!-- Top bar -->
	<?php if($show_topbar): ?>
	<div class="panel wrapper page-topbar clearfix <?php echo $topbar?"sticky-item":"sticky-item-hidden"  ?>">
		<div class="ves-inner page-main">

			<?php echo $this->getChildHtml('skip_to_content') ?>

			<?php if($currency_block = $this->getChildHtml('currency')): ?>
			<div class="switcher-currency-wrapper hidden-sm hidden-xs">
				<?php echo $currency_block ?>
			</div>
			<?php endif; ?>
			<?php if($store_language = $this->getChildHtml('store_language')): ?>
			<div class="switcher-language-wrapper hidden-sm hidden-xs">
				<?php echo $this->getChildHtml('store_language') ?>
			</div>
			<?php endif; ?>
		</div>
	</div>
	<?php endif; ?>

Also you can enable custom style for elements in the topbar block.

 

Top Cart

Allow config top cart format: icon, text, icon and text and change icon cart class (Default icon cart class: fa fa-shopping-cart)

Config Footer

 

At here we can config footer layout profile, or custom style for footer elements. Venustheme defined 3 positions for footer: Footer Top, Footer Center, Footer Bottom

 

General Settings

Allow custom style for elements in footer

Copyright: Custom copyright on footer (if the theme are using block builder to build footer layout, the option will disable)

Scroll Top: Config enable/disable scroll top icon, change style for scroll top element.

 

Footer Top Settings

Enable Footer Top: Enable/disable footer top block

– Choose CMS Static Block: Choose cms static block or custom html to generate content and layout for footer top. Default venustheme use “Custom Html”

– Custom HTML: You can input html, text to show on footer top. At here , venustheme call widget block builder profile to call footer builder profile

The content as this:

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

The widget short code will call to block builder profile with id = 1 to block builder profile in admin > Ves Page Builder > Manage Block Profiles.

Enable custom: to allow override styles for elements under footer top.

 

Footer Center Settings

Enable Footer Center: Enable/disable footer top block

– Choose CMS Static Block: Choose cms static block or custom html to generate content and layout for footer center. Default venustheme use “Custom Html”

– Custom HTML: You can input html, text to show on footer center. At here , venustheme call widget block builder profile to call footer builder profile

Enable custom: to allow override styles for elements under footer center.

 

Footer Bottom Settings

Enable Footer Bottom: Enable/disable footer top block

– Choose CMS Static Block: Choose cms static block or custom html to generate content and layout for footer bottom. Default venustheme use “Custom Html”

– Custom HTML: You can input html, text to show on footer bottom. At here , venustheme call widget block builder profile to call footer builder profile

Enable custom: to allow override styles for elements under footer bottom.

Config Product Listing

 

The settings allow you custom styles, enable/disable options for product item in there blocks: Cross sell, related products, upsell products, new products…

 

General

Override on Product List Widget Settings: allow override settings of widget in extension: ves_productlist

 

Product Design

In this tab, you can configure text color, backgound color, design button icon and text of product in product list(related products, upsell products, crossel product), widget(new product), product list in category page.

 

Product Settings

In this tab, you can configure enable/disable product elements in product list(related products, upsell products, crossel product), widget(new product)

enable/disable: product name, price, review rating, description, buttons, countdown timer, new/sale labels

Product image : enable/disable product image, config image width/height, config alternative image (swap image). With alternative image you should config value of alternative image in gallery (by label or sort order), default we use sort order.

 

Config Category Page

 

At here you can config for category information, and product item in listing products of category.

 

General Settings

– Category Name: Enable/disable category name

– Category description: Enable/disable category description

– Category image: Enable/disable category image

– Default image: Show default image if category dont have image

– Top/Bottom Toolbar: Enable/disable sort, paging toolbar on top and bottom

 

Product Settings

Config enable/disable for information of product item in listing products.

– Enable/disable: product name, buttons (addtocart, wishlist, compare, quickview), description, product image, alternative image, Review ratings, new/sale label, price, Countdown timer.

Format: format buttons for addtocart, wishlist, compare, quickview.

  • Text: Show only text
  • Icon Class: Show only icon (use icon class font)
  • Text, Icon Class: Show button text, then icon class
  • Icon Class, Text: Show icon class, then show button text

Config Product Detail Page

 

Config enable/disable information of product detail page. Also config custom tabs, related products, upsell productss block.

 

Element

Config show/hide some information on product detail page: name, sku, buttons, rating, review, price, new/sale label

And can override css styles for there elements.

Thumbnail Layout: config thumbnail images layout for gallery (horizontal or vertical)

– Thumbnail Location: Config thumbnail images position on gallery block (Top or Bottom)

– Show Zoom Image: Show/hide zoom main image

 

Tab

Allow you add custom tab for product detail page.

View the settings at here: Custom Tabs Configuration

Config Contacts Page

 

The settings allow we config for google map, contact information will show on the page: http://<your domain>/contact/

The contact form we defined in the file: app/design/frontend/Venustheme/<theme>/Magento_Contact/templates/form.phtml

 

Google Map

– Enable/Disable google map

– Input google map api key. You can get it at here: https://developers.google.com/maps/documentation/javascript/get-api-key

– Config map location by input your address.

– Config map width, height, zoom and map maker

 

Contact Us Informations

– Enable/Disable contact us information

– Input your information which you want to show: address, phone number, fax, custom information by input in text editor “Custom Html”

 

Config Cart Page

 

At here you can define cross sell carousel block (Limit products, number items show on carousel), and show static block on cross sell block.

 

Custom Css and JS

 

Custom Css: You can input custom css code at here. The css code will been loaded on <header> tag on frontend.

Custom Js: You can input custom JS code at here. The JS code will been loaded on <header> tag on frontend.

Extensions

Products Tabs Configuration

General Information

Venustheme are using best products tabs and slider extensions. The extension name is: ves products list. We are sharing free it at here: http://landofcoder.com/magento-2-product-list.html

With extension Ves Products List, we can define there widget blocks on frontend: Products tabs by rules, products tabs by categories, products carousel

Demo widgets on frontend:

Products Tabs – horizontal carousel (4 columns)

products tabs

 

Product Carousel 1 – horizontal carousel (4 columns)

products carousel

 

Product Carousel 2 – vertical layout (1 column)

 

products carousel 2

How to config Tabs By Categories?

1, You should insert widget “Product List: Tabs By Categories” in pages builder profile, cms block/page content or add widget instance (admin > content > widgets)

Insert tab widget

2, Then you should config widget options:

General Settings:

General settings

Tab Settings:

+ Source Tab Setting:

Source tab setting

+ jQuery EasyTabs Plugin Options:

Tab Js options

Item Settings:

+ Show/hide options for meta information:

Product Item settings

+ Product image options:

image options

+ Compare, Wishlist Links options:

compare and wishlist buttons

+ Addtocart and quickview options:

addtocart and quickview

 

Carousel Settings:Carousel settings

– Bootstrap Carousel Settings:

bootstrap carousel

– OWL Carousel Settings:

owl carousel

How to config Tabs By Rules?

– You should insert widget “Product List: Tabs By Rules“.

– Then config “Tab Settings” as this:

config tab by rules – Other settings, you can config as widget “Tabs By Categories” as above

How to config products carousel?

– You should insert widget “Product List: Tabs By Rules“. But just add only one “Source for Tab

– Dont use options in “jQuery EasyTabs Plugin Options

– Other option you can use as widget “Tabs By Categories” as above

How to config products carousel with vertical layout, 1 column as block “Best Sellers”?

– You can add widget products carousel, and config as “how to config products carousel?

– However on carousel settings section. We should config number columns = 1 for all screen sizes, and set number items show on a page as you want:

+ bootstrap carousel setting to show vertical layout:

bootstrap settings for vertical carousel

+ owl carousel setting to show vertical layout:

owl carousel vertical settings

Guide for ves blog

To config and manage ves blog extension, please read the guide: Ves Blog Guide

Guide for Ves Testimonial

To config and manage Ves Testimonial, please read the guide: Ves Testimonial Guide

Megamenu Configuration

General Information

Venustheme provides powerful and most advanced megamenu. You can check demo of ves megamenu at here: http://demo4coder.com/magento2/mega-menu

Megamenu Settings

You should add megamenu profiles in admin > Ves Megamenu > Menu Management, add new menu profiles. Venustheme are using top-horizontal menu profile with “Alias” = “menu-top”, so to add menu top you should add menu profile with alias “menu-top”.

megamenu layout xml

 

1. Create menu profile

add menu profile

 

2. Manage and create menu items (design menu items as you want)

config menu items

 

The layout of dropdown content for each menu items: header, content, left, right, bottom. We can config to show/hide content on there positions.

dropdown layout

 

3. Click Save Button to save the menu profile into database

 

Note: More about config and how to use the megamenu extension, please view at here: http://landofcoder.com/magento-2-mega-menu.html/

And view videos guide at here:

install-menu
create-simple-menu
horizontal-_-vertical-menu
create-6-menu-type-
icon-and-label
how-to-style-your-menu-without-editing css-file

 

Can I add more menu profiles to show on same page?

– Yes, you can add more menu profiles. To show on other position on frontend, you can use reference block in layout xml file (app/design/frontend/Venustheme/theme name/Ves_Megamenu/layout/default.xml) or add widget instance (admin > Content > Widgets)

With layout default.xml we use the reference code:

<referenceBlock name="Position_Name">
			<block class="Ves\Megamenu\Block\Menu" name="menu.custom.position" as="menu_custom_position" template="Ves_Megamenu::menu_top.phtml">
				<action method="setData">
					<argument name="name" xsi:type="string">alias</argument>
					<argument name="value" xsi:type="string">menu-alias</argument>
				</action>
				<action method="setData">
					<argument name="name" xsi:type="string">layout</argument>
					<argument name="value" xsi:type="string">horizontal</argument>
				</action>
			</block>
		</referenceBlock>

With widget instance. We add widget megamenu as this:

widget menu 1

 

 

config menu widget

How I add vertical menu?

– You should add menu profile with “Desktop Template” = “Vertical Menu”

– Then reference the menu profile to position as you want. Or add widget instance, or add widget in pages builder profile.

How I add products carousel on dropdown menu?

In the module ves megamenu, it have widget “Ves Megamenu: Products”. You should add the widget in main content of the menu which you want to show it.

add_widgets_in_maincontent_menu

Then you should config for options of the widget: products source, categories, number items, carousel,..

How To Custom?

How to create child venus theme?

How do I change the fonts in theme?

Venustheme are using google web fonts. You can change the google web fonts or use your custom fonts as you want.

1. Change google web fonts:

Ex: Change body font of ves_ishop theme from “Montserrat” to “Roboto”. And custom headings font, product element font to “Verdana”

– Go to admin > Ves Theme Settings > General Settings > Font Settings. Config options “Body fonts” and “Custom fonts”

– Config “Body fonts“:

Input “Font Size” = 13px

Font Family” = “Google Fonts…”

Google Font” = “Roboto”

Character Sets” = “Latin”

Input font weight value (100px, 300px, 400px, 500px,…) as you want, or leave it empty.

body_fonts

 

– Config “Custom Fonts

Click “Add” custom font button, then choose “Custom, Google fonts” = “Roboto”, input “Font Size“, “Font Weight” as you want. Then input “Font Targets”  – This option is css selector, which html elements will been applied the custom font.

A, Custom font for heading elements:custom_heading_font

We use “Font Targets” is:

h1,h2,h3,h4,h5,h6,.block .block-title strong

B, Custom font for product element blocks:

custom_product_element_font

We use “Font Targets” is:

.product-block .product-item-inner, .product-block .product-item-details .product-item-name

2. Load and use the custom fonts:

– Upload the font file into the folder “”

– Edit the file “”

More information about the fonts in magento2 you can view at here: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/using-fonts.html

How to create new header?

Step1: Created file header1.phtml on this path:

app/design / frontend/ Venustheme/ theme_name / Ves_Themesetting / templates / header /

 

 

 

 

 

 

Step2: You can design and change position block on the header at this file header1.phtml

<?php
$ves = $this->helper('Ves\Themesettings\Helper\Theme');
$sticky = $ves->getHeaderCfg("sticky_settings/sticky");
$sticky_type = $ves->getHeaderCfg("sticky_settings/sticky_type");
$logo = $ves->getHeaderCfg("sticky_settings/logo");
$menu = $ves->getHeaderCfg("sticky_settings/menu");
$search = $ves->getHeaderCfg("sticky_settings/search");
$custom_block = $ves->getHeaderCfg("sticky_settings/custom_block");
$topcart = $ves->getHeaderCfg("sticky_settings/topcart");
$topbar = $ves->getHeaderCfg("sticky_settings/topbar");
$enable_toplinks = $ves->getHeaderCfg("toplinks_settings/enable");
$show_search = $ves->getHeaderCfg("search_settings/search");
$show_topbar = $ves->getHeaderCfg("topbar/show_topbar");

if($sticky_type == 'all'){
	$logo = $menu = $search = $topcart = $toplinks = $topbar= true;	
} 
?>
<div id="ves-header">
	<div class="wrapper">
	<!-- Top bar -->
	<?php if($show_topbar): ?>
	<div class="panel page-topbar hidden-xs hidden-sm clearfix <?php echo $topbar?"sticky-item":"sticky-item-hidden"  ?>">
		<div class="container">
			<div class="ves-inner">
				<?php echo $this->getChildHtml('skip_to_content') ?>

				<?php if($currency_block = $this->getChildHtml('currency')): ?>
				<div class="switcher-currency-wrapper hidden-sm hidden-xs">
					<?php echo $currency_block ?>
				</div>
				<?php endif; ?>
				<?php if($store_language = $this->getChildHtml('store_language')): ?>
				<div class="switcher-language-wrapper hidden-sm hidden-xs">
					<?php echo $this->getChildHtml('store_language') ?>
				</div>
				<?php endif; ?>

				<div class="header-left hidden-xs hidden-sm">
					<?php if($enable_toplinks){ ?>
						<div class="header-links-wrapper pull-left">
							<?php echo $this->getChildHtml('top_links') ?>
						</div>
					<?php } ?>
					<div class="setting-wrapper pull-left">
						<?php echo $this->getChildHtml('setting_links') ?>
					</div>
				</div>
				<div class="pull-right">
					<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('bigmart-header-links')->toHtml();?>
					<?php echo $this->getChildHtml('skip_to_content') ?>
				</div>
			</div>
		</div>
	</div>
	<?php endif; ?>
	<!-- header content -->
	<div class="header-content clearfix">
		<div class="ves-inner">
			<div class="container">
			<div class="row">
				<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
					<div class="logo-wrapper <?php echo $logo?"sticky-item":"sticky-item-hidden"  ?>">
						<?php echo $this->getChildHtml('logo') ?>
					</div>
				</div>
				<div class="col-lg-7 col-md-6 col-sm-12 col-xs-12">
					<?php if($show_search): ?>
						<div class="search-wrapper ves-autosearch">
							<div class="dropdown-toggle hidden-md hidden-lg" data-toggle="dropdown">
							    <i class="fa fa-search">&nbsp;</i>
							</div>
							<div class="search-content" role="menu">
							    <?php echo $this->getChildHtml('ves_autosearch') ?>
							</div> 
						</div>
					<?php endif; ?>
				</div>
				<div class="col-lg-2 col-md-3 col-sm-12 col-xs-12">
					<div class="minicart-warp <?php echo $topcart?"sticky-item":"sticky-item-hidden"  ?>"><?php echo $this->getChildHtml('minicart') ?>
					</div>
				</div>
			</div>
			<?php if($custom_block = $this->getChildHtml("custom_block")): ?>
			<div class="customblock-wrapper <?php echo $custom_block?"sticky-item":"sticky-item-hidden"  ?>">
				<?php echo $custom_block; ?>
			</div>
			<?php endif; ?>
		</div>
		</div>
	</div>
 
	<!-- Menu top -->
	<div class="ves-menutop clearfix <?php echo $menu?"sticky-item":"sticky-item-hidden" ?>">
		<div class="container">
			<div class="row">
				<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 hidden-xs hidden-sm ">
					<div class="vertical-menu">
						<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('bigmart-vertical-menu')->toHtml();?>
					</div>
				</div>
				<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
					<div class="ves-inner">
						<?php echo $this->getChildHtml('catalog.topnav') ?>
					</div>
				</div>
			</div>
		</div>
	</div>

	<?php if($sticky){ ?>
	<script type="text/javascript">
		require([
			'jquery',
			'Ves_Themesettings/js/theme'
			], function(){
				
				function getScroll () {
				    var b = document.body;
				    var e = document.documentElement;
				    return {
				        left: parseFloat( window.pageXOffset || b.scrollLeft || e.scrollLeft ),
				        top: parseFloat( window.pageYOffset || b.scrollTop || e.scrollTop )
				    };
				}
				jQuery(document).ready(function($) {
					var h = jQuery('.page-header').height();
					var myHeader = jQuery('.page-header');
					var hasBreadcrumbs = false;
					var breadcrumbs = jQuery(".breadcrumbs");
					if(typeof(breadcrumbs) != "undefined" && breadcrumbs.length > 0) {
						hasBreadcrumbs = true;
					}
					myHeader.data( 'position', myHeader.position() );

					jQuery(window).scroll(function(){
						var hPos = myHeader.data('position'), scroll = getScroll();
						var h_px = jQuery("#ves-header", ".page-header").outerHeight(true)+"px";

						if ( hPos.top < scroll.top) {
							jQuery('.page-header').addClass("navbar-fixed-top keep-header");
							var headerHeight = jQuery('.page-header').height();
							<?php if($sticky_type == 'specify'){ ?>jQuery(".page-wrapper").css({"padding-top":headerHeight+"px"});<?php } ?>
							jQuery(".sticky-item-hidden").css({"display":"none"});
							if(!hasBreadcrumbs) {
								jQuery("#maincontent").delay(1000).css("margin-top", h_px);
							}
						}else{
							jQuery(".sticky-item-hidden").css({"display":""});
							jQuery('.page-header').removeClass("navbar-fixed-top keep-header");
							jQuery(".page-wrapper").css({"padding-top":""});
							if(!hasBreadcrumbs) {
								jQuery("#maincontent").delay(1000).css({"margin-top": ""});
							}
						}
					});
				});
			});
	</script>
	<?php } ?>
	<?php echo $this->getChildHtml('ves_navigation'); ?>
</div>
</div>

The block is declared on this position container name=”header.container”:

app\design\frontend\Venustheme\theme_name\Ves_Themesettings\layout\defautl.xml

Example block: Setting:

Code in the header.phtml

<?php echo $this->getChildHtml('setting_links') ?>

The block is declared in .xml

<!-- TOP LINKS: settings and navigation -->
<block class="Magento\Framework\View\Element\Template" name="setting_links" as="setting_links" template="Magento_Theme::html/setting.phtml">
<block class="Magento\Store\Block\Switcher" name="store_language_custom" as="store_language_custom" template="switch/languages_custom.phtml" ifconfig="ves_themesettings_header/language_switcher_settings/language_switcher"/>
<block class="Magento\Directory\Block\Currency" name="currency_custom" before="store_language_custom" template="currency_custom.phtml" ifconfig="ves_themesettings_header/currency_switcher_settings/currency_switcher"/>
</block>

 

 

 

 

Step3: Go to admin / Ves themesetting / Header Tab: Selected header for each storeview

 

Step4:  You can change config header on module Themesetting

Go to backend / Ves Themesetting / Header /

 

Step5: Refresh cache system and view changed config the frontend

 

 

How to create new skin?

Step1:  Go to path app / design/ frontend / Venustheme / theme_name/ Ves_Themesetting / Web / css/ skins  created file skin.css

Example: Blue.css

In this file, include all css rule name, and change the color attributes, properties, text color, background color…

Example:

Sample css code (blue.css in theme Ves_Pencil):

.product-info-main .product-addto-links a:hover, .minicart-wrapper .action.showcart:hover::before, 
.minicart-wrapper .action.showcart.active::before, .header-content .header-links-options a:hover, 
.minicart-wrapper .actions a:hover, .product-reviews-summary .reviews-actions a:hover, 
.ves-megamenu .dropdown-menu a:hover
{
	color: #1979c3!important;
}
.columns a:hover, .columns .alink:hover, .breadcrumbs .item strong, 
.product-info-main .add-action:hover,
.product-info-main .price-box .price-including-tax + .price-excluding-tax .price, 
.product-options-bottom .price-box .price-including-tax + .price-excluding-tax .price, 
.product-info-main .price-box .weee + .price-excluding-tax .price, 
.product-options-bottom .price-box .weee + .price-excluding-tax .price, 
.product-info-main .price-box .weee .price, 
.product-options-bottom .price-box .weee .price, .ves-menu .ves-vertical li.level0:hover > a
{
	color: #1979c3;
}

.scrollup, .block.newsletter .action.subscribe:hover,
.product-block .product-image .product-item-actions .actions-secondary .add-to-wishlist:hover, 
.product-block .product-image .product-item-actions .actions-secondary .add-to-compare:hover, 
.product-block .product-image .product-item-actions .actions-secondary .quick-view:hover, 
.product-block .product-image .product-item-actions .actions-secondary .add-to-wishlist:focus, 
.product-block .product-image .product-item-actions .actions-secondary .add-to-compare:focus, 
.product-block .product-image .product-item-actions .actions-secondary .quick-view:focus,
.product-block .product-image .product-item-actions .actions-primary .add-to-cart
{
	background-color: #1979c3;
}

._keyfocus *:focus, input:focus:not([disabled]), textarea:focus:not([disabled]), select:focus:not([disabled]){
	box-shadow: 0 0 3px 1px #1979c3;
}

.action.primary:hover, .action.primary:active, .action.primary:focus {
    background: #1979c3;
    border-color: #1979c3;
    color: #fff;
}

.widget-carousel .owl-nav .owl-prev, .productlist-widget .owl-nav::before, .widget-carousel .owl-nav .owl-next,.ves-menutop .ves-megamenu li.level0:hover > a{
	background: #1979c3!important;
}
.productlist-widget ul.etabs li a, .footer-top .block .block-title strong{
	color:  #1979c3;
}
.owl-carousel .owl-nav [class*=owl-]{
	color:  #1979c3;
}
.ves-menutop .ves-megamenu{
	border-top-color: #1979c3!important;
}
.widget-images .image-item a:before{
	border-color: #1979c3!important;
}
textarea, input[type="text"], input[type="password"], input[type="url"], input[type="tel"], input[type="search"], input[type="number"], input[type="datetime"], input[type="email"]{
	border-color: #1979c3;
}

 

 Step2: Change config skin color for each storeview

Go to admin / Ves Themesetting / General Settings tabs:

 

Step3: Refresh cache system and view it on frontend

How to custom homepage layout with Ves Pages Builder?

Venustheme are using Ves Pages Builder extension to build homepage layout. You can check video guides and document guide of the extension to know more about it.

Video Guides

Document Guide

We are updating the guide…

How to add top link?

With venus themes you can add custom top links by 2 ways:

1. Add custom top links in ves theme settings in backend:

Ves Themesettings module support very good this feature. You can go to backend > Ves Theme settings > Header > Top Links, then add custom link on top-link you want to show

– With Link option: you can input the link route (ex: contact, the link on frontend will been generated to http://yourdomain.com/contact). Or you can input direct link at here.

The code to call custom links we defined in the file : app\design\frontend\Venustheme\theme_name\Ves_Themesettings\templates\html\link.html

 

<?php
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile
?>

<?php
$ves = $this->_ves;
$vesData = $this->_vesData;
$html = '';
$id = $block->getIdModifier() ? '-' . $block->getIdModifier() : time();
?>

<div class="header-links" id="header-links<?php echo $id?>">
    <div class="actions dropdown options header-links-options">
        <div class="action toggle switcher-trigger" id="header-links-trigger<?php echo $id?>">
            <strong><?php echo __('My Account') ?> </strong>
        </div>
        <ul class="dropdown header-links-dropdown" data-mage-init='{"dropdownDialog":{
        "appendTo":"#header-links<?php echo $id?> > .options",
        "triggerTarget":"#header-links-trigger<?php echo $id?>",
        "closeOnMouseLeave": false,
        "triggerClass":"active",
        "parentClass":"active",
        "buttons":null}}'>
        <?php
        foreach ($this->getLinks() as $link) {
            $html .= $this->renderLink($link);
        }
        echo $html;
        ?>
        <?php
        //Start call custom top links in ves theme settings
        $custom_links = unserialize($ves->getHeaderCfg('toplinks_settings/custom_links'));
        unset($custom_links['__empty']);
        foreach ($custom_links as $_link) { ?>
        <li class="<?php echo $_link['classes'] ?>" >
            <a href="<?php echo $vesData->filter($_link['link']) ?>" target="<?php echo $_link['target'] ?>"><?php echo $_link['title'] ?></a>
        </li>
        <?php } ?>
    </ul>
</div>
</div>

 

2. You can add custom top links by layout xml:

For example: we create a link to a custom cms page “Contact Us” with route “contact-us”.

– You need to create a CMS page for example you create an “Contact Us” page with identifier as “contact-us”
The ink access to contact page on frontend: http://domain.com/contact-us

– To add magento 2 top links, you need to add following code in default.xml of your theme
Add code in body tag of a file *.xml. For example:

app/design/frontend/Magento/YOUR_THEME/Magento_Theme/layout/default.xml

<referenceBlock name="header.links">
	<block class="Magento\Framework\View\Element\Html\Link" name="contact-link">
		<arguments>
			<argument name="label" xsi:type="string" translate="true">Contact Us</argument>
			<argument name="path" xsi:type="string" translate="true">contact-us</argument>
		</arguments>
	</block>
</referenceBlock>

The previous code will be redirected to “Magento\Framework\View\Element\Html\Link” class and tranfers label = Contact Us and path = contact-us (http://domain.com/contact-us)
After that, Check the PHP Magento\Framework\View\Element\Html\Link.php file, there is one link shown on frontend

 

protected function _toHtml()
{
    if (false != $this->getTemplate()) {
        return parent::_toHtml();
    }
	return '<li><a ' . $this->getLinkAttributes() . ' >' . $this->escapeHtml($this->getLabel()) . '</a></li>';
}

More information, please view the link: http://magento.stackexchange.com/questions/92333/in-magento-2-0-how-can-i-add-new-top-links-and-remove-existing-one-using-xml

How to create image slider?

If Your theme use Ves Pagebuilder module, You can use widget Ves Image slider or Content carsousel make image slider on your site.

1. Widget Ves Image slider

On the pagebuilder profile, add row, and add widget, selected widget name Ves image slider

Option1: Add content into text editor of widget

 

Option2: You can choose block static on dropdown

Admin / Content/ Blocks:

Content block: “Azshop Auto slider1”

<div class="ves-slide02">
    <div class="slider-content">
       <h1>SPECIAL OFFER THIS WEEK</h1>
       <h2>EXCLUSIVE SAVINGS</h2>
       <h3>PROIN GRAVIDA NIBH VEL VELIT AUCTOR ALIQUET. AENEAN SOLLICITUDIN, LOREM QUIS BIBEND UM AUCTOR, NISI ELIT CONSEQUAT IPSUM</h3>
       <a class="btn" href="#">view more</a>
    </div>
    <a href="{{store url="women/"}}"> <img src="{{media url="wysiwyg/azshop/home02/slider_auto1.png"}}" alt="" /> </a>
</div>

Image on frontend:

 

Content: “Azshop Auto slider2”

<div class="ves-slide02">
    <div class="slider-content">
       <h1>SPECIAL OFFER THIS WEEK</h1>
       <h2>EXCLUSIVE SAVINGS</h2>
       <h3>PROIN GRAVIDA NIBH VEL VELIT AUCTOR ALIQUET. AENEAN SOLLICITUDIN, LOREM QUIS BIBEND UM AUCTOR, NISI ELIT CONSEQUAT IPSUM</h3>
       <a class="btn" href="#">view more</a>
    </div>
    <a href="{{store url="women/"}}"> <img src="{{media url="wysiwyg/azshop/home02/slider_auto2.png"}}" alt="" /> </a>
</div>

Image on frontend:

View detail infomation slider at this link : http://demo4coder.com/azshop/

– Config carousel settings (the widget we are using owl carousel: http://www.owlgraphic.com/owlcarousel/ )

2. Widget Content carousel

On the pagebuilder profile, add row, and add widget, selected widget name Content carsousel

Config the same widget ves image slider

 

How to custom category page?

How to custom product item in category page?

– Venustheme are using settings of module Ves Themesettings for listing product item, and list.phtml file in the folder: app/design/frontend/Venustheme/theme name/Magento_Catalog/templates/product/

So you can use settings for product items in admin > Ves Themesettings > Category Page or custom directly layout, change position of product info, add some custom code to show product attribute or add custom css class by edit the file list.phtml

How to config product item settings?

 

How to add a static block on sidebar in category page?

– The sidebar will show on category page have layout 2 columns – left, 2 columns – right, or 3 columns. To add a static block or any custom block on sidebar position you can use widget instance in admin, or use layout xml to reference block.

– Reference static block on sidebar on category page:

  •  Add static block in admin > Content > Blocks > Add new block. For example: Create block with identifier = ishop-sidebar-products
  • Edit the file “app/design/frontend/Venustheme/theme name/Magento_Catalog/layout/catalog_category_view.xml”. Then add reference block as this:
    <referenceContainer name="sidebar.main">
            	<block class="Magento\Cms\Block\Block" name="sidebar-products" after="-">
                    <arguments>
                        <argument name="block_id" xsi:type="string">ishop-sidebar-products</argument>
                    </arguments>
                </block>
            </referenceContainer>

     

More information about block in magento2 template you can view at here: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html

 

How to change page layout of category page (1 column, 2 columns left, 2 columns right, or 3 columns)?

– The type of page layout to be used for a certain page is defined in the page configuration file, in the layout attribute of the root <page> node.

Example: Change the layout of Category page from default “1-column” to “2-column with left bar“. To do this, edit the file:

app/design/frontend/Venustheme/<theme>/Magento_Catalog/layout/catalog_category_view.xml

<page layout="2columns-left" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
...
</page>

 

How to show product attribute value as brand name?

Ex: We have a product attribute with code: sku we want to show brand information under product title

– Edit the file “app/design/frontend/Venustheme/<theme>/Magento_Catalog/templates/product/list.phtml”

– Find the line code:

 <?php if($show_name){ ?>
                    <strong class="product name product-item-name">
                        <a class="product-item-link"
                        href="<?php /* @escapeNotVerified */ echo $_product->getProductUrl() ?>">
                        <?php /* @escapeNotVerified */ echo $_helper->productAttribute($_product, $_product->getName(), 'name'); ?>
                    </a>
                </strong>
                <?php } ?>

 

– Update with the code after line code above:

 

<?php echo __("SKU: ").$_helper->productAttribute($_product, $_product->getName(), 'sku'); ?>

 

How to custom product item in listing blocks?

Listing blocks: Related products, Upsell Products, Crossell Products, New,…

Product item will show some information as this:

Venustheme are using settings in Ves Themesettings to config for product item in listing blocks. You should go to admin > Ves Themesettings > Product Listing

How to config product item in Product Listing Blocks?

The phtml files of product listing blocks we are storing in the folder:

app/design/frontend/Venustheme/theme name/Magento_Catalog/templates/product/list/

with files: items.phtml and items_carousel.phtml

 

How to add products block on left sidebar on category page?

Venustheme we can config the products block on sidebar as this.

Featured products block are showing on left sidebar: http://demo4coder.com/ishop/default/women.html

 

Venustheme we are using ves products list extension, it have widgets for products tabs, products carousel block. So we can create widget instance in backend and reference the widget in sidebar block of any pages where you want (more about the widget instance please view at here: Link). Or we can use layout xml in theme file to reference a block on sidebar.

 

Step 1: Create CMS static block to add products list widget into content

– Go to admin > Content > Element > Block. Create new
– Create the CMS block as this:

 

Shortcode:

{{widget type="Ves\Productlist\Block\Widget\Tab" widget_title="Featured" addition_class="sidebar-products" tabs="YToyOntzOjE4OiJfMTQ1NTg2OTE4NTI4Ml8yODIiO2E6NTp7czo5OiJzb3VyY2VfaWQiO3M6ODoiZmVhdHVyZWQiO3M6MTA6Iml0ZW1fdGl0bGUiO3M6MDoiIjtzOjEwOiJpdGVtX2NsYXNzIjtzOjA6IiI7czo5OiJhamF4X3R5cGUiO3M6MToiMCI7czo4OiJwb3NpdGlvbiI7czowOiIiO31zOjc6Il9fZW1wdHkiO3M6MDoiIjt9" 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" cycle="false" transition_in="fadeIn" transition_in_easing="swing" transition_out="fadeOut" transition_out_easing="swing" event="click" show_name="1" show_price="1" show_image="1" image_width="100" image_height="120" layout_type="owl_carousel" number_item="12" number_item_perpage="8" lg_column_item="1" md_column_item="1" sm_column_item="1" xs_column_item="1" number_item_percolumn="4" custom_item_height="400px" large_max_items="1" large_items="1" portrait_items="1" tablet_items="1" tablet_small_items="1" mobile_items="1" loop="1"}}

Step 2: Reference CMS static block to sidebar block

– Edit file “app/design/frontend/Venustheme/[theme name]/Magento_Catalog/layout/catalog_category_view.xml
– Add reference block code as this:

 

Source Code:

<referenceContainer name="sidebar.main">
        	<block class="Magento\Cms\Block\Block" name="sidebar-products" after="-">
                <arguments>
                    <argument name="block_id" xsi:type="string">ishop-sidebar-products</argument>
                </arguments>
            </block>
        </referenceContainer>

 

Step 3: Clean cache and run SSH command:

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

FAQ

General Questions?

A: You should go to admin > Ves Theme Settings > General Settings > General Settings > Panel Tool > Change value of option “Enable” = “No”
A: We recommend you using developer tools in Google Chrome ore firebugs plugin in FireFox to find css code of any element on the site, custom/preview styles the frontend. Then copy the css code and input it into custom css of ves theme settings.
More about the Google Chrome Developer Tools. Please view there links:https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/?hl=en
https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/edit-styles?hl=en
https://developer.chrome.com/devtools/docs/elements-styles
http://webdesign.tutsplus.com/articles/faster-htmlcss-workflow-with-chrome-developer-tools–webdesign-8314

A: We are using Ves Setup to export and import sample settings data of our themes. You can use it to backup and restore there settings or move settings from old site to new site.

Backup: Please go to admin > Ves Setup > Backup. Then input backup file name, choose option “Download file”, choose store view which you want backup data (default dont need choose), and select there extensions, cms pages, cms blocks, widgets. Then click on button “backup configuration”, you will download the .Json file to local.

Import: Please go to admin > Ves Setup > Import. Then select option “Upload files..” in dropdown “select your profiles”. Upload the .Json file from your local. Then choose store views of your site which you want to improt sample to (default dont need choose), then click on button “Import configuration”.

A: Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.
A: Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.
A: Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

The theme is not responsive on my mobile?

The problem when we using new version of ves themesettings extension on old theme sample data.
To fix it, please go to admin > venustheme > Ves Theme Settings > General > Input Maximum Page Width = Empty (before it was set 1200px). Then Save Config.

Theme Settings Questions

A: Maybe you are missing set permission 0777 for the folders (allow writeable): app/design/frontend/Venustheme/theme_name/Ves_ThemeSettings/web/css
pub/static/frontend/Venustheme/
Because the module will write custom css files into the folder
A: You should go to admin > Ves Theme Settings > General > General Settings. Choose the option in option “Skins”, then save the theme settings. After then you should flush the cache of your site.
A: You should go to admin > Ves Theme Settings > General > General Settings. Set value for the option “Direction” = Right To Left.
A: You should go to admin > Ves Theme Settings > Header > Sticky Header > Enable option “Enable”. You can enable all elements on header to sticky or some specify elements.
sticky_header
A: Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.
A: Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

How to show popup on homepage?

To show the newsletter popup on homepage we can config with 2 ways in venus theme.

1, Create widget “Popup”

Step 1:  Go to admin > CONTENT > widgets  > add new widget instance as this

Step 2: Add widget type “Ves Base: Popup” and choose theme is venustheme which you want to apply the widget instance

Step 3: Config “Storefront” for the widget as this:

 

 

Step 4: Config widget options as this:

 

2, Config enable popup via ves theme settings > General

– Go to admin > venustheme > ves theme settings > general, to config promotion popup will show on homepage as this:

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