With this app, you can customize your product page with this advanced editor and build HTML templates without any knowledge of coding!
We will need to install the app first through the "Apps & Services" page and then enable its status as follows:
Afterward, we can access any of our product's page to be able to use the app:
Then, we will click on the "Build Product Page" button:
The page shown below will be opened, you will have to enable that switch so the changes will be made on the page reflects once you click on the Save button:
We will outline the following buttons briefly:
1- To make the components appear without hovering over them.
2- To Preview the changes you made.
3- To open the page builder on full screen.
4- To view code and exporting it to a ZIP file.
5- Undo an action.
6- Redo an action.
7- You can type your HTML/CSS once you click on that button in case you want to import.
8- To clean/remove the canvas, you can undo this action normally.
9- To import a web page URL.
10- To save the changes you made.
11- The language of the page.
Open Style Manager:
When clicking on any of the components, you will be able to bring changes to it using the Open style Manager tools
For Instance, if you clicked on one of the components you can change its location referring to the General part:
For the Dimensions we will use the next section and so on:
If we want to preview the changes we made:
The product's page will be opened so you can check the changes on the storefront:
Open Layer Manager:
Instead of clicking on each component and dragging it, you can change their orders through the Open Layer Manager as follows:
In this section, you will have 4 lists to choose between to drag the ones you need easily to the building page:
You can preview as well while building how it will like on other platforms such as phones and tablets: