1. Documentation /
  2. Kedai

Kedai

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

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

↑ Back to top

Header Default

Primary menu navigation used for header default.

Header v1

Primary menu navigation, vertical menus are used for header v1.

Header v2

Primary menu navigation, vertical-menus are used for header v2.

Header v3

Primary menu navigation, vertical-menus are used for header v3.

Secondary menu

↑ Back to top

Detail view of Secondary-menu.

Primary menu

↑ Back to top

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

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

Template parts

↑ Back to top

Header Default

↑ Back to top

Output

Editor Output

This Pattern built by using following blocks,

  • Image Block
  • Search Block
  • Navigation Block
  • Row Block

Header v1

↑ Back to top

Output

Editor Output

This Pattern built by using following blocks,

  • Navigation Block
  • Row Block
  • Image Block
  • Mini Cart Block
  • Customer Account Block
  • Search Block

Header v2

↑ Back to top

Output

Editor Output

This Pattern built by using following blocks,

  • Row Block
  • Navigation Block
  • Image Block
  • Product Search Block
  • Mini Cart Block
  • Customer Account Block

Header v3

↑ Back to top

Output

Editor Output

This Pattern built by using following blocks,

  • Row Block
  • Navigation Block
  • Image Block
  • Product Search
  • Mini Cart

Footer Default

↑ Back to top

Output

Editor Output

This Pattern built by using following blocks,

  • Row Block
  • Paragraph Block
  • Image Block

Footer v1

↑ Back to top

Output

Editor Output

This Pattern built by using following blocks,

  • Row Block
  • Paragraph Block
  • Image Block
  • Navigation Block
  • Heading Block
  • Product Categories List Block

Footer v2

↑ Back to top

Output

Editor Output

This Pattern built by using following blocks,

  • Heading Block
  • WPForm Block
  • Seperator Block
  • Product Categories List Block
  • Row Block
  • Social Icon Block
  • Image Block

Footer v3

↑ Back to top

Output

Editor Output

This Pattern built by using following blocks,

  • Image Block
  • Navigation Block
  • Heading Block
  • Social Icon Block
  • Paragraph Block
  • Product Categories List Block
  • Row Block
  • WPForm Block

Product Filter

↑ Back to top

Output

Editor Output

This Pattern built by using following blocks,

  • Heading Block
  • Product Categories List Block
  • Filter By Attributes Block
  • Filter By Attributes Control Block
  • Filter By Rating Block
  • Filter By Rating Control Block
  • Filter By Price Block
  • Filter By Price Control Block
  • Newest Product Block
  • On Sales Products Blocks

Post Meta

↑ Back to top

Output

Editor Output

This Pattern built by using following blocks,

  • Spacer Block
  • Row Block
  • Previous Post Block
  • Next Post Block
  • Avatar Block
  • Paragraph Block
  • Post Author Name Block
  • Social Icon Block

Comments

↑ Back to top

Editor Output

This Pattern built by using following blocks,

  • Comments Block
  • Heading Block
  • Comments Title Block
  • Comment Template 
  • Avatar Block
  • Comment Author Name
  • Row Block
  • Comment Date Block
  • Comment Edit Link Block
  • Comment Content Block
  • Comment Reply Link Block
  • Comments Pagination Block
  • Comments Previous Page Block
  • Comments Page Number Block
  • Comments Next Page Block
  • Post Comments Form Block

Templates

↑ Back to top

Home v1

↑ Back to top

Output

Home v1 Template

This template built by using following patterns,

  1. Home-v1-Hero 
  2. Home-v1-product-category-card
  3. Home-v1-best-rated-product-card
  4. Home-v1-brand
  5. Home-v1-product-category-Block
  6. Home-v1-product-category-Block-Alt
  7. Home-v1-product-banner
  8. Flash-sale-counter-tab
  9. Home-v1-deals-of-the-day
  10. Home-v1-best-rated-products
  11. Home-v1-news-letter
  12. Home-v1-icon-list

Home v2

↑ Back to top

Output

Home v2 Template

This template built by using following patterns,

  1. Home-2-Hero
  2. best-selling-query-grid
  3. home-v2-banner-1
  4. best-seller-products-by-category-tab
  5. flash-sale-counter-tab
  6. home-v2-banner-2
  7. home-v2-new-arrivals
  8. home-v2-icon-list

Home v3

↑ Back to top

Output

Home v3 Template

This template built by using following patterns,

  1. Home-v3-Hero
  2. home-v3-new-arrivals
  3. best-selling-query-grid
  4. home-v3-banner
  5. best-seller-products-by-category-tab
  6. flash-sale-counter-tab
  7. home-v3-flash-banner

About Us

↑ Back to top

Output

About Us Template

This template built by using following sections,

Hero 

Content

Team

Join us

Icon List

Terms and Conditions

↑ Back to top

Output

Terms and Conditions

This template built by using following sections,

Content

404

↑ Back to top

Output

Home

↑ Back to top

Output

Home Template

Single Product

↑ Back to top

Output

Single-Product Template

Contact Us

↑ Back to top

Output

Contact Us Template

Single

↑ Back to top

Output

Single Template

Search

↑ Back to top

Output

Search Template

Product Catalog

↑ Back to top

Output

Product Catalog Template

Index

↑ Back to top

Output

Index Template

Blocks

↑ Back to top

Using Blocks

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

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.

Adding Patterns in Kedai theme

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.

Home v1 Hero

↑ Back to top

Output

Pattern kedai

Editor

Hero pattern built using the following Gutenberg blocks,

  • Heading Block
  • Image Block
  • WP forms block
  • Cover Block

Home v1 product category card

↑ Back to top

Output

Pattern kedai

Editor

Home v1 product category card pattern built using the following Gutenberg blocks,

  • Image Block

Home v1 Best Rated Products Card

↑ Back to top

Output

Editor

Best rated product card pattern built using the following Gutenberg blocks,

  • Heading Block
  • image Block
  • Heading Block
  • Stack Block

Home v1 brand

↑ Back to top

Output

Editor

Home v1 brand pattern built using the following Gutenberg blocks,

  • Cover Block
  • Image Block

Home v1 product category block

↑ Back to top

Output

Editor

Home v1 Product category block pattern built using the following Gutenberg blocks,

  • Row Block
  • Image Block
  • Heading Block
  • Product Categories List Block
  • Button Block
  • Product By Category Block

Home v1 Product Category Block Alt

↑ Back to top

Output

Editor

Home v1 Product category block alt pattern built using the following Gutenberg blocks,

  • Row Block
  • Image Block
  • Heading Block
  • Product Categories List Block
  • Button Block
  • Product By Category Block

Home v1 product banner

↑ Back to top

Output

Editor

Home v1 Product Banner pattern built using the following Gutenberg blocks,

  • Image Block
  • Heading Block
  • Paragraph Block
  • Buttons Block

Home v1 Deals of the day

↑ Back to top

Output

Editor

Home v1 Deals of the day pattern built using the following Gutenberg blocks,

  • Heading Block
  • Paragraph Block
  • On Sale Products
  • Row Block

Home v1 best rated products

↑ Back to top

Output

Editor

Home v1 best rated products pattern built using the following Gutenberg blocks,

  • Heading Block
  • Paragraph Block
  • Top Related Products Block

Home v1 News Letter

↑ Back to top

Output

Editor

Home v1 News Letter pattern built using the following Gutenberg blocks,

  • Cover Block
  • Heading Block
  • Paragraph Block
  • WPForm Block

Home v1 Icon List

↑ Back to top

Output

Editor

Icon List pattern built using the following Gutenberg blocks,

  • Image Block
  • Paragraph Block

Home v2 Hero

↑ Back to top

Output

Editor

Hero pattern built using the following Gutenberg blocks,

  • Heading Block
  • Cover Block
  • % On Sale Products

Home v2 best rated products card

↑ Back to top

Output

Editor

Best rated products card pattern built using the following Gutenberg blocks,

  • Heading Block
  • Top Rated Product Block

Home v2 banner 1

↑ Back to top

Output

Pattern-Kedai

Editor

This pattern built by using following Gutenberg  blocks,

  • Image Block
  • Heading Block
  • Paragraph Block
  • Button Block
  • Media & Text Block
  • Spacer Block

Home v2 banner 2

↑ Back to top

Editor

This pattern built by using following Gutenberg blocks,

  • Cover Block
  • Row Block
  • Heading Block
  • Image Block
  • ParagraphBlock
  • Buttons Block

Home v2 new arrivals

↑ Back to top

Output

Editor

This pattern built by using following Gutenberg & Woocommerce blocks,

  • Heading Block
  • Paragraph Block
  • Product Template Block
  • Product Image Block
  • Product Categories Block
  • Product Title
  • Add to Cart Button Block
  • Product Price Block
  • Post Date Block

Home v2 Icon List

↑ Back to top

Output

Editor

This pattern built by using following Gutenberg blocks,

  • Image Block
  • ParagraphBlock

Home v3 Hero

↑ Back to top

Output

Editor

This pattern built by using following Gutenberg  blocks,

  • Image Block
  • Heading Block
  • Button Block

Home v3 new arrivals

↑ Back to top

Output

Editor

This pattern built by using following Gutenberg  blocks,

  • Heading Block
  • Paragraph Block
  • Newest Products Block

Home v3 best rated products card

↑ Back to top

Output

Editor

This pattern built by using following Gutenberg  blocks,

  • Heading Block
  • Top Rated Products Block

Home v3 Banner

↑ Back to top

Output

Editor

This pattern built by using following Gutenberg  blocks,

  • Image Block
  • Row Block
  • Heading Block
  • Paragraph Block

Home v3 Flash Banner

↑ Back to top

Output

Editor

This pattern built by using following Gutenberg blocks,

  • Cover Block
  • Heading Block
  • Paragraph Block
  • Button Block

About Hero

↑ Back to top

Output

Editor

Hero pattern built using the following Gutenberg blocks,

  • Heading Block
  • Cover Block

About Content

↑ Back to top

Output

Editor

Content pattern built using the following Gutenberg blocks,

  • Paragraph Block
  • Buttons Block

About Team

↑ Back to top

Output

Editor

Team pattern built using the following Gutenberg blocks,

  • Heading Block
  • Paragraph Block
  • Image Block
  • Social icon Block

About Join us

↑ Back to top

Output

Edtior

Join us pattern built using the following Gutenberg blocks,

  • Heading Block
  • Paragraph Block
  • Buttons Block

About icon list

↑ Back to top

Output

Editor

Hero pattern built using the following Gutenberg blocks,

  • Image Block
  • Paragraph Block

Terms and Conditions Content

↑ Back to top

Output

Editor

Terms and condition content pattern built using the following Gutenberg blocks,

  • Heading Block
  • Paragraph Block
  • List Block

Flash Sale Counter Tab

↑ Back to top

Output

Editor

Flash Sale counter tab pattern built using the following Gutenberg blocks,

  • Row Block
  • Image Block
  • Heading Block
  • List Block
  • Paragraph Block
  • Button Block

Best Seller Products by Category Tab

↑ Back to top

Output

Editor

This pattern built by using following Gutenberg  blocks,

  • Row Block
  • Heading Block
  • List Block
  • Product by Category Block

Contact Content

↑ Back to top

Output

Editor

Contact content pattern built using the following Gutenberg blocks,

  • Heading Block
  • Custom HTML Block
  • WPFrom Block

Patterns – Blog

↑ Back to top

Output

Editor

This pattern built by using following Gutenberg blocks,

  • Heading Block
  • Query Loop ( Gutenberg Block )