Custom CSS & JavaScript

Inject your own CSS rules and JavaScript directly into the module without touching theme files, and hook into key video lifecycle events with dedicated callbacks.

nota

Available since v3.2.0

Overview

The Custom CSS / JS section gives you a dedicated place in the Back Office to extend and personalise the module's front-end behaviour. Any CSS you enter is appended after the module's own default stylesheet, so your rules always win the specificity race. JavaScript you enter is loaded as a separate file and has access to jQuery and all PrestaShop front-office variables.

Beyond general CSS and JS, the section exposes three structured JavaScript callbacks that fire at precisely the right moments: immediately after video thumbnails are injected into the page, when any thumbnail is clicked, and when a mobile or narrow-viewport visit is detected. These callbacks let you add analytics, reinitialise sliders, or apply touch-specific behaviour without modifying module files directly.

Custom CSS is stored in views/css/pv_custom.css and custom JavaScript in views/js/pv_custom.js inside the module folder. Both files are only loaded on pages where the module is active, and only when they contain content.

Configuration

Go to Modules > Module Manager > Product Video > Configure, then navigate to the Custom CSS / JS tab.

Custom CSS

Field	Default	Description
Enter custom CSS here	(empty)	CSS rules loaded after the module's default stylesheet. Write standard CSS targeting module element classes. No <style> tags needed.

Global JavaScript

Field	Default	Description
Global JavaScript	(empty)	JavaScript that runs on every page where the module is active. Write raw code — no <script> tags. jQuery ($) and all PrestaShop front-office globals are available.

Mobile-Specific JavaScript

Field	Values	Default	Description
Mobile-Specific JavaScript	Any JS	(empty)	JavaScript that runs only when the visitor is on a mobile device or when the viewport width is at or below the Mobile Breakpoint value.
Mobile Breakpoint (px)	Integer	768	Viewport width threshold in pixels. When the browser window is this wide or narrower, the Mobile-Specific JavaScript activates — even on a desktop browser. The mobile callback also fires when the page is resized across this threshold.

Common breakpoint values: 480 (mobile), 768 (tablet), 992 (small desktop), 1200 (desktop).

Advanced Callbacks

These callbacks are named JavaScript functions that the module calls at specific lifecycle moments. You write only the function body — the module handles calling the function at the right time.

Callback field	Function signature	When it fires	Available variables
JS: After Thumbnails Insert	afterVideoInsert()	Immediately after video thumbnails are injected into the DOM, including after combination changes and AJAX refreshes	—
JS: Thumbnail Click Handler	afterVideoClick(is_video, e)	When any product thumbnail is clicked	is_video (boolean — true for video thumbnails, false for image thumbnails), e (the jQuery click event object)

The After Thumbnails Insert callback can fire more than once per page load (for example, after a product combination change). Write code that is safe to run multiple times.

You can call e.preventDefault() or e.stopPropagation() inside the Thumbnail Click Handler if needed, though doing so may prevent the module's default video-open behaviour.

How It Works

CSS Loading

When a visitor loads a product page (or any page where the module is active), the module checks whether views/css/pv_custom.css has content. If it does, it is added to the page as a separate stylesheet positioned after the module's own default CSS. This ordering guarantees your custom rules override the module defaults without needing !important.

JavaScript Loading

All custom JS — global code, mobile code, and callbacks — is compiled into a single file, views/js/pv_custom.js, when you save the configuration. The module loads this file after its own scripts, so your code can safely reference any variable or function the module has already defined.

Internally the file uses comment separators (/* ---------- */) to delimit each section. The Back Office reads these delimiters to populate each textarea correctly when you re-open the configuration.

Mobile Callback Timing

The mobile callback fires under two conditions: the server detects a mobile user-agent (is_mobile variable), or the visitor's viewport width is at or below your Mobile Breakpoint value. The check runs on page load and again on every browser resize, with a 250 ms debounce. The callback fires only when the state transitions from non-mobile to mobile — not on every resize event.

After Thumbnails Insert Callback

The afterVideoInsert function is called inside the module's insertThumbnails routine, directly after thumbnails have been appended to the DOM. This is the ideal moment to reinitialise a slider, attach custom event handlers, or apply styling that depends on the thumbnails being present.

Thumbnail Click Handler

The afterVideoClick function is called on every thumbnail click, with is_video set to true for video thumbnails and false for image (non-video) thumbnails. The e argument is the raw jQuery event object from the click handler.

Usage Examples

Example: Style the video badge overlay

You want video thumbnails to show a white play icon instead of the default color:

.pv-badge-icon {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.55);
}

Paste this into Enter custom CSS here and save.

---

Example: Send a Google Analytics 4 event when a video thumbnail is clicked

In the JS: Thumbnail Click Handler field, enter:

if (is_video) {
    gtag('event', 'video_thumbnail_click', {
        event_category: 'Product Video',
        event_label: window.location.pathname
    });
}

The callback receives is_video as a boolean, so you only fire the event for actual video clicks.

---

Example: Reinitialise a Slick slider after thumbnails are inserted

If your theme uses a Slick slider for the image gallery and videos are injected asynchronously, the slider may not pick them up. In the JS: After Thumbnails Insert field, enter:

if ($.fn.slick && $('.product-images').hasClass('slick-initialized')) {
    $('.product-images').slick('reinit');
}

This safely checks that Slick is present and already initialised before calling reinit.

---

Example: Adjust video width on narrow screens only

In the Mobile-Specific JavaScript field, with Mobile Breakpoint set to 640:

$('.pv-video-wrapper').css('max-width', '100%');

This runs only when the visitor's viewport is 640 px wide or less.

Important Notes

• File write permissions are required. The module writes directly to views/css/pv_custom.css and views/js/pv_custom.js inside its own folder. If the web server cannot write to those files, an error is shown in the Back Office after saving. Check that the module folder is writable by the web server user.
• Clear the PrestaShop cache after saving if your changes do not appear on the front office immediately. Go to Advanced Parameters > Performance and click Clear cache.
• The Mobile Breakpoint only controls the mobile callback, not the module's responsive CSS layout. Changing this value does not affect when the module's built-in media queries activate.
• No <script> or <style> tags. Write raw code only in all text areas. The module wraps and loads your code correctly.
• The CSS and JS files are included in configuration backup/restore. When you use the module's Backup Configuration / Load Configuration feature, your custom CSS and JS are saved and restored along with all other settings.
• Multi-shop: The custom CSS and JS files are stored on disk inside the module folder, which is shared across all shops. If you run multiple shops, all shops load the same custom CSS and JS. There is no per-shop override for this feature.

Troubleshooting

Problem	Solution
Custom CSS is not visible on the front office	Clear the PrestaShop cache at Advanced Parameters > Performance > Clear cache. Also confirm there are no CSS syntax errors — an unclosed rule can silently invalidate everything that follows.
Save fails with a file-write error	The web server user does not have write access to views/css/ or views/js/ inside the module folder. Correct the folder permissions (typically 755 for directories, 644 for files, owned by the web server user).
Mobile JS fires on a desktop screen	Your desktop browser window is narrower than the Mobile Breakpoint value. Either widen the browser window or lower the breakpoint. Remember that the check runs on resize too.
The After Thumbnails Insert callback causes a JS error on the second run	The callback fires every time thumbnails are inserted, including on combination changes. Guard your code against running twice — for example, check if ($('.my-element').length === 0) before creating elements.
The Thumbnail Click callback doesn't fire	The callback is attached only to thumbnails managed by this module, inside the Image Gallery display location. Verify the Image Gallery Placement is active and that video thumbnails are rendering on the product page.
Custom JS was saved but the old version still runs	Your browser may be serving a cached version of pv_custom.js. Do a hard reload (Ctrl+Shift+R / Cmd+Shift+R) and also clear the PrestaShop cache.

Frequently Asked Questions

Do I need to include `<script>` or `<style>` tags in the text areas?

No. Write raw CSS or JavaScript code only. The module wraps and loads each block in the correct file type automatically.

Will my custom CSS override the module's default styles?

Yes. The custom CSS file is loaded after the module's default stylesheet, so your rules take priority without needing `!important` in most cases.

Does the mobile callback fire for actual mobile devices, or only based on screen width?

Both. It fires if the server detects a mobile user-agent, or if the visitor's viewport width is at or below your **Mobile Breakpoint** value — whichever is true. On desktop, resizing the browser window below the breakpoint also triggers it.

Can I use the `afterVideoClick` callback to stop the video from opening?

Yes. Call `e.preventDefault()` or `e.stopPropagation()` inside the callback body. Be aware that this will also prevent the module's own video-open behaviour for the affected clicks.

What happens to my custom code when I update the module?

The custom CSS and JS files (`pv_custom.css` and `pv_custom.js`) are stored separately from the module's core files and are not overwritten during a module update. Your custom code is preserved.

Is the custom JS available to both PS 1.6 and PS 1.7+ themes?

Yes. The module loads `pv_custom.js` via the standard PrestaShop `addJS()` mechanism, which works across all supported versions (PrestaShop 1.6, 1.7, 8, and Thirty Bees).

Can I target elements outside the module in my custom CSS?

Yes. The CSS file is a global stylesheet on the page, so you can target any element visible on the front office. However, targeting elements outside the module may conflict with your theme's own styles or other modules.

Related Features

• Theme Compatibility — CSS selectors and structural adaptation settings for matching your theme layout
• Slider Integration — Use the After Thumbnails Insert callback to reinitialise your theme's image slider after videos are injected