# Blog post list ### About Shopify Blog Post List Element Summary: [Shopify Blog Post List](https://help.pagefly.io/manual/shopify-elements-blog-posts/) Element lets you insert a single, or a list of blogs, from your Shopify store to a page. You can also display it as a slideshow. Above all, it promotes your brand story or announces an upcoming collection. As a result, it can increase the conversion rate. Even so, you can use this element to promote your blogs on other pages (ex. landing page). Before jumping to the detailed steps, you can watch this video below: {% embed url="" %} ### How To Access Blog Post List Element There are 3 steps involved: * Step 1: Click on **Element** function * Step 2: In **Shopify** section, click on the **Blog Post List** element in the dropdown menu * Step 3: Drag and drop the element into the page editor and then start using it. {% hint style="info" %} Note that you can search for this element by using the search function instead of finding it in the sidebar. {% endhint %} ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-d91600eb8a8a1a5a62f04d8b83fbc54d68e5e998%2FAD_4nXfYyOXtYSHWfNBGJ-p_echBtlTEs1B8_Z8xcQB9d7qjWaIK_LWk5oMXPqwU0TIk2bvtiE2XASmZwnX2ozrjI90FALGqqeOZAkWuVviTDkorNGQUCKVG1eQs-BAQG2iGK6VYMUAKlQ4KTLbO1RCokeyY09AHgQeFY-yg9XRvP4Smw.gif?alt=media) Blog Post List element comes with five common variations. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-0d755ff36a9b7d7cc4c67fd4a57290e4b9fd37f2%2FAD_4nXe6x8r_8NwVOmdkmCK6siShQI75kI94oL8cm-CikbzS9Q1-hRBr9ytetshgxiMzbzCs4voPMKsNyi86Co95NtiWH5cE8zUj3wdemUoVFq2bTlLW-Yyw0HMFeHxryPnnnOoRDNXpP1F0fgcp9M0_keyY09AHgQeFY-yg9XRvP4Smw.png?alt=media) ### How To Configure (Setting) For Blog Post List Element Blog Post List element offers many variables with the editable layout, so you can achieve a better conversion rate of the page. In this article, we will show the parameters of the General and Styling tabs for the Blog Posts element. #### General Settings **Legacy Editor** If you’re using the basic editor, check how to configure the Blog post list element below: * Custom blog: Hit the “**Select blog**” button, choose your desired blog post list and click “**Select**”. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-0b1ae21c720bc7a330f8b6dcecb859cdc117539c%2FAD_4nXeHE7xuF0CCQk-pLzVqLCksGQzrgEzsF2Ad5OO-iZEVlIkpcvZluJPNZm_NDdqZ4qWCcpGjmxJY2HV78-wp3tYbJJWCIabmP753oZTa-gpnrvP77zLAChhckl0fBs-NjtIJmL-JJynSpq4NMDDIQkeyY09AHgQeFY-yg9XRvP4Smw.gif?alt=media) * **Items per loading**: You can adjust the number of blog posts displayed by dragging the bar or insert the number in the box. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-18afe68641f8196f7c9352b4af5ec9ed9a47f82a%2FAD_4nXc6AC1mhHwgzIspBjS_543fBhU-8VHKYpRGFuNSAN-LJWmSWHqtXiEiylZp3LTIOxMqzspckHAodm-EJ1Xx2pSgl1qgR8AViprGNd1Z0RjstVPZSMIjek_r8vPcr6O915UUV8Wp_ci8zuH-cft6rAkeyY09AHgQeFY-yg9XRvP4Smw.gif?alt=media) * **Layout Type**: There will be two layout types: Grid and Slideshow. {% hint style="info" %} **Note**: You can choose different layout types for different devices. For example, Grid for all devices while Slideshow for mobile. {% endhint %} ![blog post](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-52c27e0617c531eda604aeeba8bdca372fd4d096%2Fblog-post.png?alt=media) * If you choose Grid layout, continue with these settings: |

Items per row: Adjust the number of items displayed in each row.

Note: This setting can be configured separately for different device types (e.g., desktop, tablet, mobile).

| ![PageFly blog post list element](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-b33b78f1ed6f6809d80460be335be6be20a634f6%2FAD_4nXfT28FJZ_dFu0ghdq4a3604OK0Pa9Hc0-xFSawwhulHRZjWUTMoi9_ee64Rk9EdsEI-ksmwtICyyl1jj4Z5gTtXXpOnt4UOz3QQO8RqFIBRjPLk0xn47ZoMSLfK301B2r_AALPG8WEWg4DKXH-XJQkeyY09AHgQeFY-yg9XRvP4Smw.gif?alt=media) | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |

Items Spacing: Customize the spacing between items in the blog post list.

Note: This setting can be configured separately for different device types (e.g., desktop, tablet, mobile).

| ![PageFly blog post list element](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-d180bd117c4600c8eb80ea72ce32f6e1e15a04d9%2FAD_4nXcQMUnJvMWIXhysMLi6JekG_YF7qVu6dZPYGgxZboAk5SCdoqftrgyqTm1xh3Z8GWGWt0s1x2DWxCTVJucN2XPM9DmGyMoShNUisNMEUO9eGSiHnFDRxhhhhYg6CLlse0d4a8lZp9au4UYEFDnoHQkeyY09AHgQeFY-yg9XRvP4Smw.gif?alt=media) | | **Exclude Current Blog Post**: This option is only available on blog post pages and prevents the current blog post from being included in the list. | ![PageFly blog post list element](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-a7a80ed06a83f827423ade3dcbb1da3e718070c1%2FAD_4nXfdLqwq8EODMWofH6crl8893z5WP6jIAUSlRV_DnjY-B-aq85LolUAOJMSVtZt4wmLJvzUT8L5aaAmMMgfeGUCWo52epK5llNr_4yFYjeWolh5RQdjNtilKcoThCIbTwXMiXy93053IjqjR7bVwkeyY09AHgQeFY-yg9XRvP4Smw.png?alt=media) | |

Reverse Order: Reverse the order of items from newest to oldest or vice versa.

Note: By default, the blog post list is ordered from newest to oldest.

| ![PageFly blog post list element](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-db0f4be1010a4d61ebda3f9594c8f9b247782be0%2FAD_4nXdD4nr8D63z4F6QuIJcRfQnqoZ0mVahONF8W0lEKj4HZPfaz4bNFgECGZJScEaZYfrP0rTo287PqK32ulgBBsMnzsiqI2AAqP-SnaZvxpDKpXECYtsjxcELzXS_X6SlVUXz_z7ItVtroTNznuFCkeyY09AHgQeFY-yg9XRvP4Smw.gif?alt=media) | |

Loading mode:

- None: The default option.

- Pagination: Display page numbers for navigating through the blog post list. This feature only works on the live page.

- Load More: Show a "Load More" button that allows users to load additional items as needed. This feature only works on the live page.

| ![PageFly blog post list element](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-ef15e72f5d83c2e0afb15a3487347824a765bab4%2FAD_4nXeReaZFYnvJiv_OZj1tcw7Mxw4kwe0YxW8kfB-M0_R2eSrwiif6l2yd1_LJwNb4ET5q_q5eUWSIXoGfW17J9mEumwPUcLtzlVpcCnByqbAPVSgm9b5WQwnhkqMAsAxjZACo8C1C39dLtM7ZVqTxDwkeyY09AHgQeFY-yg9XRvP4Smw.gif?alt=media) | * If you choose **Slideshow** layout, continue with these settings: |

- Items displayed: You can adjust the number of items you want to display.

- Item to scroll: Specify the number of items that should be scrolled at a time.

- Items Spacing: Customize the spacing between items in the blog post list.

Note: Theses settings can be configured separately for different device types (e.g., desktop, tablet, mobile).

| ![PageFly blog post list element](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-b054d1c3007e9f5ee145299c3844a9b3351e566c%2FAD_4nXeuXqjffgVrqRCEBZXqc3zfNcT5GtTZvGCpJwi1eQH-o5hcesScy1ENpPo0eXCQsXXgqkxaSeCmYJTZrgkIqMTRclcZDjiqN3dCjHRXUiSDtXfSTelqg0gRhKh40VeaxbArYZ7Aae5m_C3oolR26AkeyY09AHgQeFY-yg9XRvP4Smw.png?alt=media) | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Display partial item**: You can choose to enable display partial item or not. Enable this feature to let customers know that there are still products available for horizontal scrolling. | ![PageFly blog post list element](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-b28095ac1cf6a80c41a804a0e7742a5af84b19de%2FAD_4nXeRSAqwklA1p2r3yePVurwAesx940kxPEXERiUUsr91jsmkN7T4u17qsAbWmzUXmKuuZIbDU9zE0Ncqx5efGwE0gj9l7esGL9voi5Fz5zLgK70YjnMCZDqUjGEKNcAZrq8lAvjDxdSJohggnqmn5gkeyY09AHgQeFY-yg9XRvP4Smw.gif?alt=media) | |

- Navigation type: Six navigation types can be chosen for the blog post list slideshow.

- Pagination type: You can customize the pagination type among the 3 predefined types.

| ![PageFly blog post list element](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-09d489b401334f803f2f95e2ce66d1f9be6698af%2FAD_4nXfJU6o_KmJ-GNaNnTEfLoXLtEikOlSlIK1VP7NGyB5qK2uRc3o92lpZcDlDTuCQXCdyjWIsuuQqAzF_alJfkYBYAJaj7KBeHIKJRVF8k-8RhjR6zEcfdSHVhETZ4GV4YchbHTs0lvZaXUIjSfoizgkeyY09AHgQeFY-yg9XRvP4Smw.png?alt=media) | |

- Exclude Current Blog Post: This option is only available on blog post pages and prevents the current blog post from being included in the list.

- Reverse Order: Reverse the order of items from newest to oldest or vice versa.

Note: By default, the blog post list is ordered from newest to oldest.

| ![PageFly blog post list element](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-eb49ff911e0ab2e58d44843f5432230dbd2d7a33%2FAD_4nXf9JGWmVPgDQK7TDva3e24RhkTs5BMPVR7DeVIffduLSIjvsSKy4Ym_s6OBRQpzjUaZi00P8r6n8wclKSehkEG8WKiw05IsD4ot5bRbyjuPQMeZ0DI6jdxGLvqNVP5HjrqEK-pZZUGuLhJY4r68keyY09AHgQeFY-yg9XRvP4Smw.png?alt=media) | | **Set max height**: If enabled, the slideshow’s height will match that of the highest slide, including those that are hidden. If not enabled, you can choose three types of vertical alignment. | ![PageFly blog post list element](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-0e88a6e00b53df23d7643bd8fbf2b73a51b1b7ee%2FAD_4nXcVpj2j1NHwQjOZNqRvOeWZ4sGGBjnnamaNhjDoab99Ae5qblMTzY-vSpusxpS72VjGlJ0fxhHS1pEpls7nmPHj14r0CSLXr-F03P7rXALD2ESmXwJkZbogp5X6hOLb7TI1t7SzkSOSsVUYD47pygkeyY09AHgQeFY-yg9XRvP4Smw.gif?alt=media) | **Gen 2 Editor** The General tab of PageFly's flex editor shares many of the same parameters as the basic editor, but offers additional features and a slightly different parameters’ order. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-47d5d342f24c43cbcc394d12044288557c18fec1%2FAD_4nXfmv3LbRDlJg4sHrC0id8ZsrGIJq4ap7TNq0rL1SsjdFqueJet9MT80t53iA36D0mg-uWYD0zsXsCxx_aZncZ2ZBcaeL9sSafO6CiPDLwsTvLHdME9UETel5NuZhirPt6WZXXtkYMyTV0sovaWGlQkeyY09AHgQeFY-yg9XRvP4Smw.png?alt=media) Specifically, the flex editor provides the following additional options for the Grid layout settings: * **Fill Last Row**: Determines whether the last row of items in the grid should be filled to match the width of the previous rows. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-ef36cccdd8952734049182877d50c2a3517604a9%2FAD_4nXfJF39Ed5tkiz7Hi00gN1V8GHWZmCSzpPIWgHsDccOiFg4IyIKRPjf9cmOm-SpwdlbHGZ3UNXiO6iKLlrc-E2Fx5xhyXPb4wER4U-C8liM4Li6XDqBKqt-scO6NLBiN_JMrADX05tSLcvu6B6J4keyY09AHgQeFY-yg9XRvP4Smw.gif?alt=media) * **Alignment**: Allows you to control the positioning of elements within a layout. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-c70610be7f96ef7445723227c1b11f7a674e13bd%2FAD_4nXcxM8LVi9Tmxcc7kAcyW5K6Z2mCyfPdsfMptYG2Gflk_t5wCjKOvMjLVIDLyibbF_PRW94We7HAnCrhe7S_evkVDiGSZO66ypeearFJ13mjXnhgcNMdEipQX36Xz4tGpWZqrvKABXEgj2Poy0U4LwkeyY09AHgQeFY-yg9XRvP4Smw.gif?alt=media) By utilizing these additional features, you can create more customized and visually appealing layouts for your elements. You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters [here](https://help.pagefly.io/manual/elements-general-settings/). #### Styling Settings You may modify a range of parameters in the Styling tab, such as spacing, borders, typography, colors, and more, to guarantee that the Blog post list matches the overall layout of your page. You can check more information about Styling settings in this [PageFly Element Styling guide](https://help.pagefly.io/manual/elements-style-settings/). ### Common Cases Users should avoid neglecting to include a clear call-to-action (CTA) within blog posts listed in the element. A compelling CTA encourages visitors to take desired actions, such as making a purchase, signing up for a newsletter, or contacting customer support. Incorporate relevant CTAs within blog posts to guide visitors toward conversion actions and maximize the impact of the blog post list element. ### Frequently Asked Questions **1. What is the primary function of the blog post list element on Shopify?** Shopify Blog Post List Element lets you insert a single, or a list of blogs, from your Shopify store to a page. You can also display it as a slideshow. Above all, it promotes your brand story or announces an upcoming collection. As a result, it can increase the conversion rate. **2. Is it possible to customize the appearance of the blog post list on my Shopify store?** Yes, Shopify provides customization options for the appearance of your blog post list. You can adjust the layout, fonts, colors, and more to match your store's branding and design preferences. **3. How can I encourage visitors to engage with my blog post list on Shopify?** You can encourage engagement with your blog post list by promoting it through your store's navigation menu, featuring it on your homepage, sharing individual posts on social media, and actively responding to comments and feedback from your audience. ### Additional Resources [Creating a Shopify Blog Post with PageFly in 2024](https://help.pagefly.io/manual/create-a-blog-post-page/) [How to Use Blog Post Details Element?](https://help.pagefly.io/manual/shopify-elements-blog-post-details/) --- # 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/shopify-elements/blog-posts/shopify-elements-blog-posts.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.