Product features in lists

Product features in lists for Shop-Script

Features, SKUs, and tags in product lists.

Basic styles for accurate displaying of product features

Often these basic styles are sufficient after plugin installation. Add more styles if necessary to improve the way features are displayed or send an email to th eplugin developer.

table.listfeatures td {
    height: auto;
    width: auto;
    min-height: 0;
    min-width: 0;
    vertical-align: top;
    text-align: left;
table.listfeatures {
    padding: 0 0.5em 0.5em 0;
    font-weight: bold;
table.listfeatures td.value {
    padding: 0 0 0.5em 0;

Adding product features in test mode

When you add the plugin method call to your design theme for the first time, do it test mode so that incorrect CSS styles do not scare shoppers away before you are finished. To add the plugin method call in the test mode, include it in a {if}...{/if} condition as shown below:

{if $wa->get('test') == 'listfeatures'}
    {shopListfeaturesPlugin::display($p, $products)}

To view product features in the test mode, add parameter ?test=listfeatures to the URL of a storefront page. Example:

When you have finished settin up and testing the plugin, remove condition tags {if}...{/if} and leave only the plugin method call {shopListfeaturesPlugin::display($p, $products)}.

Adding feature list to individual product-viewing page

Add plugin method's call to the desired location in file product.html as shown below:

{shopListfeaturesPlugin::display($product, [$product])}

With the number of feature set ID set up in plugin settings, this code snippet will have its usual form:

{shopListfeaturesPlugin::display($product, [$product], 2)}

Displaying different feature sets in different product categories

1. Create several feature sets in plugin settings at "Plugins → Features in lists".

2. In section "Products → Categories", in each category's properties, add an arbitrary custom parameter with the number of the desired feature set; e.g.,


3. In the design editor, in section "Storefront", open file category.html and find line similar to the one shown below

{include file='list-thumbs.html' sorting=!empty($category.params.enable_sorting)}

Change it as follows:

{include file='list-thumbs.html' sorting=!empty($category.params.enable_sorting) set_id=$category.params.set_id|default:1}

This means that set #1 will be shown in categories where no value for custom parameter set_id has been specified.

4. In the file whose name is mentioned in that line; e.g., list-thumbs.html, add plugin call as shown below:

{if isset($set_id)}
    {shopListfeaturesPlugin::display($p, $products, $set_id)}

Displaying feature values only for products with empty product summary

Instead of adding basic plugin call

{shopListfeaturesPlugin::display($p, $products)}

replace the product summary displaying code

<p itemprop="description" class="description">{strip_tags($p.summary)|truncate:100}</p>

with the following snippet:

{capture name="listfeatures"}{shopListfeaturesPlugin::display($p, $products)}{/capture}
{if $p.summary}
    <p itemprop="description" class="description">{strip_tags($p.summary)|truncate:100}</p>

How to show the value of a selected feature separately from the list of other features

For example, a product’s brand name right below the product name and the rest of the features under the product summary.

1. Change the default HTML template in plugin sttings as shown below:

{$special_feature = 'brand'}
<table class="features listfeatures{if $set.class_name|default:''} {$set.class_name}{/if}">
        {foreach $features as $feature}
            {if $feature.code == $special_feature}<!-- feature start -->{/if}
            <tr{if $feature.class_names} class="{$feature.class_names}"{/if}>
                <td class="name">{$}</td>
                <td class="value">{if $feature.code == $special_feature}<!-- value start -->{/if}{$feature.values}{if $feature.code == $special_feature}<!-- value end -->{/if}</td>
             {if $feature.code == $special_feature}<!-- feature end -->{/if}

2. In a design theme template, add the following code line above any output of product features

{capture "listfeatures"}{shopListfeaturesPlugin::display($p, $products)}{/capture}

3. To show a selected feature, add this line in the desired location

{if preg_match('/<!-- value start -->(.+)<!-- value end -->/s', $smarty.capture.listfeatures, $m)}{$m[1]}{/if}

4. To show the rest of features, add this code line

{$smarty.capture.listfeatures|regex_replace:'/<!-- feature start -->.+<!-- feature end -->/s':''}