Dissemination of views, information and knowledge without any cost or ado was made possible after blogging dawned upon us. Lets take a look at some of the burning topics, general discussion, innovations and techniques from our Editor’s desk

  • Mar 19 2013

    PSD to Prestashop Theme Conversion: Understanding the Basic Structure of a Theme

    Designing a Template is one of the most creative tasks, as it involves a lot of designing elements like Header, Navigation Bar, Sidebar, Content Area, Footer, where one gets to show his creativity. But that’s not all, to develop a website. As once a design gets completed, it goes straight to the web coder or developer, who transforms that PSD design into an HTML Template using the latest HTML5 standard that is recommended by W3C. However, this task might look easy at first, but believe us it isn’t. And its even more complicated to make an eCommerce template. As you need to concentrate on a lot of things like the product should be displayed precisely, the price tags should be placed well, the home page should always display the top selling products/brands, the functioning of e-cart should run smoothly, the customer login area should contain all necessary elements like the profile, order details, shipping details, etc. And, that’s where the expertise is always required.

    We have elaborated the complexity of an eStore above because that’s what we will be covering with this blog post. We will take you through the making of an e-Shop template, which would be transformed into a Prestashop theme converted straight from a PSD design file. But before that, we must understand, what exactly Prestashop is, how it works, and what do we need to get the Prestashop template out of your PSD.

    PSD to Prestashop Conversion

    What Prestashop is all about?

    Prestashop is one of the most popular online shopping portal making platforms, and being an open source technology, it’s available for free. Its theme system is based on Smarty, a template engine for PHP, which help web coders to develop themes even if they have little technical skills. Currently its stats show that it has already been downloaded 2,438,062 times, and fuels more than 130,000 shopping sites. Moreover, it is available in 56 different languages, and is being used in 150 countries. The prime reason for its popularity is that it comes with more 310 dynamic features that helps provide matchless shopping experience to web visitors or e-Buyers. In addition to this, it has also got 2000+ Modules and Templates to choose from to get a classy eStore setup in minutes. However, it is always advisable to use customized Prestashop themes for setting up a unique online shopping website.

    A Prestashop Theme Structure

    A Prestashop template is nothing but a comprehensive set of files, which can be edited whenever you feel the need to do so by giving your portal the exact look you want. A Prestashop theme structure is quite easy to understand, and contains ‘.tpl’files which are produced by Smarty. If you are unaware of how to configure the smarty template engine on your computer, you can watch the short video tutorial on Smarty. It explains you the entire setup process, and how you can begin coding your templates using it.

    In addition to this, all Prestashop themes have their files stored in the ‘/themes’ root folder, and each and every theme you code, would carry its own ‘sub-folder’ in the main ‘themes’ folder. Moreover, as we told you above, every Prestashop template would comprise of template files having a ‘.tpl’ extension. As far as images and JavaScript are concerned, .gif, .jpg, and .png image format files can be used and stored inside the /img folder, the JavaScript should be placed in a different file folder named ‘js’, and the CSS files should be injected into the CSS folder.

    Prestashop Theme Structure

    However, if you want to offer your shopping site in multiple languages, you have to place all your translation files. To elaborate the entire structure further, we have listed below a set of files, which you must create to offer an exquisite shopping experience to your consumers, with their usage. This would be the last thing for you to turn your PSDs into a Prestashop theme, as it contains all the required file structure and the only other thing that you need is a little bit of coding skills.

    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:- This file will be useful to display the HTTP 404 error whenever the requested page won’t be found on your site.

    address.tpl:- This file will come into use when a user will create or edit his street address.

    addresses.tpl:- This file will be used while a user will be listing his street addresses.

    authentication.tpl:- This file will come into effect to recognize an existing user, or to create a new user account.

    best-sales.tpl:- It will be used to list all best sale.

    breadcrumb.tpl:- This file will be used to help users to find the navigation path via breadcrumb trail.

    category.tpl:- To list all the products in a particular category, this file will be used.

    category-tree-branch.tpl:- It will only be used by the Category block.

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

    contact-form.tpl:- This file will be used to make a validated contact form.

    discount.tpl:- If you want to offer any discount on your website, this file will be used to list all discount offers and coupons for a single registered user/consumer.

    errors.tpl:- If your website will return any error, it will be used to display them.

    footer.tpl:- It will display the Page footer.

    guest-tracking.tpl:- This file will be used whenever a guest visitor will come on the site to track his order.

    header.tpl:- It will be the Page header.

    history.tpl:- This file will list the entire order history of a registered user under the user dashboard.

    identity.tpl:- It will come into use whenever a client updates his personal information.

    index.php:- It would be a blank file, which will help preventing visitors to view the contents of a folder.

    index.tpl:- It will be the Welcome page.

    maintenance.tpl:- Whenever your website will go into maintenance mode, this file will come into play.

    manufacturer.tpl:- It will be used to list all products from a single manufacturer.

    manufacturer-list.tpl:- It will be used to display the list of all manufacturers.

    my-account.tpl:- It will be the Welcome page of a registered users account.

    new-products.tpl:- This file will come in use to list the newly added products.

    order-address.tpl:- This will be used during the first step of ordering process, which would be to choose the billing as well as product delivery addresses.

    order-carrier.tpl:- It will be used during the second step of the ordering process, which would be to select the carrier mode.

    order-payment.tpl:- it will be used during the third step of the ordering process, which would be to pick the payment mode.

    order-confirmation.tpl:- For the last step of the ordering process that is confirming the order (after payment), this file will be used.

    order-detail.tpl:- To display the order details to the user, this file will be used.

    order-follow.tpl:- This file will be used whenever a user would ask for a product return.

    order-return.tpl:- It will be display the returned product’s details.

    order-slip.tpl:- It will display a user’s credit slips.

    order-steps.tpl:- It will help to display the Order process progress bar.

    pagination.tpl:- This file will be used by all the pages that would list products. It also displays the pagination button which empowers the user to toggle between the next/previous pages of a product.

    password.tpl:- Whenever a user wants to update his password, this file will come into play.

    prices-drop.tpl:- It will be used to list all undergoing promotions.

    product.tpl:- It will be used to display the details of a single product.

    product-list.tpl:- This file will be used by all the pages that list products, and it will display the actual products list.

    product-sort.tpl:- It will be used by all the pages that list products. It will display a menu enabling to sort and filter products.

    scenes.tpl:- It will be used to display a scene’s details within a product category.

    search.tpl:- It will be used to list the results for a search query made by the user.

    shopping-cart.tpl:- This file will display the list of products in a user’s cart.

    shopping-cart-product-line.tpl:- It will be used to display from a single cart row.

    sitemap.tpl:- It will help you setup the site map of your shopping site.

    supplier.tpl:- This file will list all the products from a specific supplier.

    supplier-list.tpl:- It will display all the suppliers under one list.

    thickbox.tpl:- In order to offer a zoom in and zoom out functionality to have a closer look at the products, this file will be used.

    Some of the above listed files can be avoided while making a theme out of a PSD file, but it is quite important to note that a Prestashop template would require at least 30 Pages or Page sections, which are listed below, and if you fail or forget to include some of the listed pages or page sections, it would result in an incomplete theme, which would prove to be a bad user experience for your consumers.

    • Home page
    • Category page
    • Product page
    • Product comparison page
    • Search results page
    • “My Account” and its inner pages:
      • My vouchers
      • Orders history
      • Personal information
    • “My Cart”
    • Authentication page
    • Account creation
    • Checkout pages:
      • Addresses list
      • Shipping costs
      • Payment choice (check, bank transfer)
      • One page checkout
    • Address creation
    • Delivery page
    • Maintenance page
    • Manufacturers list and single manufacturer page
    • Suppliers list and single supplier page
    • The 404 page (“Page not found”)
    • “Best sales” page
    • “New products” page
    • “Current promotions” page
    • “Forgotten password” page
    • Legal notice
    • Sitemap
    • Stores page
    • Contact form

    We hope by now you might be able to understand the entire Prestashop theme structure that would help you transform a PSD file into a complete template. However, if you still feel low on confidence, we would advise you to go for a company which has immense expertise in converting Prestashop based templates from a PSD, as there are a few companies which can offer their service at reasonable prices.

    Posted by Charu Garg Posted in: PSD to HTML Comments: 2