Welcome to Bigsteps!
We would like to thank you for purchasing Seiko eCommerce HTML5 Template!
Before you get started, please be sure to always check out this documentation.
If You have any questions that are beyond the scope of this documentation, please feel free to submit ticket to http://help.big-skins.com/
We're very happy to help you and you will get reply from us more faster than you expected.
Thank you, we hope you to enjoy using Seiko eCommerce HTML5 Template!
Follow the steps below to get started with your site template:
- Open the html folder to find all the Templates Files
- You will need to upload these files to your web server using FTP.
- Make sure you upload the required files/folders listed below:
- html/css - stylesheets folder
- html/images - images folder
- html/js - javacripts folder
- html/fonts - fonts folder
- html/index.html - index file/homepage
- Now you can start adding your content.
Seiko Template follows a simple HTML code structure for every page. Here is the sample:
Seiko Template supports boxed & fullwidth layouts. Adding the class
.fullwidth to the
body will make your site boxed or fullwidth.
Without reference to body layout you can make
footer and each
.block boxed, fullwidth or fullboxed by adding
See the image below:
If you want to change your website's color scheme
1. link the stylesheet file css/style-color-*.css in
2. add the corresponding class to
Make sure you add the style-color-*.css stylesheet in your head after the style.css stylesheets.
If you use less, you can compile the new style.css after changing colors variables in the file theme-variables.less
Changing FontsSeiko Template uses three external fonts: Raleway, Roboto & Oswald from the Google Fonts Library by default.
You can find the link to the font files in the head tag of the HTML files.
If you want to change the Google Font, you will need to edit the above links with your own font. If you want to use self hosted font, remove these links completely.
Seiko Template uses simply and flexible icon library IcoMoon.
IcoMoon is striving to build and provide the best iconography and icon management tool for perfectionists.
If you want to add new icon to the library follow instruction, provided below:
1. Go to IcoMoon - Free -> Click Import Icons -> Upload there font/icomoon-reg/selection.json -> Select 'Yes' in modal window:
All Seiko icons will be imported!
2. Then select new icon(s)
3. Generate your custom font
4. Download new Icons Set, unzip archive and copy all files to 'font/icomoon-reg/' folder of your project
5. Find new icon in
demo.html and use it in your html code
For example like this:
Seiko Template uses Bootstrap Grid.
For more details on the Bootstrap Grid, please visit its official website.
Seiko Template uses full screen overlay with animated icon while page loads. If you want to remove it add
You can choose between 9 types of headers while creating your pages. The list of header type & its descriptions are provided below
|Header Variant||Style class||Description||Image||Code|
||One row light, top margin||ShortCode|
||One row light||ShortCode|
||One row dark||ShortCode|
phones block, addresses block, promo block
clear, left logo
search, promo block, address block
|Variant 8||.variant-8||Three rows
department menu, search, promo block, address block
|Variant 9||.variant-9||One row
creative, collapsed links
Use these classes with the headers making them sticky. Your can make sticky every headers variant.
|.sticky + .always|| Always fixed header on scroll.
|.sticky + .smart||Show fixed header only when scroll page to the top.
We provides a very usefull way to customize your menu.
Each menu item can be displayed in three different variants: no dropdown link, simple dropdown and megamenu link.
Here is the basic megamenu structure:
Seiko Template has darken effect on the screen when dropdown menu is open. If you want to use this effect add
.blackout class to
Seiko Template has two effect for dropdown animation: fadeIn and slideTop. If you want to use one of this effects add
.slidetop class to
Simple DropDown Link
Here is the Simple DropDown Link code example:
You can use unlimited levels of submenus.
MegaMenu DropDown Link
Schematic Layout of Megamenu dropdown:
You can use the megaMenu in 2,3,4 & 5 Columns. Also you can add Left and(or) Right custom block to the megaMenu. MegaMenu grids and codes are provided below:
|Description||MegaMenu Grid||Code Example|
Only categories columms
Left Block + Categories
Right Block + Categories
Left Block + Right Block + Categories
Categories + Top HTML + Bottom HTML
If the category in MegaMenu contains a very long list, you can hide a part of it. Use this html structure in your code:
Category Name view all... view less...
data-list-items="7" makes visible only 7 items of the list. To view all items, you should click the link 'view all'.
Mobile MenuMobile Menu is visible only when window is smaller than 992px. Its srtucture is provided below.
Mobile Menu Helper Classes
Use these classes with
|| First click on link will open submenu, second click will go to the URL specified for that link
Seiko Template has two minicart view designs: Compact and Fullwidth.
The HTML code is equal for both design, just toggle class for
|Minicart Types||Style class||Image||Example|
||Show in action|
||Show in action|
Also you can use minicart variant with awesome 'fly to cart' animaton.
Product Preview Types
You can choose between 5 types of product previews while creating your pages. Products type 1, and 3 has the same HTML structure. Its enough to change wrapper class to get the new preview type. Products type 5 and 6 has different html code structute, you need change class and HTML code to get these previews types.
Product preview HTML code must be placed inside wrapper div
All previews type contains such items as: big image photo, inside slider or small thumbnails for more photos view, product name block, description block, price block, rating block, labels (new/sale), sharing link, action button, quick view link, wishlist link, not available block.
The list of product types & its descriptions are provided below:
|Product Types||Style class||Description||Image||Code|
||Left Photo / Right Info
||Left Photo / Right Info
Recomended use only in products carousel
||Top Photo / Bottom Info
||Top Photo / Bottom Info
Zoom on Hover
||Top Photo / Bottom Info
You can put a countdown in the product preview or in the product pages of your shop and use it to highlight certain offers or deals.
There are two ways to set the final countdown date. Please see them below:
For more details on the countdown plugin, please visit its dedicated website.
Quick View adds the possibility to have a quick preview of the products right from product list. Quick View content is placed in quick-view.html and loads into modal window via ajax. So this feature will work only on server side, not locally.
For use QuickView add URL to
a.quick-view-link and place modal window code at the end of the page:
You can display product previews as carousel. For use carousel add class
to product previews wrapper:
Then initialize carousel with your parameters:
For more details on the carousel plugin, please visit its dedicated website.
Products Isotope Filter
You can display product previews as masonry grid with category filters. Add filters HTML code before products grid:
To make category selected on page load, add class to it
.active. For example, this code will select all products from category "New" at start.
Seiko Template has two product view designs: Classic and Creative. Creative design recomended to use only if product has 3 or more images.
In Classic design you can change product image size (large, medium, medium-plus and small).
Products Per Row
You can display product listing however you like by changing product preview variant and number of products per row. Available values for number of products per row are: 2 / 3 / 4 / 5 / 6. For changing this number just add class
.two-in-row,.three-in-row,.four-in-row,.five-in-row OR .six-in-row to
Look at this shortcode to view example.
You can display product listing like grid or like list view. The grid view is default. The list view arranges products in a vertical list and pulls in the excerpt to give a more detailed overview.
Look at this shortcode to view list view.
Also you can use Grid / List toggle button to your product listing allowing users to toggle between grid / list views.
The template has a ready-to-use filter blocks: categories, colors, sizes, prices, tags. You can place them to the left or right column.
Sidebar filter can be fixed on scroll or static. If sidebar is fixed all filter blocks are collapsed as accordion. If static - filter blocks are static and groups are opened
You can use stripe animation with filter block to show loading while ajax request. Just add
.block-loading class to
Seiko Template uses Swiper Slide. Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Designed mostly for iOS, but also works great on latest Android, Windows Phone 8 and modern Desktop browsers
You can find the Swiper Slider related Documentation here.
Here is the HTML code for the Swiper slider:
If you plan to set previews of each slide, please set attribute
data-thumb="true" to and
.swiper-slide. If parameter
data-thumb for slide is not specified, the preview image will be the same as the main image.
If you want to make slider image as link, set parameter
You can animate text, button or caption inside every slide via data parameters.Text
Button (big and small)Your Text
Slide text/caption data parameters are provided below:
|data-delay||Delay after previous text animation in ms||0 ... 10000||
|data-fontsize||Font size in relative value (vw)
1vw = 1% of viewport width
|0 ... 30||
|data-fontline||Line height in em (default is 1.2em)
1em equal to fontsize value,
2em equal to fontsize*2
|0.8 ... 3||
|data-fontcolor||Font Color (default is white)||-||
|data-fontweight||Font weight||normal (400)
OR numeric value:
100, 200, 300, 400, 500, 600, 700, 800, 900
|data-ypos||Y (vertical) position in %||0...100
|data-xpos||X (vertical) position in %||0...100
|data-animate||Text appear animation||bounce, flash, pulse, rubberBand, shake, headShake, swing, tada, wobble, jello, bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, bounceOutUp, fadeIn, fadeInDown, fadeInDownBig, fadeInLeft, fadeInLeftBig, fadeInRight, fadeInRightBig, fadeInUp, fadeInUpBig, fadeOut, fadeOutDown, fadeOutDownBig, fadeOutLeft, fadeOutLeftBig, fadeOutRight, fadeOutRightBig, fadeOutUp, fadeOutUpBig, flipInX, flipInY, flipOutX, flipOutY, lightSpeedIn, lightSpeedOut, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight, hinge, rollIn, rollOut, zoomIn, zoomInDown, zoomInLeft, zoomInRight, zoomInUp, zoomOut, zoomOutDown, zoomOutLeft, zoomOutRight, zoomOutUp, slideInDown, slideInLeft, slideInRight, slideInUp, slideOutDown, slideOutLeft, slideOutRight, slideOutUp||
|data-otherstyle||Other inline styles||-||
SEIKO demo sliders example
You can see all typography elements in this example shortcode.
You can choose between 2 types of brands view while creating your pages. Its descriptions are provided below
Seiko Template has a 'ready to use' contact form that you can simply add to your website. The HTML form validation script makes sure the data sent through the form is accurate and well formatted. Just add contact form shortcode and change the email recipient address in contact.php.
Use this shortcode to add google maps on your website.
For adding your address to Google Map just change coordinates (latitude longitude) in JS code:
position: new google.maps.LatLng(64.127182, -21.817184)
If you want to change google maps color scheme generate it in Snazzy Maps Website
Use this shortcode to add instagram on your website.
For adding your instagram account just change accessToken in JS code:
accessToken: 'your code'
For more details on the Instagramm Feed, please visit its official website.
Seiko Template uses jQuery plugins and CSS library provided below:
- Bootstrap- Bootstrap by Twitter
- Swiper Slider- jQuery slider plugin
- Slick- jQuery carousel plugin
- Isotope- jQuery plugin filter & sort plugin
- Images Loaded - jQuery plugin for detect when images are loaded
- Parallax jQuery plugin- jQuery plugin for parallax effect
- jQuery Countdown- jQuery Countdown plugin
- Magnific Popup- jQuery popup plugin
- jQuery elevateZoom- jQuery imagezoom plugin
- jQuery ezPlus- jQuery imagezoom plugin
- jQuery Validation Plugin
- jQuery Form Plugin
- jQuery DarkTooltip
- jQuery Instagram Feed
- jQuery Bootstrap TabCollapse
- jQuery Parallax plugin
- CSS Animation Library
Hope you will enjoy Seiko Template!