Technic Theme

The current situation forces us to take many radical actions. One of them may be opening an online store. Even if you own a grocery store, just do it! And everything will be easier with the new Food Theme.

How to create a mega menu

or top menu category:

1. Set generic attribute with key: "gallery" and value: "true".
Your gallery menu was started.

2. Next set generic attribute with key: "cols" and value: "1","2","3","4" or "5". 
That will be the number of columns in your gallery menu.

3. If you want you can set a generic attribute with key: "gallery_wide" and value: "true".
Your gallery now will be in a wide 100% container.

4. If you want you can set a generic attribute with key: "showGalleryImage" and value "true".
Now if you upload images for this category, that will be shown like a background for this gallery menu.

Subcategories in the gallery:

1. If you want you can set generic attribute with key: "showImage" and value: "true".
Now if you upload image for this subcategory you saw that picture.

Featured Products from Categories

1. In admin panel go to Configuration > Settings > All settings and add new records:

displayorderhomepage.cf_pp_xl - (number)*
displayorderhomepage.cf_pp_lg - (number)*
displayorderhomepage.cf_pp_md - (number)*
displayorderhomepage.cf_pp_sm - (number)*
displayorderhomepage.cf_pp_col - (number)*

* the number is the width of the column in the bootstrap in terms of screen width (ex. "displayorderhomepage.cf_pp_xl" - "12" means col-xl-12(100% width))

Featured Products from Manufacturers

1. In admin panel go to Configuration > Settings > All settings and add new records:

displayorderhomepage.mf_pp_xl - (number)*
displayorderhomepage.mf_pp_lg - (number)*
displayorderhomepage.mf_pp_md - (number)*
displayorderhomepage.mf_pp_sm - (number)*
displayorderhomepage.mf_pp_col - (number)*

* the number is the width of the column in the bootstrap in terms of screen width (ex. "displayorderhomepage.cf_pp_xl" - "12" means col-xl-12(100% width))

Main Slider

1. In installed Swiper Slider click "Add New" button.
2. In opened window customize your slide like you want, but for best results upload an image as a background,
for Footer upload image(it's foreground image), in header and body set text or button.
3. For the design you have predefined classes for buttons:
- btn btn-outline-black
- btn btn-outline-black brown-accent
- btn btn-outline-black orange-accent

HomePage Products

1. In admin panel go to Configuration > Settings > All settings and add new records:

displayorderhomepage.hp_xl - (number)*
displayorderhomepage.hp_lg - (number)*
displayorderhomepage.hp_md - (number)*
displayorderhomepage.hp_sm - (number)*
displayorderhomepage.hp_col - (number)*

* the number is the width of the column in the bootstrap in terms of screen width (ex. "displayorderhomepage.cf_pp_xl" - "12" means col-xl-12(100% width))

HomePage Recommended Products

1. In admin panel go to Configuration > Settings > All settings and add new records:

displayorderhomepage.rp_xl - (number)*
displayorderhomepage.rp_lg - (number)*
displayorderhomepage.rp_md - (number)*
displayorderhomepage.rp_sm - (number)*
displayorderhomepage.rp_col - (number)*

* the number is the width of the column in the bootstrap in terms of screen width (ex. "displayorderhomepage.cf_pp_xl" - "12" means col-xl-12(100% width))

HomePage Suggested Products

1. In admin panel go to Configuration > Settings > All settings and add new records:

displayorderhomepage.sp_xl - (number)*
displayorderhomepage.sp_lg - (number)*
displayorderhomepage.sp_md - (number)*
displayorderhomepage.sp_sm - (number)*
displayorderhomepage.sp_col - (number)*

* the number is the width of the column in the bootstrap in terms of screen width (ex. "displayorderhomepage.cf_pp_xl" - "12" means col-xl-12(100% width))

HomePage New Products

1. In admin panel go to Configuration > Settings > All settings and add new records:

displayorderhomepage.np_xl - (number)*
displayorderhomepage.np_lg - (number)*
displayorderhomepage.np_md - (number)*
displayorderhomepage.np_sm - (number)*
displayorderhomepage.np_col - (number)*

* the number is the width of the column in the bootstrap in terms of screen width (ex. "displayorderhomepage.cf_pp_xl" - "12" means col-xl-12(100% width))

HomePage Categories

1. Set generic attribute with key: "alternativeName" and type some value.
Now if category is set on homepage, under name of that category you will see "alternativeName"
2. You can change color of "alternativeName" by setting a generic attribute with key: "categoryColor" and value in hex or rgb code (ex. "#8e5b42").

Bestsellers

1. If you want you can set a generic attribute for bestsellers products.
Go to the product and set a generic attribute with key: "LandingName" and some value.
Now if a product is a bestseller will get a special name before his name in the bestsellers section.

Badges for product

1. To set badge on product you must type it in tagged code (ex. <span class="badge badge-info">HIT</span>)

Catalog

1. For categories you can set 2 Templates:
- Products in Grid or Lines (with sidebar)
- Products in Grid (with toggled sidebar)

Product

1. For products you can set 3 Templates:
- Simple product (recommended for wide pictures)
- Simple product right (recommended for square/tall pictures)
- Grouped product (with variants)

2. If You can add set generic attribute for a product with key: "deliveryHour" and value: "0-24" (hour number).
Now in the product page, you will see information when the product will be sent to customers who buys this product.

Missing Resource Strings

ShoppingCart.Mini.Quantity - Qty:
products.overview - Overview
deliverydate.first - If you make order in
deliverydate.second - We send you this product today.
deliverydata.third - We send you this product tomorrow.
blog.moreinfo - READ MORE
Footer.Usefullinks - Useful Links
privatemessages.totalunread - {0}