Advanced Product Page App
With this app, you can customize your product page with this advanced editor and build HTML templates without any coding skills or knowledge!
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 pages 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, the button beside it in case you want the new product page that you will create te be displayed within the store main template:
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 export 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:
Open Blocks:
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:
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 pages 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, the button beside it in case you want the new product page that you will create te be displayed within the store main template:
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 export 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:
Open Blocks:
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:
Updated on: 23/01/2023
Thank you!