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 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.

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 -->

2. “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

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.