ep The Vitrine


Creative e-Commerce Wordpress Theme

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 here. We are the most thankful for choosing us. Our online documentation can be found here.

First of all, install a fresh copy of WordPress. To begin using our theme you need to unzip the package you've downloaded from Creative Market.

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 Creative Market. 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!

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.

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

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

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.


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 Creative Market 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.

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 Creative Market.

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.

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 shortcodes please click on their name.

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.


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,

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

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:

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.

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:

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

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

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.

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


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

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 Creative Market. 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.

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 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 visit samples of shop filter here.

Shop shortcodes

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.

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

The custom tab plugin is available on this link.

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 is very popular these days. Hence we brought an element to our theme to let our customers have their Instagram photos on their website too.

You only need to add Instagram Feed element into the page that you want and modify it as you want.

In order to use Instagram Feed in your website, this Video Tutorial can help you too much.

Theme Update

It is too easy to update Vitrine to its latest version. All you need is:

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 Creative Market 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.


Support Forum