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.
Elements
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.
Adding elements
To use Vitrine's elements, all you need to do is to create a new page. Click on "+" and select one of
available shortcodes.
Featured elements
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.
Countdown
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.
Showcase
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
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
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
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.
Pricing Box
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.
Testimonial
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 .
Snap to Scroll
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 .
Title
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.
Animated Text
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.
Contact Form
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.
Other Elements
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.
Minimum requirements
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: 64.0 MB
Theme Installation
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.
Plugins Installation
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,
Demo Import
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!
Onepage Website
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.
Container Page
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.
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.
Blog
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,
Generating One-page Websites
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
Theme Settings
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:
Header-Topbar-Menu
Header
Over 50 different layouts can be built by using the setting we provided for the menu, please go to:
Two state header
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
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.
Mega Menu
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.
Slider
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
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.
Adding slider to each page
Open the page you want to add a slider on the top of it, then:
That's it!
Adding slider to one-page websites
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.
Slider Revolution
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.
How to add revolution slider to a particular page?
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.
Portfolio
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.
Creating a portfolio item
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:
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.
Inner Portfolio
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
Gallery
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.
Creating a gallery item
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.
Add Gallery
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
Blog
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.
Create Blog Post
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
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 (Pintrest style)
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.
Need more help? Watch this video tutorial on how to create a blog post and how to add it to your page
Blog Tutorial
Sidebar
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.
Classic Sidebar
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 Seidebar
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
Preloader | Page Transition
Preloader
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,
Page Transition
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,
Google Maps
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.
Maintenance Page
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)
Footer
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:
Shop and WooCommerce
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.
Install WooCommerce
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
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.
Add new product
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.
Product Categories, tags & attributes
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.
Create a simple product
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.
Create a grouped product
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.
External/Affiliate products
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.
Variable products
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.
Downloadable products
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.
Shop widgets
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).
Shop Filter
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 see all of the shop shortcodes (elements) that are included in our theme please do as follows,
Product Categories Shortcode
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 products shortcodes
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.
Modern Single Product
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.
Single Product Detail shortcode
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.
Product Compare
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.
Product Quick View
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).
Product Wishlist
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.
Product percentage Sale
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.
Custom Product Tab
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.
To visit samples of Custom Tab please open
this page.
Product Size Guide
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.
Instagram Slider
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).
Theme Update
Theme Update
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
Plugin 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.