Product features in lists

Product features in lists for Shop-Script

Features, SKUs, and tags in product lists.

4.6 38 ratings

7 days free

To install free, open the plugin in the Installer app in your Webasyst backend. Free trial is available in the Webasyst Cloud only.

Your review

Show important product features to your customers directly in product lists (categories), do not make them open individual product pages to view all details!

Plugin “Product features in lists” will enable you to display product features (also SKUs, tags, categories, subpages) in the following parts of your online storefront:

— in product categories
— in search results
— in static and dynamic product sets
— in the shopping cart
— in recommended product lists (upselling & cross-selling)

Plugin's functionality

  • Displayed in product lists are all types of product features:

    - Custom text (input)
    - HTML (textarea)
    - Yes/No toggle (boolean)
    - Color
    - Weight
    - Length
    - Value
    - Range
    - Value × Value [× Value]
    - Select
    - Checkboxes (multiple choice)
    - Divider
    and additional important product properties:
    - SKUs
    - Tags (can be set up to appear as links)
    - Category names (can be set up to appear as links)
    - Links to products' subpages

  • For features with selectable values (checkbox, select, color) there is an option to display each value as a link pointing to the list of products with the same value selected. Sort order of displayed products is adjustable in plugin settings.
  • For each of your storefront, you can choose which of available product features must be displayed in product lists.
  • You can display different sets of features in various parts of your storefront: in the home page, in categories and lists, in the shopping cart.
  • Option to limit number of displayed values for each feature.
  • You can show different features in different product categories.
  • Built-in editor to modify default HTML template used to display feature values.
  • For "Color" type features there is an option to display only color markers, without color names.
  • For multi-value features there is an option to specify custom value delimiters.
  • The plugin is careful about utilizing database resources: for each product list only 2 additional SQL queries are executed.

Plugin usage guidelines

To display feature values in product lists, you need to add a call of plugin method shown below to the template file which is used to generate product lists in your design theme:

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

How to correctly add plugin method call

  1. The line containing method call must be added inside Smarty cycle {foreach $products as $p}...{/foreach}, which is used to iterate through product lists, as shown in this example:

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

  2. As parameters for method {shopListfeaturesPlugin::display($p, $products)} specify first a variable corresponding to an individual product (in this example $p) and after it (!) a variable corresponding to the entire product list (in this example $products). Names of such variables are usually specified in the first line of the cycle:

    {foreach $products as $p}

1. Select feature which you want to display in product lists and categories

Upon plugin installation, open backend section “Plugins” and select plugin “Product features in lists”. On the page, select one of your online storefronts, enable the desired features, and save the settings. If you have more than one storefront, then you need to repeat this step for each of them. Note that you can create multiple sets of product features, which you can display in different parts of your storefront.

2. Add a method call to design theme templates

If you have created multiple feature sets for each storefront, then add appropriate set ID next to plugin method call as shown below:

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

If set ID is not specified, then 1st set is used by default.

Immediately upon adding the call of plugin's method to a template, check how product features are displayed in the storefront. If necessary, adjust its appearance using CSS (see section “How to modify design of product features table” below).

Product sets/categories

Add a call of plugin's method to the template which is used to generate product lists (e.g., list-thumbs.html in basic design themes of Shop-Script):

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

Recommended products

Add the following line to template file of recommended products e.g., list-thumbs-mini.html):

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

Shopping cart items

Add the following line to template file of the shopping cart (cart.html):

{shopListfeaturesPlugin::display($item, $cart.items)}

The pictures above show approximate locations where a call of plugin's method can be added to template files of basic design theme “Default”. In other design themes, the plugin is installed in a similar fashion.

How to modify design of product features table

These tips are useful if you are using default HTML template.

Use the following CSS selectors:

.listfeatures.features { } /* product features table */
.listfeatures.features .name { } /* feature names */
.listfeatures.features .value { } /* feature values */

If you have specified a CSS class name in a feature's options (e.g., myclass), then you can change that individual feature's appearance using CSS selectors similar to these:

.listfeatures.features .myclass .name { } /* feature name */
.listfeatures.features .myclass .value { } /* feature value */

All products of this developer