Настройка отображения тегов товаров

Правильно ли я вас понял, что этот код нужно вставить в редакторе дизайна в разделе category.html в нужно мне место? 

И как можно показывать, например, 10 самых популярных тегов, а остальные скрыть и показывать при нажатии на кнопку "показать еще" (или что-то подобное)?

Владимир, я установил плагин Редактор тегов. Он позволяет установить дополнительное облако тегов в категориях товаров и только этой категории:

{shopTageditorPlugin::cloud()} Вставил вместо вашего кода и получилось вот так:

Но страдает визуализация (теги отображаются подряд подчеркнутым текстом).
Как сделать так, чтобы все теги отображались как выделенный тег на следующем слайде ? Заранее благодарен.

Но у меня нет вот этого кода:

<a class="tags" href="{$wa_app_url}tag/{$tag.uri_name}/" style="{*font-size: {$tag.size}%; *}opacity: {$tag.opacity}">{$tag.name|escape}</a>

Вот код тегов, который у меня в sidebar.shop.plugins.html:

{*ТЕГИ*}
{if !empty($cloud) && empty($theme_settings.shop_plugin_tags_hide)}
<div role="tabpanel" class="tab-pane{if $active =='tags'} active{/if}" id="pane-tags">
<div class="padding7">
<div class="padding7 {$tags_cols}"{* style="font-size: {$font_size};"*}>
{/strip}
{if $theme_settings.shop_tags_cols == 'cloud'}
{foreach $cloud as $tag}
<a class="tags {if !empty($tags_qty) && $tag@iteration > $tags_qty} tag_hide hidden{/if}" href="{$wa_app_url}tag/{$tag.uri_name}/" style="{*font-size: {$tag.size}%; *}opacity: {$tag.opacity}">{$tag.name|escape}</a>
{/foreach}
{else}
<ul class="menu-v">
{foreach $cloud as $tag}
<li class="{if !empty($tags_qty) && $tag@iteration > $tags_qty}tag_hide hidden{/if}">
<a href="{$wa_app_url}tag/{$tag.uri_name}/" style="opacity: {$tag.opacity}">{$tag.name|escape}</a>
</li>
{/foreach}
</ul>
{/if}
{* ПОКАЗАТЬ / СКРЫТЬ ВСЕ ТЕГИ *}
{if !empty($tags_qty) && count($cloud) > $tags_qty}
<div class="text-center margin-top15">
<span class="tag_hide button highlight" data-target=".tag_hide"><i class="fa fa-plus"></i> <span class="dashed">[`Show more`]</span></span>
<span class="tag_hide button highlight hidden" data-target=".tag_hide"><i class="fa fa-times"></i> <span class="dashed">[`Hide`]</span></span>
</div>
<script>
$(document).ready(function () {
$('.tag_hide.button').on('click', function() {
$('.tag_hide').toggleClass('hidden');
});
});
</script>
{/if}
{strip}
</div>
</div>
</div>
{/if}
{*/ТЕГИ*}