For dev - Display Type Component (App Lib V2)

This instruction is appropriate for App Lib V2 only. The app lib V3 associated documents will be available soon. Please contact us for further assistance.

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