[{"data":1,"prerenderedAt":748},["ShallowReactive",2],{"header:help":3,"footer:default":67,"story:navigation\u002Fsearch:help":250,"story:help\u002Fcategories":288,"story:help\u002Farticles\u002Fcustomize-the-svg-icon-colors":314,"no-guide:customize-the-svg-icon-colors":59,"article:\u002Fhelp\u002Farticles\u002Fcustomize-the-svg-icon-colors":491,"story:contact":505,"help:tree:f4a61cc3-c7b7-41e5-81c7-4676ac3312b7":694,"_apollo:default":747},{"name":4,"created_at":5,"published_at":6,"updated_at":7,"id":8,"uuid":9,"content":10,"slug":57,"full_slug":58,"sort_by_date":59,"position":60,"tag_list":61,"is_startpage":24,"parent_id":62,"meta_data":59,"group_id":63,"first_published_at":64,"release_id":59,"lang":65,"path":59,"alternates":66,"default_full_slug":59,"translated_slugs":59},"Help Center Header","2024-08-09T18:06:34.939Z","2024-10-21T21:58:39.217Z","2024-10-21T21:58:39.232Z",10082752,"3e9b88f7-c163-4657-a2f2-62532d600fad",{"_uid":11,"link":12,"badge":16,"items":17,"title":13,"buttons":50,"new_tab":24,"submenu":51,"alignment":13,"component":52,"badge_link":53,"top_menu_items":56},"e5645a1a-f991-40e8-8d67-e40ebc082b5a",{"id":13,"url":13,"linktype":14,"fieldtype":15,"cached_url":13},"","story","multilink","Help Center",[18,27,34,39,44],{"_uid":19,"link":20,"title":23,"new_tab":24,"submenu":25,"component":26},"5cbe2861-1f49-4166-97da-a4dddd8105e3",{"id":21,"url":13,"linktype":14,"fieldtype":15,"cached_url":22},"4c0a2d99-ec30-4579-8ef1-6bf5564d4839","help\u002Fcategories\u002F","Articles",false,[],"header___item",{"_uid":28,"link":29,"title":32,"new_tab":33,"component":26},"1c8edeb5-b9e9-4cb8-b1c6-c1f292f7d7cd",{"id":13,"url":30,"linktype":31,"fieldtype":15,"cached_url":30},"https:\u002F\u002Fwiki.foxycart.com\u002F","url","Documentation",true,{"_uid":35,"link":36,"title":38,"new_tab":33,"component":26},"8d7df70e-f087-4da0-b616-6f0e9a5af35c",{"id":13,"url":37,"linktype":31,"fieldtype":15,"cached_url":37},"https:\u002F\u002Fapi.foxycart.com\u002F","API Documentation",{"_uid":40,"link":41,"title":43,"new_tab":33,"component":26},"f76e7944-23d5-4652-87e4-cdae79272762",{"id":13,"url":42,"linktype":31,"fieldtype":15,"cached_url":42},"https:\u002F\u002Fstatus.foxy.io\u002F","System Status",{"_uid":45,"link":46,"title":49,"new_tab":24,"component":26},"0de16771-4c84-466c-a1da-d8568113c71f",{"id":47,"url":13,"linktype":14,"fieldtype":15,"cached_url":48},"01e4e370-f9b9-45af-8fa9-f15540699b0d","contact","Contact Us",[],[],"header",{"id":54,"url":13,"linktype":14,"fieldtype":15,"cached_url":55},"4a679eb7-662d-4ea4-a976-5a2acbf0b663","help\u002F",[],"help-header","navigation\u002Fhelp-header",null,20,[],10082747,"71b81c2e-5e09-48a1-a397-a3c72fcd344a","2022-09-21T14:50:25.655Z","default",[],{"name":68,"created_at":69,"published_at":70,"updated_at":71,"id":72,"uuid":73,"content":74,"slug":243,"full_slug":244,"sort_by_date":59,"position":245,"tag_list":246,"is_startpage":24,"parent_id":62,"meta_data":59,"group_id":247,"first_published_at":248,"release_id":59,"lang":65,"path":59,"alternates":249,"default_full_slug":59,"translated_slugs":59},"Default Footer","2024-08-09T18:06:59.024Z","2025-09-04T06:24:46.223Z","2025-09-04T06:24:46.241Z",10082753,"e59e67ac-248a-482f-84a1-53d4f318186a",{"_uid":75,"about":76,"logos":77,"socials":82,"sections":108,"component":225,"cta_title":226,"bottom_links":227,"cta_subtitle":241,"cta_button_link":242,"cta_button_text":183},"830983f5-c4c4-43c8-b150-86a5e3fa6dc8","Foxy’s hosted cart & payment page allow you to sell anything, using your existing website or platform.",[78],{"id":79,"alt":13,"name":13,"focus":13,"title":13,"filename":80,"copyright":13,"fieldtype":81},14760,"https:\u002F\u002Fa-us.storyblok.com\u002Ff\u002F1001040\u002Fx\u002F3b030847ec\u002Fb-corp.svg","asset",[83,90,96,102],{"_uid":84,"icon":85,"link":86,"name":88,"component":89},"faf0a618-ea94-42ea-9182-03be18c43216","fa-facebook",{"id":13,"url":87,"linktype":31,"fieldtype":15,"cached_url":87},"https:\u002F\u002Fwww.facebook.com\u002Ffoxycart","Facebook","footer___social",{"_uid":91,"icon":92,"link":93,"name":95,"component":89},"14309c18-7e79-423e-b375-34555bac0811","fa-instagram",{"id":13,"url":94,"linktype":31,"fieldtype":15,"cached_url":94},"https:\u002F\u002Fwww.instagram.com\u002Ffoxy_io","Instagram",{"_uid":97,"icon":98,"link":99,"name":101,"component":89},"8f7fe7cf-0dd3-4596-8334-226ea466716a","fa-linkedin",{"id":13,"url":100,"linktype":31,"fieldtype":15,"cached_url":100},"https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Ffoxycart.com","LinkedIn",{"_uid":103,"icon":104,"link":105,"name":107,"component":89},"90a675b4-dd97-40b5-be09-00a87223d4c5","fa-youtube",{"id":13,"url":106,"linktype":31,"fieldtype":15,"cached_url":106},"https:\u002F\u002Fwww.youtube.com\u002Fuser\u002Ffoxycart","Youtube",[109,139,184,206],{"_uid":110,"name":111,"items":112,"component":138},"82849945-282f-488c-b18d-a8d2252f514a","Company",[113,120,126,132],{"_uid":114,"link":115,"title":118,"new_tab":24,"component":119},"1f699ab1-938b-4d9d-9825-aabcbe6f57fe",{"id":116,"url":13,"linktype":14,"fieldtype":15,"cached_url":117},"63634293-a749-4226-9439-9f38ee6dcda0","about-us","About Us","footer___menu_items",{"_uid":121,"link":122,"title":125,"new_tab":24,"component":119},"b26b00f1-a0e7-4be2-8ab3-428b8cc841f8",{"id":123,"url":13,"linktype":14,"fieldtype":15,"cached_url":124},"26cb7c55-faed-4a77-a291-1552d4111b3e","how-foxy-works","How Foxy Works",{"_uid":127,"link":128,"title":131,"new_tab":24,"component":119},"b40c68a0-1ceb-4226-9515-6176534f61fe",{"id":129,"url":13,"linktype":14,"fieldtype":15,"cached_url":130},"dc6657d7-7f4f-4c0d-b781-e971b038ee26","for-good","Foxy For Good",{"_uid":133,"link":134,"title":137,"new_tab":24,"component":119},"3ad0c134-bef9-4fff-b891-e09f16109036",{"id":135,"url":13,"linktype":14,"fieldtype":15,"cached_url":136},"23cae210-baf4-4588-9862-d09f4f52ccd2","brand-assets","Brand Assets","footer___section",{"_uid":140,"name":141,"items":142,"component":138},"a6805fa8-ac60-47f1-b8f0-f27aded0afbe","Product",[143,149,155,161,167,173,179],{"_uid":144,"link":145,"title":148,"new_tab":24,"component":119},"b39c8a4e-2383-486f-b76a-11fbb15d8134",{"id":146,"url":13,"linktype":14,"fieldtype":15,"cached_url":147},"bb04690f-fe98-4ce6-80be-05b950f2364f","features\u002F","Features",{"_uid":150,"link":151,"title":154,"new_tab":24,"component":119},"64f8a41f-c181-433d-bc0a-fc94e71ecbf6",{"id":152,"url":13,"linktype":14,"fieldtype":15,"cached_url":153},"c450c58d-761d-48c0-a9af-0b064611689b","pricing","Pricing",{"_uid":156,"link":157,"title":160,"new_tab":24,"component":119},"6e0b287f-fd8c-4146-9e0e-0ab0b5c9ce3c",{"id":158,"url":13,"linktype":14,"fieldtype":15,"cached_url":159},"fab20ad9-e76a-4947-b709-3a6fdfa88028","blog\u002Fcategories\u002Fproduct-updates","Product Updates",{"_uid":162,"link":163,"title":166,"new_tab":24,"component":119},"47e5a074-a6b5-4f1c-8c2f-89a2ae9f83eb",{"id":164,"url":13,"linktype":14,"fieldtype":15,"cached_url":165},"d2c83612-d611-47f3-a3b4-ca7fe08540b8","changelogs\u002F","Changelogs",{"_uid":168,"link":169,"title":172,"new_tab":24,"component":119},"b5c08774-542f-4ffd-b357-c94d674488b9",{"id":170,"url":13,"linktype":14,"fieldtype":15,"cached_url":171},"08876121-0df3-4ed9-aa11-902b3e41cd02","whats-next","What's Next",{"_uid":174,"link":175,"title":178,"new_tab":24,"component":119},"9c2704ed-6d9f-43e1-9e67-c8d91c083288",{"id":176,"url":13,"linktype":14,"fieldtype":15,"cached_url":177},"056a7857-b18f-4025-8f97-91a38fc19bc8","compare\u002F","Compare",{"_uid":180,"link":181,"title":183,"new_tab":24,"component":119},"5f2db35b-674b-406a-8fa7-d246633af9fe",{"id":13,"url":182,"linktype":31,"fieldtype":15,"cached_url":182},"https:\u002F\u002Fadmin.foxy.io\u002Fsign-up","Try Foxy Free",{"_uid":185,"name":186,"items":187,"component":138},"63fa1f29-4252-4640-9922-fe310e69e54a","Security",[188,194,200],{"_uid":189,"link":190,"title":193,"new_tab":24,"component":119},"1158ddb6-9eb0-466f-8eb6-7ca2ae66c8b8",{"id":191,"url":13,"linktype":14,"fieldtype":15,"cached_url":192},"1f58fb2c-8681-4742-b6e8-09999beae9f6","security-contact","Security Contact",{"_uid":195,"link":196,"title":199,"new_tab":24,"component":119},"9a79c54a-6022-4dfd-854b-766f5e4703ba",{"id":197,"url":13,"linktype":14,"fieldtype":15,"cached_url":198},"55cbfcc3-425a-4261-8037-54e919851d2d","pci","PCI Compliance",{"_uid":201,"link":202,"title":205,"new_tab":24,"component":119},"0b85f5b6-9534-4071-b323-b39d053dd4d7",{"id":203,"url":13,"linktype":14,"fieldtype":15,"cached_url":204},"c3ac0fe3-83e2-4879-afbd-d4c83e1590df","help\u002Farticles\u002Four-official-domains-public-code","Domains & Codebases",{"_uid":207,"name":208,"items":209,"component":138},"998ded67-d107-49f4-8154-ca6be51671ec","Support",[210,213,216,219,222],{"_uid":211,"link":212,"title":16,"new_tab":24,"component":119},"594ffd35-3049-4004-bb08-0db568ebd819",{"id":54,"url":13,"linktype":14,"fieldtype":15,"cached_url":55},{"_uid":214,"link":215,"title":32,"new_tab":33,"component":119},"0a1a55ab-a985-4f9d-8b42-26da714d0c1c",{"id":13,"url":30,"linktype":31,"fieldtype":15,"cached_url":30},{"_uid":217,"link":218,"title":38,"new_tab":33,"component":119},"61e0b7c8-aadf-419b-a339-b3ccabc65bf4",{"id":13,"url":37,"linktype":31,"fieldtype":15,"cached_url":37},{"_uid":220,"link":221,"title":43,"new_tab":33,"component":119},"fd67a89e-1c54-4d31-94b5-64be999062d6",{"id":13,"url":42,"linktype":31,"fieldtype":15,"cached_url":42},{"_uid":223,"link":224,"title":49,"new_tab":24,"component":119},"231a6f71-e996-4ad4-b033-d4d5542f34f0",{"id":47,"url":13,"linktype":14,"fieldtype":15,"cached_url":48},"footer","Get started with our *unlimited free trial*.",[228,235],{"_uid":229,"link":230,"text":233,"component":234},"f0b77210-2632-45a2-8436-e57cad84d01a",{"id":231,"url":13,"linktype":14,"fieldtype":15,"cached_url":232},"60ba16a2-c1f4-485f-b978-8d2eeeafbf5a","terms-of-service","Terms of Service","footer___bottom_links",{"_uid":236,"link":237,"text":240,"component":234},"4bd497b0-993f-4b4d-a5b7-8a49c7c8fec9",{"id":238,"url":13,"linktype":14,"fieldtype":15,"cached_url":239},"332302b9-1d18-4016-b9c8-9b33c72d782b","privacy-policy","Privacy Policy","No credit card required.",{"id":13,"url":182,"linktype":31,"fieldtype":15,"cached_url":182},"default-footer","navigation\u002Fdefault-footer",50,[],"11006268-07f9-41e9-96f3-c51fb723399d","2022-09-21T20:39:02.357Z",[],{"name":251,"created_at":252,"published_at":253,"updated_at":254,"id":255,"uuid":256,"content":257,"slug":279,"full_slug":282,"sort_by_date":59,"position":283,"tag_list":284,"is_startpage":24,"parent_id":62,"meta_data":59,"group_id":285,"first_published_at":286,"release_id":59,"lang":65,"path":59,"alternates":287,"default_full_slug":59,"translated_slugs":59},"Search","2024-10-21T22:08:54.973Z","2025-05-26T09:17:25.790Z","2025-05-26T09:17:25.804Z",13592003,"14cbc359-9ac1-4a7a-a8de-ad4ac8ef26d4",{"_uid":258,"name":251,"indices":259,"summary":13,"component":279,"primary_image":280},"5e4a56e8-76f1-4790-b3a7-70f1be97d042",[260,265,269,274],{"key":261,"_uid":262,"icon":13,"name":263,"component":264},"all","c12a3210-7323-4273-8217-5215e52efe84","All","index",{"key":266,"_uid":267,"icon":268,"name":23,"component":264},"help_center_article","5acff080-95e4-44d3-8dcf-1b19720af382","fa-file-alt",{"key":270,"_uid":271,"icon":272,"name":273,"component":264},"help_center_guide","b8fbc206-c083-471e-a1f0-0ebeb90a669d","fa-book","Guides",{"key":275,"_uid":276,"icon":277,"name":278,"component":264},"blog_post","23419e83-2e56-4c4c-8a05-9fd1b3c9a9bd","fa-file-image","Blog Posts","search",{"id":59,"alt":59,"name":13,"focus":59,"title":59,"source":59,"filename":13,"copyright":59,"fieldtype":81,"meta_data":281},{},"navigation\u002Fsearch",60,[],"11e1fd31-95cd-4fc9-b736-8b8910663e6c","2024-10-21T23:17:05.904Z",[],{"name":23,"created_at":289,"published_at":290,"updated_at":291,"id":292,"uuid":21,"content":293,"slug":307,"full_slug":22,"sort_by_date":59,"position":308,"tag_list":309,"is_startpage":33,"parent_id":310,"meta_data":59,"group_id":311,"first_published_at":312,"release_id":59,"lang":65,"path":59,"alternates":313,"default_full_slug":59,"translated_slugs":59},"2022-09-19T14:42:29.685Z","2024-07-30T18:17:22.506Z","2024-07-30T18:17:22.525Z",2660,{"_uid":294,"icon":13,"name":23,"guides":295,"pinned":24,"summary":296,"category":13,"component":297,"blog_posts":298,"content_hub":24,"icon_custom":299,"case_studies":300,"faq_sections":301,"help_articles":302,"featured_guides":303,"mailbox_category":13,"featured_articles":304,"featured_blog_posts":305,"featured_case_studies":306},"d6dae89a-907a-4bf7-82de-fe2ba875ee6e",[],"Get your questions answered with our browsable knowledge base.","help_center_category",[],{"id":59,"alt":59,"name":13,"focus":59,"title":59,"filename":13,"copyright":59,"fieldtype":81},[],[],[],[],[],[],[],"categories",530,[],2658,"19ebcdd2-027f-47f5-9a5b-a8992c959578","2022-09-19T16:24:39.219Z",[],{"name":315,"created_at":316,"published_at":317,"updated_at":318,"id":319,"uuid":320,"content":321,"slug":484,"full_slug":485,"sort_by_date":59,"position":486,"tag_list":487,"is_startpage":24,"parent_id":488,"meta_data":59,"group_id":489,"first_published_at":317,"release_id":59,"lang":65,"path":59,"alternates":490,"default_full_slug":59,"translated_slugs":59},"Customize the SVG icon colors","2026-07-23T03:50:59.829Z","2026-07-23T04:10:02.459Z","2026-07-23T04:10:02.475Z",201068789113059,"f4a61cc3-c7b7-41e5-81c7-4676ac3312b7",{"_uid":322,"body":323,"name":315,"image":479,"pinned":24,"summary":481,"category":482,"component":266,"related_articles":483},"4725e162-2061-482f-8c6a-2f665add47e2",{"type":324,"content":325},"doc",[326,333,340,441,446,452,457],{"type":327,"attrs":328,"content":329},"paragraph",{"textAlign":59},[330],{"text":331,"type":332},"Change the fill color of the SVG icons used on the cart and checkout — like arrows and padlocks — using custom CSS.","text",{"type":334,"attrs":335,"content":337},"heading",{"level":336,"textAlign":59},2,[338],{"text":339,"type":332},"Steps",{"type":341,"attrs":342,"content":344},"ordered_list",{"order":343},1,[345,353,367,383,396,415,428],{"type":346,"content":347},"list_item",[348],{"type":327,"attrs":349,"content":350},{"textAlign":59},[351],{"text":352,"type":332},"Identify the icon you want to recolor from the reference list below.",{"type":346,"content":354},[355],{"type":327,"attrs":356,"content":357},{"textAlign":59},[358,360,365],{"text":359,"type":332},"Copy the corresponding CSS rule and change the ",{"text":361,"type":332,"marks":362},"fill",[363],{"type":364},"code",{"text":366,"type":332}," value to your desired color.",{"type":346,"content":368},[369],{"type":327,"attrs":370,"content":371},{"textAlign":59},[372,374,381],{"text":373,"type":332},"Go to the ",{"text":375,"type":332,"marks":376},"Foxy admin",[377],{"type":378,"attrs":379},"link",{"href":380,"uuid":59,"anchor":59,"target":59,"linktype":31},"https:\u002F\u002Fadmin.foxy.io",{"text":382,"type":332},".",{"type":346,"content":384},[385],{"type":327,"attrs":386,"content":387},{"textAlign":59},[388,390,395],{"text":389,"type":332},"Go to ",{"text":391,"type":332,"marks":392},"Templates > Configuration",[393],{"type":394},"bold",{"text":382,"type":332},{"type":346,"content":397},[398],{"type":327,"attrs":399,"content":400},{"textAlign":59},[401,403,407,409,413],{"text":402,"type":332},"Check ",{"text":404,"type":332,"marks":405},"Add custom header and footer code to your templates",[406],{"type":394},{"text":408,"type":332}," if it isn’t already checked, to reveal the ",{"text":410,"type":332,"marks":411},"custom header",[412],{"type":394},{"text":414,"type":332}," field.",{"type":346,"content":416},[417],{"type":327,"attrs":418,"content":419},{"textAlign":59},[420,422,426],{"text":421,"type":332},"Paste your updated rule inside a ",{"text":423,"type":332,"marks":424},"\u003Cstyle>",[425],{"type":364},{"text":427,"type":332}," tag in the custom header field. If code is already present, add yours alongside it rather than replacing it.",{"type":346,"content":429},[430],{"type":327,"attrs":431,"content":432},{"textAlign":59},[433,435,439],{"text":434,"type":332},"Click ",{"text":436,"type":332,"marks":437},"Update",[438],{"type":394},{"text":440,"type":332}," to save.",{"type":334,"attrs":442,"content":443},{"level":336,"textAlign":59},[444],{"text":445,"type":332},"SVG icon reference",{"type":447,"attrs":448,"content":449},"code_block",{"class":59},[450],{"text":451,"type":332},"\u002F* Used within continue shopping button on full-page cart\u002Fcheckout *\u002F\n#fc .fa-angle-double-left,\n#fc .fc-cancel-continue-shopping svg {\n  fill: #666;\n}\n\u002F* Used within continue shopping button on sidecart *\u002F\n#fc .fa-caret-left,\n#fc .fc-sidecart-only-fixed .fc-fixed-button-left svg {\n  fill: #FFF;\n}\n\u002F* Used within top proceed to checkout button on sidecart *\u002F\n#fc .fa-caret-right,\n[data-fc-sidecart] #fc .fa-caret-right,\n#fc .fc-sidecart-only-fixed .fc-fixed-button-right svg {\n  fill: #888;\n}\n\u002F* Used within bottom proceed to checkout button on sidecart and credit card field on tablet\u002Fmobile checkout *\u002F\n#fc .fa-lock,\n#fc-cart .fc-action--checkout--button svg,\n#fc .fc-checkout__section--payment svg.fc-svg-icon--lock {\n  fill: #C1DB9B;\n}\n\u002F* Used within payments section on full-size checkout *\u002F\n#fc .fa-lock-large,\n#fc .fc-checkout__section--payment svg#fc-icon-lock-large {\n  fill: #EEE;\n}\n\u002F* Used within remove coupon option *\u002F\n#fc .fa-times-circle,\n#fc .fc-transaction__discounts .fc-action--close svg {\n  fill: #666;\n}\n\u002F* Used within shipping fields on sidecart *\u002F\n#fc .fa-truck,\n#fc .fc-address-entry svg {\n  fill: #999;\n}\n\u002F* Used within tax fields on sidecart *\u002F\n#fc .fa-bank,\n#fc .fc-address-entry svg {\n  fill: #999;\n}\n\u002F* Used within address validation modal *\u002F\n#fc .fa-map-marker {\n  fill: #999;\n}\n",{"type":334,"attrs":453,"content":454},{"level":336,"textAlign":59},[455],{"text":456,"type":332},"Notes",{"type":458,"content":459},"bullet_list",[460,467],{"type":346,"content":461},[462],{"type":327,"attrs":463,"content":464},{"textAlign":59},[465],{"text":466,"type":332},"Some icons may have different colors applied in specific locations that differ from the defaults shown above.",{"type":346,"content":468},[469],{"type":327,"attrs":470,"content":471},{"textAlign":59},[472,474,477],{"text":473,"type":332},"Only the ",{"text":361,"type":332,"marks":475},[476],{"type":364},{"text":478,"type":332}," value needs to change — the selectors should stay as they are so the rule targets the correct icon.",{"id":59,"alt":59,"name":13,"focus":59,"title":59,"source":59,"filename":13,"copyright":59,"fieldtype":81,"meta_data":480},{},"How to change the fill color of the SVG icons on the cart and checkout, like arrows and padlocks, using custom CSS.","f20568b6-07b6-414b-baec-827e2cc0f470",[],"customize-the-svg-icon-colors","help\u002Farticles\u002Fcustomize-the-svg-icon-colors",-4510,[],2659,"49dfd19e-f336-4cba-9ece-c8b2744f60b1",[],{"html":492,"sections":493,"segments":501},"\u003Cp>Change the fill color of the SVG icons used on the cart and checkout — like arrows and padlocks — using custom CSS.\u003C\u002Fp>\u003Csection id=\"steps\" data-title=\"Steps\" data-title-node=\"H2\">\u003Chr class=\"my-8\" style=\"margin-left: -48px; margin-right: -40vw\">\u003Ch2 data-anchor-id=\"steps\">Steps\u003C\u002Fh2>\u003Col class=\"step step-icon-sm step-dashed step-border-last-0 mt-3\">\u003Cli class=\"step-item\">\u003Cdiv class=\"step-content-wrapper\">\u003Cspan class=\"step-icon step-icon-soft-primary\">1\u003C\u002Fspan>\u003Cdiv class=\"w-100 overflow-hidden\">\u003Cdiv class=\"step-content mt-2\">\u003Cp>Identify the icon you want to recolor from the reference list below.\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fli>\u003Cli class=\"step-item\">\u003Cdiv class=\"step-content-wrapper\">\u003Cspan class=\"step-icon step-icon-soft-primary\">2\u003C\u002Fspan>\u003Cdiv class=\"w-100 overflow-hidden\">\u003Cdiv class=\"step-content mt-2\">\u003Cp>Copy the corresponding CSS rule and change the \u003Ccode class=\"badge bg-soft-danger text-danger\">fill\u003C\u002Fcode> value to your desired color.\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fli>\u003Cli class=\"step-item\">\u003Cdiv class=\"step-content-wrapper\">\u003Cspan class=\"step-icon step-icon-soft-primary\">3\u003C\u002Fspan>\u003Cdiv class=\"w-100 overflow-hidden\">\u003Cdiv class=\"step-content mt-2\">\u003Cp>Go to the \u003Ca href=\"https:\u002F\u002Fadmin.foxy.io\" class=\"\">Foxy admin\u003C\u002Fa>.\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fli>\u003Cli class=\"step-item\">\u003Cdiv class=\"step-content-wrapper\">\u003Cspan class=\"step-icon step-icon-soft-primary\">4\u003C\u002Fspan>\u003Cdiv class=\"w-100 overflow-hidden\">\u003Cdiv class=\"step-content mt-2\">\u003Cp>Go to \u003Cstrong>Templates > Configuration\u003C\u002Fstrong>.\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fli>\u003Cli class=\"step-item\">\u003Cdiv class=\"step-content-wrapper\">\u003Cspan class=\"step-icon step-icon-soft-primary\">5\u003C\u002Fspan>\u003Cdiv class=\"w-100 overflow-hidden\">\u003Cdiv class=\"step-content mt-2\">\u003Cp>Check \u003Cstrong>Add custom header and footer code to your templates\u003C\u002Fstrong> if it isn’t already checked, to reveal the \u003Cstrong>custom header\u003C\u002Fstrong> field.\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fli>\u003Cli class=\"step-item\">\u003Cdiv class=\"step-content-wrapper\">\u003Cspan class=\"step-icon step-icon-soft-primary\">6\u003C\u002Fspan>\u003Cdiv class=\"w-100 overflow-hidden\">\u003Cdiv class=\"step-content mt-2\">\u003Cp>Paste your updated rule inside a \u003Ccode class=\"badge bg-soft-danger text-danger\"><style>\u003C\u002Fcode> tag in the custom header field. If code is already present, add yours alongside it rather than replacing it.\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fli>\u003Cli class=\"step-item\">\u003Cdiv class=\"step-content-wrapper\">\u003Cspan class=\"step-icon step-icon-soft-primary\">7\u003C\u002Fspan>\u003Cdiv class=\"w-100 overflow-hidden\">\u003Cdiv class=\"step-content mt-2\">\u003Cp>Click \u003Cstrong>Update\u003C\u002Fstrong> to save.\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fli>\u003C\u002Fol>\u003C\u002Fsection>\u003Csection id=\"svg-icon-reference\" data-title=\"SVG icon reference\" data-title-node=\"H2\">\u003Chr class=\"my-8\" style=\"margin-left: -48px; margin-right: -40vw\">\u003Ch2 data-anchor-id=\"svg-icon-reference\">SVG icon reference\u003C\u002Fh2>\u003Cdiv class=\"position-relative w-100 overflow-hidden rounded-2\" data-code-block>\u003Cdiv class=\"d-flex justify-content-end border-bottom\" style=\"background:#2b2c3b;\">\u003Cbutton type=\"button\" class=\"btn btn-link btn-sm text-light\" title=\"Copy\" data-code-button>\u003Cspan data-code-default style=\"\">\u003Ci class=\"fal fa-copy me-2\">\u003C\u002Fi> Copy \u003C\u002Fspan>\u003Cspan class=\"text-success\" data-code-success style=\"display:none;\">\u003Ci class=\"fal fa-check ms-2\">\u003C\u002Fi> Copied \u003C\u002Fspan>\u003C\u002Fbutton>\u003C\u002Fdiv>\u003Cdiv class=\"small\">\u003Cpre class=\"hljs p-2\" data-code-content>\u002F* Used within continue shopping button on full-page cart\u002Fcheckout *\u002F\n#fc .fa-angle-double-left,\n#fc .fc-cancel-continue-shopping svg {\n  fill: #666;\n}\n\u002F* Used within continue shopping button on sidecart *\u002F\n#fc .fa-caret-left,\n#fc .fc-sidecart-only-fixed .fc-fixed-button-left svg {\n  fill: #FFF;\n}\n\u002F* Used within top proceed to checkout button on sidecart *\u002F\n#fc .fa-caret-right,\n[data-fc-sidecart] #fc .fa-caret-right,\n#fc .fc-sidecart-only-fixed .fc-fixed-button-right svg {\n  fill: #888;\n}\n\u002F* Used within bottom proceed to checkout button on sidecart and credit card field on tablet\u002Fmobile checkout *\u002F\n#fc .fa-lock,\n#fc-cart .fc-action--checkout--button svg,\n#fc .fc-checkout__section--payment svg.fc-svg-icon--lock {\n  fill: #C1DB9B;\n}\n\u002F* Used within payments section on full-size checkout *\u002F\n#fc .fa-lock-large,\n#fc .fc-checkout__section--payment svg#fc-icon-lock-large {\n  fill: #EEE;\n}\n\u002F* Used within remove coupon option *\u002F\n#fc .fa-times-circle,\n#fc .fc-transaction__discounts .fc-action--close svg {\n  fill: #666;\n}\n\u002F* Used within shipping fields on sidecart *\u002F\n#fc .fa-truck,\n#fc .fc-address-entry svg {\n  fill: #999;\n}\n\u002F* Used within tax fields on sidecart *\u002F\n#fc .fa-bank,\n#fc .fc-address-entry svg {\n  fill: #999;\n}\n\u002F* Used within address validation modal *\u002F\n#fc .fa-map-marker {\n  fill: #999;\n}\n\u003C\u002Fpre>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\u003Csection id=\"notes\" data-title=\"Notes\" data-title-node=\"H2\">\u003Chr class=\"my-8\" style=\"margin-left: -48px; margin-right: -40vw\">\u003Ch2 data-anchor-id=\"notes\">Notes\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cp>Some icons may have different colors applied in specific locations that differ from the defaults shown above.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>Only the \u003Ccode class=\"badge bg-soft-danger text-danger\">fill\u003C\u002Fcode> value needs to change — the selectors should stay as they are so the rule targets the correct icon.\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fsection>",[494,497,499],{"id":495,"title":339,"level":496},"steps","H2",{"id":498,"title":445,"level":496},"svg-icon-reference",{"id":500,"title":456,"level":496},"notes",[502],{"type":503,"content":504},"html","\u003Cp>Change the fill color of the SVG icons used on the cart and checkout — like arrows and padlocks — using custom CSS.\u003C\u002Fp>\u003Ch2>Steps\u003C\u002Fh2>\u003Col order=\"1\">\u003Cli>\u003Cp>Identify the icon you want to recolor from the reference list below.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>Copy the corresponding CSS rule and change the \u003Ccode class=\"badge bg-soft-danger text-danger\">fill\u003C\u002Fcode> value to your desired color.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>Go to the \u003Ca href=\"https:\u002F\u002Fadmin.foxy.io\" class=\"\">Foxy admin\u003C\u002Fa>.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>Go to \u003Cstrong>Templates > Configuration\u003C\u002Fstrong>.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>Check \u003Cstrong>Add custom header and footer code to your templates\u003C\u002Fstrong> if it isn’t already checked, to reveal the \u003Cstrong>custom header\u003C\u002Fstrong> field.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>Paste your updated rule inside a \u003Ccode class=\"badge bg-soft-danger text-danger\"><style>\u003C\u002Fcode> tag in the custom header field. If code is already present, add yours alongside it rather than replacing it.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>Click \u003Cstrong>Update\u003C\u002Fstrong> to save.\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Fol>\u003Ch2>SVG icon reference\u003C\u002Fh2>\u003Cpre>\u003Ccode>\u002F* Used within continue shopping button on full-page cart\u002Fcheckout *\u002F\n#fc .fa-angle-double-left,\n#fc .fc-cancel-continue-shopping svg {\n  fill: #666;\n}\n\u002F* Used within continue shopping button on sidecart *\u002F\n#fc .fa-caret-left,\n#fc .fc-sidecart-only-fixed .fc-fixed-button-left svg {\n  fill: #FFF;\n}\n\u002F* Used within top proceed to checkout button on sidecart *\u002F\n#fc .fa-caret-right,\n[data-fc-sidecart] #fc .fa-caret-right,\n#fc .fc-sidecart-only-fixed .fc-fixed-button-right svg {\n  fill: #888;\n}\n\u002F* Used within bottom proceed to checkout button on sidecart and credit card field on tablet\u002Fmobile checkout *\u002F\n#fc .fa-lock,\n#fc-cart .fc-action--checkout--button svg,\n#fc .fc-checkout__section--payment svg.fc-svg-icon--lock {\n  fill: #C1DB9B;\n}\n\u002F* Used within payments section on full-size checkout *\u002F\n#fc .fa-lock-large,\n#fc .fc-checkout__section--payment svg#fc-icon-lock-large {\n  fill: #EEE;\n}\n\u002F* Used within remove coupon option *\u002F\n#fc .fa-times-circle,\n#fc .fc-transaction__discounts .fc-action--close svg {\n  fill: #666;\n}\n\u002F* Used within shipping fields on sidecart *\u002F\n#fc .fa-truck,\n#fc .fc-address-entry svg {\n  fill: #999;\n}\n\u002F* Used within tax fields on sidecart *\u002F\n#fc .fa-bank,\n#fc .fc-address-entry svg {\n  fill: #999;\n}\n\u002F* Used within address validation modal *\u002F\n#fc .fa-map-marker {\n  fill: #999;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Notes\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cp>Some icons may have different colors applied in specific locations that differ from the defaults shown above.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>Only the \u003Ccode class=\"badge bg-soft-danger text-danger\">fill\u003C\u002Fcode> value needs to change — the selectors should stay as they are so the rule targets the correct icon.\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>",{"name":506,"created_at":507,"published_at":508,"updated_at":509,"id":510,"uuid":47,"content":511,"slug":48,"full_slug":48,"sort_by_date":59,"position":689,"tag_list":690,"is_startpage":24,"parent_id":59,"meta_data":59,"group_id":691,"first_published_at":692,"release_id":59,"lang":65,"path":59,"alternates":693,"default_full_slug":59,"translated_slugs":59},"Contact","2022-09-23T19:56:58.957Z","2025-05-08T18:24:40.382Z","2025-05-08T18:24:40.392Z",3138,{"seo":512,"_uid":515,"title":516,"action":517,"fields":518,"method":665,"columns":666,"subtitle":680,"component":48,"button_text":686,"submit_title":687,"submit_subtitle":688},{"_uid":513,"title":506,"plugin":514,"description":13},"24ff7574-3bcc-48d2-85b5-e529dfea1cc4","meta-fields","8f54f1da-9d8f-49b2-89e7-840e886491cb","We're here to help.","https:\u002F\u002Fusebasin.com\u002Ff\u002F029f48d65402",[519,524,528,636,639,644,659],{"_uid":520,"name":521,"type":332,"label":522,"options":13,"required":33,"component":523,"placeholder":13},"9a70b226-2036-4f90-a052-b3efa61c5896","name","Name","form___field",{"_uid":525,"name":526,"type":526,"label":527,"options":13,"required":33,"component":523,"placeholder":13},"86ba35be-ff43-4a28-8633-14052a8f6622","email","Email Address",{"_uid":529,"name":530,"type":531,"label":532,"options":533,"required":33,"component":523,"conditions":534,"placeholder":13},"3f827475-492c-4f97-aa1e-2386ac263b6c","topic","select","Topic","Presales, Support, Billing, Partnerships, Order Enquiry, Other",[535,590,600,607,615,623,629],{"_uid":536,"equals":537,"fields":538,"component":589},"e21d97dd-e68e-4fa6-ba97-bc40f3041dde","Order Enquiry",[539],{"_uid":540,"body":541,"type":587,"title":13,"component":588},"b64992bc-6d53-48b8-b7a0-d81e5a062e50",{"type":324,"content":542},[543],{"type":327,"content":544},[545,547,554,556,558,559,563,565,570,578,580,585],{"text":546,"type":332},"We are ",{"text":548,"type":332,"marks":549},"Foxy.io",[550],{"type":378,"attrs":551},{"href":552,"uuid":59,"anchor":59,"custom":553,"target":59,"linktype":31},"http:\u002F\u002FFoxy.io",{},{"text":555,"type":332},", an ecommerce platform powering ecommerce for other merchants. We do not sell products, and are unable to assist with questions about order statuses or refunds for any merchants using our platform. Please contact the merchant you ordered from for assistance. If you’d like to report a store using Foxy for fraudulent practices, please select ‘other’ in the subject.",{"type":557},"hard_break",{"type":557},{"text":560,"type":332,"marks":561},"NOTE:",[562],{"type":394},{"text":564,"type":332}," We are ",{"text":566,"type":332,"marks":567},"not ",[568],{"type":569},"italic",{"text":571,"type":332,"marks":572},"Foxy.in",[573,577],{"type":378,"attrs":574},{"href":575,"uuid":59,"anchor":59,"custom":576,"target":59,"linktype":31},"http:\u002F\u002FFoxy.in",{},{"type":569},{"text":579,"type":332},". We are not in any way affiliated with ",{"text":571,"type":332,"marks":581},[582],{"type":378,"attrs":583},{"href":575,"uuid":59,"anchor":59,"custom":584,"target":59,"linktype":31},{},{"text":586,"type":332},", and cannot help in any way with your order from that website.","danger","global___alert","form___condition",{"_uid":591,"equals":592,"fields":593,"component":589},"8765c3e1-25cf-44aa-b8ea-fc6094acf9c3","Presales",[594],{"_uid":595,"name":596,"type":597,"label":13,"options":13,"required":24,"component":523,"conditions":598,"placeholder":13,"default_value":599},"cf464f8e-d643-4f6e-af29-d3abffaf7380","department_email_address","hidden",[],"hello@foxy.io",{"_uid":601,"equals":208,"fields":602,"component":589},"4007b6d8-77e5-421d-bd1e-6f336dd853fb",[603],{"_uid":604,"name":596,"type":597,"label":13,"options":13,"required":24,"component":523,"conditions":605,"placeholder":13,"default_value":606},"7b4c6aa5-a68c-45e0-9ce1-0a36af10c0c2",[],"help@foxy.io",{"_uid":608,"equals":609,"fields":610,"component":589},"1dbb8f11-613d-43cd-9e09-1b94f6e19219","Billing",[611],{"_uid":612,"name":596,"type":597,"label":13,"options":13,"required":24,"component":523,"conditions":613,"placeholder":13,"default_value":614},"a0ac0d1b-bc4f-4a6c-a682-581d450b0b73",[],"help+billing@foxy.io",{"_uid":616,"equals":617,"fields":618,"component":589},"a0a53a50-7172-4a29-ba58-181e38874e12","Partnerships",[619],{"_uid":620,"name":596,"type":597,"label":13,"options":13,"required":24,"component":523,"conditions":621,"placeholder":13,"default_value":622},"7aa011d9-f374-4aed-b5a5-929b54aaf152",[],"partners@foxy.io",{"_uid":624,"equals":537,"fields":625,"component":589},"a4cd431f-25d5-41c7-bfdc-02c908c8fb47",[626],{"_uid":627,"name":596,"type":597,"label":13,"options":13,"required":24,"component":523,"conditions":628,"placeholder":13,"default_value":599},"f5d52168-d6ae-451b-94ee-2ced1cbd28ad",[],{"_uid":630,"equals":631,"fields":632,"component":589},"25aba1ed-eb41-4bbc-aa89-f7a7167ea86e","Other",[633],{"_uid":634,"name":596,"type":597,"label":13,"options":13,"required":24,"component":523,"conditions":635,"placeholder":13,"default_value":599},"f40dfaef-c203-4b71-bf4e-e1b43cef192b",[],{"_uid":637,"component":638},"e9c53a05-f40a-4510-aaf8-bc072a235a0c","form___subject",{"_uid":640,"name":641,"type":642,"label":643,"options":13,"required":33,"component":523,"placeholder":13},"a4c4d385-fff4-4978-99fb-b68cfea623d6","message","textarea","Message",{"_uid":645,"name":646,"type":531,"label":647,"options":648,"required":33,"component":523,"conditions":649,"placeholder":13},"8a3c9f85-f438-427d-9c7a-d7b295a14b5b","existing_user","Are you an existing user?","No, Yes",[650],{"_uid":651,"equals":652,"fields":653,"component":589},"115933d6-262a-4b59-8fa8-579c5ad73de1","Yes",[654],{"_uid":655,"name":656,"type":332,"label":657,"options":13,"required":33,"component":523,"conditions":658,"placeholder":13},"44b6ff23-98f0-4e95-b7f5-c23e06415c2d","subdomain","Store Subdomain",[],{"_uid":660,"name":661,"type":531,"label":662,"options":663,"required":33,"component":523,"conditions":664,"placeholder":13},"922a5cef-3af2-4113-8855-36c7910e3ee3","user_type","What type of user are you?","Developer, Designer, Merchant",[],"POST",[667],{"_uid":668,"text":669,"title":678,"component":679},"7323b90d-a93a-4bf1-baa9-20d0b7ead61b",{"type":324,"content":670},[671],{"type":327,"content":672},[673,675,676],{"text":674,"type":332},"855.369.9227",{"type":557},{"text":677,"type":332},"9:30am-6pm Central M-F","Pre-sales, Sales, & Partnerships","contact___footer_column",{"type":324,"content":681},[682],{"type":327,"content":683},[684],{"text":685,"type":332},"Get in touch to get help from our friendly support team.","Submit","Success!","Your email has been received. We'll get back to you as soon as we can, but it might take a business day. If you don't hear back from us in a timely manner, please check your spam folder to ensure our reply didn't go there.",-80,[],"2fd9fb7d-a48a-4184-acfd-30022d8d6f08","2022-09-23T20:10:45.360Z",[],[288,695,722],{"name":696,"created_at":697,"published_at":698,"updated_at":699,"id":700,"uuid":701,"content":702,"slug":716,"full_slug":717,"sort_by_date":59,"position":718,"tag_list":719,"is_startpage":24,"parent_id":310,"meta_data":59,"group_id":720,"first_published_at":698,"release_id":59,"lang":65,"path":59,"alternates":721,"default_full_slug":59,"translated_slugs":59},"Templates","2023-01-19T16:30:39.158Z","2023-01-19T17:25:34.000Z","2023-01-19T17:25:34.017Z",28248,"d584ea62-7dcd-4152-be82-6ee0fdeb153c",{"_uid":703,"icon":704,"name":696,"guides":705,"summary":706,"category":13,"component":297,"blog_posts":707,"content_hub":24,"icon_custom":708,"case_studies":709,"faq_sections":710,"help_articles":711,"featured_guides":712,"mailbox_category":13,"featured_articles":713,"featured_blog_posts":714,"featured_case_studies":715},"a86c693a-d801-4062-b52b-47c4d9e82416","fa-pencil-paintbrush",[],"Customize Foxy related templates.",[],{"id":59,"alt":59,"name":13,"focus":59,"title":59,"filename":13,"copyright":59,"fieldtype":81},[],[],[],[],[],[],[],"templates","help\u002Fcategories\u002Ftemplates",70,[],"4e91bfd5-f795-474d-874f-ae78f4631d0c",[],{"name":723,"created_at":724,"published_at":725,"updated_at":726,"id":727,"uuid":482,"content":728,"slug":741,"full_slug":742,"sort_by_date":59,"position":743,"tag_list":744,"is_startpage":24,"parent_id":310,"meta_data":59,"group_id":745,"first_published_at":725,"release_id":59,"lang":65,"path":59,"alternates":746,"default_full_slug":59,"translated_slugs":59},"Custom CSS & JS","2026-07-23T03:33:08.246Z","2026-07-23T03:34:37.751Z","2026-07-23T03:34:37.768Z",201064399904986,{"_uid":729,"icon":13,"name":723,"type":730,"pinned":24,"summary":731,"category":701,"component":297,"blog_posts":732,"icon_custom":733,"case_studies":735,"faq_sections":736,"featured_guides":737,"mailbox_category":13,"featured_articles":738,"featured_blog_posts":739,"featured_case_studies":740},"d9051f7a-37a5-4de0-8f2c-4f6ba89ff30a","simple","Style templates and add custom code without editing the underlying markup.",[],{"id":59,"alt":59,"name":13,"focus":59,"title":59,"source":59,"filename":13,"copyright":59,"fieldtype":81,"meta_data":734},{},[],[],[],[],[],[],"custom-css-and-js","help\u002Fcategories\u002Fcustom-css-and-js",-860,[],"323fdcbb-4ee9-4e2c-8b00-ce59cad49101",[],{},1784780323988]