WEB SYSTEMS PRO
E-commerce platform
€19.80

* Price excluding VAT

SKU:WSP-207-PL
License
Web Systems Pro
Version
2025.05.25.1.wsp
Update
11/13/2026


Category Image


To add an image to a category, create a field with type IMAGE (Photos) and a key such as image. In the category editing interface, upload an image into the created field. To display the image, go to the theme editor (Shop -> Site -> Themes) and select the category.html file.


Find the lines:

{foreach $category.subcategories as $sc}.
<li><a href="{$sc.url}">{$sc.name|escape}</a></li>.
{/foreach}

And add the image output: <img src="{$sc.params.image}" />.

For example, like this:

{foreach $category.subcategories as $sc}.
<li><a href="{$sc.url}"><img src="{$wa_url}{$sc.params.image}" />{{$sc.name|escape}</a></li>.
{/foreach}


Ability to add various files to a product:
instructions, schematics, software, drivers, certificates, etc.


To add a file to a product, create a field with type FILE (file download field) and a key such as certificate. Then, in the product template, insert a condition at the desired location to display a download link for the file:

{if isset($product.params.certificate)}
<a href="{$wa_url}{$product.params.certificate}">Download product certificate</a>
{/if}

To add an IMAGE to a product, create a field with type IMAGE and a key such as scheme.

Then, in the product template, insert a condition to display the image:

{if isset($product.params.scheme)}
<img src="{$wa_url}{$product.params.scheme}" />
{/if}

Or open the image via a link:

{if isset($product.params.scheme)}
<a href="{$wa_url}{$product.params.sheme}"><img src="{$wa_url}{$product.params.scheme}" /></a>
{/if}


Additional Category Description


To add an additional description, you can use fields of type TEXTAREA or HTML. Create a field with a key such as description2, for example. Then, edit the theme in the category.html file.

Place the description in the desired location: {$category.params.description2}


Using Different Design Themes in Categories, Products, or Pages


To enable forcing specific design themes, create a field with type SELECT and a key such as type. Add values with the names of theme files, for example: section, subsection, table, two_column, etc.

Then create files using the pattern action.type.html, where action is a prefix (category, product, page). For example, for categories: category.section.html, category.subsection.html, category.table.html, category.two_column.html. Just make sure that such a file does not already exist in the current theme before creating field values! Move all the code from the main action file (category.html, product.html, or page.html) into a file named action.default.html, for example for a category: category.default.html. Then, in the action file, insert conditions to display your custom themes instead of the default code, and action.default.html will now be the main template.

Code for the main action file in the category example:

{$category_file = "category.default.html"}
{if isset($category.params.type) && !empty($category.params.type)}
{$category_file = "category.`$category.params.type`.html"}
{/if}
{include file=$category_file}

Now, when an option is selected, a specific theme will be loaded according to the chosen type, or the default theme category.default.html will be used.


Displaying or Hiding Menu Items from Categories or Pages


Create a field with type SELECT and a key such as: top_menu. Add two options: 1 and 0 - to show or hide in the menu. For this example, we will use the top menu consisting of store pages, but you can apply the same to any other menu.

Menu code:

{foreach $shop_pages as $page}
<li{if strlen($page.url)>1 && $wa->currentUrl()|strstr:$page.url} class="selected"{/if}>
<a href="{$page.url}">{$page.name}</a>
</li>
{/foreach}

Then add a display condition directly into the menu:

{if isset($page.top_menu) && $page.top_menu=='1'}
INSERT HERE THE <li> TAG CODE
{/if}

As a result, the code will look like this:

{foreach $shop_pages as $page}
{if isset($page.top_menu) && $page.top_menu=='1'}

<li{if strlen($page.url)>1 && $wa->currentUrl()|strstr:$page.url} class="selected"{/if}>
<a href="{$page.url}">{$page.name}</a>
</li>
{/if}
{/foreach}

Or, conversely, use an exception condition:

{if isset($page.top_menu) && $page.top_menu=='0'}
{else}
INSERT HERE THE <li> TAG CODE
{/if}


Forcing a Custom H1 Header Different from the Main Page, Product, or Category Title


To set a different header, create a field of type INPUT (text field) with the key h1. In the theme template file category.html, product.html, or page.html, depending on the action, locate the variable name: {$category.name}, {$product.name} or {$page.name}, which is usually wrapped in an <h1> tag, but may vary. Replace this variable with a condition; here is an example using a product:

{if isset($product.params.h1)}
{$product.params.h1}
{else}
{$product.name}
{/if}


Creating a "Important" Block for Pages with Text or HTML Code, Usually Located in a Separate Project Column


To create a block, create a field of type HTML (visual code editor) with the key left_block. Then, in the theme template, create a block where the content will be replaced. In my example, I will use pages. Then wrap the block in a parameter condition:

{if isset($page.left_block)}
INSERT HERE THE START OF THE UNIT CONTAINER<div>
{$page.left_block}
INSERT HERE THE END OF THE UNIT CONTAINER</div>
{/if}

To define the same text without duplicating it across pages, after entering different values on various pages, change the field type to SELECT (dropdown), and all values previously set on pages will be imported as selectable options, allowing you to later choose from predefined block texts. Or use a SELECT field from the beginning.


Product Note or Second Description


Note on a product is created similarly to the Additional Category Description or the "Important" block.