The most advanced front-end page builder for Prestashop

Create custom designs for home page, category page, product page or CMS pages without any special skills.

Ideal for business people, developers and designers.

NO-CODE technology based on Bootstrap 4

* Supports any modules and templates!

Picture

Two editing modes

In grid mode, the entire structure of the page is clearly visible to you, which is very convenient when laying out designs from Photoshop, Figma or Scetch

Picture

Ready widgets and sections

The main design tools include 57 widgets and a large set of ready-made design sections that can be edited with a couple of clicks.

Mobile optimized

Flexible configuration of design and arrangement of blocks for each screen of mobile devices. All breakpoints match the Bootstrap 5 sizing grid

Product page builder

The Product Page Components Widget allows you to create your own unique product card template.

Picture

Together with the rest of the widgets, you can turn the page into a completely independent landing page with a unique design and even with its own header and footer!

Additional Features

More options to bring your creativity to life

Video Background
Video Background
Add videos as background to Blocks. You can use the link to YouTube and Vimeo, your server links to videos, and upload video files.
Shape Dividers
Shape Dividers
Add striking shapes to separate the sections of your page.
Parallax effect
Parallax effect
Add a nice parallax effect to your sections to make your page design look dynamic.
Animation
Animation
Animation is an effect used for all kinds of web components. This can happen when visitors scroll through your web page, which draws their attention to the element, adding a bit of interactivity.
Borders
Borders
Border is an important and very popular effect in web design. You can add a border to any element.
Color Picker
Color Picker
Use the color picker to choose your own colors and create color schemes for your pages and themes. This is an essential feature of any graphical user interface.
Font
Font
The choice of font is necessary for styling any text elements such as headings, text, hyperlinks, lists, etc. Typography sets the font family, weight, variant, size, line height. 
100+ Google Fonts
100+ Google Fonts
Use the color picker to choose your own colors and create color schemes for your pages and themes. This is an essential feature of any graphical user interface.
Background
Background
Add backgrounds to widgets, icons, blocks or columns and even a page. You can choose between solid fill, gradient, image and video.
Shadow
Shadow
Apply shadow to the text, buttons, pictures and other elements easy.
Transparency
Transparency
One of the popular effects in web design is transparency. Most often it is used to overlay colors or pictures on top of each other, or to form smoother color transitions.
Extended transformation
Extended transformation
Add backgrounds to widgets, icons, blocks or columns and even a page. You can choose between solid fill, gradient, image and video.

Masterium allows you to very precisely and easily customize the display of the site on all mobile devices, hide individual content, change the order of content, etc.

Picture
Auto-adaptation of content
Auto-adaptation of content
By default, the added content adapts itself to mobile devices.
Content order
Content order
Change the order of the content on the page depending on the width of the screen.
Hiding content
Hiding content
You can hide some content for certain devices or for several at once.
Responsive Editing
Responsive Editing
For each device, you can style any part of the page so that it will be completely different from the desktop version.

Compatible with almost all other modules

Most of the third party modules are compatible with Masterium. If the module has a widget interface, then it will automatically become available for placement on the page.

For the convenience of work, you have two editing modes available. Grid mode and backlight mode. The backlight mode is minimalistic and easy to use for quick editing. Grid mode is a full-fledged navigator that shows the entire page structure and all nesting. You can transfer parts with a simple drag&drop.


Additionally, you may need the right panel for quick navigation and control of page blocks.

Picture
Picture

The appearance of product cards can be customized using advanced options. Select a thumbnail template and allow individual parts of it to be shown. This way you can make your miniatures look unique.


In addition, products can be displayed horizontally. Create a slider from the list and adjust the number of products per line for each screen.


Choose by what kind of sorting to show products, new products, bestsellers, discounts, from specific categories, specific products or to show randomly.

The header consists of special widgets and modernized standard modules that you can place anywhere and style as you like.

Picture

In addition, there are ready-made headers available that you can use or change.

The bast part of the header can be made sticky, or even a duplicate header of free form can be created that will be visible when scrolling.

In this case, the sticky part can be both at the top of the page and at the bottom, this allows you to greatly unload the top part by making the interface look like a native application.

Picture
Picture
Picture
Picture
Picture
Picture

Create your own unique site footer or choose one of the ready-made ones.

Picture

Customize anything you want! Add any scripts or your own styles to make your page as unique as possible.

Picture

Own design blocks


Save your own widgets, blocks or entire pages and use them anywhere in your store.

Picture