Single Product Page Builder for Magento 2 · you to customize layouts of any product page with...
45
Product Page Builder Single Product Page Builder for Magento 2 User Guide Version 1.0 0
Transcript of Single Product Page Builder for Magento 2 · you to customize layouts of any product page with...
Product Page Builder
Single Product Page
Builder for Magento 2
User Guide Version 1.0
0
Product Page Builder
Table of Contents
I) Introduction………………………………………………………………………………….. 3
II) Where to Find Extension…………………………………………………………………..4
III) Product Page Builder Elements…………………………………………………………9
1. Product Gallery…………………………………………………………………………....9
2. Product Name…………………………………………………………………………... 13
3. Product Review Summary………………………………………………………………16
4. Product Price …………………………………………………………………………….17
5. Product SKU……………………………………………………………………………..18
6. Stock Status ……………………………………………………………………………..19
7. Product Add To Cart…………………………………………………………………….20
8. Product Info ……………………………………………………………………………...21
9. Product Categories……………………………………………………………………...22
10. Magento Social Links ………………………………………………………………….23
11. Product Sharing ………………………………………………………………………..24
12. Add to Wish List………………………………………………………………………..26
13. Add to Compare ……………………………………………………………………….27
1
Product Page Builder
14. Mail to Friend…………………………………………………………………………...28
15. Product Short Description ………………………………………..…………………..29
16. Product Description ……………………………………………………………………30
17. Product Info Tabs …………………………………………………………..………....31
18. Product Additional Information………………………………………………………..32
19. Review…………………………………………………………………………………..32
20. Upsell Products………………………………………………………………………...36
21. Related Products ………………………..…………………………………………….37
22. Product Attribute……………………………………………………………………….38
23. Bundle Product Options……………………………………………………………….40
IV) Apply a Layout Profile to Product Pages………………………………...…………..41
1. Apply to a single product page……………………………………………………..41
2. Apply to multiple product pages …………………………………………………...42
V) Support……………………………………………………………………………………...44
2
Product Page Builder
I) Introduction Magento 2 Single Product Page Builder is a product page builder extension that allows
you to customize layouts of any product page with simple drag and drop.
● Create product pages in any layout
● Applied to all Magento 2 product types
● Visual drag & drop builder
● 30+ elements
● Fully responsive design
● Easy to customize Magento 2 product tabs
● Product image gallery layouts
● Cache support
● Parallax background effect & skin builder
● 100% compatible with: Ultimo theme, Porto theme, Lazy Load, Shop By Brand,
Magezon Page Builder.
This builder is developed on a core builder based on which we’ve built all builder
extensions. The core builder includes elements and settings that all builder extensions
have in common. For details, please visit:
https://magezon.com/pub/media/productfile/magezon-core-builder-user_guides.pdf.
In this guide, we’ll focus on elements and settings that are specific to product page
builder.
3
Product Page Builder
II) Where to Find Extension After installing the extension, navigate to Catalog > Product Page Builder Profiles
where you can add a new layout profile and view all profiles you created.
- You can view all profiles that you created in a grid.
- On the right-hand corner, you’ll see Add New Profile button. Click to add a new profile.
You will be redirected to the profile builder page.
4
Product Page Builder
● Enable Profile: turn on the button to activate the profile.
● Profile Name: name of the profile.
● From/To: decide the period of time during which the profile will be active with
chosen product pages. Out of this time period, these product pages will be in
normal layout.
● Layout: choose a layout for the profile.
5
Product Page Builder
If you choose Default Product Setting, product pages to which you apply this profile will
keep their default layouts that are customized in product edit page.
For other options, product pages to which you apply this profile will be displayed in these
layout options.
6
Product Page Builder
● Magezon Product Page Builder: where you build a new product page layout by
adding elements which are built based on popular parts of a Magento 2 product
page. Simply add and arrange these elements the way you want in the backend.
On frontend, they will be replaced with relevant data of a product.
To add elements, click the plus icon in the top bar (see in the above image). Then a popup
containing all elements will show up:
7
Product Page Builder
8
Product Page Builder
III) Product Page Builder Elements
1. Product Gallery Product gallery is a set of product images including thumbnail images and base images.
- Gallery Options tab:
9
Product Page Builder
10
Product Page Builder
● Use Default Theme Settings: use Magento 2 default gallery settings.
● Nav Position: position of product thumbnail images including top, bottom (default),
right and left.
● Nav: product image gallery style including False, Thumbs (default) or Dot.
● Loops: if yes, this will enable cycling of the base images, such that there will be a
slide transition between the last and first image.
● Arrows: turn on/off arrow on the side of the base image that appears when you
hover over the image.
11
Product Page Builder
● Caption: turn on/off product caption.
● Allow Fullscreen: if yes, you can view product base image in full-screen after
clicking on it.
● Nav Style: sliding type of product thumbnails.
● Transition Effect: transition effect of product base images (Slide, Crossfade,
Dissolve).
● Transition Duration: transition duration/speed in milliseconds. Then higher, the
slower.
12
Product Page Builder
2. Product Name
- General tab:
13
Product Page Builder
14
Product Page Builder
● Heading Type: type of heading.
● Font size (px)
● Text color
● Line height: the height of text line (px).
● Font Weight: the thickness of font (px).
15
Product Page Builder
3. Product Review Summary
16
Product Page Builder
4. Product Price
17
Product Page Builder
5. Product SKU
18
Product Page Builder
6. Stock Status
19
Product Page Builder
7. Product Add To Cart
20
Product Page Builder
8. Product Info
21
Product Page Builder
9. Product Categories
22
Product Page Builder
10. Magento Social Links
23
Product Page Builder
11. Product Sharing
- General tabs:
24
Product Page Builder
25
Product Page Builder
12. Add to Wish List
26
Product Page Builder
13. Add to Compare
27
Product Page Builder
14. Mail to Friend
28
Product Page Builder
15. Product Short Description
29
Product Page Builder
16. Product Description
30
Product Page Builder
17. Product Info Tabs
Product Info Tabs element is the default Magento 2 product tabs.
31
Product Page Builder
18. Product Additional Information
32
Product Page Builder
19. Review
- General tabs:
33
Product Page Builder
34
Product Page Builder
● Display Counter: display review counter (only applied if Review element is in
product tabs.
35
Product Page Builder
20. Upsell Products
36
Product Page Builder
21. Related Products
37
Product Page Builder
22. Product Attribute
38
Product Page Builder
In Attribute fields, you can choose a product attribute from a drop-down menu. Product
attribute options in the drop-down will automatically change based on attributes of your
own products.
39
Product Page Builder
23. Bundle Product Options
This element is for bundle products only. Bundle product options are options that you
need to choose for each items of a bundle product.
40
Product Page Builder
IV) Apply a Layout Profile to Product Pages
1. Apply to a single product page
Open the edit page of a product, then find Product Page Builder Profiles field. Choose
from the drop-down list the layout profile you want to apply to this product page.
41
Product Page Builder
2. Apply to multiple product pages
● First, navigate to Catalog > Products.
● Tick the checkboxes of relevant products you want to apply the profile to.
● Click the drop-down above the grid and choose Update attributes.
42
Product Page Builder
- Find Product Page Builder Profile. Tick Change checkbox to edit. Then choose
wanted profile from the dropdown.
43
Product Page Builder
V) Support If you have any questions or need any support, feel free to contact us by following ways.
We will get back to you within 24 hours since you submit your support request.
● Submit contact form.
● Email us at [email protected].
● Submit a ticket.
● Contact us through Skype: [email protected].
● Contact us via live chat on our website.
44
