Advanced Product Page App

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:

Screenshot_221.png

Afterward, we can access any of our product's page to be able to use the app:
Screenshot_222.png
Then, we will click on the "Build Product Page" button:
Screenshot_223.png
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: Screenshot_224.png
We will outline the following buttons briefly:
Screenshot_225.png
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
Screenshot_226.png
For Instance, if you clicked on one of the components you can change its location referring to the General part:
Screenshot_244.png
For the Dimensions we will use the next section and so on:
Screenshot_245.png
If we want to preview the changes we made:
Screenshot_246.png
The product's page will be opened so you can check the changes on the storefront:
Screenshot_247.png
 
Open Layer Manager:
Instead of clicking on each component and dragging it, you can change their orders through the Open Layer Manager as follows:
Screenshot_227.png
 
Open Blocks:
In this section, you will have 4 lists to choose between to drag the ones you need easily to the building page: 
Screenshot_228.png
 
You can preview as well while building how it will like on other platforms such as phones and tablets:
Screenshot_229.png
 
 

Comments

Relevant Videos