Multi-Shop

Multifunctional concise Webasyst theme template

Attention!

To remove DEMO mode, go to Theme Settings:

Shop->Storefront->Select Multi-shop in the dropdown list->Theme settings

Select a value for the demonstration mode "Disable". Click "Save".

Content

1. Header
1.1 Flying Cart
1.2 Phone
1.3 Logo and Slogan

2. Horizontal Categories Menu
2.1 Drop-Down List
2.2 Drop-Down Menu
2.3 Combine Menu
-Custom HTML in categories
2.4 Individual view for each category(menu, list or combine)
2.4.1 Root categories
2.4.2 Child categories
2.4.3 Tab "More"

3. Horizontal Menu of Information pages and Applications

4. Slider
4.1 Products slider
4.2 Photos and banners slider
4.3 HTML-slider

5. Catalog
5.1 Products view
5.2 Catalog products view (lazyloading / products per page)

6. Product page
6.1 Tabs
6.2 Images
6.3 Selectable features

7. Badges

8. News block
8.1 Preview image
8.2 External link to website/blog

9. Products filter

10. Footer

11. Banners

12. Payment icons

13. Images thumbs

* * * 1. Header * * *

1.1 Flying Cart

Flying cart shows the products that the user has put into a shopping cart. User can see the image of products, their names, he has the opportunity to change items quantity and remove unnecessary them from the shopping cart. He also has an information about the current discount.

All these functions are available from any page of the website, making it easier to manage the cart and allows at any time to make changes!

You can change the number of displayed products in flying cart:

Shop -> Storefront -> Design -> Theme settings.

Field "Number of products inside flying cart", use digits.

1.2 Phone

For changing the phone number select

Shop -> Settings -> General settings.

Edit field "Phone".

If You want to specify another phone number in template, with saving the current, go to

Shop -> Storefront -> Design -> Theme settings

And complete the field "Pattern phone".

To completely remove the output of phone go to

Shop -> Storefront -> index.html.

Find

<!-- Телефон / Phone -->...<!-- Конец / End -->

and remove it.

1.3 Logo and Slogan

Logo parameters : width - 261px; height - 88px.

Maximum logo parameters: width - 370px; height - 90px.

Keep in mind that when exceeding the maximum parameters of the logo, you may have problems with layout template.

To change the logo of the website , you need go to:

Shop -> Storefront -> Design -> Theme settings.

To change the slogan edit field "Company slogan"

* * * 2. Horizontal Categories Menu * * *

Categories which you have created in “Store” are displaying in Horizontal Categories Menu.

There are 3 types of horizontal menu: Drop-Down List, Drop-Down Menu, Combine. Also you can customize the display of each category.

2.1 Drop-Down List

Drop-down list has a very flexible categories configuration, but for this you will need to work with each category in order to obtain the desired result.

1) 1) Root categories

Valid Custom parameters:

columns=groups

Specifying this parameter to the root category, you get ability to group the subcategory columns manually.

In order to group subcategories create group IDs.

Example:

We have 6 subcategories: "Серьги", "Подвески и колье", "Запонки", "Детские украшения", "Аксессуары для волос", "Шкатулки для украшений". We want to get the following:

Our steps from the beginning:

  1. Go to Shop->Products, Click on your category, select "Category settings":

    In the "Custom parameters" specify: columns=groups. Thus, giving to understand that this category will manually grouping:
  2. In the "Custom parameters" of subcategories "Серьги", "Детские украшения" specify: column_group=mycolumn.
    Note, mycolumn is any Latin name, which is the ID of uniting subcategories.
  3. In the "Custom parameters" of subcategories "Подвески и колье", "Запонки", "Шкатулки для украшений" specify: column_group=secondcolumn.
  4. Subcategory "Аксессуары для волос" do not change, because we are not going to combine it.

Thus subcategories will be grouped into three columns.

columns=4

When you specify the number of the parameter columns for the root category, all subcategories will be grouped automatically. You do not need to do anything.

That's what happens if we specify columns=4 instead columns = groups for root category "Украшения":

maximum number of columns parameter is 8 (maximum template width).

no parameter

If the root category has no parameter columns, grouping would happen automatically.

2) Child categories

If your subcategories have many subsubcategories, you have the opportunity to divide them into 2 subcolumns.

double_column=1

Specify this parameter in the subcategory, and all nested categories will be divided evenly and will take two columns in the list of all categories.

Example:

Specify in "Custom parameters" of category "Для него" double_column=1 and get:

3) Root categories and subcategories

All categories can have parameter collapsible. It means that if the nested categories have subcategories, then they can be fully disclosed (show the entire tree structure of categories) or closed.

It is necessary to remember the main rule that gives priority to the parameter specified in the nested categories. For example, if the root category will have the parameter collapsible=1, and one of the sub - collapsible=0, then in the list of categories nested category will have the value of the parameter collapsible 0.

What does this parameter?

collapsible=1

For category "Для него" we have collapsible=1:

All subcategories are closed.

collapsible=0

For category "Для него" we have collapsible=0:

All subcategories will be opened.

Imagine the situation that You want to close the category "Профессиональные спортивные", for this purpose in settings of this category, add in the "Custom parameters" value collapsible=1. Thus, You will close it. category:

2.2 Drop-Down Menu

Display categories like drop-down menu:

2.3 Combine Menu

Custom HTML in categories

When using the Combine menu type You have the ability to embed in displaying categories of the first level your own HTML. It can be banners, products, anything!

Please note! Even if no child categories You can add any HTML code into the category of first level.

Available upper block and lower block of categories

How does it work?

In "Custom parameters" you can use 2 options:

  1. category_top_html - upper block
  2. category_bottom_html - lower block

These values must be assigned a Block ID created in the application Site. In the Block and will place Your HTML.

Example:

1) Choose the category of the first level(not root) where you want to put the banner.

2) Create a block with the banner: Site - Blocks

3) In the necessary category of the first level click "Category settings" and in the "Custom parameters" write down:

The result for:

а) Category without childs

б) Category with childs

In one category, You can use both upper and lower block.

Attention! The images are placed in category will be stretched over the width drop-down box. To change this behavior you can in the file custom.css. Find rule
.dropdown-combine-wrap ul.menu-v.l0 ul.menu-v.l1 > li.category-html img {
    min-height: 100%;
    width: 100%;
}
and remove the line "width: 100%;"

2.4 Individual view for each category(menu, list or combine)

2.4.1 Root categories

Categories have three display type described in paragraphs 2.1, 2.2, 2.3.

You can customize the display of each category to better view subcategories.

menu_type

Use it in "Custom parameters" of category.

Values of the parameter:

  1. list - drop-down list (paragraph 2.1)
  2. menu - drop-down menu (paragraph 2.2)
  3. combine - combine menu (paragraph 2.3)

Example: menu_type=list

2.4.2 Child categories

Child categories also have parameter menu_type, but it can have 2 values: list and menu.

This example demonstrates that category "Профессиональные с длинным" has parameter menu_type=menu and category "Мокасины" - menu_type=list

You should understand! These parameters will work only if You use for root categories display type "Drop-Down List" or "Combine Menu".

2.4.3 Tab "More"

This tab can be changed in "Theme settings".

* * * 3. Horizontal Menu of Information pages and Applications * * *

You certainly have pages that should be always displayed.

In order to create such pages with individual icons, you need to:

  1. Create new page. See example:
  2. While creating a page click "More" and specify the name of inactive icon, active icon and parameter topmenu=1 in "Custom parameters".
    Notice, maximum icon size: width - 35px; height - 20px.

How to upload active/inactive icons?

Go to "Site" -> Files and upload icons to themes/multishop/img/colors/COLOR_OF_YOUR_THEME/icons/:

If you don't have the tree of folders, go to Site-Design, choose Multishop, add space in template index.html and Save. After that actions folders should be created.

Available icons:

  • blog.png, blog-active.png
  • comment.png, comment-active.png
  • contacts.png, contacts-active.png
  • delivery.png, delivery-active.png
  • payment.png, payment-active.png
  • photo.png, photo-active.png
  • shop.png, shop-active.png
  • site.png, site-active.png

* * * 4. Slider * * *

Theme template "Multishop" gives You the possibility of creating sliders without using additional plug-ins or applications.

You just need to make some changes in the template.

There are 3 types of slider:

  1. Products slider.
  2. Photos and banners slider (app Photos).
  3. HTML-slider

4.1 Products slider

There are four modes of selection of products for slider:

  • set/bestsellers - the list if products with ID bestsellers
  • category/437 - the list of products from category with ID 437
  • tag/jewellery - the list of products with tag jewellery
  • prepared array

Here is you product sets:

ID of category:

The first three modes have the same construction of call:

{include file="slider.html" slider_id="12" search="set/bestsellers" search_count="7" name="My bestsellers"}, where

  • file="slider.html" - required parameter that specifies the path to the template slider.
  • slider_id="12" - required parameter that specify slider ID. If you use more than one slider on page, parameters slider_id should be different.
    ATTENTION! Use values for slider_id > 10
  • search="set/bestsellers" - list of products with ID bestsellers. The field search can have category/437 or tag/jewellery
  • search_count="7" - number of products to get. Default value is 10
  • name="My bestsellers" - title before slider.

Prepared array means that you get products in template and passing them to slider. Example:

{$crossselling = $product->crossSelling()}
{include file="slider.html" slider_id=13 products=$crossselling}, where

  • products=$crossselling - prepared array

Available parameters:

  • slider_id - unique slider ID (required)
  • search - mode of getting products (required)
  • search_count - quantity to get
  • name - title before slider
  • auto - auto scroll. Available values: true, false.
  • speed - scrolling speed(only when you use auto scroll). Measure in milliseconds.

Example,

{include file="slider.html" products=$crossselling speed="5000"}

In "Theme settings" you can control sliders on the main page of app Shop.

4.2 Photos and banners slider

Slider use free application Photos.

Follow the steps:

  1. Go to app "Photos", create album, specify "Manage access": "Private".
  2. Upload photos to the recent created album.
    ATTENTION, photos should have "Manage access": "Public"!
  3. If you would like to create slide with link to some page, you should print it (link) in the description of photo.
  4. Remember the Id of album.
  5. Insert slider to the template.

There are 2 modes of getting photos to slider:

  • album/1 - list of photos from album with ID 1
  • tag/jewellery - list of photos with tag jewellery

Use code: {include file="slider.html" photos ="album/1" width="1300"}, where

  • photos ="album/1" - list of photos from album with ID 1. Field photos can contain tag/jewellery
  • width="1300" - width of photo, which would be generated and inserted to slider automatically. Default value 755px. Check that the application supports max width of photo and custom-sized photo thumbnails on fly is enabled.

Available parameters:

  • photos - mode of getting photos (required)
  • search_count - quantity of photos
  • width - width of photos
  • height - height of photos
  • fullwidth=1 - fullwidth mode. Image will be streched to fill the entire width of the block.

In "Theme settings" you can control photos slider on the main page of app Shop.

4.3 HTML-slider

Template home.html demonstrates how to create your own slider. You can edit html-code to any you need. Slider begins with comment <!-- CUSTOM SLIDER -->.

* * * 5. Catalog * * *

5.1 Products view

Product can be displayed like "thumbs" or "table".

The user can select the type of display products.

Also You can set the view type of the products by default, the user will see, first logged on to your site.

Follow

Shop -> Storefront -> Theme settings -> Catalog products view

5.2 Catalog products view (lazyloading / products per page)

Products per page means that the user will be loaded certain number of products in the catalog. To view the rest he needs to go to pages 2,3,4, etc.

"Lazyloading" - dynamic loading of goods from other pages. The user will always stay on the same page.

Also you can use plugin "Products per page". With its help the user can select which display to use. The template provides a design for the plugin.

* * * 6 Product page * * *

6.1 Tabs

On the product page presents detailed information about the product, containing:

  • Product description
  • Reviews
  • Features
  • Custom pages

All items are dynamically loaded.

Custom pages can be added in "Pages", while editing the product.

6.2 Images

Use images 880х1080px or more with the similar aspect ratio.

This is necessary for good presentation of the prodcuts.

6.3 Selectable features

if your Selling mode is "Selectable features" you can display product features in 2 ways:
a) Display all values inline

b) <select> HTML control

You can change it in Theme settings.

If you want to use for some product its own Selectable features mode, then use parameter selectable_features, which has 2 values: inline and select. Specify this parameter on product page in "Descriptions" inside the field "Custom parameters".

Example, selectable_features=inline

* * * 7. Badges * * *

Each product can have it's own badge:
  • New 
  • Bestseller
  • Low price
  • String number of sale
  • Any text

To edit badge go to product, choose "Images", click on image, and you'll see:

On website you'll see:

In the same way you can use badges "Bestseller" or "Low price".

If You want to explicitly specify the size of the discount, You will need when selecting badges, click on "Other" and insert the following code:

<div class="badge sale"><span>-25%</span></div>

where "-25%" - any number of discount.

The result is:

If You want to use any text on the badge, then use class custom for the badge:

You can set the background color of badges. Add one of this to "custom" class: :

  • black
  • red
  • orange
  • yellow
  • green
  • lightblue
  • blue
  • purple
  • pink

You can create your own color:

  1. Edit custom.shop.css, add this lines at the end of the file:

    .badge.custom.dirtyred { background-color: #ee6f1a;}
    .badge.custom.dirtyred span { color: #d9ffc0;}

    dirtyred -class name
    #ee6f1a - background color of badge
    #d9ffc0 - text color
  2. Click "Set custom badge"
  3. Then add class "dirtyred" instead "red" on prev image

* * * 8. News block * * *

On the main page of the Shop there is a news block, which is created by the Blog application.

How to create it?

  1. Create new Blog.
  2. Добавьте в него Ваши новости.
  3. Remember the ID of blog.
  4. Go to Shop -> Storefront -> Theme settings and print the ID inside the field "News blog-ID", ninth paragraph

8.1 Preview image

You can use preview images to each post in the main page of the Shop:

  1. Go to Blog
  2. Click on the post you need
  3. Find "Meta" on the right sidebar, click "edit", in the "Custom parameters" specify preview, which has to contain absolute path to the preview image. Example:
    preview=http://mydomain.ru/wa-data/public/shop/themes/some_images/myimage.jpg
  4. Click Save

Don't upload large photos, use width 250px.
You can upload photos in the Site-Files

8.2 External link to website/blog

If you would like your news go to some other website or blog, you can use one more parameter external_link, which should contain link to external website. Don't forget to specify http:// or https://.

Example:

external_link=http://goaway.ru/

* * * 9. Products filter * * *

To use a filter in the catalog, you have to go the settings of category and checked the flag "Allow product filtering".

To put the filter at the top or bottom of the sidebar go to "Theme settings".

Filter use maximum price: first 1000 products analyze from the current category. One of them has maximum price, which put to the filter value. If you category has more than 1000 items, you can specify maximum filter price by yourself.

In "Custom parameters" of category specify int value for filter_max, which would be the maximum filter price value for the category.

* * * 10. Footer * * *

In the template footer.html you can edit website footer.

Also see Theme setting for more options.

Footer can be:

  • big
    It means the footer will have height 305px. It will have 3 columns with info pages, which can be changed in footer.html.
  • small
    Height - 120px. Without columns.

* * * 11. Banners * * *

Main page of Shop has banners, which can be changed.

To insert your own information to the Big banner, go to Site - Blocks. Create block with ID multishop.big.banner. That block can contain your HTML and CSS.

If you would like to remove Big banner, go to Shop - Storefront - home.html, find block <!-- Big banner --> ... <!-- End --> and remove it.

To control small banners use Theme settings and app Photos. Each banners can have internal/external link. More information about app Photos you can find here: 4.2 Photos and banners slider

* * * 12. Payment icons * * *

In Theme settings you can choose payment icons you want to display in the footer. Number of visible icons 8.

If you want to display icons in other places of website, use code:

<i class="payment-icon %ICON CLASS%"><i>,
where %ICON CLASS% - one of the available payment icons

Available icon classes:

  • qiwi
  • rbk-money
  • robokassa
  • privat-bank
  • sberbank
  • skrill-moneybookers
  • telemoney
  • unistream
  • visa
  • webmoney
  • western-union
  • yandex-money
  • alfabank
  • american-express
  • assist
  • payu
  • cirrus
  • contact
  • diners-club
  • elecsnet
  • intellectmoney
  • jcb
  • maestro
  • mail-money
  • mastercard
  • migom
  • moneymail
  • mts-bank
  • paypal
  • chronopay

Example:

<i class="payment-icon webmoney"><i>

* * * 13. Images thumbs * * *

Theme template use thumb sizes:

  • 77x96
  • 100x100
  • 148x182
  • 200x245
  • 350xАвто
  • 880x1080
  • 970xАвто

It is recommended to upload images to such proportions that the ratio of width to height equal to 0,814