Side Panel
Places a video player or a thumbnail grid next to the product description — close to the price, add-to-cart button, and other buying signals — without touching the image gallery.
Available since v3.0.0
Overview
The Side Panel gives you a second video display area on the product page, positioned in the product info column rather than inside the photo strip. This puts video content right where purchase decisions happen: near the title, short description, price, or add-to-cart block.
You can choose between two display styles. The first shows the video embedded and ready to play immediately, with no click required. The second shows a compact thumbnail grid where customers click any thumbnail to open the full-size player in a lightbox overlay. Both styles are fully compatible with YouTube, Vimeo, HTML5, and custom video providers.
The Side Panel is independent of the Image Gallery and Tabs features. You can run all three at the same time, or use only the Side Panel on its own. Location is highly configurable: a standard PrestaShop hook (most compatible), several predefined product-page positions, or any CSS selector you choose.
Configuration
- Go to Modules > Module Manager, find Product Video, and click Configure.
- Open the Side Panel tab.
- Adjust the settings below, then click Save.
Enable
| Field | Values | Default | Description |
|---|---|---|---|
| Enable / disable this feature | Yes / No | Yes | Master switch. Turn this off to hide the Side Panel without losing your configuration. |
| Display on | All devices / Desktop only / Mobile & tablet only | All devices | Restrict the Side Panel to specific device types. Useful when the panel looks good on desktop but takes up too much space on mobile. |
Location (PrestaShop 1.6)
| Field | Values | Default | Description |
|---|---|---|---|
| Location | Left Column / Right Column | Right Column | Injects the panel into your theme's left or right column widget area. Only applies on PrestaShop 1.5–1.6. |
Location (PrestaShop 1.7+)
| Field | Values | Default | Description |
|---|---|---|---|
| Location | Additional buttons placement / After product thumbnails / The title / The short description / The price / The quantity–add to cart block / Custom placement | Additional buttons placement | Where on the product page the Side Panel is injected. See notes below for each option. |
| Custom Placement Selector | Any CSS/jQuery selector | — | Visible only when Custom Placement is selected. Enter the selector of the target element on your theme (e.g. .product-variants or #main .product-add-to-cart). |
| Insertion Mode | Before / At the beginning / At the end / After | After | Controls how the panel is inserted relative to the chosen element. Before and After place it outside the element; At the beginning and At the end place it inside. |
Additional buttons placement uses PrestaShop's
displayProductAdditionalInfohook — the safest option because it requires no DOM manipulation. If your theme does not render this hook, choose a predefined position or use Custom Placement.
After product thumbnails uses the
displayAfterProductThumbshook. Your theme's product template must include{hook h="displayAfterProductThumbs" product=$product}for this to work.
Predefined positions (title, short description, price, add to cart) use JavaScript DOM injection and are not compatible with page builders such as Elementor or Divi.
Display Style
| Field | Values | Default | Description |
|---|---|---|---|
| Videos Display | Show the first video embed / Show a thumbnail list | Show a thumbnail list | Choose whether to render an embedded player immediately or a clickable thumbnail grid. |
| Number of videos per line | 2 / 3 / 4 / 5 / 6 | 3 | Applies when Show a thumbnail list is selected. Sets how many thumbnail columns appear in the grid. |
Title
| Field | Values | Default | Description |
|---|---|---|---|
| Title Display | Yes / No | No | When enabled, a heading appears above the panel. |
| Title formatting | h2 / h3 / h4 / h5 / p / span | h3 | The HTML element used for the heading. Choose a level that fits your theme's heading hierarchy. |
| Title Holder Class | Text | — | Optional CSS class added to the title element. Use this to apply custom styles without touching your theme files. |
Quick-View Modal
| Field | Values | Default | Description |
|---|---|---|---|
| Display on Modal View | Yes / No | No | PrestaShop 1.7+ only. When enabled, the Side Panel also renders inside the product quick-view modal popup. |
How It Works
Embedded player mode
When Show the first video embed is selected, the module renders an iframe for the product's first video directly on the page. The player is visible and ready to play as soon as the page loads — no interaction required. This works best when you have one primary video you want customers to see immediately.
Thumbnail list mode
When Show a thumbnail list is selected, customers see a grid of video thumbnail images. The grid fills the available width in the number of columns you specified. Clicking any thumbnail opens that video in a FancyBox lightbox overlay. Customers can browse all thumbnails before deciding which video to watch.
Placement and injection
For hook-based placements (Additional buttons placement, After product thumbnails), the module renders the panel server-side through PrestaShop's hook system. No JavaScript injection is needed, which makes these the most reliable options.
For predefined positions and Custom Placement, the module uses JavaScript to find the target element and call jQuery's .before(), .prepend(), .append(), or .after() depending on the Insertion Mode you selected.
Quick-view modal
When Display on Modal View is enabled, the module detects when the quick-view modal opens and renders the Side Panel inside it. This lets customers watch videos without navigating to the full product page.
Usage Examples
Example: Video next to the add-to-cart button on a product with one hero video
You sell a blender and have one demonstration video. Set Videos Display to Show the first video embed, Location to The quantity / add to cart block, and Insertion Mode to Before. The video player appears directly above the add-to-cart button, visible the moment the page loads. No scrolling or clicking needed.
Example: Thumbnail grid below the short description for a product with multiple angles
You sell furniture with five different angle videos. Set Videos Display to Show a thumbnail list, Number of videos per line to 3, and Location to The short description with Insertion Mode set to After. Customers see a 3-column thumbnail strip immediately after the short description. Clicking any thumbnail opens a full-screen lightbox.
Example: Custom placement on a theme with a non-standard layout
Your theme puts the add-to-cart block inside a custom <div class="my-theme-purchase"> container. Set Location to Custom Placement, enter .my-theme-purchase as the selector, and set Insertion Mode to Before. The Side Panel appears just above that container, regardless of the theme's structure.
Important Notes
- The Side Panel and the Image Gallery are fully independent. Enabling one does not affect the other.
- On PrestaShop 1.6, only the Left Column and Right Column options apply. The PS 1.7 position selector is ignored.
- Predefined positions and Custom Placement use JavaScript DOM injection at page load. If the target element does not exist in the DOM when the script runs, the panel will not appear. Verify the selector with your browser's inspector.
- Custom Placement is not compatible with page builders (Elementor, Divi, WPBakery) that render content asynchronously.
- Number of videos per line only affects the thumbnail list display mode. It has no effect when the embedded player mode is selected.
- The Quick-view modal option is hidden on PrestaShop 1.6 — it is only relevant for 1.7+ themes that include a quick-view feature.
- In a multi-shop setup, Side Panel settings are per-shop. You can enable the Side Panel on one shop and disable it on another, or use different locations per shop.
Troubleshooting
| Problem | Solution |
|---|---|
| The Side Panel does not appear anywhere on the page | Check that Enable / disable this feature is set to Yes and that Display on matches the device you are testing with. If using hook-based placement, verify the hook is present in your theme. |
| The panel appears in the wrong position | Switch to Custom Placement, open your browser inspector, find the exact container element, copy its CSS selector, and paste it into Custom Placement Selector. Adjust Insertion Mode to place it before or after. |
| The panel overlaps the add-to-cart button or price | Change Insertion Mode from At the end (inside) to After (outside). This places the panel after the container instead of inside it. |
| The panel appears on desktop but not on mobile | Display on is set to Desktop only. Change it to All devices or Mobile & tablet only as needed. |
| The quick-view modal does not show the Side Panel | Confirm Display on Modal View is set to Yes and that you are on PrestaShop 1.7+. Some third-party quick-view plugins use a different modal structure that the module cannot detect automatically. |
| The title heading breaks the layout | Set Title Display to No if the heading is not needed. Otherwise, adjust Title formatting to match the heading level your theme expects, or use Title Holder Class to apply a CSS override. |
Frequently Asked Questions
Can I show different videos in the Side Panel versus the Image Gallery?
No — both display the same video entries attached to the product. What differs is the display style, location, and player presentation. You control which videos appear by managing the product's video list.
Does the Side Panel slow down page loading?
Hook-based placements (Additional buttons placement, After product thumbnails) render server-side with the page, so there is no extra loading time. Predefined positions and Custom Placement inject content with JavaScript after the DOM loads, which adds a brief moment before the panel appears, but it is not a separate network request.
What happens if I set both Image Gallery and Side Panel to show an embedded player?
Both will render independently. The Image Gallery embeds the video inside the photo carousel area; the Side Panel embeds it in the product info column. This is valid and some merchants use it intentionally to make the video impossible to miss.
Can I limit the Side Panel to registered customers only?
Not directly from the Side Panel settings. Use the Access Restrictions feature (available in the module's configuration) to restrict which customer groups can see videos across all display locations, including the Side Panel.
The "After product thumbnails" option is selected but nothing appears. Why?
This option relies on the `displayAfterProductThumbs` hook being present in your theme's product template. Many themes do not include it. Open the theme's `product.tpl` (or `product.html.twig` on PS 1.7) and check for this hook. If it is missing, switch to a different location or use Custom Placement.
Can I show the Side Panel only on certain products?
The Side Panel appears only on products that have at least one video assigned. If a product has no videos, the Side Panel does not render for it regardless of your settings.
Related Features
- Image Gallery Placement — Integrate videos into the product photo strip
- Tabs & Description — Display a full-size player in a dedicated product tab or below the description
- Product Listings — Show video indicators or thumbnails on category and search results pages
- Access Restrictions — Restrict which customer groups can see videos