PrestaShop custom html CSS JavaScript

In PrestaShop, you can safely add custom HTML, CSS, and JavaScript in several ways—depending on where and how you want it to appear. Below is a clear, practical guide from beginner to advanced 👇

1️⃣ Add Custom HTML (No Coding Skills Needed)

✅ Using Custom HTML / Custom Text Block module

Best for: banners, notices, static content

Steps

1. Back Office → Modules → Module Manager
2. Search Custom HTML or Custom Text Block
3. Click Configure
4. Paste your HTML
5. Choose hook position (Home, Footer, Left column, etc.)
6. Save

✔ Safe
✔ Upgrade-friendly
❌ Limited JS usage

2️⃣ Add Custom CSS (Recommended Way)

✅ Using theme’s custom.css

Best practice

Path

/themes/your-theme/assets/css/custom.css

Example

.home-banner {
  background: #f4fdf4;
  padding: 20px;
  border-radius: 10px;
}

✔ Doesn’t affect core files
✔ Survives updates

👉 If custom.css doesn’t exist, create it manually

3️⃣ Add Custom JavaScript

✅ Using theme JS file (BEST)

Path

/themes/your-theme/assets/js/custom.js

Example

document.addEventListener("DOMContentLoaded", function () {
  console.log("Custom JS loaded");
});

Then make sure it is loaded (most modern themes auto-load it).

Alternative: Add JS via hook

Create a module or use hookDisplayHeader

public function hookDisplayHeader()
{
  $this->context->controller->registerJavascript(
    'custom-js',
    'themes/your-theme/assets/js/custom.js',
    ['position' => 'bottom', 'priority' => 150]
  );
}

✔ Clean
✔ Professional approach

4️⃣ Add HTML + CSS + JS Together (Home Page / Specific Page)

✅ Create a custom module

Best for advanced customization

Structure

/modules/customblock/
  customblock.php
  views/templates/hook/customblock.tpl
  views/css/custom.css
  views/js/custom.js

HTML (TPL)

<div class="promo-box">
  Special Offer Today!
</div>

CSS

.promo-box {
  background: #fff3cd;
  padding: 15px;
}

JS

alert("Offer loaded!");

✔ Reusable
✔ Upgrade-safe
✔ Best performance

5️⃣ Add Code Directly in Theme Files (⚠ Not Recommended)

Example

/themes/your-theme/templates/index.tpl

❌ Breaks on updates
❌ Hard to maintain

Use only if necessary

6️⃣ Common Hooks for Custom Content

7️⃣ Cache & Debug (IMPORTANT)

After changes:

1. Advanced Parameters → Performance
2. Clear cache
3. Disable CCC (Combine, Compress, Cache) while testing

🔥 Best Practice Summary

✔ Use custom.css / custom.js
✔ Use modules for reusable code
✔ Avoid editing core files
✔ Clear cache after every change

🚀