How to create responsive Prestashop theme with Twitter Bootstrap from scratch

How to create responsive Prestashop theme with Twitter Bootstrap from scratch

What is PrestaShop?

PrestaShop is a free, open source e-commerce solution. It supports payment gateways such as Google Checkout, Authorize.net, Skrill, PayPal and Payments Pro via API. Further payment modules are offered commercially.

PrestaShop is available under the Open Software License and officially launched in August 2007. The software, which is based on the Smarty template engine, is currently used by 125,000+ shops worldwide. PrestaShop is the winner of the 2010 and 2011 Best Open-source Business Application awards. The software makes extensive use of AJAX in the admin panel, while module blocks can be easily added to the store to provide extra functionality; these are normally provided free of charge by independent developers.

The PrestaShop group was founded in Paris, with a second office opened in Miami in 2011. PrestaShop is translated into 53 languages, with only English and French having full support in all release versions. Technical support is provided on the official forum from PrestaShop growing Community consisting of more than 350,000 active members.

The makers of PrestaShop have an official marketplace for priced modules and themes entitled PrestaShop Addons. There are a number of volunteers who support and contribute their own Addons to PrestaShop. Contributors often program additional features for the software, on top of the 275 features available by default.

PrestaShop operates an associated website called PrestaBox, which integrates the software into a simple one-stop hosting operation.

Download and Installation

PrestaShop: Always Free and easy Installation,please download: http://www.prestashop.com/en/download

How a theme works

A PrestaShop theme is a set of files which you can edit in order to change the look of your online shop.

Here are a few important tidbits:

 

  • All themes have their files located in the /themes root folder.
  • Each theme has its own sub-folder, in the main themes folder.
  • Each theme is made of template files (.tpl), image files (.gif, .jpg, .png), one or more CSS files (.css), and sometimes even JavaScript files (.js).
  • Each theme has a preview.jpg image file in its folder, enabling the shop-owner to see what the theme looks like directly from the back-office, and select the theme appropriately.
  • The /css folder contains all CSS files.
  • The /img folder contains all images.
  • The /js folder contains all the JavaScript files.
  • The /lang folder contains the theme’s translations. Its access rights should be set at CHMOD 666 (for instance), so that the back-office translation tool can read and write into it.
  • The root of the folder contains TPL files only (Smarty files), as well as the preview.jpg file.

File structure for a theme

File or folder

Description

preview.jpg

This image is used as a preview in the “Theme” selector in the “Preferences” > “Appearance” sub-tab. This image is mandatory, as without it the theme cannot be selected. It should obviously reflect the theme’s design, and not its logo or designer’s name…

404.tpl

Used when the requested page is not found (HTTP error 404).

address.tpl

Used when adding or editing a client street address.

addresses.tpl

Used when listing a client’s street addresses.

authentication.tpl

Used when identifying a user, or creating a new user account.

best-sales.tpl

Used to list all best sale.

breadcrumb.tpl

Used to find the navigation path, or breadcrumb trail.

category.tpl

Used to list all products in a given category.

category-tree-branch.tpl

Used only by the Category block.

category-cms-tree-branch.tpl

cms.tpl

Used for informational pages (“Tools” > “CMS” sub-tab).

contact-form.tpl

Used by the contact form.

discount.tpl

Used when listing all discount tickets for a single client.

errors.tpl

Used when displaying errors. Potentially called by all of the pages.

footer.tpl

Page footer.

guest-tracking.tpl

Used when a visitor has no know account on the site, but wants his order to be tracked – and therefore needs to create an account or log in.

header.tpl

Page header

history.tpl

Used when lsiting the order history of a client.

identity.tpl

Used when a client edits his/her personal information.

index.php

Blank file, prevents visitors to view the content of the folder.

index.tpl

Welcome page.

maintenance.tpl

Used when the site is in maintenance mode.

manufacturer.tpl

Used when listing all products from a single manufacturer.

manufacturer-list.tpl

Used when listing all manufacturers.

my-account.tpl

Welcome page for a client’s account.

new-products.tpl

Used when listing the products that were last added to the cart.

order-address.tpl

Used during the order process: Step 1, choosing the addresses (delivery, billing).

order-carrier.tpl

Used during the order process: Step 2, choosing the carrier mode.

order-confirmation.tpl

Used during the order process: Last step, confirming the order (after payment).

order-detail.tpl

Used to display the content of a client’s order.

order-follow.tpl

Used when a client needs to ask for a product return.

order-opc.tpl

order-opc-new-account.tpl

order-payment.tpl

Used during the order process: Step 3, choosing the payment mode.

order-return.tpl

Used to display a client product return details.

order-slip.tpl

Used to display a client’s credit slips.

order-steps.tpl

Order process progress bar.

pagination.tpl

Used by all pages that list products. Displays the pagination button, enable to skip to the next/previous page of products.

password.tpl

Used when a client needs to change his password.

prices-drop.tpl

Used to list all current promotions.

product.tpl

Used to display details for a single product.

product-list.tpl

Used by all pages that list products. Displays the actual products list.

product-sort.tpl

Used by all pages that list products. Displays a menu enabling to sort and filter products.

products-comparison.tpl

scenes.tpl

Used to display a scene’s details within a product category.

search.tpl

Used to list results from a search query.

shopping-cart.tpl

Used to list products in a client’s cart.

shopping-cart-product-line.tpl

Used to display from a single cart row.

sitemap.tpl

Used to display the site map.

store_infos.tpl

stores.tpl

supplier.tpl

Used to list all the products from a single supplier.

supplier-list.tpl

Used to list all suppliers.

thickbox.tpl

Used to zoom a product’s picture.

/cache

/css

Contains all style sheet files for the theme. The global.css file deals with the layout for most of the site. Unless you know exactly what you are doing, you should leave these files alone.

/img

Contains all of the theme’s images. You should replace these images with your own adequate creations. If you do not know what to make of it, you should leave the original files.

/js

Contains all of the theme’s JavaScript files. Unless you know exactly what you are doing, you should leave these files alone.

/lang

Contains all translation files. These are generated by the back-office translation tool, and should not be edit directly. If a translation needs editing, go to the back-office, “Tools” tab, “Translation” sub-tab, “Modify translation” section, and choose “Front office translations”.

Creat New Theme

After downloaded and installed Prestashop please find folder called ‘themes’ and innside the ‘themes’ folder, create a new directory with the name of your theme. Example: vinaora
If you have PSD or any image for your theme please creat for Home page theme preview image called preview.jpg and upload to ‘vinaora’ folder. Prestashop should automatically find and add your template to the back-end. Then go to the Themes option under the Preferences menu, and click Add New at the top. Once completed, you will see your theme in the center of the page. Enable it by simply clicking on it and pressing the Save button.

Your theme’s functionality determines which pages you should implement. These page are based on the files in the controllers folder, and you can override the default controllers or add your own custom controllers to fit your theme.

Work with Index.php

Use your editor to creat new php file called index.php with code bellow

<?php
/*
* 2007-2013 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <contact@prestashop.com>
*  @copyright  2007-2013 PrestaShop SA
*  @version  Release: $Revision: 14008 $
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*/

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");

header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

header("Location: ../");
exit;
?>

Work with Index.tpl

Code


{*
* 2007-2013 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <contact@prestashop.com>
*  @copyright  2007-2013 PrestaShop SA
*  @version  Release: $Revision: 14008 $
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}

{$HOOK_HOME}

Work with header.tpl

<!DOCTYPE html>
<html lang="en">
<head>
<title>{$meta_title|escape:'htmlall':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
<meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
<meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />
{/if}
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="generator" content="PrestaShop" />
<meta name="robots" content="{if isset($nobots)}no{/if}index,follow" />
<link rel="icon" type="image/vnd.microsoft.icon" href="{$img_ps_dir}favicon.ico?{$img_update_time}" />
<link rel="shortcut icon" type="image/x-icon" href="{$img_ps_dir}favicon.ico?{$img_update_time}" />
<script type="text/javascript">
var baseDir = '{$content_dir}';
var static_token = '{$static_token}';
var token = '{$token}';
var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
var priceDisplayMethod = {$priceDisplay};
var roundMode = {$roundMode};
</script>
<link rel="stylesheet/less" type="text/css" href="/themes/bootstrap/css/bootstrap.less" />
<script src="/themes/bootstrap/js/less-1.3.0.min.js"></script>
{if isset($css_files)}
{foreach from=$css_files key=css_uri item=media}
<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
{/foreach}
{/if}
{if isset($js_files)}
{foreach from=$js_files item=js_uri}
<script type="text/javascript" src="{$js_uri}"></script>
{/foreach}
{/if}
{$HOOK_HEADER}
</head>

<body>
{if !$content_only}
{if isset($restricted_country_mode) && $restricted_country_mode}
<div id="restricted-country">
<p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>
</div>
{/if}
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="{$link->getPageLink('index.php')}">
<img class="logo" src="{$img_ps_dir}logo.jpg?{$img_update_time}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />
</a>
{$HOOK_TOP}
</div>
</div>
</div>

<div class="container-fluid">
<div class="row-fluid">
<!-- Left -->
<div class="span2">
{$HOOK_LEFT_COLUMN}
</div>

<!-- Center -->
<div class="span8">
{/if}

Work with Footer.tpl

{if !$content_only}
</div>

<!-- Right -->
<div class="span2">
{$HOOK_RIGHT_COLUMN}
</div>
</div>
</div>
<!-- Footer -->
<footer>{$HOOK_FOOTER}</footer>
{/if}
</body>
</html>

Can download YouriT prestashop-bootstrap as demo theme

http://joomquery.com/upload/prestashop-bootstrap-master.zip

Be Sociable, Share!

Leave a comment