[{"data":1,"prerenderedAt":703},["ShallowReactive",2],{"navigation_docs":3,"-collections-collection-page":126,"-collections-collection-page-surround":698},[4,17,54,71,84,113],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Introduction",false,"/introduction","1.introduction",[10,13],{"title":5,"path":11,"stem":12},"/introduction/introduction","1.introduction/1.introduction",{"title":14,"path":15,"stem":16},"Section structure","/introduction/section-structure","1.introduction/2.section-structure",{"title":18,"icon":6,"path":19,"stem":20,"children":21,"page":6},"Products","/products","2.products",[22,26,30,34,38,42,46,50],{"title":23,"path":24,"stem":25},"Product page","/products/product-page","2.products/1.product-page",{"title":27,"path":28,"stem":29},"Key features","/products/key-features","2.products/2.key-features",{"title":31,"path":32,"stem":33},"Complementary products","/products/complementary-products","2.products/3.complementary-products",{"title":35,"path":36,"stem":37},"Specifications","/products/specifications","2.products/4.specifications",{"title":39,"path":40,"stem":41},"Product badges","/products/product-badges","2.products/5.product-badges",{"title":43,"path":44,"stem":45},"Size chart","/products/size-chart","2.products/6.size-chart",{"title":47,"path":48,"stem":49},"Color swatches","/products/color-swatches","2.products/7.color-swatches",{"title":51,"path":52,"stem":53},"Quick view modal","/products/quick-view-modal","2.products/8.quick-view-modal",{"title":55,"icon":6,"path":56,"stem":57,"children":58,"page":6},"Collections","/collections","3.collections",[59,63,67],{"title":60,"path":61,"stem":62},"Collection page","/collections/collection-page","3.collections/1.collection-page",{"title":64,"path":65,"stem":66},"Subcollections","/collections/subcollections","3.collections/2.subcollections",{"title":68,"path":69,"stem":70},"Promotion cards","/collections/promotion-cards","3.collections/3.promotion-cards",{"title":72,"icon":6,"path":73,"stem":74,"children":75,"page":6},"Cart","/cart","4.cart",[76,80],{"title":77,"path":78,"stem":79},"Cart drawer","/cart/cart-drawer","4.cart/1.cart-drawer",{"title":81,"path":82,"stem":83},"Free shipping bar","/cart/free-shipping-bar","4.cart/2.free-shipping-bar",{"title":85,"icon":6,"path":86,"stem":87,"children":88,"page":6},"Header & Footer","/header-footer","5.header-footer",[89,93,97,101,105,109],{"title":90,"path":91,"stem":92},"Header","/header-footer/header","5.header-footer/1.header",{"title":94,"path":95,"stem":96},"Navigation","/header-footer/navigation","5.header-footer/2.navigation",{"title":98,"path":99,"stem":100},"Mega menus","/header-footer/mega-menus","5.header-footer/3.mega-menus",{"title":102,"path":103,"stem":104},"Announcement bar","/header-footer/announcement-bar","5.header-footer/4.announcement-bar",{"title":106,"path":107,"stem":108},"Promotion bar","/header-footer/promotion-bar","5.header-footer/5.promotion-bar",{"title":110,"path":111,"stem":112},"Footer","/header-footer/footer","5.header-footer/6.footer",{"title":114,"icon":6,"path":115,"stem":116,"children":117,"page":6},"Theme features","/theme-features","6.theme-features",[118,122],{"title":119,"path":120,"stem":121},"Newsletter popup","/theme-features/newsletter-popup","6.theme-features/1.newsletter-popup",{"title":123,"path":124,"stem":125},"Headings","/theme-features/headings","6.theme-features/2.headings",{"id":127,"title":60,"body":128,"description":691,"extension":692,"links":693,"meta":694,"navigation":695,"path":61,"seo":696,"stem":62,"__hash__":697},"docs/3.collections/1.collection-page.md",{"type":129,"value":130,"toc":670},"minimark",[131,148,153,203,206,209,214,291,295,356,360,380,383,386,390,427,431,434,455,459,462,476,480,483,537,540,546,572,575,584,592,596,599,604,619,624,642,652,656,661],[132,133,134,135,139,140,143,144,147],"p",{},"The ",[136,137,138],"strong",{},"collection page"," is where customers browse the products in a collection — filtering by attributes, sorting results, and navigating through the catalog. It is built from two sections: a ",[136,141,142],{},"Collection banner"," at the top displaying the collection title, description, and optional image, and a ",[136,145,146],{},"Product grid"," below with filters, sorting, and the product listing.",[149,150,152],"h2",{"id":151},"editing-the-collection-page","Editing the collection page",[154,155,157,162,177,181,190,194],"steps",{"level":156},"4",[158,159,161],"h4",{"id":160},"open-the-theme-editor","Open the Theme Editor",[132,163,164,165,168,169,172,173,176],{},"In your Shopify admin, go to ",[136,166,167],{},"Online Store"," > ",[136,170,171],{},"Themes"," and click ",[136,174,175],{},"Customize"," on the Atlas theme.",[158,178,180],{"id":179},"navigate-to-a-collection-page","Navigate to a collection page",[132,182,183,184,168,186,189],{},"Use the page selector in the top bar to switch to ",[136,185,55],{},[136,187,188],{},"Default collection",". Select a specific collection to use as a preview while editing.",[158,191,193],{"id":192},"select-a-section","Select a section",[132,195,196,197,199,200,202],{},"In the left sidebar, click the ",[136,198,142],{}," section to configure the header area (title, description, image), or click the ",[136,201,146],{}," section to configure the grid layout, filters, sorting, and pagination.",[149,204,142],{"id":205},"collection-banner",[132,207,208],{},"The collection banner displays the collection title and, optionally, the collection description and image. When an image is present, the banner uses a side-by-side layout with the image next to the text. Without an image, it displays as a text-only header.",[210,211,213],"h3",{"id":212},"image","Image",[215,216,217,224,229,235,241,277],"ul",{},[218,219,220,223],"li",{},[136,221,222],{},"Show image"," — toggle the collection image on or off.",[218,225,226,228],{},[136,227,213],{}," — override the collection's default image with a custom one. If left empty, the collection image set in the Shopify admin is used.",[218,230,231,234],{},[136,232,233],{},"Full width"," — stretch the banner edge to edge.",[218,236,237,240],{},[136,238,239],{},"Image width"," — control the width of the image relative to the banner (50–150%).",[218,242,243,246,247,250,251,250,254,250,257,250,260,250,263,250,266,250,269,272,273,276],{},[136,244,245],{},"Image size"," — choose an aspect ratio: ",[136,248,249],{},"Original",", ",[136,252,253],{},"Custom height",[136,255,256],{},"Max height",[136,258,259],{},"Portrait tall (2:3)",[136,261,262],{},"Portrait (3:4)",[136,264,265],{},"Square",[136,267,268],{},"Landscape (4:3)",[136,270,271],{},"Landscape wide (3:2)",", or ",[136,274,275],{},"Landscape wider (16:9)",".",[218,278,279,282,283,285,286,288,289,276],{},[136,280,281],{},"Image height"," — set a specific height in pixels (240–960 px). Visible when ",[136,284,245],{}," is set to ",[136,287,253],{}," or ",[136,290,256],{},[210,292,294],{"id":293},"content","Content",[215,296,297,310,316,332,350],{},[218,298,299,302,303,306,307,276],{},[136,300,301],{},"Heading size"," — controls the size of the collection title, from ",[136,304,305],{},"XS"," to ",[136,308,309],{},"3XL",[218,311,312,315],{},[136,313,314],{},"Show description"," — toggle the collection description on or off.",[218,317,318,321,322,250,325,272,328,331],{},[136,319,320],{},"Description size"," — ",[136,323,324],{},"Large",[136,326,327],{},"Medium",[136,329,330],{},"Small",". Visible when the description is enabled.",[218,333,334,321,337,250,340,272,343,346,347,349],{},[136,335,336],{},"Text alignment",[136,338,339],{},"Left",[136,341,342],{},"Center",[136,344,345],{},"Two columns",". Defaults to ",[136,348,339],{}," when a collection image is displayed.",[218,351,352,355],{},[136,353,354],{},"Show breadcrumbs"," — display breadcrumb navigation above the collection title.",[210,357,359],{"id":358},"mobile-layout","Mobile layout",[215,361,362,371],{},[218,363,364,366,367,370],{},[136,365,245],{}," — override the desktop image size for mobile, or choose ",[136,368,369],{},"Same as desktop"," to keep it consistent.",[218,372,373,375,376,288,378,276],{},[136,374,281],{}," — set a mobile-specific height. Visible when the mobile image size is set to ",[136,377,253],{},[136,379,256],{},[149,381,146],{"id":382},"product-grid",[132,384,385],{},"The product grid displays the collection's products with optional filters and sorting controls. A sidebar with filters appears on the left on desktop, or in a full-screen modal on mobile.",[210,387,389],{"id":388},"grid-layout","Grid layout",[215,391,392,398,410,416],{},[218,393,394,397],{},[136,395,396],{},"Products per row"," — how many products appear per row on desktop (2–5).",[218,399,400,321,403,288,406,409],{},[136,401,402],{},"Products per row (mobile)",[136,404,405],{},"1",[136,407,408],{},"2"," products per row on mobile.",[218,411,412,415],{},[136,413,414],{},"Products per page"," — the number of products loaded per page (6–50).",[218,417,418,421,422,426],{},[136,419,420],{},"Include collection URL"," — when enabled, product links include the collection path (e.g., ",[423,424,425],"code",{},"/collections/summer/products/shirt","), so breadcrumbs on the product page show the full trail (e.g., Home > Collection > Product) instead of just Home > Product.",[210,428,430],{"id":429},"view-mode","View mode",[132,432,433],{},"Customers can switch between a grid and list view using the view mode toggle. Their preference is remembered across sessions.",[215,435,436,442],{},[218,437,438,441],{},[136,439,440],{},"Show view mode selector"," — show or hide the grid/list toggle.",[218,443,444,447,448,288,451,454],{},[136,445,446],{},"Default view mode"," — choose whether the page loads in ",[136,449,450],{},"Grid",[136,452,453],{},"List"," view by default.",[210,456,458],{"id":457},"pagination","Pagination",[132,460,461],{},"Two pagination styles are available:",[215,463,464,470],{},[218,465,466,469],{},[136,467,468],{},"Load more"," (default) — a \"Load more\" button with a progress bar showing how many products remain.",[218,471,472,475],{},[136,473,474],{},"Classic"," — numbered pages with previous/next arrows.",[149,477,479],{"id":478},"filtering-and-sorting","Filtering and sorting",[132,481,482],{},"Filters appear in a sidebar on desktop and a full-screen modal on mobile. Sort options are displayed as a dropdown above the product grid. Both use Shopify's native filtering and sorting system — the available filters and sort options are determined by your collection settings in the Shopify admin.",[215,484,485,491,497,503,509,515,525,531],{},[218,486,487,490],{},[136,488,489],{},"Show filters"," — toggle the filter sidebar on or off.",[218,492,493,496],{},[136,494,495],{},"Default open filters"," — how many filter groups are expanded by default (0–5).",[218,498,499,502],{},[136,500,501],{},"Show filter match count"," — display the number of matching products next to each filter value.",[218,504,505,508],{},[136,506,507],{},"Show filter values with no matches"," — show filter values that would return zero results.",[218,510,511,514],{},[136,512,513],{},"Show selected filter type"," — prefix active filter badges with the filter label (e.g., \"Color: Red\" instead of just \"Red\").",[218,516,517,520,521,524],{},[136,518,519],{},"Enable color swatches"," — display color filters as visual swatches instead of text checkboxes. See ",[522,523,47],"a",{"href":48}," for setup details.",[218,526,527,530],{},[136,528,529],{},"Show sort by"," — toggle the sort dropdown on or off.",[218,532,533,536],{},[136,534,535],{},"Show results count"," — display the total number of products in the collection.",[149,538,64],{"id":539},"subcollections",[132,541,542,543,545],{},"The product grid can display a row of subcollection links above the products, helping customers navigate between related collections. See ",[522,544,64],{"href":65}," for setup instructions.",[215,547,548,554,559],{},[218,549,550,553],{},[136,551,552],{},"Show subcollections"," — toggle the subcollection row on or off.",[218,555,556,558],{},[136,557,64],{}," — manually select which collections to display. If left empty, the theme uses the subcollections metafield assigned to the collection.",[218,560,561,321,564,567,568,272,570,276],{},[136,562,563],{},"Alignment",[136,565,566],{},"Auto"," (matches the banner's text alignment), ",[136,569,339],{},[136,571,342],{},[149,573,68],{"id":574},"promotion-cards",[132,576,577,578,580,581,583],{},"You can insert promotional image cards into the product grid to highlight sales, new arrivals, or other campaigns. Promotion cards are added as blocks within the ",[136,579,146],{}," section and appear at a configurable position in the grid. See ",[522,582,68],{"href":69}," for details.",[215,585,586],{},[218,587,588,591],{},[136,589,590],{},"Hide promotion cards when filtering"," — automatically hide promotion cards when customers are actively filtering results.",[149,593,595],{"id":594},"colors","Colors",[132,597,598],{},"Both sections have independent color settings:",[132,600,601],{},[136,602,603],{},"Collection banner:",[215,605,606],{},[218,607,608,611,612,611,615,618],{},[136,609,610],{},"Background"," / ",[136,613,614],{},"Text",[136,616,617],{},"Heading"," — override the default page colors for the banner area.",[132,620,621],{},[136,622,623],{},"Product grid:",[215,625,626,633],{},[218,627,628,611,630,632],{},[136,629,610],{},[136,631,614],{}," — override the default page colors for the grid area.",[218,634,635,611,638,641],{},[136,636,637],{},"Product card",[136,639,640],{},"Product card text"," — override colors for product cards within this collection.",[132,643,644,645,648,649,276],{},"The active filter badge colors are configured globally in ",[646,647],"icon-gear",{}," ",[136,650,651],{},"Theme settings",[149,653,655],{"id":654},"spacing","Spacing",[132,657,134,658,660],{},[136,659,142],{}," section supports custom spacing:",[215,662,663],{},[218,664,665,666,669],{},"Enable ",[136,667,668],{},"Custom spacing"," to control the top and bottom padding of the banner section independently.",{"title":671,"searchDepth":672,"depth":672,"links":673},"",2,[674,675,681,686,687,688,689,690],{"id":151,"depth":672,"text":152},{"id":205,"depth":672,"text":142,"children":676},[677,679,680],{"id":212,"depth":678,"text":213},3,{"id":293,"depth":678,"text":294},{"id":358,"depth":678,"text":359},{"id":382,"depth":672,"text":146,"children":682},[683,684,685],{"id":388,"depth":678,"text":389},{"id":429,"depth":678,"text":430},{"id":457,"depth":678,"text":458},{"id":478,"depth":672,"text":479},{"id":539,"depth":672,"text":64},{"id":574,"depth":672,"text":68},{"id":594,"depth":672,"text":595},{"id":654,"depth":672,"text":655},"Learn how to use and customize the collection page","md",null,{},true,{"title":60,"description":691},"VovcV1BYmJYPvVMi3bc1RLWdC0vyHG4pp2HfjcP2_00",[699,701],{"title":51,"path":52,"stem":53,"description":700,"children":-1},"Learn how to enable and customize the quick view modal on product cards",{"title":64,"path":65,"stem":66,"description":702,"children":-1},"Learn how to display subcollections on collection pages using metafields",1771425625268]