Prestashop - 1.4 Guide de l'utilisateur

Naviguer en ligne ou télécharger Guide de l'utilisateur pour Logiciel Prestashop - 1.4. Prestashop - 1.4 Designer Guide Manuel d'utilisatio

  • Télécharger
  • Ajouter à mon manuel
  • Imprimer
  • Page
    / 26
  • Table des matières
  • MARQUE LIVRES
  • Noté. / 5. Basé sur avis des utilisateurs
Vue de la page 0
PrestaShop Designer Guide
The default PrestaShop install offers a neutral theme in shades of gray,
enabling sellers to quickly and freely start their activity, whatever their
business line.
More than 700 themes are available through the PrestaShop Addons
marketplace. They were created either by the PrestaTeam or the
PrestaShop community, and are sold at reasonable prices some even
free.
As a graphic designer/web developer, you too can put your themes up for
sale on the PrestaShop Addons site, and earn 70% of the selling price.
Anyone with some knowledge of CSS and image manipulation can create a
custom theme for PrestaShop. Provided you know PHP as well, you can
build a whole new theme for your shop. Thanks to a tried and tested
theme system, any shop can quickly sport a theme tailored to its needs.
Coding a theme
PrestaShop's theme system is based on a template engine, called Smarty,
which allows web-designers and developers to easily build their own
theme, with little technical knowledge.
All web-designers and developers should use the following tools:
Firefox: Firebug is a free extension for easy comparison and
debugging between your CSS and the output.
Firefox/Chrome: Web Developer adds many handy web developer
tools to your browser.
Safari/Chrome: enable the Web Inspector.
Opera: Dragonfly, a fully-featured debugging environment.
Internet Explorer 8+: Developer Tools are available through the
Tools menu.
Internet Explorer users can also make use of Firebug lite.
Concepts and technical information
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:
Vue de la page 0
1 2 3 4 5 6 ... 25 26

Résumé du contenu

Page 1 - Coding a theme

PrestaShop Designer Guide The default PrestaShop install offers a neutral theme in shades of gray, enabling sellers to quickly and freely start their

Page 2

preview.jpg file: Once your design is complete, you can create the preview image file. Take a screen shot, then resize it to 180px width in order to u

Page 3 - .css file

Hooks Main content areas Modules Header section

Page 4

Homepage blocks

Page 5

Category central column

Page 7 - /prestashop sub

Account forms & order steps Account creation form

Page 8

Order blocks

Page 9 - /js folder

Addresses Terms & Conditions and carrier choice

Page 10 -  The name of the block

Payment module choice Site map

Page 11

Contact form

Page 12 - Homepage blocks

 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 m

Page 13 - Category central column

Stores page Design tips Thinking ahead Before opening PhotoShop, GIMP or any other graphic editor, you should sit at a desk with a pen and a sheet pa

Page 14 - Product page

sitemap, making it as flexible as possible (not all shops have the same amount of categories, or of products per category). A complete PrestaShop them

Page 15 - Account creation form

Of course, these are just general tips; some professional might prefer to do it all directly in PhotoShop, then jump right into PHP, HTML and CSS. Tec

Page 16 - Order blocks

Text size Always keep in mind that the user has the final say on the text say, as modern browser can expand or reduce it at will. As a matter of fact,

Page 17 - Addresses

The home page This is the most important page of your shop, the one where it is "hit or miss". This is the page where the visitor will get a

Page 18 - Site map

Make the "Add to Cart" button clear and visible. It must distinguish itself from the rest of the layout, by both its size and color – but do

Page 19 - Contact form

All these usability tips are just part of the whole story, but they can bring you a solid ground on which building your theme, in order to improve you

Page 20 - Design tips

{l s='My Text'} This will enable anyone to translate the theme into his own language, using the internal translation tool, which you can fi

Page 21

6. Always make sure to produce a clear and readable code, making it easy to maintain for anyone. 7. Do comment your code, in English. 8. When editi

Page 22 - Technical recommendations

 Where possible, use CSS instead of HTML (e.g., only use tables for tabular data, not for layout).  Validate your XHTML and CSS code using the W3C

Page 23 - Usability

Share your themes! Show off your hard work, get feedback, and build your reputation by sharing your theme in the Themes section of our Forum! You can

Page 24

/themes/prestashop sub-folder. This is the folder from which you will build your own theme. That being said, it is highly discouraged to directly chan

Page 25

client. errors.tpl Used when displaying errors. Potentially called by all of the pages. footer.tpl Page footer. guest-tracking.tpl Used when a v

Page 26

product-sort.tpl Used by all pages that list products. Displays a menu enabling to sort and filter products. products-comparison.tpl ... scenes.tp

Commentaires sur ces manuels

Pas de commentaire