{"product_id":"2026-04-09","title":"[Horizon] Display pages like a blog with thumbnail images in a list","description":"\u003cp\u003eThis is a setup example for displaying Shopify pages in a thumbnail grid list, similar to a blog. It can be implemented simply by pasting code into a Custom Liquid block — no theme file edits required. Display order is controlled by a variable at the top of the code: you can pin specific pages first, with the rest sorted alphabetically.\u003c\/p\u003e\n\u003cp\u003eBy defining thumbnail image and exclusion flag metafields on pages, you can set individual images for each page or hide specific pages from the list.\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\u003ch3\u003eResult\u003c\/h3\u003e\n\u003cp\u003eA thumbnail card grid is displayed on the page list page. It uses Horizon's \u003ccode\u003eresource-card\u003c\/code\u003e styles, so it blends naturally with the theme's design.\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Page list with thumbnails and Shopify admin page list\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-09_1_en.png?v=1775730037\" class=\"zoomable-image\" width=\"800\" height=\"540\" style=\"aspect-ratio: 1.48;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eStep 1: Add Metafield Definitions\u003c\/h3\u003e\n\u003cp\u003eIn the Shopify admin under Settings → Custom data → Pages, add these two metafield definitions.\u003c\/p\u003e\n\u003cp\u003e◆ Thumbnail (\u003ccode\u003ecustom.thumb_nail\u003c\/code\u003e)\u003cbr\u003eType: File\u003c\/p\u003e\n\u003cp\u003e◆ Exclude from list (\u003ccode\u003ecustom.excluded_from_list\u003c\/code\u003e)\u003cbr\u003eType: True or false (Boolean)\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Page metafield definition settings. thumb_nail as file type, excluded_from_list as boolean type\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-09_2_en.png?v=1775730040\" class=\"zoomable-image\" width=\"800\" height=\"540\" style=\"aspect-ratio: 1.48;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eStep 2: Set Metafields on Each Page\u003c\/h3\u003e\n\u003cp\u003eFrom each page's edit screen, configure the metafield values. Upload a thumbnail image, and set \"Exclude from list\" to True for any pages you don't want shown in the list.\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Each page's metafield settings screen showing thumbnail image upload and exclusion flag\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-09_3_en.png?v=1775730044\" class=\"zoomable-image\" width=\"800\" height=\"540\" style=\"aspect-ratio: 1.48;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eStep 3: Create Template \u0026amp; Set Custom Liquid\u003c\/h3\u003e\n\u003cp\u003eIn the theme editor, create a new page template, add a \"Custom Liquid\" block, and paste the code.\u003c\/p\u003e\n\u003cp\u003eSpecify page handles in \u003ccode\u003epriority_handles\u003c\/code\u003e at the top of the code (comma-separated) to pin those pages first, with the rest sorted alphabetically after them.\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Theme editor showing code pasted into Custom Liquid block\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-09_4_en.png?v=1775730050\" class=\"zoomable-image\" width=\"800\" height=\"540\" style=\"aspect-ratio: 1.48;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cp\u003eDawn version: \u003ca href=\"\/en-us\/products\/2023-04-04\"\u003eDisplay pages with thumbnails in a list (Dawn)\u003c\/a\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":48671014289659,"sku":null,"price":0.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-09.jpg?v=1775730059","url":"https:\/\/store-dojo.com\/en-us\/products\/2026-04-09","provider":"STORE DOJO","version":"1.0","type":"link"}