# Header/Footer Code Injector (CSS/JS) — Complete Guide

> Overview The Header/Footer Code Injector lets you add CSS, JavaScript or HTML to your PrestaShop store without editing a single theme file. Everything is managed from the back office as…

- Page: <https://www.datafirefly.com/en/documentation/dfcodeinjector/>
- Language: en
- Last updated: 2026-06-27
- Other languages: [fr](https://www.datafirefly.com/documentation/dfcodeinjector/index.md), [es](https://www.datafirefly.com/es/documentation/dfcodeinjector/index.md), [de](https://www.datafirefly.com/de/documentation/dfcodeinjector/index.md), [it](https://www.datafirefly.com/it/documentation/dfcodeinjector/index.md), [pl](https://www.datafirefly.com/pl/documentation/dfcodeinjector/index.md), [pt](https://www.datafirefly.com/pt/documentation/dfcodeinjector/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfcodeinjector/index.md)
- Index: <https://www.datafirefly.com/en/documentation/llms.txt>

## Overview

The **Header/Footer Code Injector** lets you add CSS, JavaScript or HTML to your PrestaShop store without editing a single theme file. Everything is managed from the back office as _snippets_: each block of code has its own location, page targeting, injection order and active or inactive status.

Typical use cases: Google Tag Manager, Google Analytics, Meta Pixel, verification tags (Search Console, Pinterest...), custom CSS styles, chat scripts or a cookie consent banner.

## Installation

1. Download the `dfcodeinjector.zip` archive from your DataFirefly account.
2. In the back office, open **Modules > Module Manager**, click **Upload a module** and drop the archive.
3. Click **Configure** to open the snippet manager.

Compatible with PrestaShop 8.0 to 9.x, PHP 8.1 and above, multistore. No external dependency.

## Create a snippet

From the manager, click **Add a snippet** and fill in the fields below.

### Form fields

- **Name** — internal identifier for the snippet (e.g. "Google Tag Manager").
- **Location** — where the code is injected (see below).
- **Code** — paste your full code, tags included. It is injected as-is, with no transformation or purification.
- **Targeted pages** — leave empty for all pages, or select specific pages.
- **Display order** — snippets sharing a location are injected in ascending order.
- **Active** — enable or disable the snippet without deleting it.

### The three locations

- **Header (head tag)** — for styles, meta tags and verification tags. Injected through the `displayHeader` hook.
- **Body start** — right after the body opens, for markup containers (e.g. the GTM noscript part). Hook `displayAfterBodyOpeningTag`.
- **Body end** — just before the body closes, for performance and tracking scripts. Hook `displayBeforeBodyClosingTag`.

### Page targeting

Each snippet can be served everywhere (empty field) or restricted to specific pages: home, product page, category, CMS, search, cart, checkout, etc. The module compares the current page to the front controller (`php_self`); if a list is set and the page is not part of it, the snippet is not injected.

## Examples

### Google Tag Manager

GTM is installed in two parts. Create two snippets:

1. "GTM head" snippet — **Header** location, paste the first script provided by Google:

```
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){ ... })(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
```

1. "GTM body" snippet — **Body start** location, paste the noscript part provided by Google.

### Custom CSS

**Header** location, wrap your CSS in a style tag:

```
<style>
.header-banner { background:#0f172a; color:#fff; }
</style>
```

### Verification tag

For Search Console or a social network, **Header** location:

```
<meta name="google-site-verification" content="YOUR_CODE" />
```

## Multistore

In a multistore context, each snippet can be global (all stores) or restricted to a specific store through the **Store** field. In single-store mode, this field is hidden and the snippet applies to the current store.

## Theme compatibility

Injection into the **head tag** works with every theme. The **body start** and **body end** locations rely on the `displayAfterBodyOpeningTag` and `displayBeforeBodyClosingTag` hooks, present in PrestaShop's Classic theme. On a custom theme, make sure these hooks are called in the templates.

## Troubleshooting

- **The code does not appear** — check that the snippet is active, that the location is correct and that the current page is part of the targeted pages (or that the field is empty).
- **Nothing at body start or end** — your theme probably does not call the matching hooks; use the Header location or add these hooks to the theme.
- **Order conflict** — adjust the Display order field to control the injection sequence.

Since the code is injected without purification, double-check your syntax (properly closed tags) before enabling a snippet on a production store.