Configuration

HTMLBox Pro's block editor has several sections. This guide covers each one in detail.

Content Editor

HTMLBox Pro offers three editing modes:

WYSIWYG Mode

A full visual editor with formatting toolbar — bold, italic, headings, lists, links, images, tables, and more. Perfect for marketing teams who don't write code.

Code Mode

A syntax-highlighted editor for HTML, CSS, and JavaScript. Includes auto-completion, bracket matching, and error detection. Ideal for developers who need precise control.

Split Mode

Both editors side by side. Edit in code view and see the visual result update in real time. The best of both worlds.

Hook Position

Select where your content block appears on the storefront. HTMLBox Pro supports 40+ PrestaShop hook positions:

Common Hooks

| Hook | Location | |---|---| | displayHome | Home page main content area | | displayTop | Top of every page (below header) | | displayBanner | Banner area (above navigation) | | displayNav1 / displayNav2 | Header navigation bars | | displayFooter | Footer area | | displayLeftColumn / displayRightColumn | Sidebar columns | | displayProductAdditionalInfo | Product page — below "Add to Cart" | | displayProductTab | Product page — additional tab | | displayProductTabContent | Product page — tab content | | displayCrossSellingShoppingCart | Cart page — cross-sell area | | displayOrderConfirmation | Order confirmation page |

The visual hook selector shows a wireframe of your storefront with clickable hook positions, so you can see exactly where each one appears.

Block Ordering

When multiple blocks are assigned to the same hook, you can drag and drop them to set the display order. The block at the top renders first.

Conditional Display Rules

Control who sees each block by adding conditions:

Available Conditions

| Condition | Options | |---|---| | Customer Group | Guest, Customer, Wholesale, VIP, or any custom group | | Category | Show only on specific product categories | | Product | Show only on specific product pages | | Manufacturer | Show only for specific brands | | Language | Show only for specific store languages | | Country/Zone | Show only for visitors from specific countries |

Logic Operators

AND — all conditions must be true (e.g., customer is VIP AND category is Electronics)
OR — any condition can be true (e.g., category is Electronics OR category is Software)

You can nest conditions for complex targeting scenarios.

Scheduling

Set date ranges for when a block should be active:

Start Date — block becomes visible on this date and time
End Date — block becomes hidden after this date and time
Leave both empty for an always-visible block
Set only a start date for "coming soon" content
Set only an end date for content that should expire

A/B Testing

Create multiple variants of a content block to test which performs better:

Open a block and click "Add Variant"
Write the alternate content
Set the traffic split (default: 50/50)
Define a conversion goal (click, form submit, or purchase)
Monitor results in the A/B Testing dashboard
The module calculates statistical significance automatically
Optionally enable auto-select winner to promote the best variant when significance is reached

Responsive Visibility

Control which devices see each block:

Desktop — screens wider than 992px
Tablet — screens between 768px and 991px
Mobile — screens narrower than 768px

Toggle each device independently. A block can be visible on desktop and tablet but hidden on mobile, for example.

Custom Styling

Each block supports:

CSS Class — add custom class names for styling via your theme's CSS
CSS ID — add a unique ID for targeted styling or JavaScript hooks
Inline CSS — write CSS directly in the code editor (scoped to the block)

Cache Settings

HTMLBox Pro caches rendered blocks by default. Cache is automatically invalidated when:

You edit a block's content
You change a block's conditions or schedule
You enable/disable a block
A scheduled start/end date is reached

You can also manually purge the cache from the block list page.