Thank you for purchased our template. This document will guide you use this template. We recommend that you start reading the documentation at the first section. If you have questions about our template, please send us an email. We will support our best to help you!
The theme package you have downloaded consists of several folders. Let's see what each folder contains:
Please follow this link https://devdocs.magento.com/guides/v2.4/install-gde/system-requirements-tech.html
Please follow this link https://devdocs.magento.com/guides/v2.3/install-gde/system-requirements.html
There are two ways to install Ayo Themes:
In this guide, We assume that you already have Magento installed, so to prepare installation, you need to do the following steps:
Creating a backup is very imporant before installing theme, especially when you are working on a live site. Please don't ignore this step
Download our theme package files from themesforest.
1.1. Extract this package, upload folders in Base package: app, lib, pub to the root directory ( www, public_html) of your magento folder. You can use a FTP software, such as FileZilla, then login to your hosting to do it.
1.2. For 2.3.x version, upload and overwrite files in the base_package_2.3.x folder.
1.3. For 2.4.x or higher version, continue upload and overwrite files in the patch_2.4.x.zip folder
1.4. For 2.4.4 version, upload and overwrite files in the patch_2.4.4.zip folder.
1.5. For 2.4.5 version, upload and overwrite files in the patch_2.4.5.zip folder.
1.5. For 2.4.5 version, upload and overwrite files in the patch_2.4.6.zip folder.
You can import all Pages & Static Blocks. With only one click
Go to "RokanThemes => Import and Export"
To export static block and static page, you can set options similar with import theme settings. Click Export Block, Export page to export all static block and all page.
Blocks exported will automatic save in folder "var": var/cms_blocks.xml, var/cms_pages.xml
Back to Content => Blocks/Pages, You'll see all Static Blocks/Pages were imported.
Quick-start package is included Magento 2 and Ayo Themes. Supposing that you've just started building a Magento store, you can choose this solution to install demo store with all the sample data (similar to live demo of Ayo) and follow the instruction below.
After imported database please access to core_config_data table, In this table you can see two value: web/unsecure/base_url and web/secure/base_url.
Go to table core_config_data -> Click search
Scroll down then you will see "Value" Field you enter text: %http% after that you click "Go"
You will see 4 tables need to change url :
Now you can go to admin page, follow this link: http://your-site.com/admin. Using account information bellow to login.
You can see video install: https://www.youtube.com/watch?v=9BWgmushiHg
Ayo uses CMS Static Blocks and our module to display content of home page. With Static Blocks, you can add text, images, and can be assigned any page layout, group of pages. You can take a look at Homepage Diagram Blocks below, we show static blocks name (CONTENT => Blocks), products module that we use in homepage on the right.
You can change content of Static block in admin page: Content => Block. You have to keep HTML structure and class like below to make sure it don't break style.
After activating our theme, you can go to Rokanthemes => Theme settings to configure the theme. We will explain what you can do with Theme Options.
Change newsletter Popup settings in Rokanthemes => Theme settings
You can: enable or disable, set width, set height, background color or background images, change text, in here:
When a visitors scrolls down the header will remain in view at the top of the browser rather than moving out of view at the top of the screen. The sticky header can help to make it easier for visitors to navigate through a site as they can quickly access the navigation menu rather than having to scroll back to the top of the page.
Go to: Content => Design => Configuration in admin page then choose edit themes to change Logo and Favicon icon.
Follow this direction below to custom header template: app\design\frontend\ayo\ayo_default\Rokanthemes_Themeoption\templates\html\header.phtml. If you use demo 2 or demo 3... change please find header.phtml file in: ayo2, ayo3... folder.
In footer primary we include three static blocks:
footer_info, social_block, footer_menu
Please go to CMS => Static Blocks then find block id above, click Edit
Defaut html for fixed_right static block:
Defaut html for footer_payment static block:
Defaut html for footer_static static block:
Just only remove and add Content/Images If you need. Also, please keep all another code to make sure that style not break.
Also, If you want to edit Copyright info, please going Rokanthemes => Theme setting => General => CopyrightYou can see like this image
We created a very professional slideshow. You can create slideshows with multiple pages.
To Set up slideshow on homepage. Please going to Rokan Themes => Manager Slider then click button Add Slider
Choose store you want to show slider
like this image
There are all options related to Main Slishow in Setting Slider tab.
If you want to Edit Content and Images of Slideshow. Please going to Rokanthemes => Manage Slider Items Then looking for General tab you need setting:
We released custom menu for Ayo Themes. This custom menu have many option you that can choose
In admin page. Go to: Rokanthemes => Custom Menu
Enable: Choose Yes if you want custom menu.
Default Menu Type: This is type of menu that will be displayed if you choose Default type in the Menu type option in Catalog => Categories setting
Visible Menu Depth: Show number of submenu categories. For example, if you set this value to 2, only second level categories will be displayed.
Static Block(before): Set identifier of static block content that will be shown before the default category menu items and after home link.
Static Block(after): Set identifier of static block content that will be shown afer the default category menu items and after home link.
After set identifier of Static Block(before, after). Go to Content => Block and add new block. Make sure that this block have identifier same as identifier that you just set in Custom menu module. Click Show / Hide Editor or Edit with Page Builder on Magento version 2.4.3 to put html in.
You have to keep HTML structure and class like below to make sure it don't break style. If it has submenu, put this HTML tag
<div class="open-children-toggle"></div>
after level-top to open submenu in mobile.
If you don't want to use static block in menu, make it empty.
Category Labels: This options are values in Category label and can be assigned to every category in Catalog => Categories => Category Label
With this module, you can easy custom your submenu.
In admin page, go to: Catalog => Categories then select category that you want to custom submenu. Choose Enable Category and Include in menu. Scroll down, you will see custom menu option.
.
Let see what we can do!
.
Hide This Menu Item: Hide this category in main menu.
Menu Type: Type of submenu. We have three types of menu: Classic, Full width, Static menu.
- Classic submenu type: Simple menu, include only categroies.
- Full width submenu type: Submenu will be show full width (depend on design).
- Static width submenu type: You can manually set the width of the submenu by put an value in the box Static width.
Sub Category Columns: Column of sub category.
Float: Position of submenu: left or right.
Icon Image: Insert icon by upload images from your computer. It will be shown before category name in main menu.
Font Icon Class: You can input class of font icon on this (Note: Font icon must be included in code folder). With Ayo theme, we've already included: Font Awesome and IcoMoon icon font. You can go to their website, choose icon that you want, copy icon name and paste it to this input.
With custom menu module, you can add text, images, video, iframe, html tags... into submenu. Let see how to do that.
We have 4 editors corresponding to 4 positions in the submenu: top, left, right, bottom. In this editors you can add content that you want to show in submenu. If you want to add html or insert images, it will be easier for you if you click WYSIWYG Editor
Left block width, Right block width: Width of right and left block compared to the total width of submenu.
If you don't want to add content in submenu. Please leave Editors top and bottom block empty and choose Do not show with Left block and Right block
We released vertical menu for Ayo Themes. This vertical menu have many options that you can choose
In admin page. Go to: Rokanthemes => Vertical Menu
Enable: Choose Yes if you want to use vertical menu.
Default Menu Type: This is type of menu that will be displayed if you choose Default type in the Menu type option in Catalog/Categories setting
Visible Menu Depth: Show number of submenu categories. For example, if you set this value to 2, only second level categories will be displayed.
Limit show more Cat: Total of category that you want to show on vertical menu, other will show when you click on all category or more category button.
Static Block(before): Set identifier of static block content that will be shown before the default category menu items
Static Block(after): Set identifier of static block content that will be last appearance on vertical menu
After set identifier of Static Block(before, after). Go to Content => Block and add new block. Make sure that this block have identifier same as identifier that you just set in Vertical menu module. Click Show / Hide Editor or Edit with Page Builder on Magento version 2.4.3 to put html.You have to keep HTML structure and class like below to make sure it don't break style. If it have submenu, put this HTML tag
<div class="open-children-toggle"></div>
after level-top to open submenu in mobile.
If you don't want to use static block in menu, make it empty.
Category Labels: This options are values in Category label and can be assigned to every category in Catalog => Categories => Category Label
With this module, you can easy setting your vertical submenu.
In admin page, go to: Catalog => Categories then select category that you want to using vertical submenu. Choose Enable Category and Include in menu. Scroll down, you will see vertical menu option.
.
Let see what we can do!
Hide This Menu Item: Hide this category in main menu.
Menu Type: Type of submenu. We have three types of menu: Classic, Full width, Static menu.
- Classic submenu type: Simple menu, include only categroies.
- Full width submenu type: Submenu will be show full width (depend on design).
- Static width submenu type: You can manually set the width of the submenu by put an value in the box Static width.
Sub Category Columns: Column of sub category.
Float: Position of submenu: left or right.
Icon Image: Insert icon by upload images from your computer. It will be show before category name in main menu.
Font Icon Class: You can input class of font icon on this (Note: Font icon must be included in code folder). With Ayo theme, we've already included: Font Awesome and IcoMoon icon font. You can go to their website, choose icon that you want, copy icon name and paste it to this input.
With vertical menu module, you can add text, images, video, iframe, html tags... into submenu. Let see how to do that.
We have 4 editors corresponding to 4 positions in the submenu: top, left, right, bottom. In this ediors you can add content that you want to show in submenu. If you want to add html or insert images, it will be easier for you if you click WYSIWYG Editor
Left block width, Right block width: Width of right and left block compared to the total width of submenu.
If you don't want to add content in submenu. Please leave Editors top and bottom block empty and choose Do not show with Left block and Right block
In Ayo theme, we using only: Bottom Block
Config Layered Ajax
Go to admin page, Store => Configuration => Rokanthemes => Layered Ajax. In here you can change: Enable, disable module, Open All Tab , Use Price Range Sliders
Config One Page Checkout
Go to admin page, Rokanthemes => One Page Checkout => Configuration.
Enable: Choose Yes if you want to add and show Terms and Conditions when customers check out.
Checkbox Text: Label show in check box.
Checkbox Content: Content of Terms and Conditions.
Title warning: Title warning when customers uncheck on Terms and Conditions check box.
Content warning: Content warning when customers uncheck on Terms and Conditions check box.
If you want to using SuperDeals, first, you must enable this module in: Rokanthemes => Configuration => Super Deals Settings
Go to Admin => Rokanthemes => Configuration: You can customize Products configuration with the following product types:
If you want to using Category tab, first, you must enable this module in: Rokanthemes => Configuration => Category tab
To using it, go to Content => Block click Show/hide editor button or Edit with Page Builder button on Magento version 2.4.3 and choose Insert Widget
Display category tab on homepage: Go to static page and choose Insert Widget => Cms Static block and choose static block you just created
If you want to display New Product, When create product on Catalog => Products, you need set Set Product as New from Date. Like this image
To set onsale product. When you create products Catalog => Products, you have to set special price for it. To set special price, please click Advanced Pricing below Price field.
To display Featured Product, when create product Catalog => Products, you need set Featured Product is Yes. Like this image
