Page Settings - Creative Elements Documentation

The Page Settings panel contains document-level controls for the page, content, or template you are currently editing. Unlike element settings, these controls apply to the document itself and can include its title, status, page layout, preview context, styling, and other document-specific options.

The available settings depend on the type of document you are editing. For example, a Product Page template provides a product preview, while a Quick View template includes additional controls for the popup layout and appearance.

How to Access Page Settings

Click the cog icon () in the Live Editor's Bottom Bar to open Page Settings.

Live Editor - Bottom Bar

Convert to Container

If the current document contains traditional Sections and Columns, Creative Elements can convert them into the newer Container structure.

The Convert to container option appears in Page Settings when the Container feature is enabled and the current document contains at least one Section.

How to Convert a Page to Containers

Open the document you want to convert in the Live Editor.
Open Page Settings from the Bottom Bar.
Locate the Convert to container option.
Click Convert.
Review the converted layout on Desktop, Tablet, and Mobile.
Save your changes when you are satisfied with the result.

Live Editor - Convert to container

Note: The conversion copies the Sections and Columns and creates their Container-based equivalents beneath the original structure. The original elements are preserved so you can compare the layouts before removing them.

You can also convert an individual Section. Select the Section and use the Convert to container option in its Layout settings.

Settings by Document Type

Page Settings are context-aware. The available tabs and controls change depending on what you are editing.

Note: Some controls are conditional and appear only when a particular option is selected or when the corresponding PrestaShop feature is available. Theme-dependent options, such as Page Layout, can also vary according to your active theme.

These settings apply when editing a Header or Footer template in the Theme Builder.

Settings

Title: Set the administrative name used to identify the template.
Status: Enable or disable the template.
HTML Tag: Choose the HTML element used for the template wrapper, such as div, header, footer, main, article, section, aside, or nav.

Preview Settings

Select the storefront page displayed behind the Header or Footer while editing. This lets you design the template in a realistic page context.

Depending on the selected preview type, an additional selector appears so you can choose a specific Category, Brand, Supplier, Product, CMS Page, or CMS Category. Search previews also provide a text field.

Click Apply & Preview to reload the editor using the selected context.

Note: Preview Settings affect only the editing context. They do not determine where the Header or Footer is displayed on the storefront.

Style

Customize the template wrapper using Background and responsive Padding controls. Header and Footer templates also provide Box Shadow settings.

Custom CSS

Add custom CSS to the Header or Footer template.

These settings apply to Theme Builder page templates such as Homepage, Contact Page, 404 Page, Authentication, Registration, Password Recovery, Brands Page, and Suppliers Page.

Settings

Title: Set the administrative name used to identify the template.
Status: Enable or disable the template.
Featured Image: Assign an image to supported Theme Builder page documents. It can be used as the document's social-sharing image.
HTML Tag: Choose the HTML element used for the template's outer wrapper.
Page Layout: Choose a layout provided by the active theme or a Creative Elements layout such as Canvas or Full Width.
Clear Content Wrapper: Remove the configured theme content wrapper's layout restrictions. This control is not available when Page Layout is set to Canvas.

Style

Customize the document wrapper using Background and responsive Padding controls.

Custom CSS

Add custom CSS to the current Theme Builder page template.

These settings apply when editing a Product Page template in the Theme Builder.

Settings

Title: Set the administrative name of the Product Page template.
Status: Enable or disable the template.
HTML Tag: Choose the HTML element used for the template wrapper.
Page Layout: Choose a theme layout or a Creative Elements layout such as Canvas or Full Width.
Clear Content Wrapper: Remove the configured theme content wrapper's restrictions. This control is not available when Page Layout is set to Canvas.

Preview Settings

Select the Product used to populate the template while editing, then click Apply & Preview.

The selected product provides the data displayed by product-specific widgets, such as its name, images, price, combinations, description, and other product information.

Note: The selected Product is used only as preview content. It does not assign the Product Page template exclusively to that product.

Style

Customize the Product Page wrapper using Background and responsive Padding controls.

Custom CSS

Add custom CSS to the Product Page template.

These settings apply when editing a Product Miniature template.

Settings

Title: Set the administrative name of the Product Miniature template.
Status: Enable or disable the template.
HTML Tag: Choose the HTML element used for the template wrapper.

Preview Settings

Width : Set the width of the Product Miniature inside the editor preview. This does not determine the width of product cards on the storefront.
Product: Select the product used to populate the Product Miniature while editing.

Apply the preview settings to inspect the template using the selected product.

Background

Customize the Product Miniature background in its Normal and Hover states. A Transition Duration control is available for the Hover background when a hover background is configured.

Border

Configure the Product Miniature's border, Border Radius, Box Shadow, and corresponding Hover styles.

Advanced

Margin: Set the space outside the Product Miniature wrapper.
Padding: Set the space between the wrapper edges and its content.
CSS Classes: Add custom CSS classes to the Product Miniature wrapper.
Article Classes: Add custom CSS classes to the <article> element inside the Product Miniature.
Overflow: Choose Default or Hidden to control content extending beyond the Product Miniature wrapper.

Custom CSS

Add custom CSS to the Product Miniature template.

These settings apply when editing a Quick View template.

Layout

Width : Set the width of the popup.
Height: Choose Fit To Content, Fit To Screen, or Custom.
Custom Height: Set the popup height when Height is set to Custom.
Position: Control the popup's position on the screen.
Horizontal : Adjust its horizontal position.
Vertical : Adjust its vertical position.
Content Position: Control the alignment of the popup content.
Close Button: Show or hide the popup close button.
Entrance Animation: Select the animation used when the popup opens.
Animation Duration: Set the duration of the selected entrance animation.

Settings

Title: Set the administrative name of the Quick View template.
Status: Enable or disable the template.
HTML Tag: Choose the HTML element used for the template wrapper.

Preview Settings

Select the Product used to populate the Quick View while editing, then apply the preview.

Note: The selected product affects only the editor preview. On the storefront, Quick View displays the product opened by the visitor.

Popup

Customize the popup Background, Border, Border Radius, and Box Shadow.

Overlay

Customize the overlay displayed behind the Quick View popup.

Close Button

Configure the Close Button Position, responsive Vertical and Horizontal Position, Normal and Hover colors, Background Color, and Size.

Advanced

Margin : Set the space outside the popup content.
Padding : Set the space inside the popup content.
Z-Index: Control the popup's stacking order.

Custom CSS

Add custom CSS to the Quick View template.

These settings apply when editing Listing templates used for Category, Brand, Supplier, Search, Prices Drop, New Products, and Best Sellers pages.

Settings

Title: Set the administrative name of the Listing template.
Status: Enable or disable the template.
HTML Tag: Choose the HTML element used for the template wrapper.
Page Layout: Choose a theme layout or a Creative Elements layout such as Canvas or Full Width.
Clear Content Wrapper: Remove the configured theme content wrapper's restrictions. This control is not available when Page Layout is set to Canvas.

Preview Settings

Select the listing context used while editing. Available preview types can include Category, Brand, Supplier, Search, Prices Drop, New Products, and Best Sellers.

When required, an additional control appears so you can select the specific Category, Brand, Supplier, or search text to preview.

Click Apply & Preview to reload the editor with the selected context.

Note: Preview Settings affect only the editing context. They do not determine where the Listing template is used on the storefront.

Style

Customize the Listing template wrapper using Background and responsive Padding controls.

Custom CSS

Add custom CSS to the Listing template.

AJAX Refresh

Control the scroll position after an AJAX listing refresh, such as when a visitor applies a filter or changes the product sorting.

Scroll Up: Choose Top, Disable, or Custom.
CSS ID: Set the target element when Scroll Up is set to Custom.
Offset : Adjust the final scroll position when Custom is selected.

These settings apply when editing a CMS Category template in the Theme Builder.

Settings

Title: Set the administrative name of the CMS Category template.
Status: Enable or disable the template.
Featured Image: Assign an image to the template for supported social-sharing metadata.
HTML Tag: Choose the HTML element used for the template wrapper.
Page Layout: Choose a theme layout or a Creative Elements layout such as Canvas or Full Width.
Clear Content Wrapper: Remove the configured theme content wrapper's restrictions. This control is not available when Page Layout is set to Canvas.

Preview Settings

Select the CMS Category used to populate the template while editing, then click Apply & Preview.

Style

Customize the CMS Category template wrapper using Background and responsive Padding controls.

Custom CSS

Add custom CSS to the CMS Category template.

These settings apply to content edited directly with Creative Elements, such as CMS Pages and supported PrestaShop description content. Content Anywhere uses a related but simplified set of document settings.

Settings

Depending on the content type, the available controls can include:

Title: Set the administrative title of the document.
Hide Title: Hide the title matched by the configured Page Title Selector.
Status: Enable or disable the document.
Featured Image: Available for CMS Pages and used as the social-sharing image where supported.
Page Layout: Choose a theme layout or a Creative Elements layout such as Canvas or Full Width where page layouts are supported.
Clear Content Wrapper: Remove the configured theme content wrapper's restrictions where available.

Style

Customize the document wrapper using Background and responsive Padding controls.

Custom CSS

Add custom CSS to the current document.

Content Anywhere

Content Anywhere documents provide Title, Status, Style, and Custom CSS controls. When a content wrapper selector is configured, Clear Content Wrapper is also available.

Note: Content Anywhere Page Settings control the document itself. They do not replace the hook or placement configuration that determines where the content is displayed.

The available settings depend on the type of Saved Template you are editing.

Page Template

Saved Page templates provide document controls including:

Title
Hide Title
Status
Page Layout
Clear Content Wrapper, where available
Body Style
Custom CSS

Section Template

Saved Section templates provide the basic document settings Title and Status. The Section itself provides its own Layout, Style, and Advanced controls.

Container Template

Saved Container templates provide the basic document settings Title and Status. The Container itself provides its own Layout, Style, and Advanced controls.

Understanding Common Page Settings

Several document-level controls are shared by multiple document types. Their availability depends on the document you are editing.

Title and Status

Title: Identifies the document in Creative Elements. It is not necessarily the visible heading displayed on the storefront.
Status: Choose whether the document is Enabled or Disabled.

HTML Tag

Theme Builder documents can provide an HTML Tag control for their outer wrapper. Available tags include div, main, article, header, footer, section, aside, and nav.

Choose a tag that reflects the semantic purpose of the template. For example, a Header template can use header, while the primary content of a page can use main.

Page Layout

Page Layout controls how Creative Elements content fits into the surrounding PrestaShop theme.

Theme Layouts: Use layouts provided by the active theme. Their names and available column configurations can vary between themes.
Canvas: Display only the Creative Elements content without the usual theme Header, Footer, or surrounding page layout.
Full Width: Keep the surrounding site structure while allowing the Creative Elements content to use a full-width content area.

Clear Content Wrapper

PrestaShop themes commonly place the main page content inside a wrapper that adds a maximum width, margin, padding, background, or other styling.

Clear Content Wrapper clears the relevant styles from the wrapper matched by the Content Wrapper Selector configured in Creative Elements. This allows Creative Elements content to use the available width without the usual wrapper restrictions.

Important: Clear Content Wrapper is not the same as selecting Full Width. Its effect depends on your theme and the Content Wrapper Selector configured in Creative Elements. The control is not available when Page Layout is set to Canvas.

Hide Title

Hide Title hides the page title matched by the Page Title Selector configured in Creative Elements. It is useful when you want to create your own heading with Creative Elements instead of displaying both the theme title and a custom heading.

If the title remains visible after enabling Hide Title, check the Page Title Selector configured in Creative Elements.

Note: Hide Title hides the matching title using CSS. It does not remove the title element from the page's HTML.

Featured Image

Featured Image assigns an image to supported documents. For CMS Pages and supported Theme Builder page documents, the image can be output as the document's og:image for social sharing.

Note: A Featured Image is not automatically inserted into your Creative Elements layout. Add an Image widget if you also want the image to appear as visible page content.

Preview Settings

Reusable Theme Builder templates can provide Preview Settings so you can design the template using real storefront content.

For example, you can select a Product while editing a Product Page, Product Miniature, or Quick View template, choose a listing context for a Listing template, or choose a storefront page behind a Header or Footer.

After changing the preview context, click Apply & Preview to refresh the Live Editor.

Note: Preview Settings affect only the content shown while editing. They do not determine where the template is used on the storefront.

Body Style

Many document types provide document-level styling for their main wrapper. These controls include:

Background: Set a Classic or Gradient background and configure the available background options.
Padding : Adjust the internal spacing of the document wrapper for different devices.

Product Miniature and Quick View templates use their own dedicated styling controls instead of the common Body Style panel.

Custom CSS

Where available, Custom CSS lets you add CSS to the current document. Use selector to target the document wrapper:

selector {
    background-color: #ffffff;
}

selector .child-element {
    margin: 10px;
}

Note: Custom CSS requires CSS knowledge. Incorrect selectors or declarations can affect the appearance of your page or template.