{"title":"Collection Page Layout \u0026 Grid","description":"\u003cp\u003eCollection Page Layout \u0026amp; Grid work for Shopify and Shopify Plus stores, handled as a flat-rate task by an in-house team that has worked on this since 2016.\u003c\/p\u003e\u003cp\u003eWe have completed 226 collection page layout \u0026amp; grid requests for merchants, including work on Parallax, Prestige, Pacific and Symmetry. Below are 7 real examples with the request, the approach and what shipped.\u003c\/p\u003e","products":[{"product_id":"change-products-per-row-prestige","title":"Change Products Per Row","description":"\u003cp class=\"task-lead\"\u003eAn art supply brand wanted collection grids to adapt: fewer columns on collections with few products, more on large ones.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eWe've enlarged the product images site-wide. Now we want the grid logic fine-tuned: pages with six or fewer products show three across, larger collections show four.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eOne grid setting for all collections was leaving small collections looking sparse.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe made the collection grid adapt to the number of products, showing three across for small collections and four for larger ones. The brand can adjust the threshold in the theme editor.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eAdaptive column count based on product count\u003c\/li\u003e\n\u003cli\u003eThreshold adjustable in the theme editor\u003c\/li\u003e\n\u003cli\u003eConsistent image sizing across both layouts\u003c\/li\u003e\n\u003cli\u003eMobile grid unchanged\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155553906762,"sku":"TASK-0111","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"grid-vs-list-view-toggle-parallax","title":"Grid vs List View Toggle","description":"\u003cp class=\"task-lead\"\u003eA fashion brand wanted each color of a product shown as its own tile on collection pages, while keeping it one product underneath.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eWe need to show variants separately on some collections. Each color should appear as its own tile, but it's still one product. When the customer clicks, it opens with that color selected.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eShowing one tile per product hid the range. The brand wanted every color visible in the grid.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe set up collection pages so each color variant appears as a separate tile with its own image, and clicking opens the product with that color preselected. The brand chooses which collections use this per collection.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eOne tile per color variant on selected collections\u003c\/li\u003e\n\u003cli\u003eProduct opens with the clicked color selected\u003c\/li\u003e\n\u003cli\u003eEnabled per collection\u003c\/li\u003e\n\u003cli\u003eStandard grid on other collections\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155557937226,"sku":"TASK-0112","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"collection-description-and-text-block-pacific","title":"Collection Description and Text Block","description":"\u003cp class=\"task-lead\"\u003eA brand wanted a text block on collection pages for descriptions and SEO content, positioned below the products.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eAdd a text area at the bottom of collection pages for a longer description. We want it for SEO but it shouldn't push the products down.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eSEO content that needed a home without hurting the shopping experience.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe added a collection description block beneath the product grid, filled from the collection admin, with a read-more toggle so long content stays tidy.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eDescription block below the collection grid\u003c\/li\u003e\n\u003cli\u003eFilled from the collection admin\u003c\/li\u003e\n\u003cli\u003eRead-more toggle for long content\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155693498442,"sku":"TASK-0264","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"infinite-scroll-and-load-more-symmetry","title":"Infinite Scroll and Load More","description":"\u003cp class=\"task-lead\"\u003eA marketplace wanted a large product grid homepage with infinite scroll, modeled on major discount platforms.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eSet up the homepage to function like a big discount marketplace: header, then a large product grid that keeps loading as you scroll.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA high-density browse-first homepage.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe built a homepage product grid with dense cards and infinite scroll, with the collection feeding it chosen from the theme editor.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eDense product grid on the homepage\u003c\/li\u003e\n\u003cli\u003eInfinite scroll\u003c\/li\u003e\n\u003cli\u003eSource collection set in the theme editor\u003c\/li\u003e\n\u003cli\u003eMobile grid tuned\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155698741322,"sku":"TASK-0364","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"add-banner-and-image-at-top-of-collection-impulse","title":"Add Banner and Image at Top of Collection","description":"\u003cp class=\"task-lead\"\u003eA retailer wanted breadcrumbs on collection pages and a banner image at the top of each collection.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eAdd breadcrumb navigation to collection pages, and a banner at the top of each collection that we can set per collection.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eWayfinding and visual identity for collections.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe added breadcrumbs above the collection title and a per-collection banner image pulled from the collection admin, with a fallback when none is set.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eBreadcrumbs on collection pages\u003c\/li\u003e\n\u003cli\u003ePer-collection banner image\u003c\/li\u003e\n\u003cli\u003eFallback when no banner is set\u003c\/li\u003e\n\u003cli\u003eMobile layout adjusted\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155698774090,"sku":"TASK-0365","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"full-width-collection-page-parallax","title":"Full-Width Collection Page","description":"\u003cp class=\"task-lead\"\u003eA brand wanted collection pages to use the full browser width instead of the theme's contained layout.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eThe collection page is contained in the middle with wasted space on the sides. Make it full width so more products fit and the images are larger.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eScreen space going unused.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe made collection pages full width with the grid expanding to fill the viewport, keeping consistent gutters and adapting the column count for wider screens.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eFull-width collection pages\u003c\/li\u003e\n\u003cli\u003eGrid fills the viewport\u003c\/li\u003e\n\u003cli\u003eColumn count adapts to screen width\u003c\/li\u003e\n\u003cli\u003eConsistent gutters\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155700445258,"sku":"TASK-0384","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"masonry-and-asymmetric-and-pinterest-style-layout-retina","title":"Masonry and Asymmetric and Pinterest-Style Layout","description":"\u003cp class=\"task-lead\"\u003eA brand wanted a masonry-style collection grid where images kept their natural proportions.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eI want the collection grid to be masonry style, like a pinboard, so tall and wide images sit together naturally instead of being cropped to squares.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eProduct photography that didn't fit a uniform grid.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe built a masonry layout for collection pages where cards keep their natural image proportions and flow into columns, with the option enabled per collection.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eMasonry collection layout\u003c\/li\u003e\n\u003cli\u003eNatural image proportions\u003c\/li\u003e\n\u003cli\u003eEnabled per collection\u003c\/li\u003e\n\u003cli\u003eTwo columns on mobile\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155715616842,"sku":"TASK-0438","price":0.0,"currency_code":"USD","in_stock":false}]}],"url":"https:\/\/www.taskhusky.com\/collections\/collection-page-layout-grid.oembed","provider":"TaskHusky","version":"1.0","type":"link"}