Recommendations – Top Sellers – Dynamic

This component displays top selling products (and other filter types) based on the product category taxonomy of the page being viewed.

Production Examples

Displays show 3-5 products in a row, depending on viewport and the number of bootstrap columns on the page.

Desktop/Tablet

Top selling recommendations with 5 products across

Top trending recommendations with 5 products across

More Production Examples

When Do I Use This?

Placed towards bottom of Homepage, Super-Vertical, Vertical, Category, Sub-Category, and special pages. Exists in a 2 column or 3 column page.
This component is dynamically populated. This component can filter displayed products by Top Trending, Top Sellers, New Arrivals, Top Trending by Revenue, Top Selling by Revenue. The product category can be limited or overridden to specific categories.

Usage Guidelines

1. Product Filtering

Author chooses what the products are filtered by (Top Trending, Top Sellers, New Arrivals, Top Trending by Revenue, Top Selling by Revenue). The products will then dynamically populate.

Design Specs

ASAP Input Requirements:
Image upload:
  • N/A
  • Required/optional:
    • required - Type: Top Trending, Top Sellers, New Arrivals, Top Trending by Revenue, Top Selling by Revenue.
    • optional - Categories Override
    • optional - Title Override
    • Note: Taxonomy of the page will dictate the product set displayed. If the page is a non-taxonomy page, a Category Override will be required.
  • Character counts:
    • Title override: No limit. However, 40 characters is suggested


    1. An API title is required and should be Open Sans, semi-bold (1.375em) in #001733. In addition, the text should be left justified and in title case format. The title padding is to be set at 1.875em.
    2. The product image is to be center aligned with 40px of padding on the right and left. In addition, the image is to be sized at 140px tall by 140px wide. The image should be set and saved at 144 dpi with no compression. Please save and upload the image as a PNG.
    3. The product title is required and should be Open Sans, regular (0.875em) in #005ccc. The title text is to be left justified and in title case format. Only two lines of characters are allowed for the product title text.
    4. Star Ratings are to be left justified.
    5. The product price is required and is to be set at Open Sans, regular (0.875em) in #001733. The product price text is to be left justified.
    Not pictured:
    • For instances when there is a Member Pricing promotion, the member pricing is to be Open Sans, bold (0.875em), in #F17F21. The member pricing is to be left justified and in title case format.

    Post a New Comment

    Your feedback will help us improve this page. If you have a comment about the content of this page, use the form below, and the Patterns Team will get back to you within a business day.

    For general questions or assistance, email the Patterns Team directly.