Vitrine

Creative WordPress WooCommerce shop theme



Dear customer, thank you for purchasing our ecommerce theme. We hope that you be 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 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 to 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.

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.

Showcase

Showcases help you represent information with a huge image and a some smaller images that can be opened in a light box(a small gallery). They have 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 to 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 famous brands use this feature to create scroll able 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 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 on the previous picture.


Contact Form code


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 shotcodes 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 fulfill 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.2.4 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

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

To create an onepage website, first, you have to create your Container page and your sections, then you can generate your onepage 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 any more, 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, afterwards 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 onepage 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 sill automatically create toggle blog section. So for specifying blog section what you need to do is to take following steps,

Generating Onepage Websites

After creating your sections refer to:

Notice: Don't add Sections as sub-menus.

If you wanted to hide some sections of your web site from the menu check their visibility checkbox as the figure shows you.

Save your menu and your website is ready.


To understand the process for creating a one page website watch this video tutorial

Final steps would be configurations provided by us to let you change your wesites settings even more. Configurations like, fonts, social icons, color schemes etc. To do so refer to:

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 conterary, slider revolution is complex while it provides a lot of options.

Epico Slider

Epico slider is a very simple slider with beautiful outcome. The slider can be added on the top of each page.

To be able to use our slider, the first thing you should do is to create slides.

Repeate 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 onepage 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 belease 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.

An advanced, flexible creative portfolio is one of the strenght points of our theme. Our porfolio 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 them benefits from special charactristics. 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 in these pages:

Add portfolio

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.

Inner Portfolio

The difference between inner portfolio and the other portfolio is that inner portfolio opens up in the same page as other portfolio elemets, moreover you won't loose 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 in 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

WordPress was originally a blogging platform and a theme without a proper blog design is not to be considred among the great themes. We tried to provide great blog styles that requires few or no effort to look perfect. You may select one of these styles for your Blog implementation. Note that in one page websites you can not use classic blog, but using Toggle and Card blog is totally possible. For information regrding 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

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 previous section (create a blog page). Then go the blog page that you've jsut 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 commenly 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 inclucing but not limited to Ajax load, load more and lazy loading, 3 or 4 column grid, masonry or fitrow grid, interence animation, unlimite color options and many more. Create some posts and follow these steps to be able to have a card blog in 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

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,

Many businesses use google maps to highlight their location in 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 any where in 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 fisrt 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 thought 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 recomment 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 vido 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.

It is obviouse that the most important section for an ecommerce theme is the section related to shop, products and handeling them. We are proud of what we provided for our customers and we are sure that you won't be dissapointed in Vitrine. Fully Ajaxified, light weighted, feature rich shop is something rare, even in Theme Forest. The great thing about Vitrine is the that eventhought 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 istallation of WordPress and have our themes and plugins installed and ready. The best method is to install WooCommerce along with other plugins installation and the immidiately configure it (make relative paged to shop, choose currency etc.). If you need guidence with WooCommerce installation here is a great article and a great video tutorial helping you ger throught it.

Shop Settings

Shop settings are options that helps you make small important changes to your store, settings like, tax rate, currency, price format, shiping classes,acooint settings, checkout settings etc. The collowing link help you find a a set of tutorials on how to configure your shop.

WooCommerce Settings


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 apackage, for example you want to add "shop the look" option to your website and let users buy a 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 recieve 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 appliable 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 diffrent 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 excatly the same as we previousely mentioned it. All you need to do is to drag and drop them to a specific widget area. WooCommerce wdget names usually has 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 on 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 layerd 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 beutiful filtering to your website.

To visit samples of shop filter here.

Shop shortcodes

To see all of shop shotcodes (elements) that are included in our theme please do as follows,

Product Categories shortcode

Product categories shortcode lets you to create a link to the categories of you product. This shortcode benefits from custom features like 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.

Recent Products

Featured Products

Top Rated Products

Best Selling Products

On Sale Products

Product Attribute

If you need instructions on how to work with these shortcodes you may watch this video tutorial.

Modern Single Product

This is one of exclusive features of Vitrine. The creative shortcode is to represent a product or a grouped product the way that increase 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 represneting 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 represneting 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, how ever at the moment it is a requirement for any ecommerce website, even of 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 capabilitis 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 dosable 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 light box. 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 on 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, eventhought you need to install a plugin but epico media 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 on products then you will find wishlist icon(a heart). To see other possible positions of this plugin check the header in this page.

Most of 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 not you are in control of your accounts security (Our Instagram slider stores information on your host and not any where else), but it will enable you to share from any account on instagram, you can certify other people to use your instagram account without pitting you 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 on products then you will find quick view icon(a magnifier).

If you still need instructions on how to add an Instagram Slider your website, then you may want to watch this video tutorial.

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 you 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 dofferent, since we bought these plugins licence 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 on your server and replace them with old plugins files.

If you 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.

 

Support Forum