Dukamarket, Clean minimal Magento 2 theme!

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 a ticket to https://mageblueskytech.com/osTicket/. We will support our best to help you!

Magento files structure

The theme package you have downloaded consists of several folders. Let's see what each folder contains:

  • Online Documentation.txt -
    contains documentation link.
  • Themes Files
    contains: Base packeage, Database, Quickstart packeage(Included database)
    • Base package
      contains Magento theme files and directories that should be uploaded to the root directory of your Magento installation.
      • bs_dukamarket_base
        contains files and directories that should be uploaded to the root directory of your Magento installation.
        • app
        • lib
        • pub
      • bs_dukamarket_v.2.3.x
        If you use magento version 2.3.x, please replace with folder app from folder bs_dukamarket_v.2.3.x.
        • app
      • bs_dukamarket_v.2.4.0_2.4.1
        If you use magento version 2.4.0 or 2.4.1, please replace with folder app from folder bs_dukamarket_v.2.4.0_2.4.1.
        • app
      • bs_dukamarket_v.2.4.2
        If you use magento version 2.4.2, please replace with folder app from folder bs_dukamarket_v.2.4.2.
        • app
      • bs_dukamarket_v.2.4.3
        If you use magento version 2.4.3, please replace with folder app from folder bs_dukamarket_v.2.4.3.
        • app
      • bs_dukamarket_v.2.4.4
        If you use magento version 2.4.4, please replace with folder app from folder bs_dukamarket_v.2.4.4.
        • app
        • lib
      • bs_dukamarket_v.2.4.5
        If you use magento version 2.4.4, please replace with folder app from folder bs_dukamarket_v.2.4.5.
        • app
      • bs_dukamarket_v.2.4.x
        If you use magento version 2.4.0 or higher, You need do one more step, Upload and replace folder app from folder bs_dukamarket_v.2.4.x.
        • app
      • revslider_sample-data
        Slider Revolution zip file. Use for import sliderrevolution.
    • Database -
      contains database file.
      • db.sql
        the database backup file. Contains the theme sample content.
    • Quickstart packeage(Included database)
      • dukamarket.zip
        contains the complete Magento installation package with engine files, theme and sample content.

Magento technology stack requirements


Magento 2.4.x technology stack requirements

You must install Elasticsearch before installing Magento Commerce or Magento Open Source 2.4.0. See Elasticsearch for details.

Please follow this link https://devdocs.magento.com/guides/v2.4/install-gde/system-requirements-tech.html

Magento 2.3.x technology stack requirements

Please follow this link https://devdocs.magento.com/guides/v2.3/install-gde/system-requirements.html

There are two ways to install dukamarket Themes:

  1. Base package: Install only template: If you have a magento website or don't want to use our demo database, you can install only template with Base package.
  2. Quick-Start Package: Quick-start package is included Magento 2.3 and dukamarket 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 dukamarket) and follow the instruction below.

BASE PACKAGE

1. Prepare Installation

In this guide, We assume that you already have Magento installed, so to prepare installation, you need to do the following steps:

  1. Backup your Magento source files and your store database

    Creating a backup is very imporant before installing theme, especially when you are working on a live site. Please don't ignore this step.

  2. Disable all cache on your Magento site include:
    • Magento Cache (System > Cache Management)
    • Any additional cache on your server, for instance PHP cache engines, APC, ...
  3. Enable Maintenance mode for your store before uploading theme source.

2. Install

  1. Download our theme package files from themesforest.

    1.1. Extract this package, upload folders in bs_dukamarket_base: 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 bs_dukamarket_v.2.3.x folder.

    1.3. For 2.4.x or higher version, continue upload and overwrite files in the bs_dukamarket_v.2.4.x folder

    1.4. For 2.4.0_2.4.1 version, upload and overwrite files in the bs_dukamarket_v.2.4.0_2.4.1 folder.

    1.5. For 2.4.2 version, upload and overwrite files in the bs_dukamarket_v.2.4.2 folder.

    1.6. For 2.4.3 version, upload and overwrite files in the bs_dukamarket_v.2.4.3 folder.

    1.7. For 2.4.4 version, upload and overwrite files in the bs_dukamarket_v.2.4.4 folder.

    1.8. For 2.4.5 version, upload and overwrite files in the bs_dukamarket_v.2.4.5 folder.

  2. Make sure that you upload all theme folders and files successfully. You disable Maintenance Mode for your store.
  3. Go to SSH on server and cd to root magento and run commandlines below:
    • php bin/magento indexer:reindex
    • php bin/magento setup:upgrade
    • php bin/magento setup:static-content:deploy -f
    • php bin/magento cache:flush
    • sudo chmod -R 777 var pub generated

3. Active theme

Our theme and module come with a license key, a license which you will find in your account Purchase History. Click here if you don't know how to get purchase code.

To activate the license key for your theme/plugin, follow these steps:

  • 1. Login to admin.
  • 2. Navigate to Rokanthemes => Rokanthemes Theme => Activation Purchase Code.

  • 3. Insert the license key into the field and click Save Config.

4. Import Slider Revolution

After install our theme, You need Import a Slider Revolution. Please choose a zip file in: Themes_Files/Base_package/revslider_sample-data/

Please follow this video: https://youtu.be/IkMHKNRUbpE or link: https://www.sliderrevolution.com/documentation/new-module-creation/ scroll down to Import a Module packaged with your Theme section to see how to import

5. One Click Demo Import

After install our theme, you can easy select the demo that you want by One Click Demo Import.

Dukamarket provides extremely easy - One click demo installation. With One click, you can import: Cms page, cms block and all setting for the demo that you are want to use.

Please follow this steps:

  • 1. Login to admin.
  • 2. Navigate to Rokanthemes -> Rokanthemes Theme -> Demo importer.

  • 3. Choose demo that you want to use and click button Active.

  • 4. A Success message popup will show to inform you about the active. Click button Ok

  • 5. After loading page done, click button Save Config

  • 6. Reload your site, you will see the result.

Quick-Start Package

Quick-start package is included Magento 2.4.3 and dukamarket 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 dukamarket) and follow the instruction below.

  1. Download package theme (zip file) from themesforset and upload dukamarket.zip in folder Quickstart packeage(Included database) to your website folder. You can use a FTP software such as FileZilla or Cpanel to upload
  2. Extract file: dukamarket.zip in folder Quickstart packeage(Included database) to your website folder where Magento is installed.
  3. Create new database and import database sample. You can use database management tool such as phpMyAdmin to do this step
    • Open your Browser and go to your phpmyadmin or database management tool.
    • Creat database:


    • Import database: Click database you have created. Press Import button. Choose and open file dukamarket.sql from folder Database. File may be compressed (gzip, bzip2, zip) or uncompressed.

    • Change site url:

      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


      change site url


      Scroll down then you will see "Value" Field you enter text: %http% after that you click "Go"



      change site url


      You will see the tables need to change url :



      change site url

    • Open file "app/etc/env.php" in your server and change database connect.
    • Run commandline. You need login to ssh then "cd" to root magento and run commandlines below:
      • php bin/magento indexer:reindex
      • php bin/magento setup:upgrade
      • php bin/magento setup:static-content:deploy -f
      • php bin/magento cache:flush
      • chmod 777 -R pub var generated
    • Finsish install. Open a web browser and enter your domain.

Now you can go to admin page, follow this link: http://your-site.com/admin. Using account information bellow to login.

  • User name: admin_demo
  • Password: WeLoveMagento123!@

You can see video install: https://www.youtube.com/watch?v=9BWgmushiHg

Theme Option

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.

General setting

  • Enable page preloader: Show icon loader until complete page is fully loaded, including all frames, objects and images
  • Page Width: Width of page.
  • Icon LazyLoad:Icon loader.

Font setting

  • Body Font Size:Body font-size
  • Body Font Family: Font family of body. You can use google font or custom font.
  • Customize (Body Font):Font weight of body font
  • Heading font family Font family of heading (h1, h2, h3, h4, h5, h6...), you can use google font or custom font.

Newsletter Popup

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:

Slider Revolution

With Dukamarket theme, you can use Slider Revolution 6 modules. It is a new way to build rich & dynamic content for your websites. With the powerful visual editor, you can create modern designs in no time, and with no coding experience required.

Please follow the Slider Revolution document to discover strong feature: https://www.sliderrevolution.com/help-center/

Custom menu

We released custom menu for dukamarket Themes. This custom menu have many options you that can choose

1. Setting module

In admin page. Go to: Rokanthemes => Custom Menu

Menu setting

Enable: Choose Yes if you want custom menu.

Default Menu Type: This is the 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 have 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.

Menu setting

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.

Menu setting

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

Menu labe;

2. Custom submenu.

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!

Generate option.

.

Hide This Menu Item: Hide this category in main menu.

Menu Type: Type of submenu. We have three type 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 dukamarket theme, we have already included: Font Awesome and IcoMoon icon font. You can go to their web site, choose icon that you want, copy icon name and paste it to this input.

Add content to submenu.

With Custom Menu module, you can add text, images, videos, iframe, html tags... into submenu. Let see how to do that.

We have 4 editor's 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 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 emty Editors top and bottom block and choose Do not show with Left block and Right block

Vertical menu

In admin page. Go to: Rokanthemes => Vertical Menu

Menu setting

Enable: Choose Yes if you want custom menu.

Default Menu Type: This is the 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 have just set in Vertical menu module. Click Show / Hide Editor (or Edit with Page Builder on Magento version 2.4.3) to put html in.

Menu setting

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.

Menu setting

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

Menu labe;

2. Vertical submenu.

With this module, you can easy customize your vertical submenu.

In admin page, go to: Catalog => Categories then select category that you want to customize vertical submenu. Choose Enable Category and Include in menu. Scroll down, you will see "Vertical Menu" option.

.

Let see what we can do!

Generate option.

.

Hide This Menu Item: Hide this category in main menu.

Menu Type: Type of submenu. We have three type 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 Awesome Class: You can select Font Awesome Class here: https://fontawesome.com/icons

Add content to submenu.

With Vertical Menu module, you can add text, images, videos, iframe, html tags... into submenu.

We have 4 editor's 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 easier for you if you click Edit with Page Builder

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 emty Editors top and bottom block and choose Do not show with Left block and Right block

Testimonoials Module

Testimonal setting.

Go to admin page, Rokanthemes => Testimonoials => Settings to changes setting Testimonoials module. In here, you can change: Enable, disable module, title of Testimonoials, auto slider, item on destop, tablet, mobile, qty of this, background images....

Add new testimonal

Go to admin page, Rokanthemes => Testimonoials => Manage Testimonial and choose add new testimonial.

Blog post Module

Blog post setting.

Go to admin page, Stores => Configuration => Rokanthemes => General Settings => Blog Slider. In here you can change: Enable, disable module, title blog slider (will show in homepage), Short description, items in destop, mobile, tablet, Sidebar of blog page...

Onepage checkout

Config Onepage checkout

Go to admin page, Stores => Configuration => Rokanthemes => One Page Checkout.

Enable: Choose Yes if you want to add and show Terms and Conditions when customers check out.

Checkbox Text: Label of check box.

Checkbox Content: Content of Terms and Conditions.

Title warning: Title warning when customers uncheck on Terms and Conditions checkbox.

Content warning: Content warning when customers uncheck on Terms and Conditions checkbox.

Product module

All of products module have a similar setting structure. General Configuration for: Title, description, OWL Product Carousels and set up to four breakpoints for different screen resolutions.

Configuration setting:

Go to Content => Pages(or Blocks), choose the page or block you want to add product widget, then click Show/Hide Editor => Insert Widget
If you use Magento version 2.4.3, click Edit with Page Builder => Add HTML Code => Insert Widget

Products tab:

  • Title : Insert text with the title desired, leave the field empty if you do not want the title displayed.
  • Description : Short descrition display after title.
  • Limit product on tab : Maximum products on tab
  • Sorting: Sorting depend on position, product name, price.
  • Tab position: Vertical or horizontal tab.
  • Row on tab: The number of rows will be displayed.
  • Mode view: Grid or list.
  • Hide Add To Cart : Enable/Disable "Add to cart" button.
  • Hide Add To Compare : Enable/Disable "Compare to cart" button.
  • Hide Add To Wishlist : Enable/Disable "Add to wishlist" icon.
  • Hide Quick view: Enable/Disable Quick view.
  • Product images: Choose type of product images.
  • Product hover images: Choose type of product hover images.
  • Owl nav : Enable/Disable Nex/Back.
  • Owl dot: Enable/Disable dot.
  • Owl center: Enable/Disable center.
  • Items On Big Desktop: Default qty of products shown in each of row in desktop (Over 1440px).
  • Items Desktop: Default qty of products items shown in each of row. (1200px - 1439px)
  • Items On Desktop Small: Default qty of products shown in each of row in destop small (1024px - 1199px).
  • Items On Tablet: Default qty of products shown in each of row in tablet (Screen from: 992px - 1023px).
  • Items On Tablet Small: Default qty of products shown in each of row in tablet small(Screen from: 576px - 767px).
  • Items On Mobile: Default qty of products shown in each of row in mobile (Max width: 475px).
  • Owl margin: Margin value.

You can customize Products configuration with the following product types:

  • Bestseller products.
  • Featured products.
  • Mostview products.
  • New products.
  • Top rate produts.
  • Onesale produts.
  • Random produts.

New Product

If you want to display New Product, When create product in Catalog => Products => Add Product, you need set Set Product as New from Date. Like this image

Onsale Products

To set onsale product. When you create product in Catalog => Products => Add Product, you have to set special price for it. To set special price, please click Advanced Pricing below "Price" field.

Price Countdown Setting

Config Price count down products.

1. Go to Content => Page, choose the page you want to add Pricecountdown widget, then Edit => Contentclick Show/Hide Editor => Insert Widget
If you use Magento version 2.4.3, click Edit with Page Builder => Add Text => Insert Widget => Choose "PriceCountdown Settings"

2. Widget Options

  • Activate Price Countdown : Select Yes if you want to enable PriceCountdown module.
  • Title : Insert text with the title desired, leave the field empty if you do not want the title displayed.
  • Short Description : Short descrition display after title.
  • See All Link : Insert link of button See All.
  • Type Image: Select Type of Image will be shown in widget.
  • Width Image: Insert Width of Image.
  • Hide Add To Cart : Enable/Disable "Add to cart" button.
  • Hide Add To Compare : Enable/Disable "Compare to cart" button.
  • Hide Add To Wishlist : Enable/Disable "Add to wishlist" icon.
  • Hide Quickview: Enable/Disable Quick view.
  • Height Image: Insert Height of Image.
  • Enabled Product Hover Image: Select Yes if you want to enable Product Hover Image.
  • Show short description: Select Yes if you want to enable Show short description.
  • Show description Max Length: Setting Length of Description, Empty for display all short description.
  • Show description Max Length: Setting Length of Description, Empty for display all short description.
  • Qty of Product: Default qty of products.
  • Number Rows Show: Select number of rows.
  • Show Next/Back control : Enable/Disable Nex/Back.
  • Auto slide: Enable/Disable Auto slide.
  • Owl Center: Enable/Disable center.
  • Owl Dots: Enable/Disable dot.
  • Loop: Enable/Disable Loop.
  • Slideshow Speed: Insert Slideshow Speed.
  • Owl margin: Margin value.
  • Owl Items On Default: Default qty of products when using owl carousel.
  • Owl Items On Desktop: Default qty of products shown in each of row in desktop
  • Owl Items On DesktopSmall: Default qty of products shown in each of row in destop small
  • Owl Items On Big Tablet: Default qty of products shown in each of row in tablet
  • Owl Items On Mobile: Default qty of products shown in each of row in mobile

Best Seller Product

Bestseller Product will automatic show when customer add products to cart and checkout success.

Mostviewed Product

Most Product: will automatic display products which are viewed most by many Customers in your store. It will highlight the Most Viewed Products to customers, so it attracts customers to buy these products.

Category tab

Similar product tab, Go to Content => Pages(or Blocks), choose the page or block you want to add product widget, then click Show/Hide Editor => Insert Widget
If you use Magento version 2.4.3, click Edit with Page Builder => Add HTML Code => Insert Widget => Choose "Category Products Tabs"

Widget option

Categories: Select category that you want to display in tab

Show Category Thumbnail On tab: Yes/Now. If you choose yes, category images will be shown in tab like our demo. (We using Vertical tab postion)

Other option are simliar with Products Tabs

Please follow this video for more information https://www.youtube.com/watch?v=qyxmk-yXxrA

Sub Category Columns

Similar Products Tabs, Go to Content => Pages(or Blocks), choose the page or block you want to add product widget, then click Show/Hide Editor => Insert Widget
If you use Magento version 2.4.3, click Edit with Page Builder => Add HTML Code => Insert Widget => Choose "Widget sub category thumb"

  • Title : Insert text with the title design, leave the field empty if you do not want to display the title.
  • Description : Short descrition display after title.
  • Background :Background of this module.

  • Categories: Select category that you want to display.
  • Show level: Select sub category level that you want to show.
  • Tab position: Vertical or hozital tab.
  • Show Product Count: Show or hide product count.
  • Show Category Image: Select type of image that you want to show: Image category or Thumb image.
  • Show Category Image Type: Show image as hozital or vertical.
  • Enable Owl: Enable or disable owl.

Instagram

Config instagram

1. Go to RokanThemes => Instagram

2. Input your information

Click Submit then click Save Config button.

3. Call Instagram widget

Go to: Content => Elements => Pages click Edit. Choose Insert Widget and select the Instagram Widget

4. Config the Instagram as you want.

5. Click button Insert widget and save page. Reload page in frontend, you will see the result.

FAQ Setting

Config Faq

1. Go to RokanThemes => FAQ Setting

2. Choose Yes to enable FAQ.

3. Add Faq

Go to: Rokanthemes => Manage FAQ click Add

  • Status : Change status of FAQ.
  • Is Parent FAQ : Select parent of FAQ Question.
  • Question : Insert question.
  • Answer: Insert Answer.

Click Save to save FAQ.

Brand

Config Brand

1. Go to RokanThemes => Brand => Setting

2. General Setting

  • Enabled : Select Yes if you want to use Brand module.
  • Brand List Url : Setting your Brands List Page.

  • Brand Url Prefix : Identify Brand Url Prefix.

  • Brand Url Suffix: Identify Brand Url Suffix.

3. Brand Info On Product View Page

You can customize the way brand be shown in Product View Page in Brand Info On Product View Page

  • Enabled Brand Block: Select Yes if you want to enable Brand Block in product view page.
  • Show Brand Text : Select Yes if you want to show Brand Text in product view page.
  • Brand Text : Insert the label of Brand field in frontstore.
  • Show Brand Logo : Select Yes if you want to show Brand Logo in product view page.
  • Show Brand Name: Select Yes if you want to show Brand Name in product view page.

4. Brand List Page

  • Show Brand Name: Select Yes if you want to show Brand Name in Brand List Page.
  • Number Brand Per Page : Setting number of Brand shown in one Page.
  • Page title : Setting title for Brand List Page.
  • Meta Description : Meta descriptions provide a brief overview of the Brand List Page for search results listings.
  • Meta Keywords : Setting meta keywords for Brand List Page.

In tab Grid layout, You can setup Number of columns on various screen sizes

5. Group Page

You can also customize the way brand be shown in Group Page in Brand Info On Product View Page with the steps as above.

After setup everything you need to customize Brand, please click Save Config.

Manage Brands

1. Go to RokanThemes => Brand => Manage Brands

2. General Setting

  • Enabled : Select Yes if you want to use Brand module.
  • Brand List Url : Setting your Brands List Page.

  • Brand Url Prefix : Identify Brand Url Prefix.

  • Brand Url Suffix: Identify Brand Url Suffix.

3. Brand Info On Product View Page

You can customize the way brand be shown in Product View Page in Brand Info On Product View Page

  • Enabled Brand Block: Select Yes if you want to enable Brand Block in product view page.
  • Show Brand Text : Select Yes if you want to show Brand Text in product view page.
  • Brand Text : Insert the label of Brand field in frontstore.
  • Show Brand Logo : Select Yes if you want to show Brand Logo in product view page.
  • Show Brand Name: Select Yes if you want to show Brand Name in product view page.

4. Brand List Page

  • Show Brand Name: Select Yes if you want to show Brand Name in Brand List Page.
  • Number Brand Per Page : Setting number of Brand shown in one Page.
  • Page title : Setting title for Brand List Page.
  • Meta Description : Meta descriptions provide a brief overview of the Brand List Page for search results listings.
  • Meta Keywords : Setting meta keywords for Brand List Page.

In tab Grid layout, You can setup Number of columns on various screen sizes

5. Group Page

You can also customize the way brand be shown in Group Page in Brand Info On Product View Page with the steps as above.

After setup everything you need to customize Brand, please click Save Config.

Edit with PageBuilder

In Magento version 2.4.3, We are using PageBuilder to insert Block, Widget, Banner, ... and so on. It brings to customer an easy way to customize the theme. Let's see what we can do with it

1. Click to Edit with PageBuilder in admin page.

In PageBuilder Page, you can see a lot of options to customize the theme in the left.

2. Insert a widget

In the tab layout, drag and drop the row to the theme

In the tab element, drag and drop the text inside the row you have just added. Then click to Insert Widget

In the Insert Widget section, select the widget you need to add and customize all the field of the widget.

3. Insert a Banner.

In the tab layout, drag and drop the row to the theme

In the tab media, drag and drop the banner inside the row you have just added.

Click to Upload Image or Select from Gallery to add image to banner. Then you can see the result.

Click to icon in the top right corner exit PageBuilder page then click Save button.

Ajax Suite

Config Ajax Suite

1. Go to RokanThemes => Configuration => Ajax Suite

  • Enable AjaxSuite: Select Yes if you want to enable AjaxSuite.

2. Ajax Cart

  • Enable: Select Yes if you want to enable Ajax Cart.
  • Action after Add to cart Success:
    • Select Popup if you want to show popup after add to cart

    • Select Show MiniCart if you want to show minicart after add to cart

3. Ajax Wishlist

  • Enable: Select Yes if you want to enable Ajax Wishlist.
  • Title: Insert title of wishlist.
  • Description: Insert short description of wishlist.
  • Login Popup Logo: Setting the login popup logo.
  • Background Image Popup: Setting background color for image popup.

4. Ajax Compare

  • Enable AjaxSuite: Select Yes if you want to enable Ajax Compare to compare product.

5. Click button Save Config to save the setting.

Quick View

Config Quickview

Go to RokanThemes => Configuration => Quickview

  • Enable QuickView: Select Yes if you want to enable QuickView.
  • Label Item: Insert Label of button Quick View.
  • Action Append Icon Quickview: Setup location of div "quickview".
  • Data or Class Insert: Setting class to div "product action".

Note: You can ignore two of this setup. It is used by template developer.

Click button Save Config to save the setting.

Widget SubCategory

Config Widget SubCategory

Go to Store => Configuration => Catalog => WidgetSubCategory

  • Enable WidgetSubCategory: Select Yes if you want to enable WidgetSubCategory module.

Click button Save Config to save the setting.

Store Locator

Config Store Locator

1. Go to RokanThemes => Store Locator => Configuration

2. Input Google Api Key

Click Save Config button to save the setting.

3. Go to RokanThemes => Store Locator => Manager Stores => Add New Store

4. General Information

  • Name: Insert Name of your store.
  • Description: Insert short description about your store.
  • Status: Select Enabled if you want to enable store.
  • Address Tab: Insert your store's address information.
  • Store Image: Upload your store thumbnail Image.

5. Work Time

Setup your store working time.

6. Location Map

  • Latitude: Insert Latitude of your store.
  • Longitude: Insert Longitude of your store.

Or you can click location in the map in Store Location Latitude and Longitude will be automatically added.

After setting, Click button Save Config to save the setting.

Optimize Speed

Config Optimize Speed

1. Go to RokanThemes => Optimize Speed => Configuration

2. HTML Optimization

  • Enabled: Select Yes if you want to enable HTML Optimization.
  • Preload: Insert paths for fonts that should be preloaded.

3. Lazy Load Image

  • Enable Lazy Load: Select Yes if you want to enable Lazy Load Image.
  • Ignore Class and Id Images: Insert Class and Id Images which you do not want to use lazyload.
  • Ignore Url Images: Insert Url Images which you do not want to use lazyload.

4. Click button Save Config to save the setting.

Superdeals

Config Superdeals

1. Go to Content => Page, choose the page you want to add Superdeals widget, then Edit => Contentclick Show/Hide Editor => Insert Widget
If you use Magento version 2.4.3, click Edit with Page Builder => Add Text => Insert Widget => Choose "Super Deals Settings"

2. Widget Options

  • Sub Title : Insert Sub Title for the superdeal widget, leave the field empty if you do not want the title displayed.
  • Title : Insert text with the title desired, leave the field empty if you do not want the title displayed.
  • Short Description : Short descrition display after title.
  • See All Link : Insert link of button See All.
  • Template: Select Template for the Widget.
  • Mode View: Select view mode.
  • Background Image: Upload background Image for the Widget.
  • Categories: Insert Id of category.
  • End Date: Insert End Date.
  • Limit Product: Insert Limit Product.
  • Type Image: Select Type of Image will be shown in widget.
  • Width Image: Insert Width of Image.
  • Height Image: Insert Height of Image.
  • Enabled Product Hover Image: Select Yes if you want to enable Product Hover Image.
  • Show short description: Select Yes if you want to enable Show short description.
  • Hide Add To Cart : Enable/Disable "Add to cart" button.
  • Hide Add To Compare : Enable/Disable "Compare to cart" button.
  • Hide Add To Wishlist : Enable/Disable "Add to wishlist" icon.
  • Hide Quickview: Enable/Disable Quick view.
  • Owl Items Default: Default qty of products.
  • Owl Items On Desktop: Default qty of products shown in each of row in desktop.
  • Owl Items On Small Desktop: Default qty of products shown in each of row in destop small.
  • Owl Items On Big Tablet: Default qty of products shown in each of row in tablet.
  • Owl Items On Small Tablet: Default qty of products shown in each of row in tablet small.
  • Owl Items On Mobile: Default qty of products shown in each of row in mobile.
  • Show Next/Back control : Enable/Disable Nex/Back.
  • Owl margin: Margin value.
  • Loop: Enable/Disable Loop.
  • Owl Dots: Enable/Disable dot.
  • Owl Center: Enable/Disable center.
  • Auto slide: Enable/Disable Auto slide.
  • Owl Rtl: Enable/Disable rtl.
  • Slideshow Speed: Insert Slideshow Speed.

Support

Again! Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please send a ticket to https://mageblueskytech.com/osTicket/ or You can Comment on system comment of this item.

If our theme catch your required, please help us Vote Our Theme. Your rating is goodness and encouraging us to make more and more quality products to customers. Thanks you so much!