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 support@magezon.com.

- Submit a ticket.

- Contact us through Skype: support@magezon.com.

- Contact us on live chat: support@magezon.com.