PrestaShop 9 Hummingbird: How to Safely Change Your Footer Background Color

As an e-commerce migration expert at Migrate My Shop (migratemyshop.com - PrestaShop Migration Hub), we frequently encounter merchants eager to personalize their online stores. PrestaShop 9, with its sleek Hummingbird theme, offers a modern foundation, but true brand identity often requires a touch of custom flair. One of the most common requests we hear is about customizing the footer – specifically, changing its background color. While seemingly a simple CSS tweak, the introduction of Bootstrap CSS variables in newer PrestaShop themes can present a unique challenge for those accustomed to traditional styling methods.

This guide, inspired by a recent PrestaShop forum discussion, will walk you through the precise steps and best practices for modifying your PrestaShop 9 Hummingbird theme's footer background color. Our goal is to ensure your customizations are not only effective but also robust, update-proof, and aligned with long-term e-commerce best practices, especially crucial if you're planning a future PrestaShop migration.

The Modern Challenge: Understanding Bootstrap Variables in PrestaShop 9

A PrestaShop user, Bennie-NL, recently highlighted a common hurdle. They were trying to change the footer background color in their PrestaShop 9.1 store, running the Hummingbird theme. With a background in older PrestaShop versions and traditional CSS, Bennie-NL correctly identified the relevant CSS selector for the footer:

.footer__main{background:var(--bs-dark);color:var(--bs-gray-300)}

The confusion stemmed from the var(--bs-dark) declaration. This isn't a direct hex color code or a standard CSS color name. Instead, it's a CSS custom property (often referred to as a CSS variable) inherited from Bootstrap, the popular front-end framework that underpins PrestaShop 9's Hummingbird theme. Direct attempts to override this within the core theme.css file or by guessing Bootstrap color codes proved unsuccessful, illustrating a fundamental shift in modern theme customization.

Why Direct theme.css Edits Are a Bad Idea

Before diving into the solution, it's crucial to understand why directly editing files like /themes/hummingbird/assets/css/theme.css is strongly discouraged, especially from a migration expert's perspective:

• Updates Overwrite Changes: Any future theme update (which is vital for security and new features) will likely overwrite your direct modifications, causing you to lose all your hard work.
• Maintenance Nightmares: Tracking custom changes across core files becomes incredibly difficult, leading to broken layouts or functionality after updates.
• Migration Complications: During a PrestaShop migration, identifying and porting these scattered, non-standard changes adds significant complexity, cost, and risk.

The Solution: Safe CSS Overrides and Best Practices

The expert advice from the PrestaShop community clarifies that while Bennie-NL was looking in the right place, the method of applying the change needed adjustment. The core principle for modern PrestaShop theme customization, particularly with the Hummingbird theme, is to use safe override methods.

Method 1: Using custom.css (Good Practice)

The Hummingbird theme provides a dedicated file for custom CSS overrides: /themes/hummingbird/assets/css/custom.css. This file is specifically designed for your custom styles and is generally safe from theme updates.

Method 2: The Child Theme Approach (Best Practice for Longevity)

For the ultimate in update-proof customization and long-term store health, especially if you anticipate further modifications or future PrestaShop migrations, creating and using a child theme is the recommended approach. A child theme inherits all the functionality and styling of its parent theme (Hummingbird in this case) but allows you to safely override specific files or add new styles without touching the parent theme's core files. Your custom.css would then reside within your child theme's assets folder.

Step-by-Step Guide: Changing Your Footer Background Color

1. Access Your Store Files

You'll need to access your PrestaShop installation files. This is typically done via an FTP client (like FileZilla) or through your hosting provider's cPanel File Manager.

2. Locate or Create Your Custom CSS File

• If using the parent theme directly: Navigate to /themes/hummingbird/assets/css/. Look for a file named custom.css. If it doesn't exist, you can create it.
• If using a child theme (recommended): Navigate to /themes/your_child_theme_name/assets/css/. Create a custom.css file here if it doesn't already exist. If you haven't set up a child theme yet, this is an excellent opportunity to do so.

3. Add Your Custom CSS Code

Open the custom.css file using a text editor. Add the following CSS code to change the footer background color to #00597b (the color Bennie-NL requested):

.footer__main {
    background: #00597b;
}

Pro Tip: Ensure Readability! When changing a dark background to another dark color, or a light to light, always consider the text and link colors within the footer. To ensure your text and links remain readable, you might want to add these lines:

.footer__main {
    background: #00597b; /* Your desired background color */
    color: #ffffff;    /* White text color for better contrast */
}

.footer__main a {
    color: #ffffff;    /* White link color */
}

4. Save and Upload

Save the changes to your custom.css file and upload it back to the correct directory on your server, overwriting the old one if it existed.

5. Clear PrestaShop Cache

This is a critical step! PrestaShop caches CSS files to improve performance. For your changes to appear, you must clear the cache:

• Log into your PrestaShop admin panel.
• Go to Advanced Parameters → Performance.
• Click the 'Clear cache' button in the top right corner.

6. Hard-Refresh Your Browser Cache

Your web browser also caches files. After clearing the PrestaShop cache, perform a hard refresh on your front office page. This usually involves Ctrl + F5 (Windows) or Cmd + Shift + R (Mac).

Verifying Your Changes and Advanced Tips

Once you've completed these steps, visit your store's front office. Your footer background color should now be updated. If it doesn't show immediately, double-check your CSS syntax and ensure you've cleared both PrestaShop and browser caches thoroughly.

Using Browser Developer Tools

For more advanced troubleshooting, leverage your browser's developer tools (usually accessed by pressing F12). You can inspect the .footer__main element to see which CSS rules are being applied and from which file. This helps confirm that your custom.css rule is overriding the default Bootstrap variable.

The Migrate My Shop Advantage

Understanding these nuances of PrestaShop theme customization is vital for maintaining a healthy and branded online store. At Migrate My Shop, our expertise extends beyond just moving your data; we ensure your new PrestaShop store is optimized, customized correctly, and ready for future growth. Implementing customizations like these using best practices is a cornerstone of a successful e-commerce migration, preventing headaches down the line.

Conclusion

Customizing your PrestaShop 9 Hummingbird theme's footer background color is a straightforward process once you understand the modern approach to CSS overrides. By utilizing custom.css, and ideally a child theme, you can achieve your desired branding while safeguarding your store against future updates. This method ensures your e-commerce platform remains robust, easy to maintain, and ready for any future PrestaShop migrations or upgrades. Embrace these best practices to keep your online shop looking sharp and functioning flawlessly!