How to change a graphic template in PrestaShop

Changing your theme is one of the most impactful ways to refresh your store’s brand and improve the user experience. In PrestaShop, a theme is a collection of files that control the visual display of your product data without affecting the underlying database.

Context

When you switch a template, PrestaShop rearranges your existing modules and content to fit the new design’s “Hooks.” Because different themes use different image dimensions and module positions, a theme change usually requires a few follow-up steps like regenerating thumbnails or reconfiguring the home page modules.

Step 1: Selecting and downloading a new template

Before making the switch, ensure your new theme is high-quality and technically sound.

• Compatibility: Verify that the theme specifically supports your version of PrestaShop (e.g., version 1.7.x or 8.x).
• Performance: Check for “Lightweight” or “Fast” labels, as heavy themes can slow down your site.
• Documentation: Ensure the ZIP file you download includes a documentation folder, as many modern themes require specific module settings to look like the demo.

Step 2: Installing the new template

The most reliable way to install a theme is through the PrestaShop back office.

1. Navigate to Appearance: Go to Improve > Design > Theme & Logo.
2. Add New Theme: Click the Add new theme button at the top right.
3. Upload ZIP: Under the “Import from your computer” section, upload the .zip file provided by your theme developer.
4. Finalize: Once the upload is successful, scroll down to the “Select a theme for your [Shop Name]” section. Find your new theme and click Use this theme.

Note: PrestaShop will ask if you want to enable or disable certain modules associated with the new theme. It is usually best to follow the theme developer’s recommendations during this step.

Step 3: Customizing the new template

A new theme is a “blank canvas.” You need to add your brand elements to make it yours.

• Logo and Favicon: In the Theme & Logo tab, upload your high-resolution logo and your favicon (the small icon seen in browser tabs).
• Regenerate Images: New themes often use different image ratios. Go to Design > Image Settings and click Regenerate thumbnails at the bottom. This ensures your product photos aren’t blurry or stretched.
• Homepage Configuration: Modern themes often come with a “Theme Configurator” or “Visual Builder” module. Use this to set up your homepage banners, featured products, and text blocks.

Step 4: Testing and Performance

Never assume a theme works perfectly across all devices immediately after installation.

1. The Checkout Test: Add an item to the cart and go through the entire checkout process. Ensure that the “Add to Cart” button and payment selection look correct on both desktop and mobile.
2. Clear Cache: Go to Advanced Parameters > Performance and click Clear Cache. This forces the server to serve the new files instead of old cached versions.
3. Speed Check: Use a tool like Google PageSpeed Insights. If the site is slow, check if the theme has built-in compression settings or if you need to optimize your images.

Distinction: Theme vs. Child Theme

• Theme: The core files provided by the developer. If you edit these directly, your changes will be deleted when you update the theme.
• Child Theme: A small “extension” folder that stays on your server. You put your custom CSS or structural changes here so they remain safe even when the main theme receives security updates.

Practical Implications

• Module Positions: Some of your old modules might “disappear.” They aren’t gone; they are likely just not hooked into the new theme’s layout. You can re-attach them in Design > Positions.
• Languages: If your store is multilingual, check that the new theme translates “hard-coded” buttons like “Add to Cart” correctly in the International > Translations section.
• Backups: Before clicking “Apply this theme,” ensure you have a fresh backup in your mybox panel. This allows you to revert the entire site in seconds if the new theme causes a critical error.

Summary

Changing your PrestaShop template is a straightforward process that can revitalize your online presence. By following the installation steps, regenerating your images, and testing the checkout flow, you can move to a new design with confidence and minimal downtime.