Ohey, 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 tiket to https://blueskytechmage.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:

  • document -
    contains documentation files.
  • Themes Files
    contains: Base packet, Database, Quickstart packet(Icluded database)
    • Base packet
      contains Magento theme files and directories that should be uploaded to the root directory of your Magento installation.
      • bs_ohey_base
        contains files and directories that should be uploaded to the root directory of your Magento installation.
        • app
        • lib
        • pub
      • bs_ohey_v.2.4.4
        If you use magento version 2.4.4, please replace with folder app from folder bs_ohey_v.2.4.4
        • app
        • lib
      • bs_ohey_v.2.4.5
        If you use magento version 2.4.5, please replace with folder app from folder bs_ohey_v.2.4.5
        • app
        • lib
      • bs_ohey_v.2.4.6
        If you use magento version 2.4.6, please replace with folder app from folder bs_ohey_v.2.4.6
        • app
        • lib
      • bs_ohey_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_ohey_v.2.4.x
        • app
    • Database -
      contains database file.
      • db.sql
        the database backup file. Contains the theme sample content.
    • Quickstart packet(Icluded database)
      • ohey.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 ohey Themes:

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

  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 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 bs_ohey_base folder.

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

    1.4. For 2.4.4 version, upload and overwrite files in the bs_ohey_v.2.4.4 folder.

    1.5. For 2.4.5 version, upload and overwrite files in the bs_ohey_v.2.4.5 folder.

    1.6. For 2.4.6 version, upload and overwrite files in the bs_ohey_v.2.4.6 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

3. Active theme

Our theme and module come with a license key, a license which you will find in your accounts 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. One Click Demo Import

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

Armania 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 buttonSave Config

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

Quick-Start Package

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

  1. Download package theme (zip file) from themesforset and upload ohey.zip in folder Quickstart packet(Icluded database) to your website folder. You can use a FTP software such as FileZilla or Cpanel to upload
  2. Extract file: ohey.zip in folder Quickstart packet(Icluded 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 Browse 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 ohey.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 commandl line. You need login ssh and cd to root magento and run commands line 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: Admin123456!@

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:

Slideshow

We created a management system very professional slideshow. You can create slideshows with multiple pages.

Home Page Slideshow

To Set up slideshow on homepage. Please going to Rokan Themes > Manager Slider then click button Add Slider

Then go to home page => Insert Widget => RokanThemes - Slider Banner Widget

like this image

In Setting Slider tab are all options related to Main Slishow

  • Effect: Animation for image slider.
  • Autoplay: Auto run Hompage Slide Show on Main Page
  • Direction Nav: Show Button Option(True/False)
  • Stop On Hover: Set to 'True', if you want to pause the transaction when the slideshow is mouseovered.
  • Control Nav: Show Button Next Back Option(True/False)
  • Control Nav Thumbs: Option(True/False): Thumb nail image in bottom.
  • Pause On Hover:Include Rewind Speed
  • Show Progress Bar: Show/hide progress bar

If you need Edit Content and Images of Slideshow. Please going to Rokanthemes > Manage Banner Then looking for General tab you need setting:

  • Slider : Select slider your created in tab manager slider if have many slidershow.
  • Status : Enable/Disable
  • Position : Posistion of slider.
  • Image : Image Slideshow
  • Image on mobile (<767px): Image Slideshow
  • Add Link :Link banner when you click
  • Show Caption: Include Text banner
  • Caption Position: Position of caption text in slider

Custom menu

We realsed custom menu for ohey Themes. This custom menu have many option 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 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 sub menu 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 to put html.

Menu setting

You have to keep HTML structural and class like bellow 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.

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 sub menu.

With this module, you can easy custom your sub menu.

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: Hidden this category in main menu.

Menu Type: Type of sub menu. We have three type menu: Classic, Full width, Static menu.

- Classic sub menu type: Simple menu, include only categroies.

- Full width sub menu type: Submenu will be show full width (depend on design).

- Static width sub menu 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 sub menu: 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 ohey theme, we already included: Font Awesome and IcoMoon icon font. You can go to there web site, choose icon that you want, copy icon name and paste it to this input.

Add content to sub menu.

With custom menu module, you can add text, images, video, iframe, html tags... into submenu. Let see how to do that.

We have 4 editor's corresponding to 4 positions in the sub menu: 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 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

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, 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...

Layered Ajax

Config Layered Ajax

Onepage checkout

Config Onepage checkout

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.

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:

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 hozital 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 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 show in eache of row in desktop (Over 1440px).
  • Items Desktop: Default qty of products items show in each of row. (1200px - 1439px)
  • Items On Desktop Small: Default qty of products show in eache of row in destop small (1024px - 1199px).
  • Items On Tablet: Default qty of products show in eache of row in tablet (Screen from: 992px - 1023px).
  • Items On Tablet Small: Default qty of products show in eache of row in tablet small(Screen from: 576px - 767px).
  • Items On Mobile: Default qty of products show in eache of row in mobile (Max width: 475px).
  • Owl margin: Margin value.

Go to page or static block: Insert Widget => Product tab 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 you need set Set Product as New from Date. Like this image

Onsale Products

To set onsale product. When you create products, you have to set special price for it. To set special price, please click Advanced Pricing after price input.

Price count down products.

Similar with set onsale products, To set Price count down product you have to set special price for and you have to add Special Price From - To then choose Yes in Show Price count Down option.

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 users in your store. It will highlight the Most Viewed Products to customers, so it attracts customer to buy these products.

Category tab

Similar product tab, Go to page or static block: click Show/hide editor button and choose Insert Widget=> Category product tab

Widget option

Categories: Select category that you want to display in tab

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

Other option are simliar with product tab

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

Sub category column

Similar product tab, Go to page or static block: click Show/hide editor button and choose Insert Widget=> Widget sub category thumb

  • 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.
  • 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 => Page click edit page. 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.

Support

Again! Thank you for purchased our theme. If you have any questions that are beyond the scope of this help file, please send us a ticket to https://app.blueskytechco.store/articles/a-comprehensive-guide-to-use-our-ticket-support-system/ or You can Comment on system comment of this item.

If our theme catch your required, please help us Vote Our Theme. Your ratings is goodness and encouraging We make more and more productions to end users. Thanks so much more :)