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.
In this article
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 |