Pinkmart - AJAX Theme for WooCommerce WordPress

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

Minimum requirements

Remember to check your server features to make sure that it fulfills pinkmart'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.2 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

For more information about the minimum requirements, please visit this link.

Theme Installation

Find the zipped folder in your theme package (, 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.

Setup Wizard

Once you activate pinkmart, its setup wizard will be activated and helps you to configure the theme. In order to activate theme features and auto updates, customers should follow the wizard's steps. We recommend you to activate pinkmart through the wizard at the same time that you activate it. But, you can do it at another time and skip the steps for now.

You can always get access to the setup wizard through the following path:

Dashboard > Appearance > Setup Wizard

Here we show you the steps:

Welcome Page

The first thing that you will see after activating pinkmart, is a page like the below image. A welcoming message.

In this page, you have the right to choose to continue the wizard steps or leave it.


Step 1: Plugins Installation

In the next step, you should install pinkmart's required plugins. Additionally, there are many other plugins that are included in pinkmart package which you can install them up to your needs. As you can see, there are two type of plugins, required plugins and recommended plugins. Obviusly, in order to have the best performance, required plugins should be installed.

plugins installation

Step 2: Demo Import

The step 2, relates to importing a demo. There are many different demos that are implemented for any need and any taste.

Also you can preview demos, before importing them, here.


Step 3: The Final Step

All is done!

The configuration has completed. Enjoy using pinkmart.

final step

Plugins Manual Installation

pinkmart includes many premium plugins that help you to build stunning websites. If you want to install them manually, all you need is to go to the following path and start the installation process: (you can also install them via the setup wizard)

Dashboard > Appearance > Install Plugins


In general, elements are visual composer shortcodes that have been created or restyled by us. By using pinkmart theme you may create eye-catching pages fast and without any coding knowledge.

Adding Elements

To use pinkmart's elements, all you need is to create a new page. Click on "+" and select one of available elements.

In this section, you will learn how to work with our special elements. These elements 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.

Team member

Team member element 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.


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

Ajax Product Tab

This feature help you to get the perfect product tabs on your website. We have made it AJAXified, so the products loads only when demanded. It loads before you could even blink your eye. By this feature the products load on tabs in a simple way.

Notice that unlike Tabs shortcode that we can add our desire shortcode on it, Only WooCommerce products shortcode colud be add in Ajax product tab shortcode. Follow these steps to understand how can you use this feature.

To see what "Ajax Product Tab" would look like in real 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.


Extraordinary header titles, with icons or text backgrounds, as well as unlimited font types and colors are among this element'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 element's features.

To see what "Animated Text" would look like in real please visit this link.

Contact Form

Creating a contact form is super easy with pinkmart. pinkmart has some options itself that help you create different contact form styles, 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.

After you create your contact form, add conatct form shortcode to the page and configure its options to have your desired contact form style.

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 elements 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 build 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 elements to it. To add 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 elements 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 elements you must create a section and then add "Card Blog" element 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.

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:

Sliders play a huge role in websites. Luckily, pinkmart has included all the most popular and powerful slider plugins. You can use them for free. Because we have purchased the extended version of all of them. So, customers don't need to pay for any extra plugin. All you need is here, in pinkmart package.

The main slider of pinkmart which is a complex and professional slider is "Slider Revolution".

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 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 element. To use this way please follow these steps.

Using the element way will let you add the slider to any section of the page, top, middle, bottom etc.

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.


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. pinkmart'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 pinkmart 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 an element:

Google map can be used as an element 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.

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 pinkmart. Fully Ajaxified, light weighted, feature rich shop is something rare. The great thing about pinkmartt 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, pinkmart benefits from a custom attribute which is image , color and text atteibute. This attributes let's you to define textures, colors, images etc as an attribute.

In order to have this feature, first of all you sholud set Variations Select Style option to Swatch Size Style on the product detail settings at pinkmart settings, then follow these steps.

you can easily switch to dropdown product attribute fields through pinkmart setting if you don’t wanna need swatches style. You can always get access to Variations Select Style through the following path:

Dashboard > Theme Setting > Product Details > Variations Select Style

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: Kite 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 element). 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 "Kite WC layered NAV" or other elements and enjoy filtering your products based on their color, attributes, selling status etc.

To visit samples of shop filter here.

Shop Elements

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

Product Categories Element

Product categories element lets you create a link to the categories of your product. This element benefits from custom features like the background image, background animation, hover color with unlimited styles and many other ones.

To visit samples of this element you may click here.

Groups Of Products Elements

Groups of product elements are those elements that ask for a feature and show a group of products based on this feature, for example, "Top Rated Products element" 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

Product Deal and availability

Single Product Element

If you are looking for a more simple yet elegant way of representing a product, you may use the "Single product" element. By using this you still have the option to use color hover, hover image, animations etc.

To visit samples of this element you may click here.

Product Deal Element

In some situations, you put some products for sale for a period of time.

Now, you are able to show these products on any pages that you want with a stunning design. This element also has many features that help you to make these products more bold and specific. Such as count down, carousel and grid mode, different style, etc.

To visit samples of this element you may click here.

Shop And Category Header

There is 3 different header style for shop and categories page. Follow these steps to set shop and categories header.

1. First of all you should set icon or thumbnail image for categories on the following path:

Dashboard > products > categories

2. Go to the following path to set shop and categories header style:

Dashboard > Appearance > Customized > WooCommerce > Product catalog

1) set shop page display option to show categories and products.

2) set category display option to show subcategories and products.

3) set shop and category page header display to one of these options based on your desired:

Extended categories

show all product categories and subcategories on shop header. once you click on it, redirects you to its category or subcategory page.

To see what "Extended categories" would look like in real please visit this link.

Categories by icon

show only product categories icon with its category name on shop header. once you click on it, redirects you to its category page.

To see what "Categories by icon" would look like in real please visit this link.

categories by image

show only product categories thumbnail image with its category name on shop header. once you click on it, redirects you to its category page.

To see what "categories on image" would look like in real please visit this link.

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

pinkmart'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 kitestudio 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).

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 open this page.

Products Pagination

By this new feature, you are able to change the pagination type of the shop page. Find all the options on the shop page settings at pinkmart settings.

There are three available pagination type:


It is the normal method of navigating between pages. You'll choose the page number and it will appear to you.


To see what "Products Pagination" would look like in real please visit this link.

Load More Button

By this one, you'll have a button at the bottom of the shop page once you click on it, the next page will appear on the screen.


To see what "Load More Button" would look like in real please visit this link.

Infinite Scroll

By infinite scroll, once you scroll the shop page and being close to the end of the page, the next page will load automatically. This process will continue until you reach the last product.


To see what "Infinite Scroll" would look like in real please visit this link.

Catalog Mode

Sometimes, you just want to represent your products and don't want to sell them. In this case, the catalog mode will come to help you.

This option will remove all the options related to purchasing a product. Such as the add to cart button or the sidebar cart. Actually, your website acts like an online brochure!

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

The custom tab plugin is available on this link.

To visit samples of Custom Tab please open this page.

Recently Viewed Products

Recently viewed products, help your website visitors to have quicker access to their previously viewed products. Obviously, these products are various from a person to another. Also, this option will use cookie content.

Activating this option let you have ‘Recently Viewed Products’ on your home page and each product 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:

By pinkmart you have many options to customize products detail page as you need, as you want. There are many features that you can visit them in theme settings.

In the continue, we will review some of them. The other options are clear and you are able to understand its functionality if you visit them. Also, all options have a little description below themselves.

Variables' Title

Enabling this option causes to show the title of selected variation in variable products. The following image is an example of this option.

Variation Select Style

This option let you change the style of select variations. This option change the style of all variation for all products. In the following images, we will try to show you their difference.

This image shows that Swtach Size Style is enabled on theme setting.

This image shows that Dropdown Style is enabled on theme setting.

Product Description Alignment

This option displays product description on the left or center.

To see what "Product Description Left Alignment" would look like in real please visit this link.

To see what "Product Description Center Alignment" would look like in real please visit this link.

Product 360 View

Product 360 feature displays a 3D or 360 model of a product, your customers can see and rotate products, almost like real life. Find this option on the product detail settings at pinkmart settings and then upload a series of images for the products.

You can use any number of images, normally at least 18 and as many as 72.

To see what "Product 360 View Gallery" would look like in real 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 would suggest plugins, but in pinkmart 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 let you 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.

The only thing that you should do, is to add the Instagram Feed Element to your page. See the below image:

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

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

1) Install Envato Market plugin

2) Give your Envato Personal API token to it.

The plugin does the rest of the work.

Plugin Update

Normal free plugins like WooCommerce can simply be updated from plugins section, however updating commercial plugins like WPBakery Page Builder 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, 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.