Add the editor with WordPress, Elementor, Beaver or Help4 Builder

1. Prepare a page and a wide editor area

Create a page with a clear title and a short explanation of the product. Add a wide content area for the editor. Use one interactive Personalizer editor per page. Narrow sidebars and multiple copies of the editor make the design controls harder to use and are outside the supported page setup.

Choose whether the page should begin with all enabled templates or a particular starting template. A starting template preselects a product; it is not an access rule that restricts the customer to only that product. Manage actual product availability in Personalizer.

2. Use the WordPress shortcode

In the WordPress block editor, insert a Shortcode block and enter the basic shortcode. Preview the page in a separate customer-facing tab.

[help4_personalizer]

To preselect a template and hide the editor’s built-in introduction, use its template identifier as in the following example. Replace heart with the identifier for your offering. If you do not know the identifier, use a builder’s Starting product template selector instead of guessing it.

[help4_personalizer template="heart" show_header="0"]

3. Add the Elementor widget

Open the page with Elementor and search for Personalizer & Engraving. Drag the widget into the intended container. In its controls, choose Starting product template and whether to Show introduction. Keep spacing and nearby explanatory text in your Elementor layout.

The editing canvas shows a placeholder with the configured product and an Open customer page link. Save the page, then use the standalone preview or published page to upload images and test the actual editor. The placeholder avoids running a customer session inside the builder canvas.

4. Add the Beaver Builder module

Open the page in Beaver Builder and add the Personalizer & Engraving module. Select Starting product template and Show introduction in its Personalizer settings, then save and publish the builder layout.

Use the customer-facing page for interactive testing. The module in the editing canvas is a placeholder. If you cannot find the module, confirm that both Beaver Builder and Personalizer are active, then reload the builder before adding a second shortcode as a workaround.

5. Add the Help4 Builder palette entry

Open the page in Help4 Builder, find Personalizer & Engraving in the Commerce palette and add it to your layout. Choose the starting template and introduction setting. The integration uses Help4 Builder’s supported shortcode block and catalog hooks.

Save the page and use its public preview for uploads, saving and proofs. Being able to edit this page in Help4 Builder does not establish native commerce readiness; check the separate commerce connection before offering checkout.

6. Check the published page

Open the page while signed out in a fresh browser session. Test upload, photo movement, 3D orbit, save, reload and proof review. Repeat on a phone-width screen and check that every dialog fits, closes and returns you to the control that opened it.

Exclude the editor URL from external full-page caches and purge a previously cached page. The tested frontend adapters include Elementor, Beaver Builder Lite and Help4 Builder. Other themes, third-party template widgets, Elementor Pro Theme Builder and Beaver Themer need testing in your own setup; a successful embed in one page does not prove every global-template arrangement.

Continue the walkthrough

Edit your published pages · Test the customer editor

All Personalizer tutorials · Contact Help4 support