Product Widget

What is a Product Widget

A product widget is an interactive block that allows you to display dynamic product selections on an online store page. It can show, for example, popular items, similar products, recommended or recently viewed.

Using the widget generator, you can precisely configure which products are displayed — by category, price range, name, or even specific product IDs. You can also choose the display type: slider, grid, mosaic, and other visual formats.

You can create your own product widget via the link:
https://hotlist.biz/en/page.php?p=submit_catalog_page&subpage&menus&generator&shop_slider_products

Examples of Product Widgets in Different Implementations

Type 1 — Swipe (swiping effect)

This option allows smooth swiping of products with a finger (on mobile devices) or mouse (on desktop). It lets you browse products like a gallery without scroll buttons.

Features:

Smooth swipe effect on all devices.
Perfect for small product rows.
Works together with :auto_width to adapt the number of cards to the block width.

Example insertion:

Salomon Quest 4D 3 GTX Q4D3-BLK_en
  280$ 220$
Salomon X Ultra 4 Mid GTX XU4M-NVY_en
  195$ 165$
Salomon Outpulse Mid GTX OPM-GRN_en
  165$ 135$
Salomon Vaya Mid GTX (Women) VYM-PPL_en
  150$ 130$

Example created using the following code:

Code: HTML

[MENU:shop_products_slider:site-15992:pers_cat_id-0:on_page-4:start-0:button-cart:button-compare:description:favorite-icon:auto_width:htmlonly:lang-en:swipe]

Type 2 — Scroll (auto-load)

The :scroll-768x8x0 mode replaces the standard product block with a scrollable block and automatically loads new products when reaching the end of the list.

Features:

Simulates Swipe on mobile devices but works on desktop too (mouse scroll).
Automatically loads new products without page reload.
Saves space and provides a smooth, interactive experience.
The :scroll-768x8x0 parameters mean:
- 768 — minimum screen width to activate the function;
- 8 — number of products per load;
- 0 — no limit on total number of products.

Example insertion:

Salomon Quest 4D 3 GTX Q4D3-BLK_en
  280$ 220$
Salomon X Ultra 4 Mid GTX XU4M-NVY_en
  195$ 165$
Salomon Outpulse Mid GTX OPM-GRN_en
  165$ 135$
Salomon Vaya Mid GTX (Women) VYM-PPL_en
  150$ 130$

In this example, we specified scroll-3768x8x0
Example created using the following code:

Code: HTML

[MENU:shop_products_slider:site-15992:pers_cat_id-0:on_page-4:start-0:button-cart:button-compare:description:favorite-icon:auto_width:htmlonly:lang-en:scroll-3768x8x0]

Type 3 — Append (adding products without replacing the block)

The :append mode is used to add new products to the end of the current list without replacing existing elements. Useful for creating long continuous product streams.

Features:

Adds new product cards to the end of the current list.
Cannot be used together with :scroll or :carousel.
Does not redraw the block, improving performance on large lists.

Example insertion:

Salomon Quest 4D 3 GTX Q4D3-BLK_en
  280$ 220$
Salomon X Ultra 4 Mid GTX XU4M-NVY_en
  195$ 165$
Salomon Outpulse Mid GTX OPM-GRN_en
  165$ 135$
Salomon Vaya Mid GTX (Women) VYM-PPL_en
  150$ 130$

Example created using the following code:

Code: HTML

[MENU:shop_products_slider:site-15992:pers_cat_id-0:on_page-4:start-0:button-cart:button-compare:description:favorite-icon:auto_width:htmlonly:lang-en:append]

Type 4 — Carousel

The :carousel mode activates a carousel scrolling view (based on an experimental Owl Carousel implementation). Cards scroll cyclically with touch support and automatic movement.

Features:

Supports touch swipe and smooth transition animations.
Displays products in a looped slider (returns to the first after the last).
Suitable for promo blocks and collections like "Hits", "New Arrivals", etc.

Example insertion:

Salomon Quest 4D 3 GTX Q4D3-BLK_en
  280$ 220$
Salomon X Ultra 4 Mid GTX XU4M-NVY_en
  195$ 165$
Salomon Outpulse Mid GTX OPM-GRN_en
  165$ 135$
Salomon Vaya Mid GTX (Women) VYM-PPL_en
  150$ 130$
Salomon Toundra Pro CSWP TNDR-WTR_en
  250$ 200$
Salomon Cross Hike 2 Mid GTX CH2M-RED_en
  185$ 155$
Salomon Shelter CS WP SHLTR-GRY_en
  140$ 110$
Salomon Madcross Mid GTX MDC-BGE_en
  150$ 120$
Salomon Outward GTX OTW-BLK_en
  220$ 175$
Salomon Patrol Mid CSWP PAT-RED_en
  135$ 105$
Salomon XA Pro 3D Mid Forces XAP3D-MIL_en
  300$ 240$
Salomon Predict Hike Mid GTX PHM-WHT_en
  225$ 185$

Example created using the following code:

Code: HTML

[MENU:shop_products_slider:site-15992:pers_cat_id-0:on_page-12:start-0:button-cart:button-compare:description:favorite-icon:htmlonly:lang-en:carousel]

Type 5 — Mosaic-sides (mosaic card layout)

The :mosaic-sides-4 parameter enables mosaic layout, splitting the block into two parts with original card layout.

Features:

Products are displayed in a mosaic (block divided into two parts).
The -4 variant adds icons and a title above the product image.
Used for stylized promo blocks and visually emphasized collections.
Cannot be used with :auto_width, :scroll, or :carousel.

Example insertion:

Salomon Quest 4D 3 GTX Q4D3-BLK_en
  280$ 220$
Salomon X Ultra 4 Mid GTX XU4M-NVY_en
  195$ 165$
Salomon Outpulse Mid GTX OPM-GRN_en
  165$ 135$
Salomon Vaya Mid GTX (Women) VYM-PPL_en
  150$ 130$

In this example, styles are not unique — you can create your own.
Example created using the following code:

Code: HTML

[MENU:shop_products_slider:site-15992:pers_cat_id-0:on_page-4:start-0:button-cart:button-compare:description:favorite-icon:htmlonly:lang-en:mosaic-sides-4]

Creating a mobile menu
Product features, search filter and comparison
Forms