Page Settings

• Title: Set the administrative title for your page. This name is only visible to you in the back-end for easy identification.
• Status: Control the publication status of the page. Select "Enabled" to make the page live and accessible, or "Disabled" to keep it as a draft.
• Featured Image: Assign a featured image to the page. This image may be used by your theme on archive pages or as the default preview image when sharing the page on social media.
• HTML Tag: Select the HTML tag for the main page wrapper.
• Page Layout: Choose the overall structural layout for your page.
  • Theme Layouts (e.g., Default, One Column): These options use the standard column structures provided by your active PrestaShop theme.
  • Creative Elements Layouts (Canvas, Full Width): These override the theme's content area. "Canvas" provides a completely blank page with no header or footer, while "Full Width" retains your site's header and footer but gives you an edge-to-edge content area.
• Clear Content Wrapper: Enable this option to remove your theme's default content container styles, such as padding or max-width. This is essential for achieving a true edge-to-edge design when using the "Full Width" page layout.

Select the background type: None, Classic, or Gradient.

Classic

Color

Set a solid background color to provide a consistent base for your design.

Image

Upload an image to use as the background. Additional settings include:

• Loading: Choose whether to load the background image lazily or immediately.
• Position: Define the image's position within the background (e.g., center, top-left).
• Attachment: Set the background image to scroll with the page or remain fixed.
• Repeat: Determine if the image repeats or stays single across the background area.
• Size: Control the size of the background image, such as cover, contain, or custom dimensions.

Padding

Adjust the amount of empty space inside the borders of the template. This padding creates a buffer around the content within the page.

Gradient

Color

Select the primary color for the gradient background.

Location

Define the starting position of the primary color in the gradient effect.

Second Color

Select the secondary color to blend into the gradient.

Location

Define the stopping point for the second color in the gradient, controlling how the two colors blend together.

Type

Select the type of gradient effect. 'Linear' creates a straight-line gradient, while 'Radial' creates a circular gradient.

Angle

For a 'Linear' gradient, set the angle of the color transition (e.g., 90deg for a horizontal gradient).

Padding

Adjust the amount of empty space inside the borders of the template. This padding creates a buffer around the content within the header or footer.

Apply custom CSS to style the widget beyond the default settings.

Note: This requires CSS knowledge—use carefully, as incorrect syntax can impact other areas of the site.

                /* For main element */
                selector { 
                  color: red; 
                }

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

                /* Or use any custom selector */
                .my-class { 
                  text-align: center; 
                }

If you want to learn the basics of CSS, W3Schools is a great resource for that.

• Title: Set the administrative title for your product page. This name is only visible to you in the back-end for easy identification.
• Status: Control the publication status of the product page. Select "Enabled" to make the product page live and accessible, or "Disabled" to keep it as a draft.
• HTML Tag: Select the HTML tag for the main page wrapper.
• Page Layout: Choose the overall structural layout for your product page.
  • Theme Layouts (e.g., Default, One Column): These options use the standard column structures provided by your active PrestaShop theme.
  • Creative Elements Layouts (Canvas, Full Width): These override the theme's content area. "Canvas" provides a completely blank page with no header or footer, while "Full Width" retains your site's header and footer but gives you an edge-to-edge content area.
• Clear Content Wrapper: Enable this option to remove your theme's default content container styles, such as padding or max-width. This is essential for achieving a true edge-to-edge design when using the "Full Width" page layout.

Configure the product that will be used as the preview in the editor. This allows you to design your product page in the context of a real product from your site.

Select the background type: None, Classic, or Gradient.

Classic

Color

Set a solid background color to provide a consistent base for your design.

Image

Upload an image to use as the background. Additional settings include:

• Loading: Choose whether to load the background image lazily or immediately.
• Position: Define the image's position within the background (e.g., center, top-left).
• Attachment: Set the background image to scroll with the page or remain fixed.
• Repeat: Determine if the image repeats or stays single across the background area.
• Size: Control the size of the background image, such as cover, contain, or custom dimensions.

Padding

Adjust the amount of empty space inside the borders of the template. This padding creates a buffer around the content within the page.

Gradient

Color

Select the primary color for the gradient background.

Location

Define the starting position of the primary color in the gradient effect.

Second Color

Select the secondary color to blend into the gradient.

Location

Define the stopping point for the second color in the gradient, controlling how the two colors blend together.

Type

Select the type of gradient effect. 'Linear' creates a straight-line gradient, while 'Radial' creates a circular gradient.

Angle

For a 'Linear' gradient, set the angle of the color transition (e.g., 90deg for a horizontal gradient).

Padding

Adjust the amount of empty space inside the borders of the template. This padding creates a buffer around the content within the header or footer.

Apply custom CSS to style the widget beyond the default settings.

Note: This requires CSS knowledge—use carefully, as incorrect syntax can impact other areas of the site.

                /* For main element */
                selector { 
                  color: red; 
                }

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

                /* Or use any custom selector */
                .my-class { 
                  text-align: center; 
                }

If you want to learn the basics of CSS, W3Schools is a great resource for that.

• Title: Set the administrative title for your product miniature. This name is only visible to you in the back-end for easy identification.
• Status: Control the publication status of the product miniature. Select "Enabled" to make the product miniature live and accessible, or "Disabled" to keep it as a draft.
• HTML Tag: Select the HTML tag for the main page wrapper.

• Width: Adjust the width of the preview container within the editor. (This setting does not affect the live site.)
• Product: Configure the product that will be used as the preview in the editor. This allows you to design your product miniature in the context of a real product from your site.

Select the background type: None, Classic, or Gradient.

Classic

Color

Set a solid background color to provide a consistent base for your design.

Image

Upload an image to use as the background. Additional settings include:

• Loading: Choose whether to load the background image lazily or immediately.
• Position: Define the image's position within the background (e.g., center, top-left).
• Attachment: Set the background image to scroll with the page or remain fixed.
• Repeat: Determine if the image repeats or stays single across the background area.
• Size: Control the size of the background image, such as cover, contain, or custom dimensions.

Transition Duration (On hover)

Set the time duration in milliseconds that the hover transition effect takes to complete.

Gradient

Color

Select the primary color for the gradient background.

Location

Define the starting position of the primary color in the gradient effect.

Second Color

Select the secondary color to blend into the gradient.

Location

Define the stopping point for the second color in the gradient, controlling how the two colors blend together.

Type

Select the type of gradient effect. 'Linear' creates a straight-line gradient, while 'Radial' creates a circular gradient.

Angle

For a 'Linear' gradient, set the angle of the color transition (e.g., 90deg for a horizontal gradient).

Transition Duration (On hover)

Set the time duration in milliseconds that the hover transition effect takes to complete.

Border Type (Normal & Hover)

Select the style for the widget container's border (e.g., None, Solid, Dashed, Dotted, Double).

Border Width (Normal & Hover)

Set the thickness of the border on each side (Top, Right, Bottom, Left) in PX.

Border Color (Normal & Hover)

Define the color of the element's border.

Border Radius (Normal & Hover)

Adjust the roundness of the widget container's corners, with options for PX or % units.

Box Shadow (Normal & Hover)

Apply a shadow effect to the widget container, with controls for color, position, blur, and spread.

Transition Duration (On Hover)

Set the speed (in seconds) of the transition animation for border and shadow hover effects.

Margin

Adds space around the outside of the entire product miniature container.

Padding

Adds space on the inside of the product miniature container, between its border and the content within it.

CSS Classes

Assign one or more custom CSS classes to the main wrapper element of the product miniature.

Article Classes

Assign one or more custom CSS classes specifically to the <article> tag inside the product miniature.

Overflow

Controls how content behaves if it extends beyond the boundaries of the product miniature container. "Hidden" will clip any overflowing content, while "Default" will allow elements (like a sale badge) to be positioned outside the box.

Apply custom CSS to style the widget beyond the default settings.

Note: This requires CSS knowledge—use carefully, as incorrect syntax can impact other areas of the site.

                /* For main element */
                selector { 
                  color: red; 
                }

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

                /* Or use any custom selector */
                .my-class { 
                  text-align: center; 
                }

If you want to learn the basics of CSS, W3Schools is a great resource for that.

• Width: Set the width of the Quick View modal popup, using pixels (PX) or a percentage of the viewport width (VW).
• Height: Control the modal's height by choosing to automatically size it to its content ('Fit To Content'), make it fill the viewport ('Fit To Screen'), or set a 'Custom' height.
• Horizontal Position: Align the Quick View modal horizontally to the left, center, or right of the screen.
• Vertical Position: Align the Quick View modal vertically to the top, center, or bottom of the screen.
• Close Button: Show or hide the 'X' icon that allows users to close the Quick View modal.
• Entrance Animation: Select a visual effect for how the Quick View modal appears when it opens.
• Animation Duration (s): Define the speed of the entrance animation in seconds.

• Title: Set the administrative title for your quick view. This name is only visible to you in the back-end for easy identification.
• Status: Control the publication status of the quick view. Select "Enabled" to make the quick view live and accessible, or "Disabled" to keep it as a draft.
• HTML Tag: Select the HTML tag for the main page wrapper.

• Product: Configure the product that will be used as the preview in the editor. This allows you to design your quick view in the context of a real product from your site.

• Background Type: Choose the background for the popup modal, which can be a solid color ('Classic') or a multi-tone 'Gradient'.
• Border Type: Select the style of the border that surrounds the Quick View popup, such as Solid, Dashed, or Dotted.
• Border Width: Set the thickness of the border on each side of the popup container.
• Border Color: Choose a color for the popup's border.
• Border Radius: Adjust the roundness of the popup's corners to create a squared or more rounded appearance.
• Box Shadow: Apply a shadow effect to the Quick View modal to add depth and make it stand out from the page content.

• Background Type: Choose the background style for the overlay, which is the layer that covers the page content behind the popup.
• Color: Set a solid color for the overlay. It is common to use a semi-transparent color to subtly obscure the background page content.
• Image: Optionally, you can set an image to be used as the background for the overlay area.

• Position: Choose whether the close button appears 'Inside' the top corner of the Quick View modal or 'Outside' of it.
• Vertical Position: Adjust the button's vertical alignment, moving it up or down relative to the modal.
• Horizontal Position: Adjust the button's horizontal alignment, moving it left or right relative to the modal.
• Color (Normal & Hover): Set the color of the close button's icon for both its default (Normal) and mouse-over (Hover) states.
• Background Color (Normal & Hover): Set a background color for the close button, which can change on hover.
• Size: Control the size of the close button icon.

Margin

Adds space around the outside of the entire quick view container.

Padding

Adds space on the inside of the quick view container, between its border and the content within it.

Z-Index

Controls the stacking order of the Quick View modal, determining if it appears in front of or behind other elements on the page.

Apply custom CSS to style the widget beyond the default settings.

Note: This requires CSS knowledge—use carefully, as incorrect syntax can impact other areas of the site.

                /* For main element */
                selector { 
                  color: red; 
                }

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

                /* Or use any custom selector */
                .my-class { 
                  text-align: center; 
                }

If you want to learn the basics of CSS, W3Schools is a great resource for that.

• Title: Set the administrative title for your listing page. This name is only visible to you in the back-end for easy identification.
• Status: Control the publication status of the listing page. Select "Enabled" to make the listing page live and accessible, or "Disabled" to keep it as a draft.
• HTML Tag: Select the HTML tag for the main page wrapper.
• Page Layout: Choose the overall structural layout for your listing page.
  • Theme Layouts (e.g., Default, One Column): These options use the standard column structures provided by your active PrestaShop theme.
  • Creative Elements Layouts (Canvas, Full Width): These override the theme's content area. "Canvas" provides a completely blank page with no header or footer, while "Full Width" retains your site's header and footer but gives you an edge-to-edge content area.
• Clear Content Wrapper: Enable this option to remove your theme's default content container styles, such as padding or max-width. This is essential for achieving a true edge-to-edge design when using the "Full Width" page layout.

Configure the listing page that will be used as the preview in the editor. This allows you to design your page in the context of a real listing page from your site.

Select the background type: None, Classic, or Gradient.

Classic

Color

Set a solid background color to provide a consistent base for your design.

Image

Upload an image to use as the background. Additional settings include:

• Loading: Choose whether to load the background image lazily or immediately.
• Position: Define the image's position within the background (e.g., center, top-left).
• Attachment: Set the background image to scroll with the page or remain fixed.
• Repeat: Determine if the image repeats or stays single across the background area.
• Size: Control the size of the background image, such as cover, contain, or custom dimensions.

Padding

Adjust the amount of empty space inside the borders of the template. This padding creates a buffer around the content within the page.

Gradient

Color

Select the primary color for the gradient background.

Location

Define the starting position of the primary color in the gradient effect.

Second Color

Select the secondary color to blend into the gradient.

Location

Define the stopping point for the second color in the gradient, controlling how the two colors blend together.

Type

Select the type of gradient effect. 'Linear' creates a straight-line gradient, while 'Radial' creates a circular gradient.

Angle

For a 'Linear' gradient, set the angle of the color transition (e.g., 90deg for a horizontal gradient).

Padding

Adjust the amount of empty space inside the borders of the template. This padding creates a buffer around the content within the header or footer.

Apply custom CSS to style the widget beyond the default settings.

Note: This requires CSS knowledge—use carefully, as incorrect syntax can impact other areas of the site.

                /* For main element */
                selector { 
                  color: red; 
                }

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

                /* Or use any custom selector */
                .my-class { 
                  text-align: center; 
                }

If you want to learn the basics of CSS, W3Schools is a great resource for that.

• Scroll Up: Control the page's scroll behavior after an AJAX refresh (like applying a filter). Choose 'Top' to scroll to the top of the page, 'Disabled' to prevent any scrolling, or 'Custom' to scroll to a specific element on the page.
• CSS ID: When 'Scroll Up' is set to 'Custom', enter the CSS ID of the target element you want the page to scroll to after the refresh.
• Offset (px): Set a pixel value to adjust the final scroll position. This is useful for accommodating sticky headers, ensuring the target element isn't hidden after the scroll.

• Title: Set the administrative title for your CMS page. This name is only visible to you in the back-end for easy identification.
• Hide Title: Enable this to hide the page's title. If this feature doesn't work, you may need to specify your theme's title selector in the Settings page of the module.
• Status: Control the publication status of the CMS page. Select "Enabled" to make the CMS page live and accessible, or "Disabled" to keep it as a draft.
• Featured Image: Assign the primary image for this page. This image will be used as the og:image meta tag, which controls the preview that appears when the page is shared on social media platforms like Facebook, Twitter, or LinkedIn.
• Page Layout: Choose the overall structural layout for your CMS page.
  • Theme Layouts (e.g., Default, One Column): These options use the standard column structures provided by your active PrestaShop theme.
  • Creative Elements Layouts (Canvas, Full Width): These override the theme's content area. "Canvas" provides a completely blank page with no header or footer, while "Full Width" retains your site's header and footer but gives you an edge-to-edge content area.
• Clear Content Wrapper: Enable this option to remove your theme's default content container styles, such as padding or max-width. This is essential for achieving a true edge-to-edge design when using the "Full Width" page layout.

Select the background type: None, Classic, or Gradient.

Classic

Color

Set a solid background color to provide a consistent base for your design.

Image

Upload an image to use as the background. Additional settings include:

• Loading: Choose whether to load the background image lazily or immediately.
• Position: Define the image's position within the background (e.g., center, top-left).
• Attachment: Set the background image to scroll with the page or remain fixed.
• Repeat: Determine if the image repeats or stays single across the background area.
• Size: Control the size of the background image, such as cover, contain, or custom dimensions.

Padding

Adjust the amount of empty space inside the borders of the template. This padding creates a buffer around the content within the page.

Gradient

Color

Select the primary color for the gradient background.

Location

Define the starting position of the primary color in the gradient effect.

Second Color

Select the secondary color to blend into the gradient.

Location

Define the stopping point for the second color in the gradient, controlling how the two colors blend together.

Type

Select the type of gradient effect. 'Linear' creates a straight-line gradient, while 'Radial' creates a circular gradient.

Angle

For a 'Linear' gradient, set the angle of the color transition (e.g., 90deg for a horizontal gradient).

Padding

Adjust the amount of empty space inside the borders of the template. This padding creates a buffer around the content within the header or footer.

Apply custom CSS to style the widget beyond the default settings.

Note: This requires CSS knowledge—use carefully, as incorrect syntax can impact other areas of the site.

                /* For main element */
                selector { 
                  color: red; 
                }

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

                /* Or use any custom selector */
                .my-class { 
                  text-align: center; 
                }

If you want to learn the basics of CSS, W3Schools is a great resource for that.

• Title: Set the administrative title for your description. This name is only visible to you in the back-end for easy identification.
• Hide Title: Enable this to hide the page's title. If this feature doesn't work, you may need to specify your theme's title selector in the Settings page of the module.
• Status: Control the publication status of the description. Select "Enabled" to make the description live and accessible, or "Disabled" to keep it as a draft.
• Page Layout: Choose the overall structural layout for your description.
  • Theme Layouts (e.g., Default, One Column): These options use the standard column structures provided by your active PrestaShop theme.
  • Creative Elements Layouts (Canvas, Full Width): These override the theme's content area. "Canvas" provides a completely blank page with no header or footer, while "Full Width" retains your site's header and footer but gives you an edge-to-edge content area.
• Clear Content Wrapper: Enable this option to remove your theme's default content container styles, such as padding or max-width. This is essential for achieving a true edge-to-edge design when using the "Full Width" page layout.

Select the background type: None, Classic, or Gradient.

Classic

Color

Set a solid background color to provide a consistent base for your design.

Image

Upload an image to use as the background. Additional settings include:

• Loading: Choose whether to load the background image lazily or immediately.
• Position: Define the image's position within the background (e.g., center, top-left).
• Attachment: Set the background image to scroll with the page or remain fixed.
• Repeat: Determine if the image repeats or stays single across the background area.
• Size: Control the size of the background image, such as cover, contain, or custom dimensions.

Padding

Adjust the amount of empty space inside the borders of the template. This padding creates a buffer around the content within the page.

Gradient

Color

Select the primary color for the gradient background.

Location

Define the starting position of the primary color in the gradient effect.

Second Color

Select the secondary color to blend into the gradient.

Location

Define the stopping point for the second color in the gradient, controlling how the two colors blend together.

Type

Select the type of gradient effect. 'Linear' creates a straight-line gradient, while 'Radial' creates a circular gradient.

Angle

For a 'Linear' gradient, set the angle of the color transition (e.g., 90deg for a horizontal gradient).

Padding

Adjust the amount of empty space inside the borders of the template. This padding creates a buffer around the content within the header or footer.

Apply custom CSS to style the widget beyond the default settings.

Note: This requires CSS knowledge—use carefully, as incorrect syntax can impact other areas of the site.

                /* For main element */
                selector { 
                  color: red; 
                }

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

                /* Or use any custom selector */
                .my-class { 
                  text-align: center; 
                }

If you want to learn the basics of CSS, W3Schools is a great resource for that.

• Title: Set the administrative title for your content. This name is only visible to you in the back-end for easy identification.
• Status: Control the publication status of the content. Select "Enabled" to make the content live and accessible, or "Disabled" to keep it as a draft.
• Clear Content Wrapper: Enable this option to remove your theme's default content container styles, such as padding or max-width. This is essential for achieving a true edge-to-edge design when using the "Full Width" page layout.

Select the background type: None, Classic, or Gradient.

Classic

Color

Set a solid background color to provide a consistent base for your design.

Image

Upload an image to use as the background. Additional settings include:

• Loading: Choose whether to load the background image lazily or immediately.
• Position: Define the image's position within the background (e.g., center, top-left).
• Attachment: Set the background image to scroll with the page or remain fixed.
• Repeat: Determine if the image repeats or stays single across the background area.
• Size: Control the size of the background image, such as cover, contain, or custom dimensions.

Padding

Adjust the amount of empty space inside the borders of the template. This padding creates a buffer around the content within the page.

Gradient

Color

Select the primary color for the gradient background.

Location

Define the starting position of the primary color in the gradient effect.

Second Color

Select the secondary color to blend into the gradient.

Location

Define the stopping point for the second color in the gradient, controlling how the two colors blend together.

Type

Select the type of gradient effect. 'Linear' creates a straight-line gradient, while 'Radial' creates a circular gradient.

Angle

For a 'Linear' gradient, set the angle of the color transition (e.g., 90deg for a horizontal gradient).

Padding

Adjust the amount of empty space inside the borders of the template. This padding creates a buffer around the content within the header or footer.

Apply custom CSS to style the widget beyond the default settings.

Note: This requires CSS knowledge—use carefully, as incorrect syntax can impact other areas of the site.

                /* For main element */
                selector { 
                  color: red; 
                }

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

                /* Or use any custom selector */
                .my-class { 
                  text-align: center; 
                }

If you want to learn the basics of CSS, W3Schools is a great resource for that.

• Title: Set the administrative title for your content. This name is only visible to you in the back-end for easy identification.
• Status: Control the publication status of the content. Select "Enabled" to make the content live and accessible, or "Disabled" to keep it as a draft.