Tabs Pro extension for Magento 2Tabs Pro 2 I) Introduction This document is the User Guide for...
Transcript of Tabs Pro extension for Magento 2Tabs Pro 2 I) Introduction This document is the User Guide for...
Tabs Pro
0
Tabs Pro
extension for Magento 2
User Guide
Version 1.0
Tabs Pro
1
Table of Contents
I) Introduction ............................................................................................. 2
II) General Configuration .............................................................................. 3
III) Tab Profiles ............................................................................................ 4
1. Add a new tab profile .............................................................................. 5
2. General Information Tab .......................................................................... 6
3. Display Conditions Tab............................................................................ 9
4. Manage Tabs in Tab Profiles ................................................................. 20
5. Edit Single Tab ...................................................................................... 23
5.1 General ........................................................................................... 23
5.2 Main Content Block ......................................................................... 25
5.3 Top, Left, Right, Bottom Block .......................................................... 37
IV, Widgets ............................................................................................... 38
V, Contact Information ............................................................................... 43
Tabs Pro
2
I) Introduction
This document is the User Guide for Magento 2 Tabs Pro. It describes the extension’s
functionality and provides some tips for a quick start.
Magento 2 Tabs Pro is a perfect management of product listing and customizing. This
extension will make your page more appealing and professional by displaying all products in
the neatest way.
● Create tab profiles depending on 9 conditions and different categories
● Create the unlimited tab items
● Easily customize the content of the tabs
● Supports Color Swatches
● Support multiple product rows
● Support multiple store views
● Ajax loading helps save time
● Fully responsive
● Widget function helps add tabs to any place in the storefront
Tabs Pro
3
II) General Configuration
To go to General Configuration, click on Magezon > Settings or Stores > Configuration
in the backend
The interface will look like this:
To enable Tabs pro in your store, do as the following steps
Then move to the Tab Profiles Grid to create your new.
Tabs Pro
4
III) Tab Profiles
Click on Magezon > Manage Tab Profiles or Tab Profiles\Manage Tab Profiles to go on
Tab Profile Grid interface
Do some actions like this to manage your Tab Profile Grid.
Tabs Pro
5
1. Add a new tab profile
In the backend demo, click on Magezon > Add New Tab Profile to go on
New Tab Profile page:
Or in the Tab Profiles page, you can click on Add New Tab button to do so
Tabs Pro
6
2. General Information Tab General Information Tab interface will look like this
Tabs Pro
7
In this tab, you must fill in or select the fields (if required). Like this
Tabs Pro
8
And this…
Below is the result: Successfully added
Tabs Pro
9
3. Display Conditions Tab Move to Display Conditions Tab, you can decide the position of your Tabs in Product
Page. Remember, this area helps show your Tab Profiles in Individual Product Page
Only. To display your tabs in other places of your store, you have to use our Widgets.
First, choose Enabled in the field Show on Product Page
Then choose the exact Position. This case we choose After Page Header
Tabs Pro
10
And the result in the product page (Artemis Running Short) will be like:
Tabs Pro
11
Let's try another place:
Tabs Pro
12
Main columns:
Tabs Pro
13
Main Content Area:
Tabs Pro
14
Main Content Aside:
Tabs Pro
15
Main Content Top:
Tabs Pro
16
Page Header:
Tabs Pro
17
Page Header Container:
Tabs Pro
18
Page Header Panel:
Tabs Pro
19
Page Top:
Tabs Pro
20
4. Manage Tabs in Tab Profiles In the Manage Tabs, you can add unlimited Tabs to your Tab Profile by clicking on Add
New Tab button:
Create as many Tabs as you want:
Tabs Pro
21
And here's the result in storefront:
Move the tabs by intuitive drag and drop interface. Delete the tabs by clicking on the recycle
bin icon.
Tabs Pro
22
And the result will be:
Tabs Pro
23
5. Edit Single Tab
5.1 General To Edit the Content inside each Tab, you can click on the blue area or caret icon in the top
left side and a dropbox like this will be shown:
Tabs Pro
24
Customize the Title, Custom Class, Description as you want. Then choose Is Ajax Load
or not (Is Default). Let's make an example:
Rename the Title of “Tab 1” to “Women". Enter random number to Custom Class field.
Enter Description.
Tick the Block to show your tabs
Tick Is Ajax Load to save time when loading tabs (Cause when you click on a tab, you don’t
have to wait for entire page loading)
--> Then click Save and Apply
Here's the result:
Tabs Pro
25
5.2 Main Content Block
5.2.1 Setting icon
Click on the Settings icon to see a dropbox showing up like this
There will be 2 Type for you to choose:
- If you choose HTML, Main Content Block will be like this:
Tabs Pro
26
- If you choose Conditions
Let's try this setting
And the result:
Tabs Pro
27
5.2.2 Conditions
If you click on Main Content Block, a box will appear right below the General setting like this:
Click on the plus button to show the selection box below “If ALL of these conditions are
TRUE"
Tabs Pro
28
Let's see all the conditions in our set:
- Try choosing some SINGLE conditions:
Tabs Pro
29
And see how it looks in storefront:
Tab 1 will display all products having “Active from October 29th to October 30th” Attribute
and those of Yoga Activity.
- Or Try other conditions
Tabs Pro
30
F
Tabs Pro
31
5.2.3 Product Source
Move down and choose your Product Source:
And order
- Let's configure the tabs like this:
Tabs Pro
32
And see how it works in storefront:
- Or try this setting:
Tabs Pro
33
And the result will be like:
Tabs Pro
34
5.2.3 Product options
Try turning all the fields to Yes and set the configuration like this
The result will be like:
Tabs Pro
35
5.2.4 OWL, Carousel Options
Make OWL Carousel settings like this
And see how it looks in storefront:
- Next/Prev Buttons and Dots Navigation
Tabs Pro
36
- Mouse drag
Tabs Pro
37
5.3 Top, Left, Right, Bottom Block If you choose these above blocks, the interface will be like this:
Enter the content you want to add to each block. For example:
And here's how it looks:
Note: Other functions are the same to Main Content Block
Tabs Pro
38
IV, Widgets Our Widget Grid will look like this
Tabs Pro
39
To add Tab Profiles to desired places, use Widgets. Do as following steps:
First, from the backend, click on Content > Widgets.
Choose Magezon TabsPro Tab for Type field (required)
Tabs Pro
40
Then choose the Design Theme (required). Make it Magento Luma this case and click
Continue
Next, choose your Tab Profile
Tabs Pro
41
Click on tab Storefront Properties. The following interface will appear. Set the
configuration like the image below.
- Set the configuration to Display on All Pages
Tabs Pro
42
Here is the result in the storefront:
Women page
- And even What's New
Tabs Pro
43
V, Contact Information
If you have any questions or need any support, feel free to contact us via following ways. We
will get back to you within 24 hours since you submit your support request.
- Fill out Contact Us form and submit to us.
- Email us at [email protected].
- Submit a ticket.
- Contact us through Skype: [email protected].
- Contact us on live chat: [email protected].