E-commerce Product Details Page Layout Builder – Drag, Resize, and Add Sections Without Code
E
Eyas Bondouq
Currently, the Product Details Page (PDP) layout is mostly fixed. Rearranging elements like product name, price, variants, quantity, buttons, images, and description requires heavy CSS and JavaScript work, which is not ideal for non-technical users.
I suggest adding a true section-based, drag-and-drop PDP builder where each product element is a standalone block that can be freely positioned, resized, and customized without code.
Proposed Features:
Each PDP element becomes its own block:
Product Title
Price
Variants
Quantity
Add to Cart / Buy Now
Short & Full Description
Image Gallery
Reviews
Related Products
Custom Blocks (FAQ, Shipping Info, Trust Badges, Icons, Highlights, etc.)
Drag & drop to reorder blocks inside the product details area.
Control width, height, spacing, alignment, and column layout per block.
Ability to add new blocks like Product-specific FAQ or custom content.
Separate layouts for desktop and mobile.
Visibility rules (by device, variant, tag, stock status, etc.).
No-code first, with optional advanced styling for power users.
Why This Matters:
Many modern e-commerce designs require flexible layouts (sticky images, split columns, stacked buttons, tabs, custom sections, etc.). Today this requires complex CSS/JS hacks. A native layout builder for the Product Details Page would:
Eliminate heavy custom coding
Make design iterations faster
Reduce support tickets
Empower non-technical store owners
Bring HighLevel’s e-commerce UI to a modern, competitive level
In short:
Turn the Product Details Page into a fully customizable, block-based layout system, just like the normal page builder — but specialized for product elements.
Log In