Popular products for category page

Popular products for category page

Generates a list of popular products for the selected category based on the "Best Selling" items.

Wireframe

Popular Products

Code Sample

  1. Connect to your website fileserver via FTP.

  2. Navigate to /assets/themes/THEME-NAME/ and check that your theme contains a list folder. Within the list folder there should be be two folders: Content, and Product. Within these folders there will be various files.

Of importance to this tweak is the file: THEME-NAME/templates/list/product/template.html

  1. If the file above does not exist in your fileserver you should follow the instructions located on the list tag page to add the files required for this tweak to work.

Please Note: If you are an established Neto customer, or have had custom work completed on your theme you may have customisations within the thumbs folder of your theme. In order to keep your templates up to date we suggest copying your current thumbs template into the corresponding list folder.

The file you need to copy for this tweak is: /assets/themes/THEME-NAME/templates/thumbs/product/template.html

Once you have copied all the code from this file, navigate to [theme name]/templates/list/product/template.html and replace all of the code in this file with the code copied to your clipboard.


  1. Navigate to THEME-NAME/templates/cms/category.template.html

  2. Locate where you would like to place the Popular Product thumbnails. Usually these products are added directly above the main products section. If this is the case you should find the following code [%THUMB_LIST type:'products' limit:'[@config:THUMB_LIMIT@]'%] and place the new code directly above it.

This is the code that outputs your most popular products:

[%list type:'product' template:'' filter:'content=[@content_id@]' sort:'top_sellers' limit:'4'%]
    [%param *header%]
        <h2>Popular Products</h2>
        <div class="row">
    [%/param%]
    [%param *footer%]
        </div>
        <hr>
    [%/param%]
[%/list%]

Please Note: The [%list%] function operates based on the values set in the function's parameters. The following parameters are used in this [%list%]:

  • type : The content type you'd like to target for the menu.
  • filter: Filters the list to a specific content type and to the current pages sku.
  • sort: Determines the order of the [%list%].
  • limit: Sets the limit of results. If this parameter is omitted all possible results will be output.

Was this article useful?

Be notified when this page is updated. Optional.