Shipping Costs and Delivery Time on Product Page (Popup)

Key Benefits for Your Store

• Centralized Content Management – Edit delivery rates as a standard CMS page. No new editor or custom syntax to learn.
• Frictionless UX – The modal opens and closes instantly (via close button, background click, or ESC key) without reloading the page, keeping shoppers focused on buying.
• Multilingual Support – Set custom button labels (e.g., "Shipping Costs", "Delivery Info") separately for every active language in your store.
• Multistore Compatible – Assign different CMS pages per shop if you run multiple stores with distinct shipping policies.
• Flexible Placement – Select from built-in display positions in the back office to best fit your theme's product layout.

Under the Hood – Performance & Architecture

Designed for maximum efficiency with zero negative impact on page load speeds or Core Web Vitals:

• Zero AJAX Overhead (0 ms delay) – Modal content is server-side rendered (SSR) directly into the product template HTML. The popup opens instantly upon clicking.
• Pure Vanilla JS – Built with clean Vanilla JS. No jQuery, Bootstrap, or external libraries required, eliminating script conflicts with custom themes.
• Conditional Asset Loading – CSS and JS files load exclusively on the product controller and only when a valid CMS page is configured.
• Native PrestaShop Engine – Uses native CMS architecture instead of creating duplicate database tables or unnecessary clutter.
• SEO Friendly – Shipping information resides at a single CMS page URL. The product popup acts solely as a contextual view without creating duplicate indexable URLs.
• Full Cache Compatibility – Server-side rendering ensures seamless compatibility with Full Page Cache solutions (LiteSpeed Cache, Varnish, PrestaShop HTML Cache).

Back Office Features (Admin Panel)

Custom Theme Integration (Custom Hook)

If predefined locations do not fit your custom theme layout, use the included custom hook. Insert the following code anywhere into your product.tpl (or product.html.twig) template file:

{hook h='displayPPcustomShippingPopup' product=$product}

Important Before Installation

Before configuring the module, ensure you have an active shipping information page created under Design -> Pages (CMS). The button will not display on the product page until a valid CMS page is selected in the module settings. After completing configuration, clearing the PrestaShop cache is recommended.