Rabel

Thanks for purchase Rabel Magento2 responsive theme, this guide will help you to install and use this great theme in your site, if you have further questions please contact us at gizmocn@gmail.com

1. How to install

Except theme files package, we also provide a quickstart package, the quickstart package should be installed as test site to learn theme’s setting and featured, please don’t use quickstart for live site.

1.1 Theme installation

Theme installation is after Magento 2.x installation.

After your Magento 2.x is ready(new Magento installtion or existed Magento 2.x site), you can start to install Rabel theme.

  1. Backup your Magento 2.x site(All files, folders and database).

    Warning: We strongly recommend you to backup all files, folders and database before upload theme file
  2. Theme files upload

    Unzip Rabel Theme > rabel_theme.zip and upload all directories(Therea are 2 directories - app, pub) to Magento 2.x root directory. you can use ftp sftp or cpanel to do this.

  3. Active Cattheme Theme and Extensions.

    Open command line in Magneto root folder. and run below Magneto command:

     $ php bin/magento setup:upgrade
    
  4. Select Rabel Theme in Magneto Backend

    Lgoin Magento backend and goes to Content -> Design -> Configuration then select the Store View you want to applied this theme and then click Edit link.

    Select Applied Theme to Cattheme Rabel, and then click Save Configuration button, see below picture:

    Applied Theme

  5. Demo Installation

    In Magento Backend, goes to Cattheme -> Cattheme Theme Install -> Theme Install. There are 3 options for here:

    • Select Demo to Import: Select the demo you want to import.
    • Overwrite Existing Blocks and Pages: If you want to overwrite existing same id Blocks and Pages, select Yes or No.
    • Configuration Scope: Select store you want to applied this demo.

    See below picture for a example:

    Demo Installation

    After you selected all options, click Import Configuration Button.

    Now Please clean Magento cache and refresh your website frontend and select storeview you applied this theme, the demo will be installed.

    Notice: If you encounter "can not save configuration file" error, it mostly is caused by folder or file owner and permission, please refer Magento official guide to change owner or permission http://devdocs.magento.com/guides/v2.1/install-gde/install-quick-ref.html

1.2 Quickstart Installation

We provide quickstart installation package for you to learn the theme’s configuration and features, it just for test purpose and don’t use this quickstart for production site.

  1. Unzip Rabel Theme > quickstart_rabel.zip and upload all directories and files to the directory that you want to install the test site. you can use ftp sftp or cpanel to do this. Assign suitable permission and owner for all directories and files.

  2. Create a new database for this test site.

  3. We include database dump file named “database.sql” in quickstart package directory, now import “database.sql” to the new database you have just created in step 2.

  4. Now we can start web installation. Browser your test site’s url you will get Magento 2.x installation screen:

Magento Web Installation 1

  1. Click “Agree and Setup Magento” button, Radiness Check windows will be appeared:

Magento Web Installation 2

  1. Click “Start Readiness Check” button, Readiness check process will start, it will take a while, if any check fails, you need to fine the reason and start again, if everything is ok, you will see below screen:

Magento Web Installation 3

  1. Click “Next” button to continue, Below windo will appears, input the database (you create at step 2) info:

Magento Web Installation 4

  1. After you fill all database info, click “Next” button, Web Configuration screen will appears, remember your test site frontend and backend url:

Magento Web Installation 5

  1. Click “Next” button, Customize Your Store will appears, just use default value:

Magento Web Installation 6

  1. Click “Next” button, Create Admin Account screen will appears, input admin info:

Magento Web Installation 7

  1. Click “Next” button, and final step window will shows:

Magento Web Installation 8

  1. Click “Install Now” button, now wait the installation process to complete, if everything is ok, you will see the screen window:

Magento Web Installation 9

Now, you need to reindex the index and clean Magento cache, login the backend to learn theme’s configuration and features.

2. Theme Configuration

Most theme configuration can be found at ->CATTHEME->Rabel Theme Config

Rabel Theme Configuration

All configurations are listed by several sections:

Configuration Listing

There are many options in these sections, you can input color value, select header type or input header height etc to the options, before we start to discuss all options, please remember, after you complete options selection, don’t forget to click “Save Config” button to store your selections to database.

Save Config

Now we will discuss details of all there configurations.

3. Font

Font options will show when you select Custom Option to “Yes” In this sections, we divide all font configurations to 6 groups, they are body font, Element Font 1 to Element Font 5

3.1 Body Font

Theme Font Customization

Body font is global setting for entire website.

Body Font Size: select body font size.

Body Font Weight: input body font weight.

Body Font Style: select body font style.

Body Font Family: you can select system general fonts, or google font, when you select google font option, a new option “Body Font Family - Google Fonts” will appear.

Body Font Family - Google Fonts: you can select google font, after you select a google font, the font preview will be showed.

See below picture for a example:

Body Font Customization

Select “Eagle Lake” google font for body and then click “Save Config” button in backend top right corner, now refresh your store frontend and you can find the site font was changed according your selecation.

Body Font Effect

3.2 Element Font 1 - Element Font 5

With Element Font, we can customize font for specific html element, For example, we want change font family for product name of category and product page, First, we need to find css class or ID of product name by using browser development tools(Firefox or Chrome).

In Firefox, we find class for product name of category page is ‘.prodduct-item-link’ (don’t forget add “.” for css class and “#” for id).

Product Name class for category page

And class for product name of product page is ‘.product-content-wrapper .page-title’.

Product Name class for product page

So we have Font Element 1 options like below picture:

Element Font Setting

we only change font-family and leave element font size, weight and style to theirs default value, So in website frontend, product name style will inherit font size, weight and style setting from theme and only font family is changed to “petit Formal Script”.

Product Name in Category Page Product Name in Product Page

We have 5 Element Font options group, so you can different html element to different font family, size weight and style.

4. Color

In this section, we have “predefined Color Scheme” options, you can select different color scheme, if you are not satisfied with default or predefined color, you can select “custom” options to “yes”, and input your color for different area of the website.

Color Setting

After set “custom” option to “yes”, all color input options will be appear, color options are divided into groups (General, Header, Megamenu Category Page, Newsletter Popup, Before Footer, Footer).

In order to color for a option, just click text input field, a color picker will be showed, now select the color from picker, of course, if you already have hex color code, just input the code directly to the text input field.

Color Picker

After you complete all you color options, don’t forget to click “Save Config” button to save your choice.

5. General

This sections, we can select different site layout (boxed or full width) and site’s background image or pattern.

General Section

Please see below picture for difference between full width, boxed layout 1 and boxed layout2.

Site Layout

6. Header Type

In this sections, you can select different header and every header has different options like padding and height, some header type has options to add static block to header.

Below pictures show different header:

Header Type 1

Header Type 1

Header Type 2

Header Type 2

Header Type 3

Header Type 3

Header Type 4

Header Type 4

Header Type 5 is almost same as header type 2, just in homepage, the header will overlap with slider show

Header Type 5

Header Type 6 is almost same as header type 3, just in homepage, the header will overlap with slider show

Header Type 6

Header Type 7 is almost same as header type 2, the only difference is the header is full width.

7. Megamenu Configuration

This section options will coordinate with Categories Mega Menu options(Backend -> Products -> Categories -> Mega Menu) to configure Mega menu.

Megamenu Configuration Section(Backend -> Cattheme -> Rabel Theme Config -> Megamenu Configuration) is for general Megamenu setting:

Megamenu Configuration

Magemenu Options in Categories (Backend -> Products -> Categories -> Mega Menu) is for dedicated category:

Megamenu for dedicated category

Let’s discuss Megamenu Configuration Secion First.

7.1 Megamenu Configuration Section

7.1.1 General Group

1) General - Enable Megamenu: Enable or disable the megamenu.

2) General - Enable Home Link: Enable or disable Home Link.

3) General - Enable Sticky Menu: Enable or disable sticky menu.

4) General - Sticky Menu Logo: You can add a logo for sticky menu, it is only work for some of header type.

5) General - Enable full width dropdown: Enable or disable full width dropdown. Below pictures show the difference.

Enable Full Width Dropdown

Disable Full Width Dropdown

7.1.2 Thumbnail Image Setting

Categories Level definition is shown as follow:

Categories Level The specific category thumbnail is upload at (Backend -> Products -> Categories -> Mega Menu -> Item Thumbnail). Here we just set if show categories thumbnail for level1 and level2.

1) Thumbnail Image Setting - If show level 1 categroy thumbnail image: show or not level 1 category thumbnail.

2) Thumbnail Image Setting - If show level 2 categroy thumbnail image: show or not level 2 category thumbnail.

3) Thumbnail Image Setting - Select level 2 category thumbnail image position: select level2 category thumbnail image position.

See below pictures for examples to show level1 category thumbnial:

Eample 1

Categories Thumbnail Example

Example 2

Another Categories Thumbnail Example

7.1.3 Custom Menu Setting

If you want to add custom menu please set “Enable Custom Link” to Yes, Once you set this option to “Yes”, more options will be appeared.

1) Custom Menu Setting - Enable Custom Link: Enable or disble custom link or dropdown feature.

2) Custom Menu Setting - Select Custom Link: Select custom links to show in main navigation, this is mulit-select box, if you want to select multi items, hold “ctrl” in keyboard and click mouse left button.

  • Before something showed in this multi-select box, you need add custom link or custom dropdown in Backend -> Content -> Blocks, add blocks with identifier begin with ctmenu_ or ctmenu_block_ .
  • To add custom menu with link, add static block with identifier begin with ctmenu_ .
     Block Title => as menu title.
     Menu identifier => as menu url link last part.
     Block => ignore. 
    
  • To add custom menu without link but with dropdown, add static block with idetifier begin with ctmenu_block_.
     Block Title => as menu title.
     Menu identifier => ignore
     Block => as custom menu dropdown
    

See below picture for a example, we selected two items for “Select Custom Link” option:

Custom Link Dropdown Setting

After clicked “Save Config” button in top right corner, in you browser to check your website, both “Home Design” and About Us has shown in main navigation and as both menu itmes block identifier is begin with ctmenu_block_ , so both custom menu items will show content as dropdown.

Custom Link Dropdown Effect

3) Custom Menu Setting - Change Custom Menu Order: Setting mutl custom item order.

Let’s see a example, if you don’t set menu order, the custom menu order is from top to bottom.

Backend Setting Custom Menu Default Order

Frontend Effect:

Custom Menu Default Order Frontend

Now We set “Change Custom Menu Order” to “2,1,3”, and you can see the different:

Backend Setting Custom Menu Change Order

Frontend Effect:

Custom Menu Change Order Frontend

7.2 Magemenu Options in Categories

Now we start to discuss Megamenu options for in Categories, if you want to configure specific category, please go Backend -> Products -> Categories, then select category, and then select Mega Menu.

Magemenu Options in Categories

Now, We will discuss all this options usage one by one.

1) Mega Menu - Menu Type: select menu type, Vertical layout and Horizontal layout, see below picture for different of these two type menu type.

Vertical Megamenu Layout

Horizontal Megamenu Layout

2) Mega Menu - Featured Image: if you want to show a image in megamenu for this cateogry, upload the image here, refer to 7.1.2 Thumbnail Image Setting

NOTE: Magento 2.1.0 to Magento 2.1.7 has some issue to upload extra category image, the issue is solved in Magento 2.1.8. For Magento 2.1.0 to 2.1.7, you need to apply patch in order to upload featured image, details is github: category attribute image issue

3) Mega Menu - Top Block: Select static block that appeared in top area of megamenu, This field is applicable for level 0 categories only.

4) Mega Menu - Left Block: Select static block that appeared in left side of megamenu, This field is applicable for level 0 categories only.

5) Mega Menu - Right Block Block: Select static block that appeared in right side of megamenu, This field is applicable for level 0 categories only.

6) Mega Menu - Bottom Block: Select static block that appeared in bottom area of megamenu, This field is applicable for level 0 categories only.

7) Mega Menu - Left Block Width: This field is applicable for level 0 categories only. NOTE : Total of “Left Block”, “Category Block Width” and “Right Block Width” must be equal to 12, not more or less than 12.

8) Mega Menu - Right Block Width: This field is applicable for level 0 categories only. NOTE : Total of “Left Block”, “Category Block Width” and “Right Block Width” must be equal to 12, not more or less than 12.

9) Mega Menu - Category Width: This field is applicable for level 0 categories only. NOTE : Total of “Left Block”, “Category Block Width” and “Right Block Width” must be equal to 12, not more or less than 12.

10) Mega Menu - Category Column: Set megamenu dropdown category columns, this field is applicable for level 0 categories only.

Below picture show the meaning of Mega Menu 3-9 options:

Megamenu Backend Confugurations:

Megamenu Backend Configuration

Megamenu Frontend Effect:

Megamenu Frontend Effect

11) Mega Menu - Category Label: Input Category Label text content, for example “New”, “Hot!”, “Sale!”.

12) Mega Menu - Category Label Background Color: Input category label background color. Example “#ff0000”, “#ffff00”

Below picture show example of category label:

Category Label Example

8. Product Label

This section set “New” and “Sale” label for proruct item in category and product page.

1) Product Label - Show New Product Label: Enable or disable “New” label.

If you set this options to “yes”, then products with “Set Product As New From”, “Set Product As New To(This date will be in the future)” options setting in backend product edit page will has “New” label in frontend.

New Label

2) Product Label - New Label Text: Set New label text, default is “New”.

3) Product Label - Show Sales Product Label: Enable or disable “Sale” Label.

In backend product edit page, click “Advanced Pricing” link for Price option, will open a Advanced pricing popup.

Advanced Pricing

If you set ‘Product Label - Show Sales Product Label’ to ‘Yes’, and in the same time, you set ‘Special Price’, ‘Special Price From’ and ‘Special Price To(the future date)’ options in Advanced Pricing Popup, the “Sale” label will be appeared for this prodcut in frontend.

Sale Label

4) Product Label - Sale Label Text: Set Sale label text, default is “Sale”.

5) Product Label - Replace sales text with discount rate: If set to yes, Sales label will replace by discount percent rate.

Product Label example in category page:

Product labe in category page

Product Label example in product page:

Product labe in product page

9. Category Page

9.1 General

This section is options for category page.

1) General - If show hero in category page: Enable or disable hero title for category page, if you select “Yes”, more options will be appeared and full width hero title will be show for categories.

2) General - Category Hero Default Image: Upload default picture for all categories, of course, you can upload unique picture for specific category in backend cateogry manage page.

Upload Uniqie Image For a Category

3) General - Category Hero Title Height: Input height of Hero title.

4) General - Enable Parallax For Hero Title: Enable or disalbe parallax effect for hero title.

See below for the different of hero title was enabled or disabled:

Enable Hero Title: Enable Hero Title

Disable Hero Title Disable Hero Title

9.2 Category Grid Setting

1) Category Grid Setting - Select Category Style: Select different category style.

See pictures below for screen capture for all category style:

Category Style 1

Category Style 2

Category Style 3

Category Style 4

Category Style 5

Category Style 6

2) Category Grid Setting - Select Mobile Category Style: Select different category style for mobile devices.

See pictures below for screen capture for all mobile category style:

Mobile Category Style 1

Mobile Category Style 2

3) Category Grid Setting - Move Add to cart and add to buttons to image area: If move add to cart and add to buttons to image area.

See pictures below for details.

Move Buttons:

Move Buttons

Not Move Buttons:

Not Move Button

4) Category Grid Setting - Columns Per Row: Setting product columns in desktop PC, the columns for tablet and mobile will adjust automatically.

5) Category Grid Setting - Show Alternative Image When Hover: If show alternative image when hover if the product has 2 or more pictures.

6) Category Grid Setting - Show Review: if show review.

7) Category Grid Setting - Show Wishlist and Compare buttons: If show wishlist and compare buttons.

8) Category Grid Setting - Keep Image Aspect Ratio: if keep image aspect ratio. if you set this option to “no”, Image Height option will be appeared.

9) Category Grid Setting - Image Width: Input product picture width, default is 300.

9) Category Grid Setting - Image Height: Input product picture height, default is 300. this option is only appeared when ‘Keep Image Aspect Ratio’ is ‘no’

10. Product View Page

This section is for product details apge.

1) Product View Page - Gallery Width: Select Gallery width, Gallery and product info total width is 12, for example, if you select gallery width to 7, then product info width will be set to 5 automatically, see below picture for details:

Gallery Width

2) Product View Page - Enable vertical thumbnails: Enable or disable vertical thumbnails. See below picture for frontend example.

Eanble vertical thumbnail:

Enable vertical thumbnail

3) Product View Page - Enable Product Picture Zoom: Enable or disable product picture zoom effect. If enable product zoom, when mouse hover on product picture, zooom effect will be trigger, see below picture for details:

Enable product picture zoom

4) Product View Page - Enable Full Width Tabs Layout: Enable or disable full width tabs layout, see below pictures for different for layouts:

Generall Tabs Layout:

General Tabs Layout

Full Width Tabs Layout:

Full Width Tabs Layout

5) Product View Page - Input your social code: Input your social code copied from addthis.com or other sites, or leave it empty to disable this feature.

Social code example:

Social Code Example

Frontend Socail Button position:

Frontend social buttons position

11. Newsletter Popup

This section configure homepage newsletter popup feature.

1) Newsletter popup - Enable: Enable or disable homepage newsletter popup, if you set this option to “yes”, more options for newsletter popup will be appeared.

2) Newsletter pupup - Popup expires end: Set period in days after which popup will be shown again if customer has already subscribed or chosen option Don’t show this popup again.

3) Newsletter popup - Newsletter Logo: If you want to show logo in newsletter popup, please upload logo here.

4) Newsletter popup - Popup Content Text: Input newsletter popup content text here.

5) Newsletter popup - Newsletter Popup Width: Input newsletter popup width: for example 500, default is 600.

6) Newsletter popup - Newsletter Popup Height: Input newsletter popup height: for example 500, default is 450.

7) Newsletter popup - Popup Background Image: Upload newsletter popup background image.

Below pictures show Newsletter popup backend configuration and appearance of frontend, you can compare theme and get to know the meaning of some options.

Newsletter Popup Background Configurations:

Newsletter Popup Background Configuratons

Newsletter Popups Frontend Appearance:

Newsletter Popup Frontend Appearance

This section is simple, only two options:

1) Before Footer - Enable: Enable or disable before footer, if you set this option to “yes”, new option will be appeared.

2) Before Footer - Select Static Block for Before Footer: Select a static block for before footer. see below picture for the example of before footer.

Before Footer

This section is for footer of the site.

In order to understand footer options meaning, please see below picture for footer layout:

Footer Layout

Footer consists of footer first row, second row and footer bottom, you can put 1-4 static blocks for first row and second row respectively.

1) Footer - Custom Css class for footer: Add a unique CSS class for footer area.

2) Footer - Static Block for Column 1: Select static block for first row column 1.

3) Footer - Column 1 Width: Select Column 1 width, total width for first row is 12.

4) Footer - Static Block for Column 2: Select static block for first row column 2.

5) Footer - Column 2 Width: Select Column 2 width, total width for first row is 12.

6) Footer - Static Block for Column 3: Select static block for first row column 3.

7) Footer - Column 3 Width: Select Column 3 width, total width for first row is 12.

8) Footer - Static Block for Column 4: Select static block for first row column 4.

9) Footer - Column 4 Width: Select Column 4 width, total width for first row is 12.

10) Footer - Enable Second Row: Enable or disable footer second row, if you select “yes” for this option, more options for second row will be appeared.

11) Footer - Static Block for Second Row Column 1: Select static block for second row column 1.

12) Footer - Second Row Column 1 Width: Select Second Row Column 1 width, total width for second row is 12.

13) Footer - Static Block for Second Row Column 1: Select static block for second row column 2.

14) Footer - Second Row Column 2 Width: Select Second Row Column 2 width, total width for second row is 12.

15) Footer - Static Block for Second Row Column 1: Select static block for second row column 3.

16) Footer - Second Row Column 3 Width: Select Second Row Column 3 width, total width for second row is 12.

17) Footer - Static Block for Second Row Column 1: Select static block for second row column 4.

18) Footer - Second Row Column 4 Width: Select Second Row Column 4 width, total width for second row is 12.

19) Footer - Show Store Switcher: Enable or disable store switcher, for multi-store site, if set this option to “yes”, a store switch will be appeared in footer bottom area.

20) Footer - Footer Logo: If you want to show a logo in footer area, please upload logo here.

14. Recent Blog Post Widget Setting

This section is for recent blog post widget, you need to add the recent blog post widget first(Refer to 16.7 Recent Blog Posts Widget)

1) Recent Blog Post Widget Setting - If show background image: If show background image, if you set this option to “Yes”, more options will be appeared.

2) Recent Blog Post Widget Setting - Background Image: upload background image for this widget.

3) Recent Blog Post Widget Setting - Background Repeat: set background repeat.

4) Recent Blog Post Widget Setting - Background Size: set background size.

5) Recent Blog Post Widget Setting - If show featured image for every post: if show featured image for posts.

6) Recent Blog Post Widget Setting - If show short content for every post: if show short content for posts.

15. Custom Css and Module Installed

Custom Css

You can add custom Css in “Add Custom Css” textarea, or add to file “app/design/frontend/Cattheme/rabel/web/css/custom.css”.

Module Installed

You can see all module and its version that come with our theme.

16. Widgets

In our theme, we add several widgets to let you insert content easily, for how to use Magento widget, please refer official user guide. If you want to insert widget to CMS page or block, please refer Inserting a Widget, or you can insert widget from Backend-> Content -> Widgets, refer official guide Creating a Widget

16.1 Cattheme Brands List Widget

This widget will show brands logo in frontend, when you click the logo, it will go to the brand product search page.

Brands List Widget

In order to use this wiget, you first have to prepare brands logo, you can use gif png or jpg format and logo’s named as brands name, just use lowercase and “_”, for example: if brand name is RABEL, the image name should be rabel.gif( or rabel.png, rabel.jpg), another example: River Bridge is your brand name, so the image name will be river_bridge.gif (or river_bridge.png, river_bridge.jpg), all logo must be same image format.

After you completed all logo image, upload all logos image to folder /pub/media/cattheme/rabel/brands.

Now go to Magento backend-> STORES -> Attributes -> Product, select Manufacturer attribute, In Manage Options(Values of Your Attribute), add options like below picture:

Manufacturer Attribute

Note: Value for Default Store View should be brand name, for example your brand is River Bridge, input “River Bridge” for Default Store View, the widget will convert this name to river_bridge and load relative logo image.

You can add widget now, check below simple widget configuration:

Brands List Widget

1) Brands: select brands you want to show in frontend, Hold down ctrl and then use mouse to select multi-brands.

2) Title: Widget Title.

3) If link to brands’ products: if you store have products with manufacturer attribute, you can set this option to “yes”, so when you click the brand logo, it will go to this brand search page.

4) Link to new window or not: select if open new window or not when click brand logo.

5) Image Format: your logo image format.

16.2 Cattheme CMS Layout Widget

By using this widget, you can put one or multiple static block in one row to frontend. Let’s discuss this widget.

Below picture show options for this widget:

CMS Layout Widget

1) Layout: You can put several blocks in one row, we have some examples for the meaning of the options:

  • 1/4 + 1/4 + 1/4 + 1/4: Put 4 blocks in one row, and every row has 1/4 (25%) width.
  • 1/4 + 1/4 + 2/4: put 3 blocks in one row, first and second blocks occupy 25%(1/4) width, the third block has 50%(2/4) width.
  • 1/1: put 1 block in one row, this block occupy 100% width.
  • 1/2 + 1/2: pub 2 blocks in one row, every block has 50% width.

2) to 5): Select blocks to show, if you select 4 blocks layout, you need to select all 4 options, if you layout is only need 2 blocks, just select Area 1 and Area 2 blocks.

6) If include Bootstrap container class in layout: if include bootstrap container class.

7) Custom Css class: Add unique custom css class for this widget

16.3 Cattheme Categroy List Widget

By using this widget, you can put selected categoreis in website frontend, the widget options is discussed as follows:

Category List Widget

1) Widget Title: This title will be showed as header of widget block, Empty to disable.

2) Choose Categories: Choose one or several categories to show in frontend, hold down “Ctrl” key, you can select multiple category by click mouse left button.

3) If display category image: if show category image, here the image is the one upload in Megamenu tab of backend category page, see below picture for details.

Category List Widget Image

4) Image Width: Category image width, for example 250, default is 150.

5) Image Height: Category image height, for example 250, default is 150.

6) Show total number of products: if show number of products in the category.

7) Columns per row: Columns of categories per row, default is 3.

16.4 Cattheme Google Map Widget

You can use this widget to insert google map in everywhere of you website, the below picture show the options of this widget.

Google Map Widget

The options are self-explanatory, you can easily to input value for these options according our widget configuration example picture.

16.5 Cattheme Owl Slider Widget

This widget has only one option, just select the slider you want to show.

16.6 Cattheme Products List Widget

Use this widget to show latest, bestseller, popular product etc to everywhere in your website. Below picture show the options of this widget:

Product List Widget

All options of this widget will discuss as follows:

1) Title: Widget Title.

2) Product Type

  • Latest Products (Show products that you import to site most recently)

  • New Products(Show products that have “Set Product As New From” and “Set Products as New To” defined in backend product page)

  • Special Products(Show products with special price)

  • Popular Products(Most view products)

  • Bestsell Products(Best Sell products)

  • Top Rated Products(Top rated products)

  • Random Products

  • Featured Products(Show products that have “Is Featured” to “Yes” in backend product page)

  • Deal Products(Show product that have special price and have “Special Price From” and “Special Price To” setting. If you select “Deal Products”, a deal countdown will be appeared in frontend, see below pictures for details.

    Product Deal Template

    if you set Product Type to “Deal Products” and Template to “Product Deal Template”, special price countdown will has different style, see below picture for details

    Special Price Countdown

3) Number of Products to Show: Set total products to show.

4) Number of Columns: Set products columns.

5) Tempalte: Select tempalte.

6) Product Grid Style: This option is only work for Product Grid Template, Please select product widget grid style, If you do not select this, the Style will be same as Category Grid Style, for appearance of every grid style, please refer to 9.2 Category Grid Setting.

7) Display Page Control: Enable or disable Page Control.

16.7 Recent Blog Posts Widget

Use this widget to show recent blog post in every where of your website, let’s discuss all options of this widget.

1) Title: Please specify title you want to display on the frontend. You can leave it blank if necessary.

2) Number of Posts: Please indicate number of recent posts you want to display. Leave blank to use predefined “Posts Per Page” value.

3) Blog Category: Leave blank to display posts from all categories.

4) Custom Template: Leave blank to use default template Magefan_Blog::widget/recent.phtml. Magefan_Blog::widget/recent_masonry.phtml template is also available out of the box.

Note: There are extra setting for recent blog posts widget in system configuration, please refer to 14. Recent Blog Post Widget Setting.

17. Other Modules

17.1 Cattheme OwlSlider Module

17.1.1 Manage Sliders

OwlSlider Module can add slider to homepage or other page, we use this module to add homepage slider for every demo.

To add new slider, go to Magento Backend -> CATTHEME -> Cattheme OwlSlider

Cattheme OwlSlider Module

Here, you can find Manage Sliders and Manage Banners, First we need to add a slider and then add any number banners to the slider you just added.

Click Manage Sliders and open sliders list window, it list all sliders for the store, click “Add New Slider” button to add new slider, click “select” to edit or delete existed slider.

OwlSlider Moduel Sliders List Window

We now try to add a new slider, so click “Add New Slider” button, open slider edit window:

Add New Slider

The options meaning is explained as follows:

  • Title: Slider Name.
  • Identifier: Slider unique ID string.
  • Slider Status: Enable or disable the slider.
  • Layout: Select from “Full Width”, “Full Screen” or “Fixed Width”.
  • Slider Height: For “Full Width” and “Fxied Width” Layout, you need to input slider height.
  • Animate In: Select effect when background image enter view.
  • Animate Out: Select effect when background iamge leave view.
  • Autoplay: Enable or disabel autoplay.
  • Pause on mouse hover: Enable or disable pause when mouse hover.
  • Autoplay speed: Input autoplay speed, default is 3000, meaning switch banners per every 3 seconds.
  • Loop: Enable or disable loop.
  • Show next and prev navigation: Show or hide next/prev navigation button.
  • Show paging navigation: Show or hide paging navigation(dot).

    Note: if ignore both animate in and animateout options, the banner switch effect is slider in and slider out.

After fill all options, Click “Save Slider” button and then return to sliders list window, now record the ID and Title of the slider you just added, we will need this ID when adding the slider to web page and we will need the Title when assigning banners to the slider.

Remember Slider ID

17.1.2 Manage Banners

After add a slider, now we can use “Manage Banners” to assign banners to the slider, click Magento Bankend -> CATTHEME -> Manage Banners, banners list window will be opened:

Banners List Window

In banners list window, you can add new banners, edit or delete existed banners.

Now we will add new banner, so click “Add New Banner” button, then open banner edit window:

Add a New Banner

The options in this window is explained as follows:

  • Status: Enable or disabel the banner.
  • Assigned to Slider: This select box will list all Slider Title, select the slider that you want to assign this banner to.
  • Order: You can assign any number banners to a slider, here input the order of current banner, for example 0, 1 etc.
  • Banner Content Add banner content here, see note for details.
  • Banner Image: Select a image to upload as banner background.
  • Background Color: Input banner background color.
Details about Banner Conent

We add several predefined class to help to add banner content easily, the Let’s see a typical banner content:

Code:

<div class="slide-content slide-left slide-background">  
    <p class="middle-txt white">Nam libero tempore</p>
    <p class="big-txt white  cursive">Excepteur sint occaecat</p>
    <div class="transparent-btn"><a>Buy it now</a></div>
</div>

Actuall Effect: Actual Effect of Banner Content

For div with class slide-content, you can add following class: slide-left, slide-right, slide-middle, content-fadein, slide-background, align-center, top, bottom.

For p element inside div.slide-content, you can add following class: white, golden, red, shadow, black, small-txt, mdddle-txt, big-txt, extra-txt, middle-red, small-red.

You can also add animate effect for p element: slideBounceInDownFast, slideBounceInDownSlow, slideBounceInDownVerySlow, slideFadeIn.

For button div: you can add red-btn, transparent-btn.

Of course, you can add more class as you wish.

17.1.3 Add Slider to page

We have several method to add slider to a page.

1 add to page’s Layout Update XML:

Add Slider to Layout Update XML

Code:

<referenceContainer name="ctowlslider">
      <block class="Cattheme\OwlSlider\Block\Widget\OwlSlider">
        <action method="setData">
         <argument name="name" xsi:type="string">slider_id</argument>
         <argument name="value" xsi:type="string">7</argument>
     </action>
</block>
</referenceContainer> 

2 add to page’s content:

Code:


{{block class="Cattheme\OwlSlider\Block\Widget\OwlSlider" name="slider6" slider_id="7"}}

3 add from widget:

We have add a widget named as Cattheme Owl Slider to help to add slider to different area easily. it is simple widget, just one option to select Slide to put to.

17.2 Cattheme Simpletabs Module

Use this module, you can show multi-categories products in tabs, See below for actuall example of this module:

Cattheme Simpletabs Module

to configure this module click Magento backend -> CATTHEME -> Cattheme Simpletabs -> Simpletabs Config, it will open the module configuration window:

Cattheme Simpletabs Module Configuration

Below we give the details of all module configuration options:

  • General - Enable Simpletabs: Enable or disable this module.
  • General - Title: The module title.
  • General - Action to switch tab: Select mouse action to switch tab, you can select “Click” or “Hover”

  • Product Selection - Select Category: Select categies that will show in frontend of you website, Hold down Ctrl and then you can select multi-categories.
  • Product Selection - Product Field to Order By: Select product type to show in tabs, You can select from Name, Id, Data Created, Price, Top Rating, Most Reviews, Most Viewed, Most Selling Random.
  • Product Selection - Ordering Direction: Select ASC or DESC
  • Product Selection - Product Limitation: Input number of products to show in every tab.

  • Tabs Options - Categories Order By: Select Tabs order, you can select Random, Name, Id Position.
  • Tabs Options - Categories Ordering Direction: Select ASC or DESC.

  • Product Dispaly Setting - If dispaly products image: If show product image.
  • Product Dispaly Setting - Image Width. Product Width, example 300.
  • Product Dispaly Setting - Image Height: Product Height, example 300.

After you have fill all options, Click “Save Config” to save module configuration. Now you can add the module in you page.

We can add the module to page’s Layout Update XML or page’s Content.

The code to add module at Layout Update XML

<referenceContainer name="content">
   <block class="Cattheme\Simpletabs\Block\Simpletabs" name="simpletabs.theme" />
</referenceContainer> 

The code to add module to page’s content:


{{block class="Cattheme\Simpletabs\Block\Simpletabs" name="simpletabs1" }}

Of course, we can also fill more options in the code, this way you can add multi-moduel with different configuration to page.

Full configuration code for Layout

<referenceContainer name="content">
   <block class="Cattheme\Simpletabs\Block\Simpletabs" name="simpletabs.theme" title="Latest Products" switch_action="click" product_category="10, 15, 30" product_order_by="created_at" product_order_dir="ASC" product_limitation="5" categories_order_by="position"  categories_order_dir="ASC" product_image_disp="yes" product_image_width="300" product_image_height="300" />
</referenceContainer> 

Full configuration code for page’s content


{{block class="Cattheme\Simpletabs\Block\Simpletabs" name="simpletabs1" title="Latest Products" switch_action="click" product_category="10, 15, 30" product_order_by="created_at" product_order_dir="ASC" product_limitation="5" categories_order_by="position"  categories_order_dir="ASC" product_image_disp="yes" product_image_width="300" product_image_height="300" }}

18. Third-party vendor modules

We use 3 third-party vendor free modules in our theme, You need to download the third-party vendor modules from their’s website, for usage, you can find guide for these modules in third-party vendor’s website, details is as follows:

Magento 2 Advance Product Quick View and Ajax Cart

https://www.weltpixel.com/advance-product-quick-view.html

Swissuplabs Easy Tabs

http://docs.swissuplabs.com/m2/extensions/easytabs/

Magefan Blog

https://magefan.com/magento2-blog-extension/

×

Subscribe

The latest tutorials sent straight to your inbox.