Dear customer, thank you for purchasing our e-commerce theme. We hope that you are satisfied with our theme as well as our customer service. Let us know our faults and flows. If you have any questions that are beyond the the scope of this help file, please feel free to email us via our user page here or send us a message in here. We are the most thankful for choosing us. Our online documentation can be found here.
In general, elements are the visual composer shortcodes that have been created or restyled by us. By using Vitrine theme you may create eye-catching pages fast and without any need for any programming knowledge.
To use Vitrine's elements, all you need to do is to create a new page. Click on "+" and select one of available shortcodes.
In this section, you will learn how to work with our special shortcodes. These shortcodes are only available to our customers and working with them may look hard at first glance but it actually is very simple. You will be stunned with the result.
Countdowns help you to easily use the countdown feature for discount products/coming soon page and... To create a Countdown please follow these steps:
To see what "Countdown" would look like in real please visit this link.
Showcases help you represent information with a huge image and some smaller images that can be opened in a lightbox(a small gallery). They have an interesting background and hover effects. To create a showcase please follow these steps:
To see what "Showcases" would look like in real please visit this link.
To watch "Showcase" video tutorial please visit this link.
Team member shortcode is used for showcasing the members of your team. It lets you link them to a special page. Provide their social network account and some more info about each of them. To create a team member, please follow the steps of this image:
To see what "Team member" would look like in real please visit this link.
To watch "Team member" video tutorial please visit this link .
Banner shortcode lets you use an image a title and a subtitle to emphasize on a special subject. Banners can be linked to other pages.
To see what "Banner" would look like in real please visit this link.
Image carousel lets you select a set of images, define hover color or hover zooming effect for that set of images and make some of them visible. It really is easy to work with, moreover is looks professionally complicated.
To see what "Image Carousel" would look like in real please visit this link.
To be able to use this feature you may use one of the greatest pricing box plugins for free. VC ultimate pricing boxes is a commercial plugin which is integrated into our theme and our customers may use it effortlessly. Follow these steps to understand how can you use this plugin.
To see what "Pricing Box" would look like in real please visit this link.
To watch "Pricing box" video tutorial please visit this link.
Any business would like to know the opinion of their customers about their products and services, representing this idea in a creative yet professional design will attract new customers too, this is why we have a custom-made testimonial element in our theme.
To see what "Testimonial" would look like in real please visit this link.
To watch "Testimonial" video tutorial please visit this link .
The idea of snap to scroll (Snap Scrolling) is very new in ThemeForest but most of the famous brands use this feature to create scrollable content. Vitrine's snap to scroll feature is very smooth, is easy to implement and can have various animations. To start creating you snap to scroll page do as follows:
First of all, some configurations need to be made:
To see what "Snap to scroll" would look like in real please visit this link.
To watch "Snap to scroll" video tutorial please visit this link .
Extraordinary header titles, with icons or text backgrounds, as well as unlimited font types and colors are among this shortcode's features. To benefit from these options follow these steps:
To see what "Title" would look like in real please visit this link.
Exceptional headers or separators, with or without a background image, as well as unlimited font types and colors are among this shortcode's features. This shortcode is one of a kind on ThemeForest.
To see what "Animated Text" would look like in real please visit this link.
Creating a contact form is super easy, to edit a contact form you may do as follows:
To learn how to work with Contact Form 7 please read its documentation and contact its support here.
If you want your contact form to exactly look like our demos' contact form, please copy and paste this code with the one you see in the previous picture.
To see what "Contact Form" would look like in real please visit this link.
There are other elements (shortcodes) that have few features but still are handy. To find an example of each of these shortcodes please click on their name.
First of all, install a fresh copy of WordPress. To begin using our theme you need to unzip the package you've downloaded from ThemeForest.
Remember to check your server features to make sure that it fulfills Vitrine's minimum requirements. To check you may install this plugin, then go to your WordPress dashboard and check server info against these measurements.
Minimum PHP version: 5.6.0 or greater
Minimum MySQL version: 5.0.15 or greater
Memory Limit: 128.0 MB
Post Max Size: 32.0 MB
Max Upload Size: 32.0 MB
Find the zipped folder in your theme package (vitrine.zip), upload it to your theme as the pictures show.
If you have trouble uploading your theme this way, try to follow the steps that were mentioned by this webpage.
This theme includes commercial plugins like Visual Composer, Slider Revolution, and Visual composer pricing
tables. You may install them for free on your host. To do so please unzip the theme package which you have been downloaded from ThemeForest. Find the folder "plugins" and upload its content to your server.
We also have been added additional plugins to help you create a website in an easier way, you have to activate these plugins. To install and activate these plugins,
You can use one of our predefined demos, to import a demo all you need to do is to take a ONE CLICK action.
No words needed, just follow these steps:
This is it, your website is ready!
To create a one-page website, first, you have to create your Container page and your sections, then you can generate your one-page website.
For adding a Container page to your website:
For making your page a front page go to:
This is it, you don't need to alter this page anymore, leave it as it is and start creating your sections.
Note: When you change your template from default to the container page, the editor section will be disabled completely, this is totally right because it is a container page and you can not add shortcodes to it, to add shortcodes(elements) you should create sections.
To create a Section
To add a new section to your website, first, click on add new from dashboard, then click on the "+" button, afterward, choose as many shortcodes as you want to, remember each row is a container for other elements you may like, to create a parallax section with text, for example, create a row of type parallax, select the parallax image and then press the smaller "+" button on the top of your new row to add text, other images etc. The only thing you need to do is to name your page and then publish it.
To create a blog section
Notice: The only possible blog skin in one-page websites is the toggle blog mode and card blog (Pinterest style).
Using a card blog is the same as adding shortcodes you must create a section and then add "Card Blog" shortcode to this section, while if you want to create a toggle blog you have to tell WordPress which section is your blog section, after specifying the section, the theme will automatically create toggle blog section. So for specifying blog section what you need to do is to take following steps,
After creating your sections refer to:
Notice: Don't add Sections as sub-menus.
If you wanted to hide some sections of your website from the menu check their visibility checkbox as the the figure shows you.
Save your menu and your website is ready.
To understand the process of creating a one-page website watch this video tutorial
Final steps would be configurations provided by us to let you change your website's settings even more. Configurations like fonts, social icons, color schemes etc. To do so refer to:
Over 50 different layouts can be built by using the setting we provided for the menu, please go to:
One of the styles in which many are looking for is our two state header. This header has transparent background in the beginning and as you scroll it changes its height and also receives a background color. you may also want to have a menu with two different background colors. In both cases you need to use the following instructions:
To understand the process of creating a two-state header watch this video tutorial please.
Top bar is an optional section, it may contain languages section, wishlist info, contact section, a logo and a slogan or notice. The top bar would stick on the top of each page. your top bar's background may be any color you want and you can show your social share icons in it.
To understand the process of creating a top bar watch this video tutorial please.
For instructions regarding the menu general styles please read the previous section here.
Simple drop-down menus are the default settings for the menu, however, you can create a Mega Menu by adjusting some simple settings. All you may need to do is to follow these steps.
There are two types of sliders in our theme, one of them is our custom slider (Epico slider), and the other one is a more complex slider which is "Slider Revolution". Epico slider is very easy to use but is limited in terms of options, in contrary, slider revolution is complex while it provides a lot of options.
Epico slider is a very simple slider with a beautiful outcome. The slider can be added to the top of each page.
To be able to use our slider, the first thing you should do is to create slides.
Repeat the above-mentioned steps and create as many slides as you want, it is important to remember that you need to add (select) at least a category per each slide.
Open the page you want to add a slider on the top of it, then:
That's it!
To add slider to your one-page website the first thing you need to do is to create a Container page. Open your Container page and do as previous sections stated.
To insert a slider by the use of Revolution Slider, the first step is to create a new slider. To do so, follow these steps.
After the creation of a slider, you may add as many slides as you want to your slider. To add a slide to slider,
For more information and techniques please refer to slider documentation here.
You have two ways to add a Revolution Slider, slider to your web page. The first one is our simple way which is using our page settings:
Open the page you want to add a slider on the top of it, then:
The second way of adding Revolution slider to your page is to use Slider Revolution shortcode. To use this way please follow these steps.
Using the shortcode way will let you add the slider to any section of the page, top, middle, bottom etc.
An advanced, flexible creative portfolio is one of the strong points of our theme. Our portfolio uses Ajax to make your portfolio items load faster, it is possible to select custom categories and you may also benefit from a "load more" option.
There are two types of portfolios included and each one of the benefits from special characteristics. To be able to use any of them, the first thing to do is to create some portfolio items.
There are samples of portfolio detail styles on these pages:
To add a Portfolio to your page
If you want to check our portfolio styles, hover options, color options, grid options etc. , please check our Features Demo, go to "WORKS" tab and lots of samples are available there.
The difference between the inner portfolio and the other portfolio is that inner portfolio opens up on the same page as other portfolio elements, moreover, you won't lose navigation by refreshing the page.
To add an Inner Portfolio to your page
Portfolio Inner options are the same as portfolio styles the only difference is the way that portfolio detail opens up with inner portfolio detail, to check portfolio inner you may go to Inner Portfolio
Need more help? Watch this video tutorial on how to create a portfolio and how to add it to your page Portfolio Tutorial
A good gallery is an important feature of a theme. Our built-in gallery shows a grid (simple or masonry) of elements, by clicking on each element a lightbox will show up. The gallery is able to show images, videos, and audios, you may also use the gallery as a link to other pages or elements. In the gallery, lightbox can preview thumbnails of each item, see the gallery in full-screen mode, share gallery items on social networks, and preview items. In addition to all of these great features, we added a large set of animations for the navigation between gallery elements and for their appearance.
The first thing for having a gallery on our website is to create a gallery item, please take the following steps to create a gallery detail.
After creating some Gallery items (gallery details), You may add your gallery to any page you want. Create a new page and select gallery shortcode.
If you want to check our gallery styles, hover options, color options, grid options etc. , please check our Features Demo, go to "WORKS" tab and lots of samples are available there.
Need more help? Watch this video tutorial on how to create a gallery and how to add it to your page Gallery Tutorial
WordPress was originally a blogging platform and a theme without a proper blog design is not to be considered among the great themes. We tried to provide great blog styles that require few or no effort to look perfect. You may select one of these styles for your Blog implementation. Note that on one-page websites you cannot use a classic blog, but using Toggle and Card blog is totally possible. For information regarding one-page websites blog please refer to this section of documentation.
You will need at least a blog post to be able to use our blog options. To create a blog post you may,
To take a look at each post type you may use the following links:
Classic blog is the original format of blogging, posts will be showed with a featured image some excerpt and some minor info. First of all create some blog posts then, do as follows.
The page you selected will now show your classic blog. An online sample of classic blog can be found here.
Toggle blog is a creative style for blog posts. Large featured image, smooth animations etc. made it perfect for those who want a unique blog. Do the exact steps that were mentioned in the previous section (create a blog page). Then go the blog page that you've just created from WordPress dashboard.
If you want to see our toggle blog in action, you may examine it here.
Card blog more commonly known as Pinterest style blog tries to change the look of blog grid to be similar to pinterest pages. Our card blog benefits from many features including but not limited to Ajax load, load more and lazy loading, 3 or 4 column grid, masonry or fitrow grid, interence animation, unlimited color options and many more. Create some posts and follow these steps to be able to have a card blog on your page.
If you want to see our masonry Card Blog in action, you may examine it here.
To see the fit-row style please refer to here.
Need more help? Watch this video tutorial on how to create a blog post and how to add it to your page Blog Tutorial
Sidebars are usually used as a section for additional information or additional tools. Vitrine have two exceptional sidebars, each of them is unique and provides unlimited options for the user.
The classic sidebar is the default sidebar of WordPress. The exception to our theme is that you can create as many sidebars as you want and add them to the left or right side of the page. To create one you may need to
Now that you've created your sidebar you can fill in the sidebar you've just created, to do this you can go to Appearance widget section, find the widget you want, drag and drop the widget to the sidebar you've just created. Set the settings for your widget and save it.
To add these sidebars to your page, open a page, scroll down to page settings and find sidebar section, select one of your sidebars and save the page.
Toggle sidebar is Vitrine's custom sidebar. By clicking on sidebar button a toggled sidebar appears and show the content you want. You may add menus, cart contents, and many other widgets to this area. To enable the toggle sidebar all you need to do is to,
If you enable Toggle Sidebar, you can fill it with various shortcodes to do this you need to go to widgets section and drag and drop the widget to
Pre-loaders are those elements that appear when the page is being loaded, in other words when a user wants to move from one page to another page an element appears that shows the requested page is being fetched. Vitrine's preloaders have 4 major styles and unlimited colors or text options, each customer can customize the preloader. To activate preloader please do as the following picture stated,
We provided another option for moving between pages, that is page transition. To add beautiful transitions to your website, all you need to do is to follow these steps,
Many businesses use google maps to highlight their location on their website and customers prefer using it, one of many reasons to use it would be flexibility and customization possibility. By using Vitrine you may add your map to the bottom of every page and anywhere on the page. You may use following instructions to add Google Maps to your content as a shortcode:
Google map can be used as a shortcode in any part of the page. For doing so you may follow these steps.
To see what "Google map" would look like in real please visit this link.
You may also use google maps on the bottom of your desired page. The first thing to know is knowing about the JavaScript API of Google Maps. Last year there was a change in the policy of google maps API, before this change a developer could use an API for all of his/her customers and load map as many times as they want after this change google would allow 25000 loads per day per each API! What does it mean for the users? It means that even though we integrated an API key into our theme and you can use it, but your map may not load sometimes because there were more than 25000 times of map loading by all of our customers. What we recommend is to get your own JavaScript API key to be sure that you're map will always be there. To obtain a JavaScript API key, watch this video please.
Now that you have your JavaScript API key please take the following steps,
To set a location for google maps, first of all, go to here.
Search for your address
Right click on your desired location and choose " what's here? "
Copy and paste relative amounts in the respective textbox.
When you want to create a site that is under construction or an event that is coming later, you can use maintenance page (coming soon page). When a user opens your site, the only thing that he/she can see is a maintenance page like below:
To create a maintenance page, follow the instructions: (We provide a coming soon page in our theme, but you can create your own customized page)
Final steps would be configurations provided by us to let you change your website's settings even more. Configurations like fonts, social icons, color schemes etc. To do so refer to:
For footer customization settings you can do as the following image shows:
It is obvious that the most important section for an e-commerce theme is the section related to shop, products and handling them. We are proud of what we provided for our customers and we are sure that you won't be disappointed in Vitrine. Fully Ajaxified, light weighted, feature rich shop is something rare, even in Theme Forest. The great thing about Vitrine is the that even though it is very versatile and have almost everything, yet we have hundreds of ideas ready to improve it even more. The following provides a STEP BY STEP guide on how to set your shop up and ready to use.
To be able to continue form this section on, you'll need to do previous steps, have a fresh new installation of WordPress and have our themes and plugins installed and ready. The best method is to install WooCommerce along with other plugins installed and the immediately configure it (make relative paged to shop, choose currency etc.). If you need guidance with WooCommerce installation here is a great article and a great video tutorial helping you get through it.
Shop settings are options that help you make small important changes to your store, settings like, tax rate, currency, price format, shipping classes, account settings, check out settings etc. The following link helps you find a set of tutorials on how to configure your shop.
In addition to general settings provided by WooCommerce, you may use our theme settings panel to configure your shops general styles.
You may create and sell any type of products with WooCommerce all you may need to know is small configurations per each product type. So please create some product categories and some attributes then continue reading this section of documentation.
To be able to use different porduct type, product filtering any many useful plugins you will need to create product categories, tags and attributes.
In addition to this video tutorial's options, Vitrine benefits from a custom attribute which is image atteibute. This attribute let's you to define textures, colors, images etc. as an attribute. To use it follow these steps.
Simple products are those products are the easiest way of setting a product and sell it. To know how you may create one please watch the following video or use this link.
Grouped products are those products in which you want to sell together as a package, for example, you want to add "shop the look" option to your website and let users buy trousers, a shirt, and a necklace together, to do this you'll need to have a grouped product.
Suppose you want to sell products that are already on Amazon and receive a commission for it, but you don't own anything yourself. This is the time when one would need to use External/Affiliate product type.
This feature is very handy since this is applicable in most shops today. If you want to sell a product with variations (for example you want to sell a product that has various colors), you'll need to use variable products section. Watch a general video on how to create a variable product. Remember that you have to add attributes to your WooCommerce to be able to use this product type.
In many stores the product which is being sold is virtual, things like music, video files or ebooks can be sold in a different way because they might have a virtual nature.
We talked about widgets a while before, when we were talking about sidebars some of the available widgets are specific to shops. Using them is exactly the same as we previously mentioned it. All you need to do is to drag and drop them to a specific widget area. WooCommerce widget names usually have the word WooCommerce in it (Ex: WooCommerce product filter). Custom WooCommerce widgets that are only available to our customer has the word WC in their names (Ex: Epico WC product rating).
The custom shop filter is totally integrated into our theme, this means that you won't need to install a plugin to be able to use it. The filter can be added to the top of shop page (The page with WooCommerce shop shortcode). To enable or disable it please go to theme settings and enable shop filter,
The filter would now appear on the top of your shop page, now you can fill this section with "Epico WC layered NAV" or other shortcodes and enjoy filtering your products based on their color, attributes, selling status etc.
We provided a shop filter video tutuorial to show you how easy it is to add custom beautiful filtering to your website.
To visit samples of shop filter here.
To see all of the shop shortcodes (elements) that are included in our theme please do as follows,
Product categories shortcode lets you create a link to the categories of your product. This shortcode benefits from custom features like the background image, background animation, hover color with unlimited styles and many other ones.
To visit samples of this shortcode you may click here.
Groups of product shortcodes are those shortcodes that ask for a feature and show a group of products based on this feature, for example, "Top Rated Products shortcode" checks the rating of product and return those with highest ratings.
If you need instructions on how to work with these shortcodes you may watch this video tutorial.
This is one of the exclusive features of Vitrine. The creative shortcode is to represent a product or a group product the way that increases the focus on that particular product. The shortcode like other elements of our theme benefits from beautiful entrance animation, unlimited hover colors and different ways of representing the look of product element. If you use products with no background you may create even more styles and they will all look exceptional.
To visit samples of this shortcode you may click here.
If you need instructions on how to work with this shortcode you may watch this video tutorial.
If you are looking for a more simple yet elegant way of representing a product, you may use the "Single product" shortcode. By using this you still have the option to use color hover, hover image, animations etc.
To visit samples of this shortcode you may click here.
When this featured first appeared in the field of WooCommerce it was known as a little bit fancy, however at the moment it is a requirement for any e-commerce website, even if you are trying to sell virtual goods, customers want to compare them with each other.
This feature in Vitrine can be added to any product type and can be activated through theme settings, the capabilities of the main plugin was highly improved to make sure everything is Ajaxfied, clean, fast and elegant.
To visit samples of shop compare please open this page and hover on products then you will find compare icon.
Vitrine's quick view feature can be enabled or disabled through theme settings and you won't need to do any configuration to be able to have this. Our theme automatically creates a short description of your product detail and show it in lightbox. This feature is totally integrated and you won't need a plugin for it.
To visit samples of shop quick view please open this page and hover over products then you will find quick view icon(a magnifier).
Wishlist refers to the plugin that enables you to let users create a list of products they liked and buy them later, even though you need to install a plugin but Epicomedia customized this plugin the way that it enables you to use it in the top bar in any sidebar as well as products page and also in products detail.
To visit samples of shop wishlist please open this page and hover over products then you will find wishlist icon(a heart). To see other possible positions of this plugin check the header in href="http://epicomedia.com/vitrine/shop-with-topbar-filter/">this page.
percentage Sale enables you to use "%" for discount products. This feature automatically calculates the discount percentage using the prices.
To visit samples of Percentage Sale please openthis page.
This plugin extends WooCommerce to allow shop owners to add custom tabs to products. The tabs are displayed on the individual product pages to the right of the default “Description” tab.Individual product tabs are managed on the WooCommerce Edit Product screen and can be added on a per product basis. You can also create saved tabs and add them to multiple products as needed. Tabs can be easily added, deleted and rearranged.this plugin is free and compatible with Vitrine theme.
The custom tab plugin is available on this link.
To visit samples of Custom Tab please open this page.
with Product Size Guide plugin, Give your customers more information about your products.With this, you are able not only to customize the existing size guides but also create your own for anything you imagine!Size Guide has settings that won’t only let you choose the size, color or type of button but also let you choose the place where it will appear! To create a Size Guide please follow the steps of this image:
To watch "Size Guide" video tutorial please visit this link.
Most retailers even great brands have an Instagram account and use it to inform customers about new collections, events or even newest services. Now what happens if you want to integrate your Instagram account into your website? Most themes in theme forest would suggest plugins, but in Vitrine you won't need any external plugins! This is important because now you are in control of your accounts security (Our Instagram slider stores information on your host and not anywhere else), but it will enable you to share any account on Instagram, you can certify other people to use your Instagram account without pitting your account in danger and above all people can like your posts, comment on your post and review other followers with a direct link from your website.
To activate Instagram slider please follow these instructions,
You need to take this steps only once and then you'll be able to use Instagram Slider as many times as you want. You can use Instagram slider widget to add it to the sidebars or footer. For instructions on how to use a Widget please use this link.
To use Instagram slider use the following instructions,
To visit samples of shop quick view please open this page and hover over products then you will find quick view icon(a magnifier).
If you bought our theme from ThemeForest website you are provided with an Envato toolkit that is available under plugin tab. This plugin helps you to update your theme regularly with only and only one click. It is worth saying that you won't receive updates if you did not buy our theme from ThemeForest.
1) Activate Envato plugin
2) Obtain your API key from your ThemeForest account
3) insert your API key in the plugin and update
Normal free plugins like WooCommerce can simply be updated from plugins section, however updating commercial plugins like visual composer is a little bit different since we bought these plugins license and included in our package, you can not automatically update them. What you need to do is to download theme from your ThemeForest account, Unzip the folder you've just downloaded. Find a folder named plugins and finally upload these files to your server and replace them with old plugins files.
If your problem was not listed here or your issue was not solved by taking these steps, feel free to join our forum and ask your questions there.