Here you can learn about tools and styles for formatting product lists in the Barebones theme as well as how to use product filters in the default theme and how to create product list sliders.

Using product filters on product lists

The Barebones theme contains the JavaScript plugin filters.js, which makes drop-down menus out of Barebones product filters' <ul> lists.

The plugin is initialized in the following way (the newest Barebones version comes with the plugin already initialized):

MCF.Filters.init();

The filters.js plugin and product filters are ready to use in Barebones on product list, brand and campaign pages.

Learn more about the default implementation of product filters in Barebones.

The filters.js plugin can be found in the default theme's file /scripts/plugins/filters.js.

The newest Barebones version comes with the plugin already initialized in the /scripts/custom.js file.

You can define the design of individual product filters in the following files of the Barebones theme:

Creating product list sliders

You can create a horizontal slider out of the default theme's CSS list grid by using the sliders.js plugin. For instance, the list of cross-sell products that is displayed on product pages in the default theme has been implemented with a slider.

The sliders.js plugin can be found in the default theme's file /scripts/plugins/sliders.js. Additionally, the variables that determine the type of slider are set in the file /scripts/custom.js.

The slider's SASS styles can be found in the default theme's file /styles/scss/modules/_sliders.scss.

The sliders.js plugin also uses the jQuery Slick plugin in the background.

The slider has been created by setting the data-slider="foo" attribute with the desired slider type indicated as its value for the grid list's container. The grid list can be one of the following types (located in the /scripts/custom.js file):

  • grid-list
  • grid-list-narrow
  • grid-list-wide

Below you can see a simple implementation of a product list slider:

{Products(
    before: '
        <h2>Products</h2>
        <ul class="GridList GridList-Wide" data-slider="grid-list-wide">
    ',
    helper: {{
        <li class="ListItem">
            {ProductListImage}
            <h3>{ProductName}</h3>
            {ProductShortDesc}
        </li>
    }},
    after: '</ul>'
)}

The layout styles for product lists

The design of product list elements can be defined in the default theme's /styles/scss/modules/_product.scss file.

To change the number of elements displayed side-by-side on product lists, change the variables that define the width of the CSS list grid. For example, to display 3 products side-by-side (instead of the default 4) in the desktop screen size, change the width of the element .GridList-Wide > .ListItem in the file /styles/scss/common/_grid.scss.