Расположение подкатегорий

Можно правкой шаблона, либо сделать свой шаблон отображения для категорий. Вы можете конечно, скопировать шаблон из темы по умолчанию например себе в тему, тогда там будет нужная структура. Но стили в вашей теме настроены для отображения как сверху. Т.е. нужно сменить шаблон и настроить стили.
Как вариант, можно скопировать не только шаблон этого блока, но и стили этого блока из нужной Вам темы.

Я могу Вам дать всё необходимое, но там понадобятся правки и с Вашей стороны, т.к. стиль надо будет подогнать под Вашу тему, там не будет 100% результата сразу. Вы это сможете сделать?

У вас шаблон который отвечает за отображение категорий находится в
/templates/Ваша тема/moduleview/catalog/blocks/category/category.tpl
именно он выводит Ваши категории.
В теме по умолчанию категории выводятся слева. Оттуда мы их и возьмём.
Вам надо взять шаблон из
/modules/catalog/view/blocks/category/collapse_category.tpl
и скопировать его в
/templates/Ваша тема/moduleview/catalog/blocks/category/

После этого открываем его и заменяем текст

{include file="%catalog%/blocks/category/category.tpl"}

на

{include file="%catalog%/blocks/category/left_category.tpl"}

Далее копируем
/modules/catalog/view/blocks/category/category.tpl
в
/templates/Ваша тема/moduleview/catalog/blocks/category/
и переименовываем category.tpl в left_category.tpl

С шаблона всё. Теперь надо взять стили. Все стили в каждой теме хранятся в файле style.css в папке resourse в Вашем случае это
/templates/Ваша тема/resource/css/style.css

Вам надо открыть файл
/templates/default/resource/css/style.css
И взять из него стоки отвечающие за отображение левого меню. А именно:

.folding .category {
    display:none;
}

.folding.on .category {
    display:block;
}

.folding .category {
    margin-top:20px;
    margin-bottom:20px;
}

и

.category li{
    position:relative;
}

.no-touch .category > li:hover > a {
    background: white;
    color: #2BBFBD;    
}

.no-touch .category li:hover ul {
    display:block;
}

.category ul {
    position:absolute;
    display:none;
    padding:10px;
    left:100%;
    top:0;
    border:1px solid #dcdcc9;
    z-index:30;
    background: white;
    box-shadow:0 0 10px #ccc;
    -moz-box-shadow:0 0 10px #ccc;
    -webkit-box-shadow:0 0 10px #ccc;
}

.category ul.visible {
    display:block;
}

.touch .category ul.visible {
    display:none; /* touch screen hover disable */
}

.category ul li a {
    font-size:14px;
    line-height:normal;
    padding:3px 10px;
}

.category ul li a:hover {
    background: #2BBFBD;
    color: white;
}

.category .twoColumn {
    width:340px;
}

.category .twoColumn li {
    width:170px;
    float:left;
}

.category .threeColumn {
    width:510px;
}

.category .threeColumn li {
    width:170px;
    float:left;
}

.category ul .corner {
    position:absolute;
    top:7px;
    left:-9px;
    width:9px;
    height:17px;
    background: url(../img/menu_corner.png) no-repeat;
}

.category li a {
    display:block;
    padding:5px 7px;
}

.category li.over > a,
.category li a:hover {
    background: white;
    color: #2BBFBD;
}

Объединяем это и вставляем в самые конец стилей в нашей теме:
/templates/Ваша тема/resource/css/style.css

Сохраняем с сбрасываем кэш на сайте.

Теперь, нам надо вставить сам блок в левую колонку. Для этого переходим в Веб-сайт->Конструктор сайта->Просмотр категории продукции.
И вставляем в левую колонку новый блок с категориями. Он называется "Список категорий" из раздела "Каталог товаров". В открывшимся окне в поле шаблон указываем путь к нашему новому шаблону "collapse_category.tpl". Остальные параметры как Вам надо.
Сохраняем и снова сбрасываем кэш.

Вроде на этом всё. Вам останется лишь настроить стили под свою тему оформления.