Thank you very much for purchasing our theme. If you have any questions, please feel free to email us via contact form here.

AllStore is Html5 + CSS3 responsive template and works fine in all major browsers and IE from version 9. The code is clearly written and you will find comments for each section parts.

You will need some knowledge 'html/css' for understand the code below.
You can use special text editors like 'Notepad++', 'Sublime Text' to edit the code.

Structure of HTML files

All HTML files are located in the root of the site

• index.html Homepage
• catalog-gallery.html
  catalog-gallery-2.html
  catalog-list.html
  catalog-list-2.html
  catalog-table.html Catalog
• product.html Product page
• elements.html PageBuilder Elements
• blog.html Blog
• post.html Blog Post
• contacts.html Contacts
• cart.html Shopping Cart

Structure of CSS/JS files

In 'css' folder contains used template styles and styles of 'jQuery' plugins.

• css/bootstrap.min.css Bootstrap, mobile first front-end framework
• css/flexslider.css FlexSlider, responsive slider
• css/font-awesome.min.css Font Awesome, scalable vector icons
• css/ion.rangeSlider.css Ion RangeSlide, input range slider element polyfill
• css/jQuery.Brazzers-Carousel.css Brazzers, images carousel
• css/jquery.bxslider.css BxSlider, images carousel
• css/jquery.fancybox.css FancyBox, displaying images, html content that floats overtop of web page
• css/swiper.css Swiper, mobile touch slider
• css/style.css Template styles
• css/media.css Responsive styles

JavaScripts are located in 'js' folder

• js/jquery-1.11.2.min.js jQuery, JavaScript library
• js/chosen.jquery.min Chosen, plugin that makes select boxes much more user-friendly
• js/fancybox/fancybox.js FancyBox, displaying images, html content that floats overtop of web page
• js/jQuery.Brazzers-Carousel.js Brazzers, images carousel
• js/jquery.bxslider.min.js BxSlider, images carousel
• js/jquery.flexslider-min.js FlexSlider, responsive slider
• js/jquery.waypoints.min.js Waypoints, trigger a function when you scroll to an element
• js/progressbar.min.js Progressbar, progress bar plugin
• js/swiper.jquery.min.js Swiper, mobile touch slider
• js/ion.rangeSlider.min.js Ion RangeSlide, input range slider element polyfill
• js/gmap.js Init Google maps
• js/main.js Template scripts
• js/plugins.js Init jQuery scripts

Social Share Links. To generate links you can use special services or manually by changing onclick attribute data on <a></a> tag

<ul class="post-share">
	...
	<li>
		<a
			onclick="popUp=window.open('http://twitter.com/home?status=AllStore HTML Template allstore-html.real-web.pro','sharer','scrollbars=yes,width=800,height=400');popUp.focus();return false;"
			data-toggle="tooltip"
			title="Share on Twitter"
			href="javascript:;"
		>
			<i class="fa fa-twitter"></i>
		</a>
	</li>
	...
</ul>

To change the locate on the map, you will need to determine the coordinates in Google Maps by clicking at a certain point (as shown in the image below),

and then add the coordinates in the file 'contacts.html'.

<div class="allstore-gmap">
	<div
		class="marker"
		data-zoom="15"
		data-lat="-37.81485261872975"
		data-lng="144.95655298233032"
		data-marker="img/marker.png"
	>
		534-540 Little Bourke St, Melbourne VIC 3000, Australia
	</div>
</div>

In the template all the forms work without reloading pages by AJAX.
You can easily manage the validation fields by the attributes of appropriate tags:

<form action="#" class="form-validate">
	<input data-required="text" type="text" placeholder="Name" name="name">
	<input data-required="text" type="text" placeholder="Phone" name="phone">
	<input data-required="text" data-required-email="email" type="text" placeholder="Email" name="email">
	<textarea placeholder="Your message" name="mess"></textarea>
	<input type="submit" value="Send">
</form>

In the file 'php/email.php' is carried out processing all the forms. You need to put the source files to the server for operability of files 'php'.
Changing the email address is carried out of the recipient by changing value '$to' of the variable in file 'php/emal.php'.

$to = 'youremail@email.com';

In this template available to use 5 types of view modes of products catalog:

Gallery V1 - catalog-gallery.html

Gallery V2 - catalog-gallery-2.html

With Thumbnails hover carousel

List V1 - catalog-list.html

List V2 - catalog-list-2.html

With Thumbnails hover carousel

Table - catalog-list-2.html

With Thumbnails hover carousel and with button to showing more information of product

In the elements.html available many elements which ready to use

Also you can add element title and its description

To add element's title you need to add title tag with "component-ttl" class. For center alignment just add extra class "component-ttl-ct" and to use with element's description add "component-ttl-hasdesc" class

To add element's description you need to add paragraph tag with "component-desc" class. For center alignment just add extra class "component-desc-ct"

<h3 class="component-ttl component-ttl-ct component-ttl-hasdesc"><span>Title Block</span></h3>
<p class="component-desc component-desc-ct">Explicabo tenetur qui accusamus impedit, nobis, perspiciatis aut</p>

Before you update, it is best practice to always make a backup of your site files.

Download the new template package from your ThemeForest account.

The template is under "html" folder in the package.

Included Libraries

• JQuery (jquery.com)
  jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
• Fancybox v2.1.5 js/fancybox/fancybox.js
  (github.com/aFarkas/html5shiv)
  FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page.
• FlexSlider v2.6.0 js/jquery.flexslider-min.js
  (woothemes.com/flexslider/)
  An awesome, fully responsive jQuery slider toolkit
• Ion.RangeSlider v2.1.3 js/ion.rangeslider.min.js
  (ionden.com/a/plugins/ion.rangeSlider/en.html)
  Responsive and easily customizable range slider
• BXslider js/jquery.bxslider.min.js
  (bxslider.com)
  images carousel
• Waypoints js/jquery.waypoints.min.js
  (imakewebthings.com/waypoints/)
  trigger a function when you scroll to an element
• Progressbar js/progressbar.min.js
  (kimmobrunfeldt.github.io/progressbar.js/)
  progress bar plugin
• Swiper js/swiper.jquery.min.js
  (idangero.us/swiper/)
  mobile touch slider
• Chosen js/chosen.jquery.min.js
  (harvesthq.github.io/chosen/)
  plugin that makes select boxes much more user-friendly
• Brazzers-Carousel js/jQuery.Brazzers-Carousel.js
  (agragregra.github.io/Brazzers-Carousel/)
  images carousel

Used Fonts

• Roboto (google.com/fonts/specimen/Roboto)
• PT Serif (fonts.google.com/specimen/PT+Serif)
• Font Awesome (fontawesome.io)
  Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Used Photos in Demo

• Unsplash - unsplash.com
• Pixabay - pixabay.com