Makali - Home 1

Settings Position Sections

Theme Settings or Theme Editor is a graphical user interface, lets you configure all features which the theme supports.

Go to admin  › Storefront › My Themes,  on the Current Theme section, click Customize button

This section let you configure the homepage:

  • Show/hide any content blocks and product blocks.
  • Rearrange position of any blocks.

Position sections

Header

To configure, open the Theme Editor, scroll down to section Logo, click to expand the logo options. Choose a certain option of Logo position, then click Refresh button appear after.

Top Banner

The top banner can be showed / edited in admin > page › Marketing › Banners. When you add / edit remember to choose Location is Top of Page.

MegaMenu

You can configure megamenu horizontal, web page on Main navigation. Header & Footer > Main navigation:

MegaMenu Horizontal

the mega menu Horizontal can be edited in the language file en.json:

"wb_megamenu": {
	"view_all": "View All Products",
	"horizontal": {
			"menu_cat_0": {
			"status": "true",
			"icon-awesome": " ",
			"icon-image": " ",
			"menu-badge": " ",
			"position": "left",
			"type-menu": "mega",
			"mega-category-col": "5",
			"mega-banner-mode": " ",
			"mega-banner-img": " ",
			"mega-banner-placeholder": "http://via.placeholder.com/270x369",
			"mega-banner-url": "#placeholder_link"

		},
		"menu_cat_1": {
			"status": "true",
			"icon-awesome": " ",
			"icon-image": " ",
			"menu-badge": " ",
			"position": "left",
			"type-menu": "mega",
			"mega-category-col": "3",
			"mega-banner-mode": "right",
			"mega-banner-img": " ",
			"mega-banner-placeholder": "http://via.placeholder.com/270x369",
			"mega-banner-url": "#placeholder_link"
		},
		"menu_cat_2": {
			"status": "true",
			"icon-awesome": " ",
			"icon-image": " ",
			"menu-badge": " ",
			"position": "left",
			"type-menu": "default",
			"mega-category-col": "3",
			"mega-banner-mode": "left",
			"mega-banner-img": " ",
			"mega-banner-placeholder": "http://via.placeholder.com/270x369",
			"mega-banner-url": "#placeholder_link"
		}
		...
	},
},
  • icon-awesome - icon name font awesome, user Fontawesome 4.7
  • icon-image - is the image URL.
  • menu-badge - is the badge (Hot, New, Top...) on menu items.
  • type-menu - is the type menu (default menu, mega menu)
  • position - align menu item (left/right ).

Type mega menu:

  • mega-category-col column number category display on mega menu.
  • mega-banner-mode is the align banner item (left/right ).
  • mega-banner-img is the image URL banner.
  • mega-banner-placeholder is the image URL placeholder.
  • mega-banner-url is the link url of image.

Adding Web Pages For MegaMenu Horizontal

You want to see more add web page : Click here

the menu item web pages can be edited in the language file en.json:

 "webpage": {
	"menu_cat_0": {
		"load-webpage": "yes",
		"icon-awesome": " ",
		"icon-image": " ",
		"menu-badge": "hot",
		"position": "left"
	},
	"menu_cat_1": {
		"load-webpage": "no",
		"icon-awesome": " ",
		"icon-image": " ",
		"menu-badge": " ",
		"position": "left"
	},
  • load-webpage - is the loading content of web page
  • icon-awesome - icon name font awesome, user Fontawesome 4.7
  • icon-image - is the image URL.
  • menu-badge - is the badge (Hot, New, Top...) on menu items.
  • position - align menu item (left/right ).

MegaMenu Vertical

You can edit url images, links, text on MegaMenu in the language file en.json in the File Editor, find section wbThemewb_megamenuvertical

Main Slideshow / Carousel

Image Placeholder Slideshow: size images (1920x690)

Edit the slideshow in Admin page › Storefront › Home Page Carousel:

WB Banner

Note: You want to change number items of WB Banner

1.Go to admin › Storefront › My Themes, then click Advanced › Edit Theme Files of the current theme.

2.Edit Theme Files › templates\components\wbcomponents\sections\section.html

Set limitation = 2 then the banner shows 2 items

{{> components/wbcomponents/module/wb_banner/banner status=true prefix="slideshow" showContent=false limitation=2 class_sfx=""}}

New Arrivals

The New Products panel on your homepage displays the most recently added products in your store. It's a great way to promote new product lines and it lets your shoppers know about new additions quickly and easily.

Setting Module:

1. Change the Number of new products

2. Change the title of new products

the language file en.json in the File Editor, find section wbThemewb_extraslidernewest

Best Sellers Product

You want to see more Product Panels : Click here

Some themes have a section on the home page that features the store's top-selling products. This is an easy way to dynamically market your best-performing products right on your homepage.

The products that appear in this section are chosen dynamically from store sales data. They cannot be added manually.

Products are ranked by the total number of units sold and not by the number of orders. For example, a product that has a single order for a quantity of 100 will rank higher than another product that has 99 orders for a quantity of one.

Stock sold in other channels (like eBay, Amazon, Facebook, Pinterest, Square) are included in these calculations but not orders that have been canceled, refunded or used for testing purposes. If you want more control over which products appear on the home page, consider using the Featured Products panel.

Setting Module:

1. Change the Number of most popular products

2. Change the title of Best Sellers products

the language file en.json in the File Editor, find section wbThemewb_extraslidertop

WB Brand

You can edit url images, links, text on images in the language file en.json in the File Editor, find section wbBannerstatic_brand

"static_brand": {
	"banner1": {
		"enable": "true",
		"image": "webdav:site/home1/brand/logo_image1.png",
		"placeholderImage": "http://via.placeholder.com/210x100",
		"url": "#",
		"title": "brand1"
	},
	"banner2": {
		"enable": "true",
		"image": "webdav:site/home1/brand/logo_image2.png",
		"placeholderImage": "http://via.placeholder.com/210x100",
		"url": "#",
		"title": "brand2"
	}
	...
	
}
				

WB Newsletter Popup

You can configure Newsletter Popup, WB Module > SB Newsletter Popup



You can edit url images, links, text on images in the language file en.json in the File Editor, find section wbThemewb_newsletterpopup

"wb_newsletterpopup": {
	"image": " ",
	"placeholderImage": "http://via.placeholder.com/380x420",
	"subscribe": "Get Our Email Letter",
	"subscribe_intro": "Subscribe to the Outstock mailing list to receive updates on new arrivals, special offers and other discount information.",
	"subscribe_showpopup": "Do not show again!"
}
				

Footer

Contact Us

In your admin page › Store Setup › Store Profile, edit Store Address and Phone:

For email, Theme Editor › Header & Footer › Address Email : write email info

Social Follow us

In your admin page › Storefront Design › Design Options › Social Media, enter your social links:

Our Shops

You can edit url images, links, text on images in the language file en.json in the File Editor, find section wbThememenu_info_1

"menu_info_1": {
	"heading": "Our Shops",
	"row_1": {
		"title": "Product Support",
		"url": "#"
	},
	"row_2": {
		"title": "PC Setup & Support",
		"url": "#"
	},
	"row_3": {
		"title": "Services",
		"url": "#"
	},
	"row_4": {
		"title": "Term & Conditions",
		"url": "#"
	}
	...
}

Sign up for Newsletter

Make sure you tick on the option "Allow Newsletter Subscription" in admin page › Marketing › Email Marketing :

Payment Icon

To show/hide payment icons, go to Theme Editor › Payment Icons secitons, check or uncheck any icons you want to show or hide.