# Content List ### About Content List Element PageFly [Content List Element](https://help.pagefly.io/manual/content-list-element-2/) is designed to help you save time on styling similar items and building content boxes with pre-made variants, so that you can spend time on other tasks. With Content list, you only need to customize an element in one Content list item and the style will be applied to that element in Content List. In Particular, you can change the content in each item. You can check more details in the video tutorial below. {% embed url="" %} ### How To Access PageFly Content List Element * Step 1: Click on the Elements icon > In the PageFly tab choose the Content list element * Step 2: Drag and drop the desired Content list variant you want into the editor and then start using it ![](/files/wk7vzb1IcKEnqMxYr18I) The Content list element comes with multiple variations covering most of your needs. But we will continue to add more variations to help you save time ![](/files/DcgiyuEMkkeCcJVub2FV) ### How To Configure The Content List Element Content list element comes with plenty of parameters allowing you to fine-tune content appearance for the best possible conversion rate. Select the element in the layout to view its settings. ![](/files/pUjJRDdv6FmiRemdSMNq) #### General Settings Select the whole Content list element and navigate to the General tab, plenty of parameters that let you adjust the Content list element will be shown **Content List Item** Content list items is where you use to manage the number of items. With that parameter, you can add, move, duplicate or remove any items in Content list element | |

Add new Content list items by clicking on the Add new items button.

Note: The number of items in a Content list is unlimited

| ![](/files/hwRiK5RA5gJitn6mFMEq) | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | | Move the item by clicking-and-holding the ellipsis icon in the left of item, and drag this into the new placement | ![](/files/IDmSX06dwlMHJLumKB2Q) | | Duplicate or remove Content list items by using the two buttons next to each tab item. | ![](/files/VlW0BwjPbNkWDWTeWCAX) | **Layout Type** The Content list element can display the list of products in two layout types: Grid and Slideshow. ![](/files/F6lKMq2LP0LrDP2mQ62y) * With Grid Layout: It arranges products in a structured grid format, making it easy for customers to view multiple items at once. Check its configuration options below: | **Items per row**: Adjust the number of items displayed in each row. | ![](/files/Ny775UjNkNNfA7fuo6to) | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | | **Fill last row**: If you turn on this option, the elements in the last row will take up the entire width of that row. | ![](/files/Z5cJs6zTVVZVYgFqmxtV) | |

Alignment: Specify the position for the item inside Content list element.

Note: If you enable Fill last row, then Alignment won't function

| ![](/files/5NOWg7jIExWf7q4E2ciR) | | **Item spacing**: Adjust space between items. | ![](/files/idiJKSkYfAaghRsQQZkQ) | |

Enable equal height: Make all the items inside the Content list have equal height

Note: This feature only appears if you select Legacy editor when creating PageFly page

| ![](/files/W6pyuDnYIvwtE3ucChxG) | * With **Slideshow**: It arranges products in a sliding banner format, allowing you to browse through items one at a time, often with animation effects. Check its configuration options below: | **Items Displayed**: Set the number of Content items displayed at a time. | ![](/files/uhZaXPXFlWa0ecDFqATd) | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | | **Items To Scroll**: Configure the number of slides that will scroll when you click the navigation button. The value of Items displayed above is the maximum number of Items to scroll | **Items Displayed**: Set the number of Content items displayed at a time. | | **Display Partial Items**: Enable this option will make the previous and next items partially visible | ![](/files/tJXtys6Hi41INukmsEfx) | |

Navigation Type: There are 5 different styles for the left/right arrow navigation buttons. You can also choose "None" to hide those buttons.

Note: On desktop and laptop, some options only appear on mouse over

| ![](/files/I7ilA4tcMTjASkXFzz4k) | | **Pagination Type**: There are 3 different styles for pagination indicators. | ![](/files/FkOrjizcRosCIg8M16GH) | | **Set Max Height**: If enabled, the slideshow's height will match that of the highest slide, including hidden slides. | ![](/files/1xz0T6kiTiLcKNDUqalo) | | **Vertical Alignment**: If "Set Max Height" is disabled, choose from 3 vertical alignment options to align the slides as desired. | ![](/files/zi1goSmQlVCKh8NEegfP) | | **Items Spacing**: Adjust the spacing between slides. This setting is defaulted by 30px | ![](/files/zgVQIiSHrze0l4nIp90w) | #### Styling Settings You may modify a range of parameters in the Styling tab, such as element size, spacing, borders, typography, colors, and more, to guarantee that the Content list element matches the overall layout of your page. You can check more information about the Styling tab [here](https://help.pagefly.io/manual/elements-style-settings/). ### How To Configure The Content List Item After you have completed configuring the Content list element, it is now time to edit the Content list item. You can add news elements, such as Heading, Image, Icon into the Content list variant you are using, as well as remove ones that you don't intend to use ![](/files/UXQCh55EoLuj3xIpBDO5) Similar to the Content list element, Content list item provides a range of parameters to optimize appearance. Selecting the Content list item, you will see its parameters in the General and Styling tabs. In the **General** tab, you can choose whether to sync the styling of a Content list item within the Content list element with other items by selecting Yes or No in the Sync item box: * Yes: Content list item and all elements inside it will be synced with other items.
* No: If you choose this option, there are 2 options you can select to unsync the Content list item: * All: This is a default option when you choose No. If you choose this option, you will unsync the content list item and its children elements. * Container: Only unsync the content list item and keep its children elements synced.
For the **Styling** tab, you may adjust the size, spacing, borders, typography, colors, and more of the Content list item element. Simply click on Content list element > Navigation to Styling to see those parameters ![](/files/4U9Slt4by6WaWct69ivP) ### Frequently Asked Questions **1. What is the Content list element?** PageFly Content list element is designed to help you save time on styling similar items and building content boxes with pre-made variants. If you want to boost your store's credibility, let's use the PageFly Content list element to create a trust badge section that's just as impressive as Dossier's. Check out this video to see how it's done: {% embed url="" %} **2. Why should I use the Content List for my page?** The purpose of the Content list element is to break down contents into main points from long documents, as it’s essential to edit complicated boring contents, to bring join and interests to your customers when scrolling through the Shopify Page. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.pagefly.io/page-structure-and-elements/pagefly-elements/containers/content-list-element-2.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.