Display Type Component


1. Overview

1.1. Structure

The display type determines whether to view a product list in list grid or collage type.


2. DOM element

Pagination Component renders the pagination on .boost-pfs-filter-top-display-type on collection/search page

For example: You will find a div like this in sections/collection-template-boost-pfs-filter.liquid

<div class="boost-pfs-filter-top-display-type"></div>

3. Settings in javascript

Product List Settings

Name Type Values Default Description
defaultDisplay string 'list' 'collage' 'grid' 'grid' Default display type of product list
collageNmmber number 3 If defaultDisplay = collage, set number of product items that is contained in one collage

4. How to customize

See: Display Type Customization