Tips For Building Your Custom PrestaShop Theme

Choosing PrestaShop as a platform for your e-commerce website was a great move. It’s easy for you and your customers to use, supports optimized page speed for SEO, and was professionally designed to handle e-commerce.

PrestaShop installations come with a standard theme you can customize to a degree without knowing any programming, but sometimes that’s not enough. If you’re searching for a fully custom theme, you’ll need a professional developer.

Unlike WordPress, there aren’t as many theme developers for PrestaShop, so it’s difficult to find an abundance of pre-made themes on template websites. You’ll find a few on Template Monster, but if those don’t work, here’s how to get a custom theme that fits your needs:

Know your limitations if you’re a DIY theme developer

Creating a custom PrestaShop theme requires more than cut and paste skills. With some platforms, you can get away with copying files, replacing images, and inserting sections of code. PrestaShop requires a bit more knowledge.

For example, other platforms support mixing PHP with HTML, but PrestaShop uses Smarty tags instead. PrestaShop’s 3-tier architecture makes it easier for graphic designers and HTML integrators to work solely within the /themes folder without having to work around PHP code. Even if you’re new to PrestaShop, if you’ve ever locked yourself out of your admin panel due to a PHP syntax error, you already know the value of Smarty templates.

Although the Smarty 3 template engine was designed to help developers build themes efficiently with little technical knowledge, it’s not something a tech newbie can understand quickly. For example, with other platforms, a beginner can copy and paste snippets of HTML, CSS, PHP, and Javascript in the correct place by following simple instructions. With PrestaShop, template files (.tpl) control the design, and pasting HTML in the wrong place can have dire consequences.

If you’ve got a brilliant idea for a theme but don’t have the experience necessary to bring it to life using best practices, hire a professional theme developer. Cut-and-paste HTML/CSS experience isn’t enough to make a PrestaShop template turn out well.

Learn how to use Smarty templates

If you want to build a PrestaShop theme, but haven’t worked with Smarty templates, it’s worth investing time to learn the system. For the official walkthrough, check out this guide, and don’t be shy about joining the forum for help when you get stuck. Once you learn how to use the Smarty template engine, creating a theme will be easier.

Adhere to best practices especially when you’re new to PrestaShop

Best practices exist for a reason. While there are often multiple ways to accomplish the same task, not all methods will produce a seamless result. When you’re not an experienced developer, you’re probably used to using workarounds, some of which have yet to catch you off guard. You may not notice the effects for days, weeks, or months, but when something falls apart, you’ll wish you had done things differently.

For example, if you’re familiar with WordPress, you know it’s possible to use functions.php for just about anything, including adding Google Analytics code. The problem is, functions.php should only be used to modify theme-related functions. Updates will wipe out your custom code and break your site.

Knowing your way around PHP files isn’t the same as understanding how it’s being used within the context of a platform. Like WordPress, PrestaShop also uses PHP and while core files can be modified, doing so goes against best practices.

This developer points out the importance of creating or modifying a theme correctly from the start. He was hired by a client to fix the mistakes of a former development team. The team knew HTML and CSS but didn’t understand PrestaShop. They modified elements in a way that would have forced the shop owner to manually compare and copy over the new code to core files for every update. The developer also mentions several ways to modify modules, HTML, and CSS without interrupting the upgrade process.

It’s better to build your code into modules so you don’t lose your modifications when you update PrestaShop. Also, SQL queries should never be made from a PHP controller (a .php file in the root directory). Create new methods for existing PrestaShop classes if needed. If you don’t understand what that means, your best option is to hire a professional developer.

Understand PrestaShop’s theme development fundamentals

Unless you’re a PrestaShop pro, you’ll want to review the official theme development documentation before making any changes. PrestaShop uses several things you may not be familiar with: Smarty templates, Bootstrap, Sass, and Compass.

If you’re unfamiliar with Bootstrap, you’ll need to familiarize yourself with it to get the best results with your theme. Bootstrap is an integral part of PrestaShop. Creating a new back office requires using Bootstrap, but creating a new front office doesn’t. Bootstrap is well integrated into PrestaShop, so not using it (even for a front office) means missing out on functionality.

Tips for outsourcing theme development to a pro

When you’re not ready to dive into theme development, hiring a pro is the right move. Search for templates you like, and be prepared to discuss those elements with your developer.

When viewing other templates for reference, be sure to look for more than aesthetics. Pay attention to what side the widgets are on, how the drop-down navigation functions, and where the layout has designated spots for ads.

Most of all, don’t expect your theme to be perfect. A developer does their best to capture your vision, but there will always be aspects of the design that aren’t perfect. Through rounds of development you can get close, but be prepared to accept some limitations.

While your new theme is being developed, don’t forget to choose a host. With an e-commerce shop, you need a host to facilitate secure transactions using SSL, and proper load balancing to make sure your site doesn’t crash. Contact Skylands today for boutique hosting tailored to meet your specific business needs.

Related Posts