IDStore - Multi-Purpose WooCommerce Theme

Compatible with: WooCommerce 2.1.x


You may contact us on: support.8theme.com

Current documentation was created to help you with quick installation and configuration of  IDStore theme. Please, read it carefully to avoid most of potential problems with incorrect configuration.

Once you will have activated the theme you will need to change some of the pages and settings for optimal performance. That's why, please, do not contact Support center beforehand. Read firstly the documentation, implement all the steps following the instructions and only after that, if the issues persist, contact us.

Before installing IDStore theme, it is assumed that you have a working WordPress already installed. You should also install WooCommerce plugin for the correct work of our theme. The link for the plugin is provided below. 

For detailed Wordpress installation instructions visit http://codex.wordpress.org/Installing_WordPress

For detailed WooCommerce installation instructions or for more information visit http://www.woothemes.com/woocommerce/

Download the zipped package from ThemeForest and extract to your desktop. In the extracted package you will find IDStore_WordPress_Theme.zip file which is the WordPress theme.

You can install the theme in two ways:

If you get error:

This usually occurs when either the PHP memory limit or max post size for WordPress has been reached.

The easiest workaround for this is to install theme through FTP (see below).

Alternatively you'll need to change a number of settings either on Wordpress or on your web host. 

The next step gives the opportunity to install automatically the Home Page with banners and product sliders, the page Contact Us with contact form shortcode and Blog page, products. But do this at once after installation Wordpress and IDStore theme, as this function works with database and it can break your settings. Also before you begin the process, set the recommended dimensions for images in WooCommerce settings (see WooCommerce Settings item)!

You can make this installation manually as well

Follow the steps below and you will be adding content in no time.


Home page

  1. Create a page called "Homepage".
  2. To add banners on the home page (as on demo under the main slider) you need to add the following HTML code:

    Home

    <div style="background: #fafafa;">[rev_slider main]</div>
     <div class="container">
      <div class="row banners_top_row">
       <div class="span4 banners-block">
        <div class="banner banner-transform"><img src="[template_url]/images/1.jpg" alt="" /><div class="mask">
         <h2>Responsive Design</h2>
         <p>It is a long established fact that a reader will be distracted by the readable content of page when looking at its layout.</p>
         <a class="button" href="#">Purchase Now</a>
        </div>
       </div>
        <div class="text-banner">
    	 <a href="#"><h1>Super Flexible Theme</h1></a>
    	 <p>You will love this theme from the first steps!<br>
    	    You can setup this theme with the same look as on preview in just a couple of clicks
    	 </p>
    	 <a href="#" class="button small active"><span>Read More</span></a>
        </div>
       </div>
       <div class="span4 banners-block">
        <div class="banner banner-transform"><img src="[template_url]/images/2.jpg" alt="" /><div class="mask">
         <h2>Awesome Sliders</h2>
         <p>It is a long established fact that a reader will be distracted by the readable content of page when looking at its layout.</p>
         <a class="button" href="#">Purchase Now</a>
        </div>
     </div>
        <div class="text-banner">
    	 <a href="#"><h1>Responsive Design</h1></a>
    	 <p>You will love this theme from the first steps!<br>
    	You can setup this theme with the same look as on preview in just a couple of clicks
    	 </p>
    	 <a href="#" class="button small active"><span>Read More</span></a>
        </div>
       </div>
       <div class="span4 banners-block">
        <div id="last_banner_top" class="banner banner-transform"><img src="[template_url]/images/3.jpg" alt="" /><div class="mask">
         <h2>Unlimited Colors</h2>
         <p>It is a long established fact that a reader will be distracted by the readable content of page when looking at its layout.</p>
         <a class="button" href="#">Purchase Now</a>
        </div>
       </div>
        <div class="text-banner">
    	 <a href="#"><h1>Clean Modern Design</h1></a>
    	 <p>You will love this theme from the first steps!<br>
    	You can setup this theme with the same look as on preview in just a couple of clicks
    	 </p>
    	 <a href="#" class="button small active"><span>Read More</span></a>
        </div>
       </div>
      </div>
    [etheme_featured] 
    [etheme_new title="Latest Products" ]
     </div>
    

    Home 2

    <div style="background: #fafafa;">[rev_slider main]</div>
     <div class="container">
      <div class="row">
       <div class="span4 block-with-icon a-center">
         [icon name="icon-mobile-phone" size="100" color=""]<br><br>
         <h2>Flexible Responsive Layout</h2>
         <p>Aenean odio dui, facilisis ut convallis in, congue quis mi. Etiam eu tristique metus. 
    	 Vivamus id orci ac sapien porttitor  et dui. Phasellus porttitor quam dictum. </p>
         <a class="button active" href="#">Read More</a>
       </div>
       <div class="span4 block-with-icon a-center">
         [icon name="icon-shopping-cart" size="100" color=""]<br><br>
         <h2>WooCommerce Plugin Ready</h2>
         <p>Aenean odio dui, facilisis ut convallis in, congue quis mi. Etiam eu tristique metus.
    	 Vivamus id orci ac sapien porttitor  et dui. Phasellus porttitor quam dictum. </p>
         <a class="button active" href="#">Read More</a>
       </div>
       <div class="span4  block-with-icon a-center">
        [icon name="icon-fire" size="100" color=""]<br><br>
        <h2>A lot of theme settings</h2>
        <p>Aenean odio dui, facilisis ut convallis in, congue quis mi. Etiam eu tristique metus. 
    	Vivamus id orci ac sapien porttitor  et dui. Phasellus porttitor quam dictum. </p>
        <a class="button active" href="#">Read More</a>
       </div>
       <div class="span12">
        [etheme_featured]
       </div>
      </div>
      <div class="row">
       [iblock type="wide" class="span12" btn="Purchase Theme" link="#"] 
       <h3>BEST SELLER WORDPREES THEME THAT YOUR EVER SEEN!</h3> 
       <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
       in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
       [/iblock] 
       <br>
      </div>
      [portfolio]
       <br>
      <div class="row">
       <div class="span6">
        <h3>Useful information</h3>
        [tabs]
        [tab active="1" title="HTML Tab 1"]   <p class="block-with-icon">[icon name="icon-camera fl-l" size="52" style="margin:0 14px 5px 0;"] 
        Vivamus in odio massa. Etiam molestie enim gravida neque dapibus consequat. In hac habitasse platea dictumst.
        Nullam nulla risus, mollis id viverra nec, fringilla vehicula metus. Etiam eu risus non nulla sodales dictum vulputate et quam. 
        Suspendisse potenti. Suspendisse potenti. Cras at purus eu odio.</p> [/tab]
        [tab title="Custom Tab 2"]   <p>2. Aenean sit amet erat eu tortor tempus tincidunt. Phasellus adipiscing, turpis a dictum molestie,
        nisi neque vehicula ante, venenatis venenatis nulla mi quis velit. Phasellus vitae dui nec nulla dictum fringilla.
        Vestibulum ac magna vel arcu iaculis lacinia. Integer pellentesque lobortis dui, eu fermentum lectus viverra eget. 
        Etiam ut mauris eu mauris ullamcorper congue. Cum.</p>  [/tab]
        [tab title="Sample Tab 3"]   <p>3. Aliquam vel nisi tellus. Nullam justo ipsum, gravida et consequat eget, tincidunt eleifend libero. 
        Maecenas semper interdum nibh, et facilisis sem viverra a. Vestibulum quis nisl odio, vitae vehicula nisl. Morbi et elit urna, 
        sed scelerisque ipsum. Aliquam volutpat elementum molestie. Praesent eu nunc sapien, vitae laoreet augue. Sed pulvinar cursus tellus,
        eu volutpat lectus. </p>[/tab]
        [/tabs]
       </div>
       <div class="span6">
        <h3>Clients Testimonials</h3>
        [testimonials interval="5000"]
       </div>
      </div>
     </div>
    
  3. Set the page template (under page attributes) to Frontpage.

Blog

Create a page called "Latest News" (or whatever you want your blog called) and leave the page template as default.

Go to Settings -> Reading, and change the "Front page displays" setting to "A static page", set the front page to your homepage, and "Posts Page" to the blog page you just created.

You can use set global Blog page layout (Theme Options > Blog Layout) or set individual layout for every single post during creation.

Products and categories import

Before you begin the importing process, set the recommended dimensions for images in WooCommerce settings (see WooCommerce Settings item)!

You may also import XML file, where some demo data from our site are, which can facilitate your work with theme. XML file (idstore.woo_commerce.xml) you can find in the archive.

For this you need:

  • Navigate to Tools -> Import and install WordPress import plugin.
  • Select the XML file and upload it.

Do not forget: 
- Folder wp-content/uploads should have permissions 777. 
Download and import file attachments should be checked. 

 

Before you begin the IDStore updating process, we recommend to do the backup of all your files!

You can update theme in two ways:

FTP:
1. Download the zipped package from ThemeForest and extract to your desktop.
2. In the extracted package you will find archive IDStore_theme.zip, which is the WordPress theme.
3. Extract zip file and upload the extracted folder to /wp-content/themes/ folder on your server with overwriting.

WordPress:
1. Install Envato Toolkit plugin.

2. Navigate to Envato Toolkit and fill in required Marketplace Username and Secret API Key fields, press Save Settings button.
3. Press update automatically and theme will be updated.

Important!

Do not forget to re-save your IDStore options after upgrading the theme. Navigate to admin panel -> Theme Options and hit Save changes.

IDStore supports custom WordPress menu. Navigate to WP Admin -> Appearance -> Menus page and create menu. Select the newly created menu in theme locations area "Top Navigation" as it mentioned on screenshot and press Save button.

WordPress 3.6.x

The theme supports two sliders, Revolution Slider and Layer Slider, the installation of which would be provided for you after theme activation.

After that you may create the sliders and use them on the site according to the plugin documentation. We have included folders called "documentation_Revolution_Slider" and "documentation_Layer_Slider" that contain the documentation from the authors of the sliders. Please, refer to them for further information about sliders settings. Both of the sliders can be added to any page.

Revolution Slider

To setup Revolution Slider follow the next steps:

Layer Slider

To set up your Layer Slider follow the next steps:

Pay attention for the slider to be on the home page, you need to insert there shortcode of the slider.

A lot of the WooCommerce settings are optional, for example Catalog Options, some Inventory Options, however there are a few presentation settings you should change to make sure everything works fine.

Go to WooCommerce > Settings > Products

Product Image Sizes

 

General

Color Scheme

Typography

Header

Shop

Products Page Layout

Single Product Page

Blog Layout

Portfolio

Contact Form

Responsive

Custom CSS

All the CSS styles placed in this file will not be lost after upgrading the theme in the future!

Import/Export

First of all allow the registration. Navigate to Settings -> General -> Membership and mark Anyone can register. Then create Register Page and set the page template (under page attributes) to Custom Registration Page.

You may also use our theme as a Portfolio. It is the perfect way to share your artwork, photography, or anything visual you want to show off.

Create Portfolio Page and set the page template (under page attributes) to Portfolio. It will be the main page where will be displayed all your projects.

Then go to Theme Options -> Portfolio and set necessary options.

You may create New Projects at Portfolio -> Add New.

There are several shortcodes which can be used in IDStore theme inside posts and pages. You can look at examples, grab the code and learn more on each shortcode’s individual page of our demo here.

You can create additional sidebars to add your own content and functionality and to use different sidebars on different pages (posts) (except Home, Shop and Blog pages). Navigate to Appearance > Widgets. Fill in Custom Sidebar title and press Add Sidebarbutton. Place necessary widgets into newly created sidebar. Then create page (Pages > Add New) and on the right side of the Page Layout area choose Sidebar Position and desired Widget Area.

Also there are 16 default widget areas, which you can use to add your own content and functionality. There are 13 widgets in the sidebars, one in under products footer area, 10 in the lower footer area.

Primary Widget Area:

- Categories
- 8theme - Recent Posts
- 8theme - Recent Comments
- Text widget with following code:

<div class="banner banner-transform">
 <img src="http://YOUR_PATH/wp-content/themes/idstore/images/Custom-banner1.jpg">
  <div class="mask">
   <h2>Nice Demo Banner</h2>
    <p>It is a long established fact that a reader will be distracted by the readable content of page when looking at its layout.</p>
     <a href="#" class="button">Read More</a>
  </div>
</div>
Product Page sidebar:

- 8theme - Subcategories List
- WooCommerce Price filter
- WooCommerce Layered Nav (Attribute: size; Display Type: List)
- WooCommerce Layered Nav (Attribute: color; Display Type: List)
- Text widget "CUSTOM BANNER" with following code:

<div class="banner banner-transform">
 <img src="http://YOUR_PATH/wp-content/themes/idstore/images/Custom-banner1.jpg">
  <div class="mask">
   <h2>Nice Demo Banner</h2>
    <p>It is a long established fact that a reader will be distracted by the readable content of page when looking at its layout.</p>
     <a href="#" class="button">Read More</a>
   </div>
</div>

- 8theme - Recent Posts
- 8theme - Special Offers

Under Products:

- Text widget with following code:

<div class="widget-placeholder">
 <div class="side-icon"><i class="icon-camera"></i></div>
  <div class="side-text">
   <h3>Custom HTML Block</h3>
Widgetized area where you can put any widget
  </div>
 <div class="clear"></div>
</div>
The First Footer Widget Area:

- Text widget "OUR CONTACTS" with following code:

<p class="footer-home">
 <i class="icon-home"></i>
   United Kingdom, London <br>
   Simple Street 15A
</p>
<p class="footer-phone">
 <i class="icon-phone"></i>
   (123) 123.456.7890 <br>
   (123) 123.456.7890
</p>
<p class="footer-mail">
 <i class="icon-envelope-alt"></i>
    megashop@info.com <br>
    megashop@holding.com
</p>
The Second Footer Widget Area:

- Text widget "ABOUT OUR SHOP" with following code:

<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 
the 1500s, when an unknown printer took a galley of type  and scrambled it to make a type specimen book. It has survived not  only five 
centuries, but also the leap into electronic typesetting, remaining.
</p>
The Third Footer Widget Area:

-8theme - Twitter Feed

If you get an error on frontend, please, check permissions on your wp-content/themes/idstore/code/cache folder, it should be 777 with recursion.

The Fourth Footer Widget Area:

-8theme - Flickr Photos

The Fifth Footer Widget Area:

- Text widget "STORES" with following code:

<ul class="footer_menu">
  <li><a href="#">New York</a></li>
  <li><a href="#">Paris</a></li>
  <li><a href="#">London</a></li>
  <li><a href="#">Madrid</a></li>
  <li><a href="#">Tokio</a></li>
  <li><a href="#">Milan</a></li>
  <li><a href="#">Hong Kong</a></li>
</ul>
The Sixth Footer Widget Area:

- Text widget "OUR OFFERS" with following code:

<ul class="footer_menu">
  <li><a href="#">New products</a></li>
  <li><a href="#">Top sellers</a></li>
  <li><a href="#">Specials</a></li>
  <li><a href="#">Manufacturers</a></li>
  <li><a href="#">Suppliers</a></li>
  <li><a href="#">Specials</a></li>
  <li><a href="#">Customer Service</a></li>
</ul>
The Seventh Footer Widget Area:

- Text widget "OUR SERVICES" with following code:

<ul class="footer_menu">
  <li><a href="#">Order tracking</a></li>
  <li><a href="#">Privacy Policy</a></li>
  <li><a href="#">Gift Cards</a></li>
  <li><a href="#">Shipping Information</a></li>
  <li><a href="#">Returns & refunds</a></li>
  <li><a href="#">Personalised Cards</a></li>
  <li><a href="#">Delivery information</a></li>
</ul>
The Eighth Footer Widget Area:

- Text widget "OUR OFFERS" with following code:<

<img src="http://YOUR_PATH/wp-content/themes/idstore/images/label_2-1.png" class="footer-logo"alt=""/><br>
<img src="http://YOUR_PATH/wp-content/themes/idstore/images/label_3-1.png"class="footer-logo2" alt=""/> 
<img src="http://YOUR_PATH/wp-content/themes/idstore/images/label_1-1.png"class="footer-logo3" alt=""/>
Payments Area:

- Text widget with following code:

<ul class="footer_copyright_payments hidden-phone">
  <li><a href="#"><img src="http://YOUR_PATH/wp-content/themes/idstore/images/1363982755_paypal.png" alt=""/></a></li>
  <li><a href="#"><img src="http://YOUR_PATH/wp-content/themes/idstore/images/1363982759_mastercard.png" alt=""/></a></li>
  <li><a href="#"><img src="http://YOUR_PATH/wp-content/themes/idstore/images/1363984018_visa.png" alt=""/></a></li>
  <li><a href="#"><img src="http://YOUR_PATH/wp-content/themes/idstore/images/1363982767_discover.png" alt=""/></a></li>
  <li><a href="#"><img src="http://YOUR_PATH/wp-content/themes/idstore/images/1363982770_maestro.png" alt=""/></a></li>
  <li><a href="#"><img src="http://YOUR_PATH/wp-content/themes/idstore/images/1363982772_google_checkout.png" alt=""/></a></li>
  <li><a href="#"><img src="http://YOUR_PATH/wp-content/themes/idstore/images/1363982777_cirrus.png" alt=""/></a></li>
</ul>
Copyrights:

- Text widget with following code:

<ul class="footer_copyright_menu">
                <li><a href="#">Site Map</a> / </li>
                <li><a href="#">Advanced Search</a> / </li>
                <li><a href="#">Orders and Returns</a> / </li>
                <li><a href="#">Contact Us</a></li>
 </ul>

The translation file you can find in languages folder (/wp-content/themes/idstore/languages). Edit the .pot file using POEdit, use the translation field to make replacements. Read here how to do it right.

From the file menu, save file with your language name e.g de_DE.po into languages folder. It will generate both a .po and .mo file for your translation.

Next edit wp-config.php located in the root folder of wordpress and define the WPLANG prefix with your language name which should be similar to the translation file name.

This theme utilises the jQuery framework and imports a number of custom and 3rd party scripts:

You may watch our video tutorials for your easy and quick installation of our theme trough WordPress / FTP, import demo pages, slider or dummy products.

Installation IDStore Responsive WooCommerce Theme
Installation IDStore Demo Data