category page builder magento 2 · category page builder for magento 2 is a powerful tool that...
TRANSCRIPT
Category Page Builder
CATEGORY PAGE
BUILDER MAGENTO 2
User Guide Version 1.0
1
Category Page Builder
Table of Contents
I) Introduction………………………………………………………………………………….. 3
II) Where to Find Extension…………………………………………………………………..4
III) Create Layout Profile……………………………………………………………………...5
1. General information………………………………………………………………………. 7
2. Magezon Category Page Builder………………………………………………………...8
3. Preview…………………………………………………………………………………...12
IV) Apply Layout Profile to Category Pages……………………..……………………… 14
V) Elements ……………………………………………………...…………………………….15
1. Category Name ………………………………………………………………………….15
2. Category Description…………………………………………………………………....17
3. Category Image ………………………………………………………………………….19
4. Category StaticBlock…………………………………………………………………....21
5. Category Products……………………………………………………………………....23
6. Subcategories …………………………………………………………………………...25
7. Sidebar…………………………………………………………………………………...39
VI) Support……………………………………………………………………………………..41
2
Category Page Builder
I) Introduction
Category Page Builder for Magento 2 is a powerful tool that allows customizing the
layout of category pages quickly with drag & drop interface.
● Easy to customize category page layout with drag & drop
● 15+ elements
● 4 templates
● Display subcategories with 3 layouts
● Fully responsive
● 100% compatible with Magezon Page Builder.
HOW IT WORKS:
- In the backend, you first create a layout profile using drag & drop builder.
- After that, apply the layout to your wanted category pages which are then displayed in
this layout.
* You can create as many layout profiles as wanted and apply them to any category page.
NOTE: Category Page Builder is developed on a core builder based on which we’ve
built all of our builder extensions. The core builder includes elements and settings that all
builder extensions have in common. For detailed guide, 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 Category Page
Builder extension.
3
Category Page Builder
II) Where to Find Extension After installing the extension, navigate to Store > Settings > Configuration.
In the panel on the left, span Magezon Extensions and choose Category Page
Builder.
On the right side, you can see General Settings including:
● Current Version of the extension.
● Enable Category Page Builder: choose Yes/No to enable/disable the extension.
● Default Profile: choose one layout profile that is applied to all category pages.
4
Category Page Builder
III) Create Layout Profile Navigate to Catalog > Inventory > Category Page Builder Profiles to land on the page
where you can create a new layout profile and manage all profiles you created.
- As can be seen in the image above, you can view all profiles you created in a grid.
- To create a new layout profile, click Add New Profile button on the top right corner. The
edit page of the new profile looks like this:
5
Category Page Builder
6
Category Page Builder
1. General information
● Enable Profile: turn on/off the button to activate/deactivate the profile.
● Profile Name: enter profile name.
● From...To: specify the active time period of the profile. Out of this time period, your
category pages will be back to its default layout.
● Layout: choose 1 column or 1 column Full Width layout for the profile so that
the category pages using this profile will be displayed in the chosen layout type.
NOTE: The category pages using profiles created by Category Page Builder have only 2
layout types: 1 column and 1 column full width. This is because we support Sidebar
element that you can add to the builder section when creating layout. In this case, layout
options in category edit page will not work.
7
Category Page Builder
2. Magezon Category Page Builder Where you create and customize layout for category pages using drag & drop interface.
● Click the plus icon in the top bar to add elements from a popup:
8
Category Page Builder
● Click the icon next to plus icon to select a template. You’ll see all templates in a
popup:
9
Category Page Builder
- Click drop-down icon to preview a template, like this:
- Click plus icon to select the template. The selected template will be displayed in the
builder section and you can customize it, like this:
10
Category Page Builder
11
Category Page Builder
3. Preview
When finishing, click Save button on the top right corner to save the profile. After saving,
on the bar at the top of the page, you can see:
● Delete the profile.
● Preview how the layout looks on frontend. When clicking Preview, you will see a
grid containing all categories of your website. Then in Action column, click
Preview to preview how a category page is displayed in this layout.
12
Category Page Builder
13
Category Page Builder
IV) Apply Layout Profile to Category Pages After creating a layout profile, you need to apply it to specific category pages. To do this,
go to Catalog > Inventory > Categories and open a category.
In Design tab on the right, find Category Page Builder Profile and choose a profile from
the drop-down. Remember to Save your change. Then click View Category next to
Save button to view the category page.
14
Category Page Builder
V) Elements NOTE: Here we only list elements that are specific to Category Page Builder extension
and mention settings that are specific to these elements. For other elements and settings,
you can look at Magezon Core Builder guide.
1. Category Name
Used to display category name:
15
Category Page Builder
● Heading Type: choose heading type for category name.
● Font size: choose font size (px) for category name.
● Text Color: choose color for category name.
● Line height: enter vertical distance (px) between lines of text in category name.
● Font Weight: enter the thickness (px) of text in category name.
>> Category Name element on frontend:
16
Category Page Builder
2. Category Description
Used to display category description:
● Font size: choose font size (px) for category description.
● Text Color: choose color for category description.
● Line height: enter vertical distance (px) between lines of text in category
description.
● Font Weight: enter the thickness (px) of text in category description.
17
Category Page Builder
>> Category Description element on frontend:
18
Category Page Builder
3. Category Image
Used to display category image:
● Adjust Image Width and Image Height (px).
19
Category Page Builder
>> Category Image element on frontend:
20
Category Page Builder
4. Category StaticBlock
Used to display category static block:
21
Category Page Builder
>> Category StaticBlock element on frontend:
22
Category Page Builder
5. Category Products
Used to display category products:
Use Default Theme Layout: if yes, category products will be displayed in default layout
of your theme. If no, you can customize category product layout with following options:
● Grid Column: choose the number of columns in product grid.
23
Category Page Builder
● Span Product Options section where you can show/hide product Name, Price,
Image, Review, Add to Cart, Short Description, Wishlist Link, Compare Link and
Swatches.
>> Category Products element on frontend:
24
Category Page Builder
6. Subcategories
Used to display subcategories of the main category.
- General tab:
25
Category Page Builder
● Layout: choose from 3 layout types to display subcategories including Grid, List
and Slider.
● Display Style: display subcategory layout in 3 styles: None, Style1 and Style2.
● Enable/Disable Category Name, Category Product Count, Category Image
and Category Description.
● If Category Image is enabled, you can adjust Image Width & Image Height (px).
● If Category Description is enabled, you can limit the length of description
displayed by entering character limit in Length field. If the description exceeds this
character limit, Learn More link text will be added at the end that leads to
subcategory page, like this:
26
Category Page Builder
● Enter Name Font Size (px) and Name Font Weight (px) of subcategories.
● Choose Name Background Color and Name Color.
● If you select Style1 in Display Style, you can choose Border Color and Hover
Border Color that surrounds each subcategory.
● If Style2 is selected, you can choose Overlay Color that overlays subcategories
when hovering.
27
Category Page Builder
- Grid Options tab (for Grid type only): In this tab, you can decide the number of columns
in the grid for Desktop, Tablet Landscape, Tablet Portrait, Mobile Landscape and Mobile
Portrait separately.
28
Category Page Builder
- Carousel Options tab is used for Slider type only.
29
Category Page Builder
>> Subcategories element on frontend:
● Grid layout:
No style
30
Category Page Builder
Style1
31
Category Page Builder
Style2
32
Category Page Builder
● List layout:
No style
33
Category Page Builder
Style1
34
Category Page Builder
Style2
35
Category Page Builder
● Slider layout:
No style
36
Category Page Builder
Style1
37
Category Page Builder
Style2
38
Category Page Builder
7. Sidebar
Used to display sidebar.
39
Category Page Builder
>> Sidebar element on frontend:
40
Category Page Builder
VI) Support If you have any questions or need any support, feel free to contact us via the 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.
41