[{"data":1,"prerenderedAt":399},["ShallowReactive",2],{"navigation_docs":3,"-products-color-swatches":126,"-products-color-swatches-surround":394},[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":47,"body":128,"description":387,"extension":388,"links":389,"meta":390,"navigation":391,"path":48,"seo":392,"stem":49,"__hash__":393},"docs/2.products/7.color-swatches.md",{"type":129,"value":130,"toc":378},"minimark",[131,138,161,166,169,181,185,188,196,201,255,259,262,273,284,288,294,297,307,311,317,320,324,330,333],[132,133,134,137],"p",{},[135,136,47],"strong",{}," replace plain text option names with visual color indicators, making it easier for customers to browse and select product variants. They can appear in three places:",[139,140,141,149,155],"ul",{},[142,143,144,145,148],"li",{},"The ",[135,146,147],{},"collection page"," - as a color filter in the sidebar.",[142,150,144,151,154],{},[135,152,153],{},"product page"," - inside the variant picker.",[142,156,144,157,160],{},[135,158,159],{},"product card"," - as a color picker",[162,163,165],"h2",{"id":164},"native-shopify-swatches-recommended","Native Shopify swatches (recommended)",[132,167,168],{},"Shopify has built-in support for color swatches. When you assign swatches directly to a product in the Shopify admin, the theme displays them automatically - no additional configuration is needed.",[132,170,171,172,180],{},"To learn how to assign color swatches in the Shopify admin, see ",[173,174,179],"a",{"href":175,"rel":176,"target":178},"https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields",[177],"nofollow","\\_blank","Using category metafields",".",[162,182,184],{"id":183},"legacy-configuration","Legacy configuration",[132,186,187],{},"You can also define color swatches using the legacy format in theme settings.",[189,190,191,192,180],"warning",{},"The legacy format is deprecated and will be removed in a future update. We recommend migrating to ",[173,193,195],{"href":194},"#native-shopify-swatches-recommended","native Shopify swatches",[197,198,200],"h3",{"id":199},"adding-swatches","Adding swatches",[202,203,205,210,244,248],"steps",{"level":204},"4",[206,207,209],"h4",{"id":208},"open-the-color-swatch-settings","Open the color swatch settings",[211,212,213,228,239],"ol",{},[142,214,215,216,219,220,223,224,227],{},"In your Shopify admin, go to ",[135,217,218],{},"Online Store"," > ",[135,221,222],{},"Themes"," and click ",[135,225,226],{},"Customize"," on the Atlas theme.",[142,229,230,231,234,235,238],{},"Open ",[232,233],"icon-gear",{}," ",[135,236,237],{},"Theme settings"," in the Theme Editor.",[142,240,241,242,180],{},"Click ",[135,243,47],{},[206,245,247],{"id":246},"enter-your-swatch-definitions","Enter your swatch definitions",[132,249,250,251,254],{},"In the ",[135,252,253],{},"Custom swatches"," field, add one swatch per line using the formats described below.",[197,256,258],{"id":257},"configuration-format","Configuration format",[132,260,261],{},"Each line in the configuration field defines a single swatch. The general syntax is:",[263,264,269],"pre",{"className":265,"code":267,"language":268},[266],"language-text","Name:value\n","text",[270,271,267],"code",{"__ignoreMap":272},"",[132,274,275,276,279,280,283],{},"where ",[135,277,278],{},"Name"," is the color option value as it appears on your product and ",[135,281,282],{},"value"," is a HEX color code or an image filename.",[206,285,287],{"id":286},"solid-color","Solid color",[263,289,292],{"className":290,"code":291,"language":268},[266],"Red:#FF0000\nLight blue:#00AAFF\nIris:#5D3FD3\n",[270,293,291],{"__ignoreMap":272},[132,295,296],{},"Enter the color name, a colon, and the HEX value. Each color must be on its own line.",[298,299,300,301,306],"note",{},"Use an ",[173,302,305],{"href":303,"rel":304,"target":178},"https://google.com/search?q=color+picker",[177],"online color picker"," to find the HEX value for any color.",[206,308,310],{"id":309},"two-tone-color","Two-tone color",[263,312,315],{"className":313,"code":314,"language":268},[266],"Purple / Light blue:#B055C4#84DAFF\nBlack and White:#000000#F4F4F4\n",[270,316,314],{"__ignoreMap":272},[132,318,319],{},"To create a two-tone swatch, append a second HEX value directly after the first - no separator needed.",[206,321,323],{"id":322},"image","Image",[263,325,328],{"className":326,"code":327,"language":268},[266],"Leather:leather.jpg\n",[270,329,327],{"__ignoreMap":272},[132,331,332],{},"To use an image as a swatch, provide the filename of an image uploaded to your Shopify store.",[202,334,335,339,362,366,372],{"level":204},[206,336,338],{"id":337},"upload-a-swatch-image","Upload a swatch image",[211,340,341,349],{},[142,342,215,343,219,346,180],{},[135,344,345],{},"Content",[135,347,348],{},"Files",[142,350,241,351,354,355,234,358,361],{},[135,352,353],{},"Upload files"," and upload your swatch image. For best results, use a ",[135,356,357],{},"128 x 128 px",[270,359,360],{},".jpg"," image.",[206,363,365],{"id":364},"reference-the-image-in-the-configuration","Reference the image in the configuration",[132,367,368,369,371],{},"Add a line to the ",[135,370,253],{}," field using the exact filename (including the extension) as it appears in your Shopify admin:",[263,373,376],{"className":374,"code":375,"language":268},[266],"Leather:leather.jpg\nWood grain:wood-grain.png\n",[270,377,375],{"__ignoreMap":272},{"title":272,"searchDepth":379,"depth":379,"links":380},2,[381,382],{"id":164,"depth":379,"text":165},{"id":183,"depth":379,"text":184,"children":383},[384,386],{"id":199,"depth":385,"text":200},3,{"id":257,"depth":385,"text":258},"Learn how to set up and display color swatches on product pages, product cards, and collection filters","md",null,{},true,{"title":47,"description":387},"H7cF8VsyqZMLnz3fvV7WnbZ4fpp96BKh-5Xk9uAKxAE",[395,397],{"title":43,"path":44,"stem":45,"description":396,"children":-1},"Learn how to set up and display size charts",{"title":51,"path":52,"stem":53,"description":398,"children":-1},"Learn how to enable and customize the quick view modal on product cards",1771425625268]