Thank you for choosing Kedai theme to build your WooCommerce website.

To create a site with Kedai, you must install the Kedai theme and WooCommerce plugin.

Installation

↑ Back to top

1. In your Dashboard go to Appearance > Themes.
2. Click on the Add New button on top.
3. Click Upload New button on top.
4. Click Choose File and browse your computer to locate kedai.zip file you downloaded.
5. Click Install Now.
6. After installation, Activate the theme.

Required Plugins

↑ Back to top

1. Woocommerce: The official WooCommerce plugin is required to display the modal cart and products. It includes many other necessary blocks for any website.
2. WP Form : The plugin is recommended for creating contact forms.
3. Safe SVG: is the best way to Allow SVG Uploads in WordPress! It gives you the ability to allow SVG uploads whilst making sure that they’re sanitized to stop SVG/XML vulnerabilities affecting your site. It also gives you the ability to preview your uploaded SVGs in the media library in all views.
4. Install One Click Demo Import plugin from Appearance > Install Plugins.

Import Demo Site

↑ Back to top

After installation and activation of the theme and required plugins. You can now install the demo content to get you started.

Importing demo content does not delete any existing content. It also imports WPForms.

Importing demo data (post, pages, images, theme settings, …) is the easiest way to setup your theme. It will allow you to quickly edit everything instead of creating content from scratch.

Before Import

↑ Back to top

Please make sure that all the required plugins are installed and activated.

• No existing posts, pages, categories, images, custom post types or any other data will be deleted or modified.
• Posts, pages, product, images, widgets, menus and other theme settings will get imported.
• Please click on the Import button only once and wait, it can take a couple of minutes.

Click Import Demo Data

Click Continue & Import

On confirmation, the importer will import the content specified. It may take 5-10 minutes to import all the demo content.

After import, you’ll be notified about the import completion.

Note :

• Product might not appear immediately due to cache
• Please open any single product and update to clear the product cache

Setting a homepage

↑ Back to top

After import is completed, you can set one of the pages imported as your homepage. To set your home page:

• In your admin panel, go to Settings > Reading
• Select A Static Page option for the Your homepage displays option.
• In the dropdown, choose the page you want set as home.

Navigation setup

After installation & One click demo import go and check home page if navigation is broken(see below image) then follow below steps.

Header Default

↑ Back to top

Go to Appearance > Editor > Template Parts > Header

Click the 3 dot dropdown menu

From the drop-menu choice primary-menu.

Assign same menu(primary-menu) as mobile menu.

Result

Header v1

↑ Back to top

Go to Appearance > Editor > Template Parts > Header v1

Assign primary-menu for mobile menu.

Assign secondary-menu next to the mobile menu.

Assign vertical-menu before to the primary menu location.

Assign primary-menu.

Result

Header v2

↑ Back to top

Go to Appearance > Editor > Template Parts > Header v2

Assign primary-menu for mobile menu.

Assign vertical-menu before to the primary menu location.

Assign primary-menu.

Result

Header v3

↑ Back to top

Go to Appearance > Editor > Template Parts > Header v3

Assign primary-menu for mobile menu.

Assign vertical-menu before to the primary menu location.

Assign primary-menu.

Result

Footer Menu

↑ Back to top

By default footer-menu assigned while import one click demo no need to assign.

Secondary menu

↑ Back to top

Detail view of Secondary-menu.

Primary menu

↑ Back to top

Detail walkthrough video of primary-menu in below link.

https://drive.google.com/file/d/1iJCUdPXVsLBSU6LtD4TwFtv4G7YHlrL4/view?usp=share_link

Megamenu setup

Assign a class name (“has-mega-menu“) in additional class name field for mega-menu item.

Other mega menu item with brand and banner image we have to add one more class name “v1” next to “has-mega-menu” class name.

When you add brand image menu item we have to add “brand” class name as mentioned above image.

When you add banner image menu item we have to add “banner-single” class name as mentioned above image.

For Half mega menu item we have to add “v2” next to “has-mega-menu” class name.

Vertical menu

↑ Back to top

Detail walk through video of vertical-menu in below link.

https://drive.google.com/file/d/19CttVVnTRjvJQO7sGGmKhEk4XSH73nGB/view?usp=sharing

Class name “vertical-nav” added in additional class name field.

Template & Template parts

Template

↑ Back to top

• Home v1
• Home v2
• Home v3
• About Us
• Terms and Conditions
• 404
• Home
• Single Product
• Contact US
• Single
• Search
• Product Catalog
• Index

Template Parts

↑ Back to top

• Header – Default
• Header – v1
• Header – v2
• Header – v3
• Footer – Default
• Footer – v1
• Footer – v2
• Footer – v3
• Product Filter
• Post Meta
• Comments

Blocks & Patterns

Blocks

↑ Back to top

Using Blocks

↑ Back to top

Blocks are the components used in the theme for adding content to the posts/pages. The Kedai theme support all WordPress and WooCommerce blocks that you can use to add text, media assets, and layout components, allowing you more freedom to create content.

To get access to the Block, you can follow the step below:

• Go to Pages and choose your desired page
• Now, you can click the plus (+) icon at the top left inside the toolbar to insert blocks

It will display a list of blocks available. You can use the appropriate block that suits your site requirements. For example, You can use the Site Title Block to add the site title on the header area.

Patterns

↑ Back to top

Using Patterns

↑ Back to top

Kedai themes come with 31 pre-built patterns. Choose the one that fits your site and customize it accordingly. Once activated, you will see a set-up pattern on your front end. You can either edit or remove it by replacing the other available patterns.

Before listing the available patterns in the Kedai theme, let’s point out several reasons for using the patterns in the theme:

• It saves time as you don’t need to create the same layout. You can reuse the same patterns on multiple areas of your site.
• It helps you add professional designs to your site without needing degree designers.

Available Patterns in Kedai Theme:

↑ Back to top

• Home – v1 -Hero
• Home – v1 -Product-Category-Card
• Home – v1 -Best-Rated-Products-Cards
• Home – v1 -Brand
• Home – v1 -Product-Category-Block
• Home – v1 -Product-Category-Block-Alt
• Home – v1 -Product Banner
• Home – v1 -Deals of the day
• Home – v1 -Best-Rated-Products
• Home – v1 -News Letter
• Home – v1 -Icon List
• Home – v2 -Hero
• Home – v2 -Best Rated Product Card
• Home – v2 -Banner 1
• Home – v2 -Banner 2
• Home – v2 -Icon List
• Home – v2 -New Arraivals
• Home – v3 -Hero
• Home – v3 -Banner
• Home – v3 -Flash Banner
• Home – v3 -New Arraivals
• Home – v3 -Best-Rated-Products-Card
• About – Hero
• About – Content
• About – Icon List
• About – Team
• About – Join us
• Terms and Conditions – Content
• Flash-Sales-Counter-Tab
• Best-Seller-Products-by-category-Tab
• Contact – Content

Adding Patterns in Kedai theme

↑ Back to top

Follow the steps below to add the new pattern to your Kedai FSE Theme.

1. Click on the plus (+) sign from the top left of your page editor.
2. Select the Pattern option from the tab.
3. Scroll down the available patterns and click on the one that fits on the site.
4. Upon clicking, it will automatically add the selected patterns on the page.
5. Once done, the patterns become individual blocks wyou can move, change and customize according to your site requirement.