AP Page Builder Userguide

Build up a page easily with AP Page Builder that supports various content types.


First of all, we would like the thank you for using our work.

Leotheme - a website where you can find the best Prestashop theme and Extensions as well. We are proud of our professional themes, extensions. With years of experience working on Opensource, we have created number of great extensions for Prestashop like: Leo Prestashop Framework, Leo Megamenu Prestashop Module ...

Leotheme is also famous for custom work, if you have trouble or help with your website, coding, .... you can find us on leotheme.com then we will support you or give you suggestions.

Download

Ap Page Buider has been realeased, after buying this module you can download it at our official site leotheme.com or at other market as Prestashop Addon, Themeforest. In addition, Ap Page Builder is integrated in our prestashop themes. So you can buy our themes and experience the powerful Apollo Page Builder Module.

Install

You can install our modules as other modules extremely easily and quickly. After you buy the module, we will give you FREE installation and quick support if there are problems. Also we integrate the features installed demo data so you can quickly build sites. With powerful features but installation process is quite fast and easy. If customer faces with any problems please contact us. We will always beside you.

When install the module successfully, access Modules then search for AP Page Builder, enable it then open its setting panel.

Upload theme

- This module also supply many widgets to build features for sales, intuitive user interface flexibility. Also integrate your existing modules in this module, you only need to build a site built just here and become faster page.

- How to create a new profile screen: From the menu on the left "Ap Manage Profiles" to the next screen lists Profile; click the button "View" in the list of profiles.

Upload theme

a) Creat Profile

Use click "Add new" button to create profile.

Upload theme

When you access "Add New" page, use need to fulfil information below:

Upload theme

- Name: Name of profile.

- Profile Key: The Character string of profile.

- Fullwidth Homepage: The setting full-width for above HOOKS, apply for Home page

- Fullwidth other Pages: The setting full-width for above HOOKS, apply for all OTHER pages ( not Home page )

- Disable cache Hooks: Some modules always update data, disable cache for those modules show correct info.

- Custom Css: Please set write Permission for folder D:\xamp\htdocs\prestashop\module_appagebuilder/themes/classic/modules/appagebuilder/css/profiles/

- Custom Js: Please set write Permission for folder D:\xamp\htdocs\prestashop\module_appagebuilder/themes/classic/modules/appagebuilder/js/profiles/

- Click "Save" button when you finish the process.

b) Privew

- When you finish creating profile process. User click button "View" On the right hand side of the screen to press "Preview" to see display in Front end.

Upload theme

c) Edit Design Layout

- To edit the design position of the interface. user click "View" button and then press "Edit Design Layout".

- At that time the layout interface will be displayed. It is permitted customer to insert modules and blogs in homepage..

Upload theme

d) Copy to Other Language, Edit profile, Duplicate, Delete

Upload theme

Copy to Other Language: Used to copy data to another language on the homepage.

- Edit Profile:Use to configure Profile information.

- Duplicate: Used to copy profiles.

- Delete: Use to remove profile.

e) Export, Refresh List, Show SQL Query, Export to SQL Manager

Upload theme

Export: Use export profile's data. When user click icon export. Your computer will export ".csv" file.

Refresh List : Used to refresh the list of profiles.

Show SQL Query

Export to SQL Mangager

.

Used to manage the location of blocks on the page. (Ap PageBuilder > Ap Positions Manage)

1. Add Position

To create a product list, simply click on the "+" button.

Ap product list

Then the screen loads into the "Add New" page.

Here you can fill in the following information.

Name: Enter a name (This field is required).

Position Key: Use it to save as file name of css and js of Position

Type: Location displayed on the page.

Custom Css: Please set write Permission for folder D:/xamp/htdocs/prestashop/module_appagebuilder/themes/classic/modules/appagebuilder/css/positions/

Custom Js: Please set write Permission for folder D:/xamp/htdocs/prestashop/module_appagebuilder/themes/classic/modules/appagebuilder/js/positions/

Ap product list

Click button "Save" On the right side to save data.

2. Edit

To configure the position user click "View"button.

Then choose "Edit", To edit the information of the location.

Product list

3. Delete

To remove the position, you click "View" button.

Then you press "Delete" , to remove position.

Product list
.

User click "Ap Product List Builder" on the left hand side of the screen.

Product list

User click '+' button on right corner of the screen to create."Add new"

Product list

Next screen load on the page "Add New"

It will load into the Edit page : Product Default.

Here you can drag and drop items from the right-hand column to the left in the design of the product item.

- Name: Name of product item

- Product List Key: The character string of product key.

- Class: Class used to style the product.

- Layout: The frame contains elements.

- Product_description_short: Short description of the product.

- Product_flags: Display label on product.

- Product_name: Name of product.

- Product_price_and_shipping: Price and shipping.

- Product_thumbnail: Show small image of the product.

- Quickview: Used to view the product when user click on the product will display a popup describing the specific product.

- Tpl code: Used to add code to the frame "Tpl code".

- Functional-buttons: To Create group covers outside, we also create ".functional-buttons" class.

You can drag and drop elements from the right-hand frame to the left-hand side. To create product followed design.

For example, you can drag and drop elements from the layout as image below:

Product list

Display in front end:

Product list

Step 1: Create file.

Step 2:You configure the changes on the blocks as Body content, header main, megamenu and so on.

User also can change font size, color text, Link color, Link Hover Color, Bg Outside Color, Bg Color.

Product list

1. Documentation: Appagebuilder tutorial.

2. Sample Data: Data Information.

You can click here to import demo data

You can download demo image in Then you can unzip and copy folder appagebuilder to Root/themes/THEME_NAME/assets/img/modules

Product list

3. Back-up and Update: To back-up data and update

Product list

4. General Setting

Product list

When you finish configuration click "Save" button to keep data.

Upload theme

Use to configure module.

1. General Setting

2. Pages Setting

a) Products Listing Mode: There are two type of display, they are Gird and List.

+ Gird: Display products with Grid Type.

+ Product Listing Mode: Gird . In front end will be shown as the image below:

Upload theme

+ List: Display products with List Type. In front end will be shown as the image below:

Upload theme

b) Columns in Default Module On Desktop

Upload theme

Columns in Product List page On Desktop

Displayed in BO:

For example: If you choose Columns: Product images will be shown in different columns.

Upload theme

Displayed in FO:

Upload theme

Configuration in different screen mode:

- Product Grid Columns On Large devices (>=992px):How many column display in grid mode of product list.

- Product Grid Columns On Medium devices - Tablet (>=768px): How many column display in grid mode of product list.

- Product Grid Columns On Small devices (>=576px): How many column display in grid mode of product list.

- Product Grid Columns On Extra Small devices (<567px): How many column display in grid mode of product list.

- Product Grid Columns On Smart Phone (<480px): How many column display in grid mode of product list.

- Product Detail Tab Type

Upload theme

If you choose Product detail tab type: Default. Front end will display from top to bottom parts as "DESCRIPTION , PRODUCT DETAILS

Upload theme

If you choose Product detail tab type: tab

Upload theme

Displayed in FO as "tab" style:

Upload theme

If you choose Product detail tab type: Accordion

Upload theme

Displayed in FO

Upload theme

3. Google font

Google Fonts Setup

Here you can setup the Google web fonts that you want to use in your site.

Step 1: click on "Sellect" button, choose "Font"

Step 2: Choose "Add font"

Upload theme

Then click on "Save"

4. Font Setting

Enable load font: Enable or disable load font

In font setting, we can config such as: H1 Typography, H2 Typography, H3 Typography, H4 Typography, H5 Typography, H6 Typography, P Tag, A Tag, Span Tag

Include features of font styles

Displayed in BO.

Upload theme

Displayed in FO.

Upload theme

Data Sample

Upload theme

To export data of module Appagebuilder, user just check the modules you want to export.

The next step is to click the"Export Sample Data" button.

The system will automatically export file .xml" in folder at "Sample" located in theme: Example: http:\xamp\htdocs\prestashop\test_bread\themes\leo_bread\samples

Upload theme

Add new widgets and modules to build Web sites in a profile.

This module also supply many widgets to build features for sales, intuitive user interface flexibility. Also integrate your existing modules in this module, you only need to build a site built just here and become faster page.

How to create a new profile screen: From the menu on the left "Ap Manage Profiles" to the next screen lists Profile; click the button "View" in the list of profiles.

1.1. Add Group Widget

Use to create a group of layout. User just need to click "+" button.

Upload theme

Choose "Create a group blank". A new group will be created.

Upload theme

1.2 Edit group

To configure group, you just click in "Group" button.

Upload theme

The following will display a panel to edit the information in the group.

A. General

- Title: Name of Group.

- Sub Title: Name of sub title in Group.

- ID: Use for css and javascript

- Class container: Now Layout of Row is Boxed, to change to Fullwidth : - Going to edit profile check option "displayHome" hook of "Fullwidth Homepage"

CSS Class: Add class css to style.

Upload theme

B. Style

- Minimum height: You can use pixels : 10px or percent : 10%.

- Margin Top: The margin-top property sets the top margin of an element.

- Margin Bottom: The margin-bottom property sets the bottom margin of an element.

- Padding Bottom: The padding-bottom property sets the bottom padding (space) of an element.

- Padding top: The padding-top property sets the top padding (space) of an element.

C. Background

- Background Config:

Upload theme

+ Background Config: Full width Background will display the screen width. Display in FO.

Upload theme

+ Background Config: Boxed The background will appear in box style. Display in FO.

Upload theme

+ Background Config: None Background will display as default.

+ Background Type: Normal

+ Background Type: Fixed

+ Background Type: Parallax

+ Background Type: Mouse Parallax

- Background colour: Depending on the colour you want. You just click the colour button and then hover over the colour palette next to the colour you want.

Upload theme

Display in FO.

Upload theme

- Background image: Display background by image.

Step 1: You just click "Select images"

Upload theme

Step 2: You just click button "Add files".

Upload theme

Step 3: Load to image path. Then select the background you need.

Upload theme

Step 4: After that you choose "Upload files" button nearly "Add files" button.

Step 5: Then you choose image.

- Background position: The background-position property sets the starting position of a background image.

- Background repeat: The background-repeat property sets if/how a background image will be repeated.

D. Animation

Motion effects of images.

Upload theme

G. Exceptions

Upload theme

H. Other Group

Delete

To delete group you simply choose "Group" and then choose delete to remove.

Upload theme

Export Group

As delete you choose "Group" and click "Export Group".

After that, our system will Export file ".xml".

Duplicate Group

Used to create a new group similar to the original group. You just click on the "Group" button. Then select "Duplicate Group".

Disable or Enable Group

Used to Hide or Show Group. You just click the "Group" button. Then select "Disable or Enable Group".

1.1 Add Column Widget

To create a column, just click the "+" button.

Upload theme

Then you need to select the number of columns you want, eg you want to display 2 columns you just select "2 column per row". Display in FO.

Upload theme

1.2 Add New Widget

To create widget you click in "Group" button and then choose "Add new widget".

Upload theme

Then you will popup the module you need. Note "CLICK ON WIDGET IN THE SHEET WILL BE SHOWN BELOW"

Upload theme

- Title: Name.

- Sub Title: Name of sub title.

- Css ClassAdd class in Css.

- Showing Type: Type of Accordions.

+ Showing Type: Set active.

+ Showing Type : Show all

+ Showing Type : Hide all

- Active Accordion: Status.

Upload theme

- Display in FO.

Upload theme

Display in BO.

- Title: Title.

- Sub Title: Display sub title.

- Content: Content of Alert.

- Alert Type Type of Alert to display.

+ Alert Type: Alert Success.

+ Alert Type: Alert Info.

+ Alert Type: Alert Warning.

- Override Folder: [Developer Only] System will auto create folder, you can put tpl of this short code to the folder. You can use this function to show 2 different layouts.

Upload theme

Display in FO.

Upload theme

Fill in the blog information.

Title

Sub Title

CSS Class: Add class to css for Blog.

Upload theme

Then you need to perform the following steps:

- Step 1:Blog Filter

You can choose Category blog:

Upload theme

- Step 2: Blog Order And Limit

+ Image Blog Width: Width of the blog image.

+ Image Blog Height: Height of blog image.

+ Show View All: Turn on or off "View All".

+ Show title: Hide or Show Title.

+ Show description: Hide or Show short descriptions of blogs.

+ Show Image:: Hide or show pictures.

+ Show Author:: Hide or show blog posters.

+ Show Category:: Hide or show blog entries.

+ Show Created Date:: Hide or show the creation date of blog posts.

+ Show Counter: hide or show.

+ Show Hits::

+ Order Way:

+ Order By:

+ Limit

Upload theme

- Step 3:Carousel Setting

Carousel Type:

- Items: Typing number of items. Default

- Items_Desktop Typing number of items ( with Screen < 1200 )

- Items_Desktop_Small: Typing number of items ( with Screen < 992 )

- Items_Tablet Typing number of items ( with Screen < 768 )

- Items_Mobile Typing number of items ( with Screen < 576 )

- Items_Custom (Advance User) Example: [[0, 2], [576, 3], [768, 4], [992, 5], [1200, 6]]. The format is [x,y] whereby x=browser width and y=number of slides displayed

- Items per Column Number of item per one column. Same with number of line for one page

- Autoplay Yes - scroll per page. No - scroll per item. This affect next/prev buttons and mouse/touch dragging.

- Stop on Hover Stop autoplay on mouse hover

- Responsive You can use Owl Carousel on desktop-only websites too! Just change that to "false" to disable responsive capabilities

- Navigation Display "next" and "prev" buttons.

- Auto Height Add height to owl-wrapper-outer so you can use different heights on slides. Use it only for one item per page setting.

- Mouse Drag: On DeskTop - Turn off/on mouse events.

- Touch Drag: On Mobile - Turn off/on touch events.

- Lazy Load: Delays loading of images. Images outside of viewport will not be loaded before user scrolls to them. Great for mobile devices to speed up page loadings

- Lazy Follow: When pagination used, it skips loading the images from pages that got skipped. It only loads the images that get displayed in viewport. If set to false, all images get loaded when pagination used. It is a sub setting of the lazy load function.

- Lazy Effect: Default is fadeIn on 400ms speed. Use false to remove that effect.

- Pagination Enable: Show Pagination below owl-carousel.

- Pagination Numbers: Show numbers inside Pagination

- Scroll per Page: Yes - scroll per Page. No - scroll per Item. This affect next/prev buttons and mouse/touch dragging.

- Scroll Page Speed: Time to next page. Ex 800 ( Milliseconds )

- Scroll Item Speed: Time to next item. Ex 200 (Milliseconds)

- Override Folder: [Developer Only] System will auto create folder, you can put tpl of this shortcode to the folder. You can use this function to show 2 different layouts

Upload theme
Upload theme

- Title: Name

- Sub Title:

- Use Outline Button

- Button Type

- Button Size

- Is Block

- CSS Class

- URL

- Open new window

- Override Folder

Upload theme
Upload theme

- Title:

- Sub Title:

- Categories:

- Depth:

- Order By:

- Show icons: : Show icons of images of category

+ By the way you click on "Select images".

Upload theme

- Limit:

- Override Folder:

Display in FO.

Upload theme
Upload theme

- Title:

- Sub Title:

- CSS Class:

- Time From:

- Time To

- Open new tab:

- Link Label:

- Link

- Widget Description:

- Override Folder

Upload theme
Upload theme

- Title

- Sub Title

- Page URL

- Color

- Width

- Height

- Show Stream

- Show Faces

- Show Header

- Show Border

- Override Folder

Upload theme
Upload theme

Error module

Upload theme
Upload theme

- Title

- Sub Title

- CSS Class

- Width slider

- Height slider

- Interval

- Display title in slider

- Display indicators in slider

- Open new tab

- Override Folder

Display in FO.

Upload theme

- Title

- Sub Title

- CSS Class

- Width slider

- Height slider

- Interval

- Display title in slider

- Display indicators in slider

- Open new tab

- Override Folder

For instance : General Code logo.

Upload theme

Display in FO.

Upload theme

- Title

- Sub Title

- Google Key: To have Google map you need to do the following steps:

- You need to login by email to the link below.

<https://developers.google.com/maps/documentation/javascript/get-api-key >

- Then you click "Get A Key" button.

Upload theme

- Please choose "Select or create project". To create Project.

Upload theme

- User choose "+" to Create a new project.

Upload theme

- Click button "Create and Enable API".

- You just "Copy You API KEY".

Upload theme

- Zoom

- Width

- Height

- Select display store on map

- List stores

- Show Store Menu

- Enable Gmap at Our_Stores page

- Enable Gmap at Sitemap page

- Override Folder

Upload theme

Display in FO.

Upload theme

- Title

- Sub Title

- CSS Class

- Html

- Override Folder

Upload theme

Display in FO.

Upload theme

- Title

- Sub Title

- Animations

- Delay

- Image

You click "Select images".

Upload theme

The screen will display pop-up. You will add the image you want.

Upload theme

- Alt

- CSS Class

- Link to

- Open new tab

- Image size width

- Image size height

- Description

- Override Folder

Display in FO.

- Title

- Sub Title

- Spin

- Speed

- Mouse wheel Step

- Smoothing

- Initialization

- Auto-spin duration

- Auto-spin start

- Auto-spin stops

- Auto-spin Time

- Auto-spin direction

- Start Column

- Loop Column

- Reverse rotation on X-axis

- Message under image

- Show hint message

- Message Desktop Hint

- Message Mobile Hint

- Show Slider

- Image

- Override Folder

Upload theme

Display in FO.

Upload theme

To configure Instagram, access our module Ap Pagebuilder > Ap module configuration.

Then you see "Load Instafeed Library"

Upload theme

Then user create new widget instagram.

- Title

- Sub Title

- Accordion Type

- Client ID

- Access Token

- User ID: User ID of Instagram Account. Type Number

- Sort By: Sort the images in a set order. Available options are

- Links:

- Limit: Number of Images want to get. Max is 20 images, this is rule of Instagram.

- Resolution: Size of the images to show.

- Profile Link: Create link in footer link to profile

- Carousel Type:

- Items: Typing number of items. Default

- Items_Desktop: Typing number of items ( with Screen < 1200 )

- Items_Desktop_Small: Typing number of items ( with Screen < 992 )

- Items_Tablet: Typing number of items ( with Screen < 768 )

- Items_Mobile: Typing number of items ( with Screen < 576 )

- Items_Custom: (Advance User) Example: [[0, 2], [576, 3], [768, 4], [992, 5], [1200, 6]]. The format is [x,y] whereby x=browser width and y=number of slides displayed

- Items per Column: Number of item per one column. Same with number of line for one page

- Autoplay: Yes - scroll per page. No - scroll per item. This affect next/prev buttons and mouse/touch dragging.

- Stop on Hover: Stop autoplay on mouse hover

- Responsive: You can use Owl Carousel on desktop-only websites too! Just change that to "false" to disable responsive capabilities

- Navigation: Display "next" and "prev" buttons.

- Auto Height: Add height to owl-wrapper-outer so you can use different heights on slides. Use it only for one item per page setting.

- Mouse Drag: On DeskTop - Turn off/on mouse events.

- Touch Drag: On Mobile - Turn off/on touch events.

- Lazy Load: Delays loading of images. Images outside of viewport will not be loaded before user scrolls to them. Great for mobile devices to speed up page loadings

- Lazy Follow: When pagination used, it skips loading the images from pages that got skipped. It only loads the images that get displayed in viewport. If set to false, all images get loaded when pagination used. It is a sub setting of the lazy load function.

- Lazy Effect: Default is fadeIn on 400ms speed. Use false to remove that effect.

- Pagination Enable: Show Pagination below owl-carousel.

- Pagination Numbers: Show numbers inside Pagination

- Scroll per Page: Yes - scroll per Page. No - scroll per Item. This affect next/prev buttons and mouse/touch dragging.

- Scroll Page Speed: Time to next page. Ex 800 ( Milliseconds )

- Scroll Item Speed: Time to next item. Ex 200 (Milliseconds)

- Override Folder

Upload theme

Display in FO.

Upload theme

Select a group for megamenu: Lets you choose group Menu.

Go to page configuration megamenu

Override Folder: [Developer Only] System will auto create folder, you can put tpl of this shortcode to the folder. You can use this function to show 2 different layouts.

Upload theme

- Title: Name of Raw Html.

- Sub Title

- CSS Class

- Raw html: You can insert code into that frame.

- Override Folder

Upload theme

Select a group for slideshow:

Override Folder

Upload theme

- Title

- Sub Title

- CSS Class

- Select Type

+ Select Type: Tab Top

+ Select Type: Tab bottom

+ Select Type: Tab left

+ Select Type: Tab right

- Active Tab

- Use Fade effect

- Override Folder

Upload theme

- Title: Show title name.

- Sub Title: Name of submenu.

- Twitter: Please go to the page https://twitter.com/settings/widgets/new, then create a widget, and get data-widget-id to input in this param.

- Count: If the param is empty or equal 0, the widget will show scrollbar when more items. Or you can input number from 1-20. Default NULL.

- User: Tab Top

- Border Color: Display border color.

- Link Color: Display color path.

- Text Color: Present color of the text.

- Name Color: Display the color of the name.

- Nick name Color: Display the color of the nick name.

- Width: Width of twitter.

- Height: The height of twitter.

- Show background: Turn background image of twitter on or off.

- Show Replies: Enable or disable the reply feature.

- Show Header: Turn headers on or off.

- Show Footer: Turn footer on or off.

- Show Border: Turn border on or off

- Show Scrollbar: Enable or disable the Scrollbar feature.

- Override Folder

Upload theme

- Title: Name of title.

- Sub Title: Name of submenu.

- Code: To insert source code(Example embed video: "<div class="embed-responsive"><iframe src="https://www.youtube.com/embed/iZoR21juRzs" frameborder="0" allowfullscreen></iframe></div>")

- Align: Used to align.

- Override Folder: [Developer Only] System will auto create folder, you can put tpl of this shortcode to the folder. You can use this function to show 2 different layouts.

Upload theme

To Edit column, you click button "Column". To Edit Column

Upload theme

General

- Title: Display the title of the column.

- Sub Title: Display Sub menu name.

- ID:

- CSS Class: To add class to style for column.

- Insert new or select classes for toggling content across viewport breakpoints

+ Hidden from Large devices

+ Hidden from Medium devices

+ Hidden from Small devices

+ Hidden from Extra small devices

Upload theme

Width

You can configure on devices by clicking the button on the right, which will scale out by device.

- Extra large devices - Desktops (≥1200px)

- Large devices - Desktops (≥992px)

- Medium devices - Tablets (≥768px)

- Small devices (≥576px)

- Extra small devices (<576px)

- Smart Phones (< 480px)

Upload theme

Animation

Used to create the effect for the column.

Upload theme

Animation

Allows users to display on pages as index, category, product, cms.

Upload theme

Step 1: Access in Config > Shop Parameters > General

Then select "Save" in the right corner of the screen to save the data.

Upload theme

Step 2: Access in Advanced Parameters > Multistore

Upload theme

Step 3: You should "Add a new shop"

Upload theme

Then you need to enter the name shop name. And click "Save" to save the information.

Upload theme

Then you need to enter the name shop name. And click "Save" to save the information.

Upload theme

Then click on the URL link and enter the Virtual Url as the shop name.

Upload theme

Then "Save" to save the data.

To display "Layout Type" in Category you have to copy the code below :

{assign var="leo_page" value='category'}
    {include file='catalog/_partials/miniatures/leo_col_products.tpl' products=$listing.products}  

Sthen Paste into file Product.tpl as the path "...\themes\classic\templates\catalog\_partials\product.tpl"

category

You can choose product display types for each category. Some steps below will guide you how to do that

Step 1: Click on "Category"

category

Step 2: Choose "Edit category", scroll down then you will see "Layout Type"

category category

Step 3: Click "Save" and back to Frontend to see how your product display

Prepare before update:

  • - the latest version of Ap Pagebuilder module
  • - folder for update. Download here.

Note: you should backup a copy befor update this function to avoid unwanted risk

Step 1: Update content of files from the folder that has just been downloaded to update:

Case 1: If you use theme from Leo Theme

- Replace files:

- Add content of files below to the end of file in the old theme folder:

Case 2: You only use our Ap Pagebuilder module

- Replace content of files:

- Create file (if not available ):

- Add content of the file below to the end of file in the old theme folder:

  • + accets/js/custom.js (or you can add content of the file below to the end of file accets/js/theme.js if not exist file accets/js/custom.js)
Step 2: Correct Module (Update database for new module)

- Enter Installed Modules then search module Ap Pagebuilder > Sellect Configure

Search Module

- Click on tab BACK-UP AND UPDATE > click Update to use product and category layout

Correct Module

Step 3: Ap Products Details Builder

a, Add new

Correct Module

- Click on "Ap product detail builder"

- Then click on button "add new" to create Profile Product detail builder

when create Profile details builder, there are two points that you need to pay attention to

1. You can on your own drag or drop features that are suitable for your design at the product details page.

Correct Module

2. You can use the availble default samples of Ap pagebuilder module. By Click on link as image below, you can create 1 out of 7 layout styles of ours

Correct Module

After finish creating in profile product details , what you need to do next is to access Product and sellect Profile product details that you want.

For instance: Choose any product. Catolog > Product > Edit.

Correct Module

Then choose tab "Module" and Click Configure as the image below

Correct Module

After that, you sellect Profile you need to display for your product

Correct Module

Then choose "Save" to save data

Display in Frontend

Correct Module

To configure Ap Page builder module with Prestashop default Classic theme, you need to download 2 files, which are head.tpl and footer.tpl then copy as the path below

Now you can get started with our Ap Page buidler module.

Shortcode is a special code replacing a content that you indicate while creating shortcode.

You can create shortcode in shortcode manage part in menu list of Ap Pagebuilder module

Upload theme

In shortcode management, user can add new, edit, duplicate or delete a shortcode

a. Add new

Upload theme

Upload theme

After you finish creating a shortcode, what you need to do is "Add Shortcode Content"

Module supports to show shortcode in all content parts on site

For the following pages we supported available shortcode in content. You just need to select content to add to page

  • - Product Description
  • - Product Short Description
  • - Category Description
  • - CMS Content

There are 2 ways to Add shortcode Content

Way 1: Use via content of a field by "Click Shortcode Content"

Upload theme

Upload theme

After that you Copy Embed Code like the image below

Upload theme

What you need to do is insert the shortcode in the position you want.

For instance, insert shortcode to category description field.

Upload theme

Or you can click directly on Icon in Description frame

Upload theme
Upload theme

Way 2: Use via Hook: Click Copy To Clipbroad with Embed Hook field.

Upload theme

Then access any tpl file that you want to add shortcode and paste to there

For instance: you want to insert shortcode to the upper content part of category page, open file [project_name]\themes\[theme_name]\templates\catalog\listing\category.tpl and paste shortcode to the disired position to show in file

Upload theme
Note

This case is only for developers. For other cases that want to use shortcode to show with content, you need one more code which is similar as below to add to controller part before showing data in the Front-end

<if ((bool)Module::isEnabled('appagebuilder')) {
            $appagebuilder = Module::getInstanceByName('appagebuilder');
            $product['description'] = $appagebuilder->buildShortCode($product['description']);
		>

This feature will override 3 files.

- override/controllers/front/CmsController.php with function initContent()

Upload theme

- override/controllers/front/ProductController.php with function getTemplateVarProduct()

Upload theme

- override/controllers/front/listing/CategoryController.php

Upload theme

Please make sure that these files and functions are override correctly in the folder “override” of your project to activate the feature.

To translate, you just only access in widget of module Ap Page Builder.

Then click the "En" button to display other languages

Upload theme

Display in FO.

Upload theme

The supported responsive layouts includes: default, large, medium, small, extra small and mobile. The configuration of Page Builder on those responsive layouts can be the same or different. Select the layout you want to configure.

Default Screen, Medium Screen, Mobile Screen

Upload theme

Thank you for reading!

We hope you can create the best website with our themes.

Follow us on twitter or join our facebook page to get noticed about all theme or modules updates and news!
Should you have any questions that are beyond the scope of this help file, please feel free to contact us.