[{"data":1,"prerenderedAt":1768},["ShallowReactive",2],{"header:help":3,"footer:default":63,"story:navigation\u002Fsearch:help":243,"story:help\u002Fcategories":281,"story:help\u002Fcategories\u002Fcustomize-the-checkout":307,"help:categories:c86d4c1b-9299-4716-802e-52f91ac178b0":334,"help:guides:c86d4c1b-9299-4716-802e-52f91ac178b0":335,"help:tree:c86d4c1b-9299-4716-802e-52f91ac178b0:default":336,"help:articles:c86d4c1b-9299-4716-802e-52f91ac178b0":364,"story:contact":1579,"_apollo:default":1767},{"name":4,"created_at":5,"published_at":6,"updated_at":7,"id":8,"uuid":9,"content":10,"slug":53,"full_slug":54,"sort_by_date":55,"position":56,"tag_list":57,"is_startpage":24,"parent_id":58,"meta_data":55,"group_id":59,"first_published_at":60,"release_id":55,"lang":61,"path":55,"alternates":62,"default_full_slug":55,"translated_slugs":55},"Help Center Header","2024-08-09T18:06:34.939Z","2026-07-30T21:52:27.962Z","2026-07-30T21:52:27.975Z",10082752,"3e9b88f7-c163-4657-a2f2-62532d600fad",{"_uid":11,"link":12,"badge":16,"items":17,"title":13,"buttons":45,"new_tab":24,"submenu":46,"subitems":47,"alignment":13,"component":48,"badge_link":49,"top_menu_items":52},"e5645a1a-f991-40e8-8d67-e40ebc082b5a",{"id":13,"url":13,"linktype":14,"fieldtype":15,"cached_url":13},"","story","multilink","Help Center",[18,27,34,39],{"_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},"8d7df70e-f087-4da0-b616-6f0e9a5af35c",{"id":13,"url":30,"linktype":31,"fieldtype":15,"cached_url":30},"https:\u002F\u002Fapi.foxycart.com\u002F","url","API Documentation",true,{"_uid":35,"link":36,"title":38,"new_tab":33,"component":26},"f76e7944-23d5-4652-87e4-cdae79272762",{"id":13,"url":37,"linktype":31,"fieldtype":15,"cached_url":37},"https:\u002F\u002Fstatus.foxy.io\u002F","System Status",{"_uid":40,"link":41,"title":44,"new_tab":24,"component":26},"0de16771-4c84-466c-a1da-d8568113c71f",{"id":42,"url":13,"linktype":14,"fieldtype":15,"cached_url":43},"01e4e370-f9b9-45af-8fa9-f15540699b0d","contact","Contact Us",[],[],[],"header",{"id":50,"url":13,"linktype":14,"fieldtype":15,"cached_url":51},"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":64,"created_at":65,"published_at":66,"updated_at":67,"id":68,"uuid":69,"content":70,"slug":236,"full_slug":237,"sort_by_date":55,"position":238,"tag_list":239,"is_startpage":24,"parent_id":58,"meta_data":55,"group_id":240,"first_published_at":241,"release_id":55,"lang":61,"path":55,"alternates":242,"default_full_slug":55,"translated_slugs":55},"Default Footer","2024-08-09T18:06:59.024Z","2026-07-30T21:52:27.802Z","2026-07-30T21:52:27.816Z",10082753,"e59e67ac-248a-482f-84a1-53d4f318186a",{"_uid":71,"about":72,"logos":73,"socials":78,"sections":104,"component":218,"cta_title":219,"bottom_links":220,"cta_subtitle":234,"cta_button_link":235,"cta_button_text":179},"830983f5-c4c4-43c8-b150-86a5e3fa6dc8","Foxy’s hosted cart & payment page allow you to sell anything, using your existing website or platform.",[74],{"id":75,"alt":13,"name":13,"focus":13,"title":13,"filename":76,"copyright":13,"fieldtype":77},14760,"https:\u002F\u002Fa-us.storyblok.com\u002Ff\u002F1001040\u002Fx\u002F3b030847ec\u002Fb-corp.svg","asset",[79,86,92,98],{"_uid":80,"icon":81,"link":82,"name":84,"component":85},"faf0a618-ea94-42ea-9182-03be18c43216","fa-facebook",{"id":13,"url":83,"linktype":31,"fieldtype":15,"cached_url":83},"https:\u002F\u002Fwww.facebook.com\u002Ffoxycart","Facebook","footer___social",{"_uid":87,"icon":88,"link":89,"name":91,"component":85},"14309c18-7e79-423e-b375-34555bac0811","fa-instagram",{"id":13,"url":90,"linktype":31,"fieldtype":15,"cached_url":90},"https:\u002F\u002Fwww.instagram.com\u002Ffoxy_io","Instagram",{"_uid":93,"icon":94,"link":95,"name":97,"component":85},"8f7fe7cf-0dd3-4596-8334-226ea466716a","fa-linkedin",{"id":13,"url":96,"linktype":31,"fieldtype":15,"cached_url":96},"https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Ffoxycart.com","LinkedIn",{"_uid":99,"icon":100,"link":101,"name":103,"component":85},"90a675b4-dd97-40b5-be09-00a87223d4c5","fa-youtube",{"id":13,"url":102,"linktype":31,"fieldtype":15,"cached_url":102},"https:\u002F\u002Fwww.youtube.com\u002Fuser\u002Ffoxycart","Youtube",[105,135,180,202],{"_uid":106,"name":107,"items":108,"component":134},"82849945-282f-488c-b18d-a8d2252f514a","Company",[109,116,122,128],{"_uid":110,"link":111,"title":114,"new_tab":24,"component":115},"1f699ab1-938b-4d9d-9825-aabcbe6f57fe",{"id":112,"url":13,"linktype":14,"fieldtype":15,"cached_url":113},"63634293-a749-4226-9439-9f38ee6dcda0","about-us","About Us","footer___menu_items",{"_uid":117,"link":118,"title":121,"new_tab":24,"component":115},"b26b00f1-a0e7-4be2-8ab3-428b8cc841f8",{"id":119,"url":13,"linktype":14,"fieldtype":15,"cached_url":120},"26cb7c55-faed-4a77-a291-1552d4111b3e","how-foxy-works","How Foxy Works",{"_uid":123,"link":124,"title":127,"new_tab":24,"component":115},"b40c68a0-1ceb-4226-9515-6176534f61fe",{"id":125,"url":13,"linktype":14,"fieldtype":15,"cached_url":126},"dc6657d7-7f4f-4c0d-b781-e971b038ee26","for-good","Foxy For Good",{"_uid":129,"link":130,"title":133,"new_tab":24,"component":115},"3ad0c134-bef9-4fff-b891-e09f16109036",{"id":131,"url":13,"linktype":14,"fieldtype":15,"cached_url":132},"23cae210-baf4-4588-9862-d09f4f52ccd2","brand-assets","Brand Assets","footer___section",{"_uid":136,"name":137,"items":138,"component":134},"a6805fa8-ac60-47f1-b8f0-f27aded0afbe","Product",[139,145,151,157,163,169,175],{"_uid":140,"link":141,"title":144,"new_tab":24,"component":115},"b39c8a4e-2383-486f-b76a-11fbb15d8134",{"id":142,"url":13,"linktype":14,"fieldtype":15,"cached_url":143},"bb04690f-fe98-4ce6-80be-05b950f2364f","features\u002F","Features",{"_uid":146,"link":147,"title":150,"new_tab":24,"component":115},"64f8a41f-c181-433d-bc0a-fc94e71ecbf6",{"id":148,"url":13,"linktype":14,"fieldtype":15,"cached_url":149},"c450c58d-761d-48c0-a9af-0b064611689b","pricing","Pricing",{"_uid":152,"link":153,"title":156,"new_tab":24,"component":115},"6e0b287f-fd8c-4146-9e0e-0ab0b5c9ce3c",{"id":154,"url":13,"linktype":14,"fieldtype":15,"cached_url":155},"fab20ad9-e76a-4947-b709-3a6fdfa88028","blog\u002Fcategories\u002Fproduct-updates","Product Updates",{"_uid":158,"link":159,"title":162,"new_tab":24,"component":115},"47e5a074-a6b5-4f1c-8c2f-89a2ae9f83eb",{"id":160,"url":13,"linktype":14,"fieldtype":15,"cached_url":161},"d2c83612-d611-47f3-a3b4-ca7fe08540b8","changelogs\u002F","Changelogs",{"_uid":164,"link":165,"title":168,"new_tab":24,"component":115},"b5c08774-542f-4ffd-b357-c94d674488b9",{"id":166,"url":13,"linktype":14,"fieldtype":15,"cached_url":167},"08876121-0df3-4ed9-aa11-902b3e41cd02","whats-next","What's Next",{"_uid":170,"link":171,"title":174,"new_tab":24,"component":115},"9c2704ed-6d9f-43e1-9e67-c8d91c083288",{"id":172,"url":13,"linktype":14,"fieldtype":15,"cached_url":173},"056a7857-b18f-4025-8f97-91a38fc19bc8","compare\u002F","Compare",{"_uid":176,"link":177,"title":179,"new_tab":24,"component":115},"5f2db35b-674b-406a-8fa7-d246633af9fe",{"id":13,"url":178,"linktype":31,"fieldtype":15,"cached_url":178},"https:\u002F\u002Fadmin.foxy.io\u002Fsign-up","Try Foxy Free",{"_uid":181,"name":182,"items":183,"component":134},"63fa1f29-4252-4640-9922-fe310e69e54a","Security",[184,190,196],{"_uid":185,"link":186,"title":189,"new_tab":24,"component":115},"1158ddb6-9eb0-466f-8eb6-7ca2ae66c8b8",{"id":187,"url":13,"linktype":14,"fieldtype":15,"cached_url":188},"1f58fb2c-8681-4742-b6e8-09999beae9f6","security-contact","Security Contact",{"_uid":191,"link":192,"title":195,"new_tab":24,"component":115},"9a79c54a-6022-4dfd-854b-766f5e4703ba",{"id":193,"url":13,"linktype":14,"fieldtype":15,"cached_url":194},"55cbfcc3-425a-4261-8037-54e919851d2d","pci","PCI Compliance",{"_uid":197,"link":198,"title":201,"new_tab":24,"component":115},"0b85f5b6-9534-4071-b323-b39d053dd4d7",{"id":199,"url":13,"linktype":14,"fieldtype":15,"cached_url":200},"c3ac0fe3-83e2-4879-afbd-d4c83e1590df","help\u002Farticles\u002Four-official-domains-public-code","Domains & Codebases",{"_uid":203,"name":204,"items":205,"component":134},"998ded67-d107-49f4-8154-ca6be51671ec","Support",[206,209,212,215],{"_uid":207,"link":208,"title":16,"new_tab":24,"component":115},"594ffd35-3049-4004-bb08-0db568ebd819",{"id":50,"url":13,"linktype":14,"fieldtype":15,"cached_url":51},{"_uid":210,"link":211,"title":32,"new_tab":33,"component":115},"61e0b7c8-aadf-419b-a339-b3ccabc65bf4",{"id":13,"url":30,"linktype":31,"fieldtype":15,"cached_url":30},{"_uid":213,"link":214,"title":38,"new_tab":33,"component":115},"fd67a89e-1c54-4d31-94b5-64be999062d6",{"id":13,"url":37,"linktype":31,"fieldtype":15,"cached_url":37},{"_uid":216,"link":217,"title":44,"new_tab":24,"component":115},"231a6f71-e996-4ad4-b033-d4d5542f34f0",{"id":42,"url":13,"linktype":14,"fieldtype":15,"cached_url":43},"footer","Get started with our *unlimited free trial*.",[221,228],{"_uid":222,"link":223,"text":226,"component":227},"f0b77210-2632-45a2-8436-e57cad84d01a",{"id":224,"url":13,"linktype":14,"fieldtype":15,"cached_url":225},"60ba16a2-c1f4-485f-b978-8d2eeeafbf5a","terms-of-service","Terms of Service","footer___bottom_links",{"_uid":229,"link":230,"text":233,"component":227},"4bd497b0-993f-4b4d-a5b7-8a49c7c8fec9",{"id":231,"url":13,"linktype":14,"fieldtype":15,"cached_url":232},"332302b9-1d18-4016-b9c8-9b33c72d782b","privacy-policy","Privacy Policy","No credit card required.",{"id":13,"url":178,"linktype":31,"fieldtype":15,"cached_url":178},"default-footer","navigation\u002Fdefault-footer",50,[],"11006268-07f9-41e9-96f3-c51fb723399d","2022-09-21T20:39:02.357Z",[],{"name":244,"created_at":245,"published_at":246,"updated_at":247,"id":248,"uuid":249,"content":250,"slug":272,"full_slug":275,"sort_by_date":55,"position":276,"tag_list":277,"is_startpage":24,"parent_id":58,"meta_data":55,"group_id":278,"first_published_at":279,"release_id":55,"lang":61,"path":55,"alternates":280,"default_full_slug":55,"translated_slugs":55},"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":251,"name":244,"indices":252,"summary":13,"component":272,"primary_image":273},"5e4a56e8-76f1-4790-b3a7-70f1be97d042",[253,258,262,267],{"key":254,"_uid":255,"icon":13,"name":256,"component":257},"all","c12a3210-7323-4273-8217-5215e52efe84","All","index",{"key":259,"_uid":260,"icon":261,"name":23,"component":257},"help_center_article","5acff080-95e4-44d3-8dcf-1b19720af382","fa-file-alt",{"key":263,"_uid":264,"icon":265,"name":266,"component":257},"help_center_guide","b8fbc206-c083-471e-a1f0-0ebeb90a669d","fa-book","Guides",{"key":268,"_uid":269,"icon":270,"name":271,"component":257},"blog_post","23419e83-2e56-4c4c-8a05-9fd1b3c9a9bd","fa-file-image","Blog Posts","search",{"id":55,"alt":55,"name":13,"focus":55,"title":55,"source":55,"filename":13,"copyright":55,"fieldtype":77,"meta_data":274},{},"navigation\u002Fsearch",60,[],"11e1fd31-95cd-4fc9-b736-8b8910663e6c","2024-10-21T23:17:05.904Z",[],{"name":23,"created_at":282,"published_at":283,"updated_at":284,"id":285,"uuid":21,"content":286,"slug":300,"full_slug":22,"sort_by_date":55,"position":301,"tag_list":302,"is_startpage":33,"parent_id":303,"meta_data":55,"group_id":304,"first_published_at":305,"release_id":55,"lang":61,"path":55,"alternates":306,"default_full_slug":55,"translated_slugs":55},"2022-09-19T14:42:29.685Z","2024-07-30T18:17:22.506Z","2024-07-30T18:17:22.525Z",2660,{"_uid":287,"icon":13,"name":23,"guides":288,"pinned":24,"summary":289,"category":13,"component":290,"blog_posts":291,"content_hub":24,"icon_custom":292,"case_studies":293,"faq_sections":294,"help_articles":295,"featured_guides":296,"mailbox_category":13,"featured_articles":297,"featured_blog_posts":298,"featured_case_studies":299},"d6dae89a-907a-4bf7-82de-fe2ba875ee6e",[],"Get your questions answered with our browsable knowledge base.","help_center_category",[],{"id":55,"alt":55,"name":13,"focus":55,"title":55,"filename":13,"copyright":55,"fieldtype":77},[],[],[],[],[],[],[],"categories",530,[],2658,"19ebcdd2-027f-47f5-9a5b-a8992c959578","2022-09-19T16:24:39.219Z",[],{"name":308,"created_at":309,"published_at":310,"updated_at":311,"id":312,"uuid":313,"content":314,"slug":328,"full_slug":329,"sort_by_date":55,"position":330,"tag_list":331,"is_startpage":24,"parent_id":303,"meta_data":55,"group_id":332,"first_published_at":310,"release_id":55,"lang":61,"path":55,"alternates":333,"default_full_slug":55,"translated_slugs":55},"Customize The Checkout","2026-07-01T21:47:44.740Z","2026-07-01T21:49:01.723Z","2026-07-01T21:49:01.735Z",193547734023485,"c86d4c1b-9299-4716-802e-52f91ac178b0",{"_uid":315,"icon":13,"name":308,"type":316,"pinned":24,"summary":317,"category":318,"component":290,"blog_posts":319,"icon_custom":320,"case_studies":322,"faq_sections":323,"featured_guides":324,"mailbox_category":13,"featured_articles":325,"featured_blog_posts":326,"featured_case_studies":327},"ef453f74-3f14-4304-9824-ab8062d98dc3","simple","Customize the appearance and fields of the checkout.","60b73dc2-7635-487c-bd1f-fd7fba18ab4d",[],{"id":55,"alt":55,"name":13,"focus":55,"title":55,"source":55,"filename":13,"copyright":55,"fieldtype":77,"meta_data":321},{},[],[],[],[],[],[],"customize-the-checkout","help\u002Fcategories\u002Fcustomize-the-checkout",-500,[],"1d9305ee-1c27-453b-a461-c993ef5b69b5",[],[],[],[281,337],{"name":338,"created_at":339,"published_at":340,"updated_at":341,"id":342,"uuid":318,"content":343,"slug":357,"full_slug":358,"sort_by_date":55,"position":359,"tag_list":360,"is_startpage":24,"parent_id":303,"meta_data":55,"group_id":361,"first_published_at":362,"release_id":55,"lang":61,"path":55,"alternates":363,"default_full_slug":55,"translated_slugs":55},"Checkout","2024-11-06T19:56:29.907Z","2026-07-02T22:04:34.438Z","2026-07-02T22:04:34.451Z",14898631,{"_uid":344,"icon":13,"name":338,"type":316,"guides":345,"pinned":24,"summary":346,"category":13,"component":290,"blog_posts":347,"content_hub":24,"icon_custom":348,"case_studies":350,"faq_sections":351,"help_articles":352,"featured_guides":353,"mailbox_category":13,"featured_articles":354,"featured_blog_posts":355,"featured_case_studies":356},"0a484217-201f-4f60-a813-d8d8bda736e4",[],"How the checkout works, configuration options, customizations, and advanced integrations.",[],{"id":55,"alt":55,"name":13,"focus":55,"title":55,"source":55,"filename":13,"copyright":55,"fieldtype":77,"meta_data":349},{},[],[],[],[],[],[],[],"checkout","help\u002Fcategories\u002Fcheckout",0,[],"b3bfcd1f-8386-4ed8-9218-2f4c2989a1b2","2024-11-06T19:56:44.870Z",[],[365,526,667,1083,1226,1308,1413,1475],{"name":366,"created_at":367,"published_at":368,"updated_at":369,"id":370,"uuid":371,"content":372,"slug":519,"full_slug":520,"sort_by_date":55,"position":521,"tag_list":522,"is_startpage":24,"parent_id":523,"meta_data":55,"group_id":524,"first_published_at":368,"release_id":55,"lang":61,"path":55,"alternates":525,"default_full_slug":55,"translated_slugs":55},"Add a message above the email field on the checkout","2026-07-21T15:49:51.148Z","2026-07-22T17:45:00.550Z","2026-07-22T17:45:00.564Z",200537666196117,"737d81cc-b5d8-4ca3-a766-9c9f03f2e4e6",{"_uid":373,"body":374,"name":366,"image":515,"pinned":24,"summary":517,"category":313,"component":259,"related_articles":518},"2f979d38-d028-4037-83d7-aed60e3bf124",{"type":375,"content":376},"doc",[377,384,391,396,402,407,459,464,469,474,479,490,498,503,510],{"type":378,"attrs":379,"content":380},"paragraph",{"textAlign":55},[381],{"text":382,"type":383},"You can use this snippet if you'd like to show your customers a message at the top of the checkout page.","text",{"type":385,"attrs":386,"content":388},"heading",{"level":387,"textAlign":55},2,[389],{"text":390,"type":383},"Step 1: Get the Snippet",{"type":378,"attrs":392,"content":393},{"textAlign":55},[394],{"text":395,"type":383},"Copy this code onto your computer's clipboard:",{"type":397,"attrs":398,"content":399},"code_block",{"class":55},[400],{"text":401,"type":383},"{% block login_register %}\n\u003Cdiv class=\"fc-messages\">\n    \u003Cdiv class=\"fc-alert fc-alert--info custom-message\">\n        \u003Cul>\u003Cli>Your custom message here.\u003C\u002Fli>\u003C\u002Ful>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n{% endblock %}",{"type":385,"attrs":403,"content":404},{"level":387,"textAlign":55},[405],{"text":406,"type":383},"Step 2: Modify the Checkout Template",{"type":408,"content":409},"bullet_list",[410,418,425,445,452],{"type":411,"content":412},"list_item",[413],{"type":378,"attrs":414,"content":415},{"textAlign":55},[416],{"text":417,"type":383},"Go to your checkout template in your Foxy admin here.",{"type":411,"content":419},[420],{"type":378,"attrs":421,"content":422},{"textAlign":55},[423],{"text":424,"type":383},"If you don't see a textarea called \"checkout template:\", on the setting labeled \"or, use a default template:\", select the \"Custom Template\" option to make the textarea box appear.",{"type":411,"content":426},[427],{"type":378,"attrs":428,"content":429},{"textAlign":55},[430,432,437,439,443],{"text":431,"type":383},"Scroll down in the \"checkout template:\" box until you see ",{"text":433,"type":383,"marks":434},"{% embed 'checkout.inc.twig' %}",[435],{"type":436},"code",{"text":438,"type":383},". On the next line, paste the code that you copied in Step 1 above. The line following what you pasted should be ",{"text":440,"type":383,"marks":441},"{% endembed %}",[442],{"type":436},{"text":444,"type":383}," .",{"type":411,"content":446},[447],{"type":378,"attrs":448,"content":449},{"textAlign":55},[450],{"text":451,"type":383},"Change the \"Your custom message here.\" text in the code to be what you'd like to see on the checkout.",{"type":411,"content":453},[454],{"type":378,"attrs":455,"content":456},{"textAlign":55},[457],{"text":458,"type":383},"Scroll down until you see the \"Update Template\" button and click to save.",{"type":385,"attrs":460,"content":461},{"level":387,"textAlign":55},[462],{"text":463,"type":383},"Step 3: Test",{"type":378,"attrs":465,"content":466},{"textAlign":55},[467],{"text":468,"type":383},"Add a product to the cart and go to the checkout to ensure that it works as expected.",{"type":385,"attrs":470,"content":471},{"level":387,"textAlign":55},[472],{"text":473,"type":383},"Optional Styling",{"type":378,"attrs":475,"content":476},{"textAlign":55},[477],{"text":478,"type":383},"You can change the style of the message by adding styles to your custom header on your configuration settings. You may need to click \"Add custom header and footer code to your templates\" to get the \"custom header:\" text area.",{"type":378,"attrs":480,"content":481},{"textAlign":55},[482,484,488],{"text":483,"type":383},"You can put the styles in between ",{"text":485,"type":383,"marks":486},"\u003Cstyle>",[487],{"type":436},{"text":489,"type":383}," tags. Example:",{"type":378,"attrs":491,"content":492},{"textAlign":55},[493],{"text":494,"type":383,"marks":495},"To change the box styling, use:",[496],{"type":497},"bold",{"type":397,"attrs":499,"content":500},{"class":55},[501],{"text":502,"type":383},"\u003Cstyle>\n#fc .fc-messages .custom-message{\n    background-color: lavender;\n    border-color: pink;\n}\n\u003C\u002Fstyle>",{"type":378,"attrs":504,"content":505},{"textAlign":55},[506],{"text":507,"type":383,"marks":508},"To change the text, use:",[509],{"type":497},{"type":397,"attrs":511,"content":512},{"class":55},[513],{"text":514,"type":383},"#fc .fc-messages .custom-message ul li {\n    color: red;\n}",{"id":55,"alt":55,"name":13,"focus":55,"title":55,"source":55,"filename":13,"copyright":55,"fieldtype":77,"meta_data":516},{},"How to display a custom message at the top of the checkout, above the email field.",[],"add-a-message-above-the-email-field-on-the-checkout","help\u002Farticles\u002Fadd-a-message-above-the-email-field-on-the-checkout",-4190,[],2659,"120f2460-f055-4608-a795-483633a5a959",[],{"name":527,"created_at":528,"published_at":529,"updated_at":530,"id":531,"uuid":532,"content":533,"slug":661,"full_slug":662,"sort_by_date":55,"position":663,"tag_list":664,"is_startpage":24,"parent_id":523,"meta_data":55,"group_id":665,"first_published_at":529,"release_id":55,"lang":61,"path":55,"alternates":666,"default_full_slug":55,"translated_slugs":55},"Add a message above the shipping rates","2026-07-21T15:54:52.890Z","2026-07-22T17:45:00.304Z","2026-07-22T17:45:00.320Z",200538902139549,"ec189383-d10b-469e-b27c-97c20cca3fb2",{"_uid":534,"body":535,"name":527,"image":657,"pinned":24,"summary":659,"category":313,"component":259,"related_articles":660},"b6ff1259-724b-4cc8-b818-090ed731d81b",{"type":375,"content":536},[537,541,546,550,598,602,607,611,627,635,641,646,652],{"type":378,"attrs":538,"content":539},{"textAlign":55},[540],{"text":395,"type":383},{"type":397,"attrs":542,"content":543},{"class":55},[544],{"text":545,"type":383},"{% if context == \"cart\" or context == \"checkout\" %}\n\u003Cscript>\nFC.client.on(\"render.done\", function() {\n    var message = '\u003Cp>REPLACE THIS WITH YOUR SHIPPING NOTICE.\u003C\u002Fp>';\n\n    if ($(\".shipping-note\").length == 0 && FC.json.shipping_address.shipping_results.length > 0) {\n        if (FC.json.context == \"checkout\") {\n            $(\"div.fc-form-group.fc-shipping-rates\").prepend('\u003Cdiv class=\"row shipping-note\">\u003Cdiv class=\"col-sm-10 col-sm-push-1\">' + message + '\u003C\u002Fdiv>\u003C\u002Fdiv>');\n        } else {\n            $(\".fc-shipping-rates\").prepend('\u003Cdiv class=\"fc-input-group--sidebar shipping-note\">\u003Cbr>' + message + '\u003C\u002Fdiv>');\n        }\n    }\n});\n\u003C\u002Fscript>\n{% endif %}",{"type":385,"attrs":547,"content":548},{"level":387,"textAlign":55},[549],{"text":406,"type":383},{"type":408,"content":551},[552,559,578,591],{"type":411,"content":553},[554],{"type":378,"attrs":555,"content":556},{"textAlign":55},[557],{"text":558,"type":383},"Go to your Checkout configuration in your Foxy admin.",{"type":411,"content":560},[561],{"type":378,"attrs":562,"content":563},{"textAlign":55},[564,566,570,572,576],{"text":565,"type":383},"Scroll down until you see ",{"text":567,"type":383,"marks":568},"custom footer",[569],{"type":497},{"text":571,"type":383}," under ",{"text":573,"type":383,"marks":574},"Add custom header and footer code to your templates",[575],{"type":497},{"text":577,"type":383},". You may see some code already in the text area. You can paste the code that you copied to your clipboard into the top of that box (take care not to remove anything that's already there).",{"type":411,"content":579},[580],{"type":378,"attrs":581,"content":582},{"textAlign":55},[583,585,589],{"text":584,"type":383},"Change ",{"text":586,"type":383,"marks":587},"REPLACE THIS WITH YOUR SHIPPING NOTICE.",[588],{"type":497},{"text":590,"type":383}," to your desired message.",{"type":411,"content":592},[593],{"type":378,"attrs":594,"content":595},{"textAlign":55},[596],{"text":597,"type":383},"Scroll down until you see the \"Update\" button and click to save.",{"type":385,"attrs":599,"content":600},{"level":387,"textAlign":55},[601],{"text":463,"type":383},{"type":378,"attrs":603,"content":604},{"textAlign":55},[605],{"text":606,"type":383},"Add a product to the cart and enter a shipping address to ensure that it works as expected. Also proceed to checkout to ensure that it works there as well.",{"type":385,"attrs":608,"content":609},{"level":387,"textAlign":55},[610],{"text":473,"type":383},{"type":378,"attrs":612,"content":613},{"textAlign":55},[614,616,619,621,625],{"text":615,"type":383},"You can change the style of the message by adding styles to your custom header on your configuration settings. You may need to click ",{"text":573,"type":383,"marks":617},[618],{"type":497},{"text":620,"type":383}," to get the ",{"text":622,"type":383,"marks":623},"custom header",[624],{"type":497},{"text":626,"type":383}," text area.",{"type":378,"attrs":628,"content":629},{"textAlign":55},[630,631,634],{"text":483,"type":383},{"text":485,"type":383,"marks":632},[633],{"type":436},{"text":489,"type":383},{"type":378,"attrs":636,"content":637},{"textAlign":55},[638],{"text":494,"type":383,"marks":639},[640],{"type":497},{"type":397,"attrs":642,"content":643},{"class":55},[644],{"text":645,"type":383},"\u003Cstyle>\n#fc .shipping-note {\n    background-color: lavender;\n    border-color: pink;\n}\n\u003C\u002Fstyle>",{"type":378,"attrs":647,"content":648},{"textAlign":55},[649],{"text":507,"type":383,"marks":650},[651],{"type":497},{"type":397,"attrs":653,"content":654},{"class":55},[655],{"text":656,"type":383},"#fc .shipping-note p {\n    color: red;\n}",{"id":55,"alt":55,"name":13,"focus":55,"title":55,"source":55,"filename":13,"copyright":55,"fieldtype":77,"meta_data":658},{},"How to display a custom message above the shipping rates on the cart and checkout.",[],"add-a-message-above-the-shipping-rates","help\u002Farticles\u002Fadd-a-message-above-the-shipping-rates",-4230,[],"20cc184f-2720-4cd1-8a08-d2b2ba330f0b",[],{"name":668,"created_at":669,"published_at":670,"updated_at":671,"id":672,"uuid":673,"content":674,"slug":1077,"full_slug":1078,"sort_by_date":55,"position":1079,"tag_list":1080,"is_startpage":24,"parent_id":523,"meta_data":55,"group_id":1081,"first_published_at":670,"release_id":55,"lang":61,"path":55,"alternates":1082,"default_full_slug":55,"translated_slugs":55},"Add an upsell modal to the checkout","2026-07-21T17:34:12.926Z","2026-07-22T17:45:00.083Z","2026-07-22T17:45:00.105Z",200563314441131,"368dbea3-ac85-4806-a9a3-67381c207494",{"_uid":675,"body":676,"name":668,"image":1073,"pinned":24,"summary":1075,"category":313,"component":259,"related_articles":1076},"a9e2f35a-8b09-4bee-a140-89e1cdecb5c8",{"type":375,"content":677},[678,683,695,700,705,710,735,740,762,767,772,777,782,832,838,854,859,880,885,901,923,928,933,938,967,972,977,1003,1008,1019,1030,1035,1040,1045,1050,1068],{"type":378,"attrs":679,"content":680},{"textAlign":55},[681],{"text":682,"type":383},"Beginning in version 2.0 we've added some basic upsell functionality into the checkout. It allows you to quickly show a modal window to customers on the checkout providing opportunities for them to add additional products to their cart prior to checkout.",{"type":684,"content":685},"blockquote",[686],{"type":378,"attrs":687,"content":688},{"textAlign":55},[689,693],{"text":690,"type":383,"marks":691},"Tip:",[692],{"type":497},{"text":694,"type":383}," It also works on subscription cancellations! If you want to display a message before a customer cancels their subscription, this functionality can handle that as well. (Sample code at the bottom of the page.)",{"type":378,"attrs":696,"content":697},{"textAlign":55},[698],{"text":699,"type":383},"The upsell modal window is displayed on page load of the checkout, based on conditions you set within your custom Twig logic.",{"type":385,"attrs":701,"content":702},{"level":387,"textAlign":55},[703],{"text":704,"type":383},"Step 1: Add custom Twig to your checkout",{"type":378,"attrs":706,"content":707},{"textAlign":55},[708],{"text":709,"type":383},"To create the modal window contents, you overwrite a Twig block within your checkout template with your own HTML. When the modal functionality is enabled for your store, the actual modal window will only display to the customer if the block has some HTML elements contained within it. This means that if the block is empty, then it won't be shown to the customer. This approach is used to allow you to conditionally show the modal to the customer based on your own conditions - such as based on what products are in the cart.",{"type":378,"attrs":711,"content":712},{"textAlign":55},[713,715,721,723,727,729,733],{"text":714,"type":383},"In the Foxy admin (",{"text":716,"type":383,"marks":717},"https:\u002F\u002Fadmin.foxy.io",[718],{"type":719,"attrs":720},"link",{"href":716,"uuid":55,"anchor":55,"target":55,"linktype":31},{"text":722,"type":383},"), go to ",{"text":724,"type":383,"marks":725},"Settings > Checkout",[726],{"type":497},{"text":728,"type":383}," and edit the ",{"text":730,"type":383,"marks":731},"Custom checkout template",[732],{"type":497},{"text":734,"type":383},":",{"type":397,"attrs":736,"content":737},{"class":55},[738],{"text":739,"type":383},"{% embed 'checkout.inc.twig' %}\n{% endembed %}",{"type":378,"attrs":741,"content":742},{"textAlign":55},[743,745,749,751,754,756,760],{"text":744,"type":383},"It is within these two lines that we'll be pasting our custom block. If you already have some other code within the ",{"text":746,"type":383,"marks":747},"embed",[748],{"type":436},{"text":750,"type":383}," tags, add this additional block right before the closing ",{"text":440,"type":383,"marks":752},[753],{"type":436},{"text":755,"type":383}," tag. Your own code will be overwriting the ",{"text":757,"type":383,"marks":758},"upsell_modal",[759],{"type":436},{"text":761,"type":383}," block - and as an initial start, will look like this:",{"type":397,"attrs":763,"content":764},{"class":55},[765],{"text":766,"type":383},"{% embed 'checkout.inc.twig' %}\n{% block upsell_modal %}\n\n{% endblock %}\n{% endembed %}",{"type":378,"attrs":768,"content":769},{"textAlign":55},[770],{"text":771,"type":383},"Inside this block tag you'll place your own custom logic and HTML. The most common use case is that of offering an link or form to add an extra product into the customers cart, unless they already have the product in their cart. That approach could look simply like this:",{"type":397,"attrs":773,"content":774},{"class":55},[775],{"text":776,"type":383},"{% block upsell_modal %}\n    {% set showUpsell = true %}\n    {% for item in items %}\n        {% if item.code == \"my-upsell\" %}\n            {% set showUpsell = false %}\n        {% endif %}\n    {% endfor %}\n    {% if showUpsell %}\n        \u003Ch2>Special offer just for you!\u003C\u002Fh2>\n        \u003Cp>As a limited time offer, we're offering you this unique product for only $12.95. That's $5 off our normal price!\u003C\u002Fp>\n        \u003Cp>\u003Ca href='https:\u002F\u002F\u002Fcart?name=Upsell+Product&code=my-upsell&price=12.95'>Yes, please add this product to my cart!\u003C\u002Fa> | \u003Ca data-remodal-action=\"cancel\">No thanks\u003C\u002Fa>\u003C\u002Fp>\n    {% endif %}\n{% endblock %}",{"type":378,"attrs":778,"content":779},{"textAlign":55},[780],{"text":781,"type":383},"A few things happens within this code.",{"type":408,"content":783},[784,797,815],{"type":411,"content":785},[786],{"type":378,"attrs":787,"content":788},{"textAlign":55},[789,791,795],{"text":790,"type":383},"Firstly, we set a variable called ",{"text":792,"type":383,"marks":793},"showUpsell",[794],{"type":436},{"text":796,"type":383}," to true",{"type":411,"content":798},[799],{"type":378,"attrs":800,"content":801},{"textAlign":55},[802,804,808,810,813],{"text":803,"type":383},"Next, we loop through the items in the cart and look for any products with a code of ",{"text":805,"type":383,"marks":806},"my-upsell",[807],{"type":436},{"text":809,"type":383},". If one is present, we set the ",{"text":792,"type":383,"marks":811},[812],{"type":436},{"text":814,"type":383}," variable to false.",{"type":411,"content":816},[817],{"type":378,"attrs":818,"content":819},{"textAlign":55},[820,822,825,827,830],{"text":821,"type":383},"Finally, if ",{"text":792,"type":383,"marks":823},[824],{"type":436},{"text":826,"type":383}," is still true, meaning the customer hasn't previously purchased the upsell - we display some HTML tempting the customer to our upsell product. If they have, and ",{"text":792,"type":383,"marks":828},[829],{"type":436},{"text":831,"type":383}," is false - we don't output any HTML, leaving the block empty and so the modal won't display at all.",{"type":385,"attrs":833,"content":835},{"level":834,"textAlign":55},3,[836],{"text":837,"type":383},"Important Notes",{"type":408,"content":839},[840,847],{"type":411,"content":841},[842],{"type":378,"attrs":843,"content":844},{"textAlign":55},[845],{"text":846,"type":383},"If your store has link and form encryption enabled, any add to carts you include within the modal will also need to be encrypted. Review the wiki page for the link\u002Fform encryption for details on doing that.",{"type":411,"content":848},[849],{"type":378,"attrs":850,"content":851},{"textAlign":55},[852],{"text":853,"type":383},"Any images that you include within your markup need to be served securely. If you're not already using a remote custom template that you're caching, you can have the image cached manually as detailed here.",{"type":385,"attrs":855,"content":856},{"level":387,"textAlign":55},[857],{"text":858,"type":383},"Step 2: Enable Upsells",{"type":378,"attrs":860,"content":861},{"textAlign":55},[862,863,867,868,872,874,878],{"text":714,"type":383},{"text":716,"type":383,"marks":864},[865],{"type":719,"attrs":866},{"href":716,"uuid":55,"anchor":55,"target":55,"linktype":31},{"text":722,"type":383},{"text":869,"type":383,"marks":870},"Settings > Templates",[871],{"type":497},{"text":873,"type":383}," and paste the following into the ",{"text":875,"type":383,"marks":876},"Custom config",[877],{"type":497},{"text":879,"type":383}," field (valid JSON only):",{"type":397,"attrs":881,"content":882},{"class":55},[883],{"text":884,"type":383},"{\n  \"upsell\": {\n    \"enabled\": true\n  }\n}",{"type":684,"content":886},[887],{"type":378,"attrs":888,"content":889},{"textAlign":55},[890,893,895,899],{"text":690,"type":383,"marks":891},[892],{"type":497},{"text":894,"type":383}," If you already have some custom JSON set in the custom value text area, you will need to merge this JSON into your own, ensuring that ",{"text":896,"type":383,"marks":897},"upsell",[898],{"type":436},{"text":900,"type":383}," is included within the first level of the JSON object.",{"type":378,"attrs":902,"content":903},{"textAlign":55},[904,906,910,912,916,918,921],{"text":905,"type":383},"If you set ",{"text":907,"type":383,"marks":908},"enabled",[909],{"type":436},{"text":911,"type":383}," to ",{"text":913,"type":383,"marks":914},"false",[915],{"type":436},{"text":917,"type":383}," in this code - it will disable the upsell functionality from operating on your cart. Alternatively you can also simply remove the above code from the ",{"text":875,"type":383,"marks":919},[920],{"type":497},{"text":922,"type":383}," field and save your configuration to turn off the upsell functionality.",{"type":385,"attrs":924,"content":925},{"level":387,"textAlign":55},[926],{"text":927,"type":383},"Step 3: Taking it further",{"type":378,"attrs":929,"content":930},{"textAlign":55},[931],{"text":932,"type":383},"You have complete control over what logic the Twig includes, and what HTML is output within the modal window. As with any Foxy templates, you can also include any custom styles you need - meaning you can create very complex and beautiful upsell displays for your store.",{"type":378,"attrs":934,"content":935},{"textAlign":55},[936],{"text":937,"type":383},"Some examples of more advanced set ups you could take:",{"type":408,"content":939},[940,947,954],{"type":411,"content":941},[942],{"type":378,"attrs":943,"content":944},{"textAlign":55},[945],{"text":946,"type":383},"Use a custom session attribute to track if a customer has already added or declined an upsell product. This could be done by sending a JSONP request off to the cart on the dismiss link being clicked, and by including the custom attribute in the add to cart. You could then check for that custom attribute in your twig logic to prevent the modal from showing again.",{"type":411,"content":948},[949],{"type":378,"attrs":950,"content":951},{"textAlign":55},[952],{"text":953,"type":383},"On page load of the checkout, you could send off a JSONP request setting a custom session attribute of the current date\u002Ftime. You could then check against that variable when deciding whether to show the upsell or not, and include a countdown timer within the modal showing how much longer the offer would be valid for.",{"type":411,"content":955},[956],{"type":378,"attrs":957,"content":958},{"textAlign":55},[959,961,965],{"text":960,"type":383},"If you wanted to also trigger the upsell modal off of other events on the checkout - such as removing a product from their cart or clicking a button or link - it can be shown by calling ",{"text":962,"type":383,"marks":963},"FC.checkout.showUpsellModal()",[964],{"type":436},{"text":966,"type":383},". This function will re-render the upsell block and display if it's enabled and has at least one HTML element within the block to display.",{"type":385,"attrs":968,"content":969},{"level":834,"textAlign":55},[970],{"text":971,"type":383},"Only showing the upsell window once across customer sessions",{"type":378,"attrs":973,"content":974},{"textAlign":55},[975],{"text":976,"type":383},"If you want to ensure the customer only sees the upsell modal once across multiple different checkout attempts, you can utilise cookies to store details about the customer that can be retrieved in future checkout sessions. As an example, the following code will add a cookie that will last for 30 days if the customer either closes the upsell modal or submits the add to cart form, preventing the customer from seeing it again for that timeframe.",{"type":378,"attrs":978,"content":979},{"textAlign":55},[980,981,985,986,989,991,995,997,1001],{"text":714,"type":383},{"text":716,"type":383,"marks":982},[983],{"type":719,"attrs":984},{"href":716,"uuid":55,"anchor":55,"target":55,"linktype":31},{"text":722,"type":383},{"text":869,"type":383,"marks":987},[988],{"type":497},{"text":990,"type":383}," and add the code to the ",{"text":992,"type":383,"marks":993},"Custom footer",[994],{"type":497},{"text":996,"type":383}," field (Twig is supported; it is injected before the closing ",{"text":998,"type":383,"marks":999},"\u003C\u002Fbody>",[1000],{"type":436},{"text":1002,"type":383}," tag):",{"type":397,"attrs":1004,"content":1005},{"class":55},[1006],{"text":1007,"type":383},"{% if context == \"checkout\" %}\n\u003Cscript>\n    var upsell_cookie_name = \"fc_completed_upsell\",\n        cookie_expires_in = 30; \u002F\u002F default, in days\n \n    $(function() {\n        var has_upsell_cookie = document.cookie.split(';').filter(function(item) {\n                return item.indexOf(upsell_cookie_name + '=') >= 0\n            }).length;\n        if (has_upsell_cookie) {\n            $('[data-fc-id=\"block-upsell-modal\"]').html(\"\");\n            if (FC.checkout.upsell_modal) {\n                FC.checkout.upsell_modal.close();\n            }\n        }\n \n        \u002F\u002F On closing the modal\n        $('body').on(\"mousedown\", '[data-fc-id=\"block-upsell-modal\"] [data-remodal-action=\"cancel\"]', function() { addUpsellCookie(); });\n        \u002F\u002F On submitting a form in the modal\n        $('body').on(\"submit\", '[data-fc-id=\"block-upsell-modal\"] form', function() { addUpsellCookie(); });\n    });\n \n    function addUpsellCookie(days) {\n        var expires = \"\",\n            date = new Date(),\n            days = parseInt(days);\n        \n        if (typeof days !== \"number\" || !isFinite(days) || Math.floor(days) !== days) {\n            days = cookie_expires_in;\n        }\n\n        date.setTime(date.getTime() + (days*24*60*60*1000));\n        expires = \"; expires=\" + date.toUTCString();\n        document.cookie = upsell_cookie_name + \"=true\" + expires + \"; path=\u002F\";\n    }\n\u003C\u002Fscript>\n{% endif %}",{"type":378,"attrs":1009,"content":1010},{"textAlign":55},[1011,1013,1017],{"text":1012,"type":383},"You can modify this script as needed, updating the ",{"text":1014,"type":383,"marks":1015},"cookie_expires_in",[1016],{"type":436},{"text":1018,"type":383}," variable to change the number of days they shouldn't see the upsell for.",{"type":378,"attrs":1020,"content":1021},{"textAlign":55},[1022,1024,1028],{"text":1023,"type":383},"The script also supports passing a custom cookie length, in days, to the ",{"text":1025,"type":383,"marks":1026},"addUpsellCookie()",[1027],{"type":436},{"text":1029,"type":383}," function, so you could customise the number of days the customer shouldn't see the upsell modal for depending on what they interact with. If no parameter is passed, then the default value is used from the top of the script (30 days in the example code above). For example, if you wanted to just hide the modal if cancelled for the default amount, but hide for a year if the customer submits the form - you could edit the form submission event hook like this:",{"type":397,"attrs":1031,"content":1032},{"class":55},[1033],{"text":1034,"type":383},"$('body').on(\"submit\", '[data-fc-id=\"block-upsell-modal\"] form', function() { addUpsellCookie(365); });",{"type":378,"attrs":1036,"content":1037},{"textAlign":55},[1038],{"text":1039,"type":383},"Finally, you can also comment out either of the event hooks that are triggered on closing the modal or submitting a form, depending on your needs. For example if you only wanted to prevent the upsell from showing again if the customer submits the form, you would comment out this line like this:",{"type":397,"attrs":1041,"content":1042},{"class":55},[1043],{"text":1044,"type":383},"\u002F\u002F $('body').on(\"mousedown\", '[data-fc-id=\"block-upsell-modal\"] [data-remodal-action=\"cancel\"]', function() { addUpsellCookie(); });",{"type":385,"attrs":1046,"content":1047},{"level":387,"textAlign":55},[1048],{"text":1049,"type":383},"Displaying a Subscription Cancellation Upsell or Message",{"type":378,"attrs":1051,"content":1052},{"textAlign":55},[1053,1055,1059,1061,1066],{"text":1054,"type":383},"All the steps above should be followed, but here's code tailored to display the message based on the ",{"text":1056,"type":383,"marks":1057},"is_subscription_cancel",[1058],{"type":436},{"text":1060,"type":383}," value. This will ",{"text":1062,"type":383,"marks":1063},"only",[1064],{"type":1065},"italic",{"text":1067,"type":383}," display when a customer uses a subscription cancellation link:",{"type":397,"attrs":1069,"content":1070},{"class":55},[1071],{"text":1072,"type":383},"{% block upsell_modal %}\n    {% if is_subscription_cancel %}\n    \u003Cdiv id=\"cancelConfirmModal\">\n        \u003Ch2>Hi there! Before You Cancel...\u003C\u002Fh2>\n        \u003Cp>We understand things change, but if you're cancelling because:\u003C\u002Fp>\n        \u003Cul>\n            \u003Cli>You're not getting the value you expected?\u003C\u002Fli>\n            \u003Cli>Encountering technical difficulties?\u003C\u002Fli>\n            \u003Cli>Finding it complex to use?\u003C\u002Fli>\n            \u003Cli>Have questions about your plan or billing?\u003C\u002Fli>\n        \u003C\u002Ful>\n        \u003Cp>We're here to help you get the most out of our service! And we're happy to help.\u003C\u002Fp>\n        \u003Cdiv>\n            \u003Cul>\n            \u003Cli>\n                \u003Ca href=\"mailto:hello@example.com\">✉️ Email Support or Schedule a Call\u003C\u002Fa>\n            \u003C\u002Fli>\n            \u003Cli>\n                \u003Ca data-remodal-action=\"cancel\">No Thanks, Continue to Cancel…\u003C\u002Fa>\n            \u003C\u002Fli>\n            \u003C\u002Ful>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    {% endif %}\n{% endblock %}",{"id":55,"alt":55,"name":13,"focus":55,"title":55,"source":55,"filename":13,"copyright":55,"fieldtype":77,"meta_data":1074},{},"How to show a modal at checkout that lets customers quickly add more products before completing their order.",[],"add-an-upsell-modal-to-the-checkout","help\u002Farticles\u002Fadd-an-upsell-modal-to-the-checkout",-4240,[],"93299017-a7c7-44f6-bfa3-e63b67fe1bf8",[],{"name":1084,"created_at":1085,"published_at":1086,"updated_at":1087,"id":1088,"uuid":1089,"content":1090,"slug":1220,"full_slug":1221,"sort_by_date":55,"position":1222,"tag_list":1223,"is_startpage":24,"parent_id":523,"meta_data":55,"group_id":1224,"first_published_at":1086,"release_id":55,"lang":61,"path":55,"alternates":1225,"default_full_slug":55,"translated_slugs":55},"Add custom validation to your checkout","2026-07-02T21:34:55.100Z","2026-07-02T21:49:13.671Z","2026-07-02T21:49:13.686Z",193898475976358,"288fc200-cd4a-4077-8bd9-9afe7deeecc2",{"_uid":1091,"body":1092,"name":1084,"image":1216,"pinned":24,"summary":1218,"category":313,"component":259,"related_articles":1219},"98e043bd-faec-48d6-ab67-cb6b1dbcafd8",{"type":375,"content":1093},[1094,1099,1104,1140,1145,1150,1155,1160,1165,1170,1175],{"type":378,"attrs":1095,"content":1096},{"textAlign":55},[1097],{"text":1098,"type":383},"When you need to block checkout unless a specific condition is met — like confirming a customer’s age, or requiring a field only in certain situations — you can add custom JavaScript validation to the checkout.",{"type":385,"attrs":1100,"content":1101},{"level":387,"textAlign":55},[1102],{"text":1103,"type":383},"Steps",{"type":1105,"attrs":1106,"content":1108},"ordered_list",{"order":1107},1,[1109,1122],{"type":411,"content":1110},[1111],{"type":378,"attrs":1112,"content":1113},{"textAlign":55},[1114,1116,1120],{"text":1115,"type":383},"Add a function to the ",{"text":1117,"type":383,"marks":1118},"checkout-submit",[1119],{"type":436},{"text":1121,"type":383}," event in your checkout template.",{"type":411,"content":1123},[1124],{"type":378,"attrs":1125,"content":1126},{"textAlign":55},[1127,1129,1133,1135,1138],{"text":1128,"type":383},"Return ",{"text":1130,"type":383,"marks":1131},"true",[1132],{"type":436},{"text":1134,"type":383}," to allow the checkout to proceed, or ",{"text":913,"type":383,"marks":1136},[1137],{"type":436},{"text":1139,"type":383}," to block it.",{"type":397,"attrs":1141,"content":1142},{"class":55},[1143],{"text":1144,"type":383},"\u003Cscript type=\"text\u002Fjavascript\">\nFC.client.on(\"checkout-submit\", function() {\n\n});\n\u003C\u002Fscript>\n",{"type":378,"attrs":1146,"content":1147},{"textAlign":55},[1148],{"text":1149,"type":383},"For example, to require customers to be 18 or older based on a custom age field:",{"type":397,"attrs":1151,"content":1152},{"class":55},[1153],{"text":1154,"type":383},"\u003Cscript type=\"text\u002Fjavascript\">\nFC.client.on(\"checkout-submit\", function() {\n  var custAge = jQuery(\"#CustomerAge\").val();\n  if (!isNaN(parseFloat(custAge)) && isFinite(custAge) && parseFloat(custAge) >= 18) {\n    return true;\n  } else {\n    alert(\"You must be over the age of 18 to purchase these products\");\n    return false;\n  }\n});\n\u003C\u002Fscript>\n",{"type":385,"attrs":1156,"content":1157},{"level":387,"textAlign":55},[1158],{"text":1159,"type":383},"Conditionally requiring a field",{"type":378,"attrs":1161,"content":1162},{"textAlign":55},[1163],{"text":1164,"type":383},"You can also use this approach to make a standard field required only in certain situations — for example, requiring a phone number only when the cart contains shippable items. Add this to the footer section of your template configuration’s custom code option:",{"type":397,"attrs":1166,"content":1167},{"class":55},[1168],{"text":1169,"type":383},"\u003Cscript type=\"text\u002Fjavascript\" charset=\"utf-8\">\nfunction myCustomDisplayUpdate() {\n  var require_phone = 0;\n  for (p in FC.json.items) {\n    if (FC.json.items[p].delivery_type == \"shipped\") {\n      require_phone = 1;\n    }\n  }\n  if (require_phone == 1) {\n    FC.json.required_fields.push('shipping_phone');\n    FC.json.config.template_config.custom_checkout_field_requirements['billing_phone'] = \"required\";\n  }\n}\nif (FC.json.context == \"checkout\") {\n  FC.client.on(\"ready\", myCustomDisplayUpdate);\n}\n\u003C\u002Fscript>\n",{"type":385,"attrs":1171,"content":1172},{"level":387,"textAlign":55},[1173],{"text":1174,"type":383},"Notes",{"type":408,"content":1176},[1177,1209],{"type":411,"content":1178},[1179],{"type":378,"attrs":1180,"content":1181},{"textAlign":55},[1182,1184,1187,1189,1192,1194,1197,1199,1202,1204,1207],{"text":1183,"type":383},"Always return both ",{"text":1130,"type":383,"marks":1185},[1186],{"type":436},{"text":1188,"type":383}," and ",{"text":913,"type":383,"marks":1190},[1191],{"type":436},{"text":1193,"type":383}," from your ",{"text":1117,"type":383,"marks":1195},[1196],{"type":436},{"text":1198,"type":383}," function. If you only set it to ",{"text":913,"type":383,"marks":1200},[1201],{"type":436},{"text":1203,"type":383}," in the failing case and never explicitly return ",{"text":1130,"type":383,"marks":1205},[1206],{"type":436},{"text":1208,"type":383},", the checkout won’t be able to proceed even when your condition passes.",{"type":411,"content":1210},[1211],{"type":378,"attrs":1212,"content":1213},{"textAlign":55},[1214],{"text":1215,"type":383},"You can show and hide custom error messages the same way Foxy does for its own default fields.",{"id":55,"alt":55,"name":13,"focus":55,"title":55,"source":55,"filename":13,"copyright":55,"fieldtype":77,"meta_data":1217},{},"How to use the checkout-submit event to add custom JavaScript validation, including conditionally required fields.",[],"add-custom-validation-to-your-checkout","help\u002Farticles\u002Fadd-custom-validation-to-your-checkout",-2880,[],"0403a37d-27b2-4ebe-a744-3412cdd36c40",[],{"name":1227,"created_at":1228,"published_at":1229,"updated_at":1230,"id":1231,"uuid":1232,"content":1233,"slug":1302,"full_slug":1303,"sort_by_date":55,"position":1304,"tag_list":1305,"is_startpage":24,"parent_id":523,"meta_data":55,"group_id":1306,"first_published_at":1229,"release_id":55,"lang":61,"path":55,"alternates":1307,"default_full_slug":55,"translated_slugs":55},"Automatically select the first shipping rate","2026-07-22T17:11:50.095Z","2026-07-22T17:44:57.866Z","2026-07-22T17:44:57.879Z",200911708608632,"477b2344-9e72-4e4b-a752-6669c89a471c",{"_uid":1234,"body":1235,"name":1227,"image":1298,"pinned":24,"summary":1300,"category":313,"component":259,"related_articles":1301},"b3ea71ef-9dd6-466c-bc6f-7743ffb08858",{"type":375,"content":1236},[1237,1242,1248],{"type":378,"attrs":1238,"content":1239},{"textAlign":55},[1240],{"text":1241,"type":383},"The following steps allow you to have the cart\u002Fcheckout automatically select the first shipping rate from the options returned after a customer enters their shipping address.",{"type":397,"attrs":1243,"content":1245},{"class":1244},"language-html",[1246],{"text":1247,"type":383},"{% if context == \"cart\" or context == \"checkout\" %}\n\u003Cscript>\nFC.client.on(FC.json.context + '-shipping-options-update.done', autoSelectRate);\n \nfunction autoSelectRate(params) {\n    var prefix = (params.address.prefix == 'shipping') ? '' : params.address.prefix + \"_\";\n    if (jQuery('[name=' + prefix + 'shipping_service_id]:first').length) {\n        jQuery('[name=' + prefix + 'shipping_service_id]:first').trigger('click');\n        FC.Template(FC.json.context).clearOutput();\n        if (FC.json.context == 'cart' && FC.json.shipping_address.shipping_results.length > 1) {\n            FC.cart.showShippingLocationInput();\n        } else if (FC.json.context == \"checkout\") {\n            FC.checkout.renderShippingRates(params.address);\n        }\n    }\n}\n\u003C\u002Fscript>\n{% endif %}\n",{"type":408,"content":1249},[1250,1257,1273,1285,1291],{"type":411,"content":1251},[1252],{"type":378,"attrs":1253,"content":1254},{"textAlign":55},[1255],{"text":1256,"type":383},"Copy the code you see to your computer's clipboard.",{"type":411,"content":1258},[1259],{"type":378,"attrs":1260,"content":1261},{"textAlign":55},[1262,1263,1267,1268,1271],{"text":714,"type":383},{"text":716,"type":383,"marks":1264},[1265],{"type":719,"attrs":1266},{"href":716,"uuid":55,"anchor":55,"target":55,"linktype":31},{"text":722,"type":383},{"text":869,"type":383,"marks":1269},[1270],{"type":497},{"text":1272,"type":383},".",{"type":411,"content":1274},[1275],{"type":378,"attrs":1276,"content":1277},{"textAlign":55},[1278,1280,1283],{"text":1279,"type":383},"Paste the code into the ",{"text":992,"type":383,"marks":1281},[1282],{"type":497},{"text":1284,"type":383}," field.",{"type":411,"content":1286},[1287],{"type":378,"attrs":1288,"content":1289},{"textAlign":55},[1290],{"text":597,"type":383},{"type":411,"content":1292},[1293],{"type":378,"attrs":1294,"content":1295},{"textAlign":55},[1296],{"text":1297,"type":383},"Run a test by adding some of your shippable products to the cart and enter a shipping address to ensure that it works as expected.",{"id":55,"alt":55,"name":13,"focus":55,"title":55,"source":55,"filename":13,"copyright":55,"fieldtype":77,"meta_data":1299},{},"How to have the cart and checkout auto select the first shipping rate returned for the customer's address.",[],"automatically-select-the-first-shipping-rate","help\u002Farticles\u002Fautomatically-select-the-first-shipping-rate",-4330,[],"17730a8c-36fe-47ef-9a78-a8574e6ed6d9",[],{"name":1309,"created_at":1310,"published_at":1311,"updated_at":1312,"id":1313,"uuid":1314,"content":1315,"slug":1407,"full_slug":1408,"sort_by_date":55,"position":1409,"tag_list":1410,"is_startpage":24,"parent_id":523,"meta_data":55,"group_id":1411,"first_published_at":1311,"release_id":55,"lang":61,"path":55,"alternates":1412,"default_full_slug":55,"translated_slugs":55},"Let customers add a donation at checkout","2026-07-21T20:48:27.172Z","2026-07-22T17:44:59.808Z","2026-07-22T17:44:59.823Z",200611050232609,"671e3e35-1ec2-4604-9a26-2e829161705e",{"_uid":1316,"body":1317,"name":1309,"image":1403,"pinned":24,"summary":1405,"category":313,"component":259,"related_articles":1406},"76b2cd7f-70b0-4555-8d21-1b2b59b9525e",{"type":375,"content":1318},[1319,1324,1329,1351,1356,1367,1372,1398],{"type":378,"attrs":1320,"content":1321},{"textAlign":55},[1322],{"text":1323,"type":383},"The following snippet adds a text input to the checkout to allow customers to add a donation to the cart when completing the checkout.",{"type":385,"attrs":1325,"content":1326},{"level":834,"textAlign":55},[1327],{"text":1328,"type":383},"Add javascript",{"type":378,"attrs":1330,"content":1331},{"textAlign":55},[1332,1333,1337,1338,1341,1342,1345,1346,1349],{"text":714,"type":383},{"text":716,"type":383,"marks":1334},[1335],{"type":719,"attrs":1336},{"href":716,"uuid":55,"anchor":55,"target":55,"linktype":31},{"text":722,"type":383},{"text":869,"type":383,"marks":1339},[1340],{"type":497},{"text":990,"type":383},{"text":992,"type":383,"marks":1343},[1344],{"type":497},{"text":996,"type":383},{"text":998,"type":383,"marks":1347},[1348],{"type":436},{"text":1350,"type":383}," tag).",{"type":397,"attrs":1352,"content":1353},{"class":55},[1354],{"text":1355,"type":383},"{% if context == \"checkout\" %}\n\u003Cscript>$('body').on('click', '#donation_confirm', function(e){\n\te.preventDefault();\n\t\u002F\u002F The FC.client.request() gets new JSON which clears out the shipping.\n\t\u002F\u002F TODO: This will be fixed by Foxy, but for now we have a shim.\n\tvar shipping_results = FC.json.shipping_address.shipping_results,\n\t\tshipping_service_description = FC.json.shipping_address.shipping_service_description,\n\t\tshipping_service_id = FC.json.shipping_address.shipping_service_id;\n \n\tvar donation_id;\n\tvar donation_existing = 0;\n\tfor (i=0; i \u003C FC.json.items.length; i++) {\n\t\tif (FC.json.items[i].code == 'donation') {\n\t\t\tdonation_id = FC.json.items[i].id;\n\t\t\tdonation_existing = FC.json.items[i].price;\n\t\t}\n\t}\n\n\tvar donation_new = $(\"#donation\").val() || 0;\n \tFC.json.donation = donation_new;\n\n\t\u002F\u002F MODIFY THE PRODUCT LINK BELOW\n \tvar add_link = 'https:\u002F\u002F'+FC.settings.storedomain+'\u002Fcart?name=Donation&price=' + donation_new + '&code=donation&quantity_max=1';\n \tvar remove_link = 'https:\u002F\u002F'+FC.settings.storedomain+'\u002Fcart?cart=update&quantity=0&id='+donation_id;\n\n \t\u002F\u002F Add and remove\n \tif (donation_id && donation_new != donation_existing && donation_new > 0) {\n \t\tFC.client.request(remove_link).done(function() {\n \t\t\tFC.client.request(add_link).done(function() {\n \t\t\t\tFC.json.shipping_address.shipping_results = shipping_results;\n\t\t\t\tFC.json.shipping_address.shipping_service_description = shipping_service_description;\n\t\t\t\tFC.json.shipping_address.shipping_service_id = shipping_service_id;\n\t\t\t\tFC.checkout.render();\n\t\t\t\tFC.checkout.getShippingOptions({address: FC.json.shipping_address});\n \t\t\t});\n \t\t});\n \t} else {\n \t\tvar action_link = \"\";\n \t\tif (donation_id && donation_new == 0) {\n \t\t\taction_link = remove_link;\n \t\t}\n \t\tif (!donation_id && donation_new > 0) {\n \t\t\taction_link = add_link;\n \t\t}\n\n \t\tif (action_link != \"\") {\n \t\t\tFC.client.request(action_link).done(function() {\n \t\t\t\tFC.json.shipping_address.shipping_results = shipping_results;\n\t\t\t\tFC.json.shipping_address.shipping_service_description = shipping_service_description;\n\t\t\t\tFC.json.shipping_address.shipping_service_id = shipping_service_id;\n\t\t\t\tFC.checkout.render();\n\t\t\t\tFC.checkout.getShippingOptions({address: FC.json.shipping_address});\n \t\t\t});\n \t\t}\n \t}\n});\nFC.client.on(\"ready.done\", function() {\n\tfor (i=0; i \u003C FC.json.items.length; i++) {\n\t\tif (FC.json.items[i].code == 'donation') {\n\t\t\tFC.json.donation = FC.json.items[i].price;\n\t\t}\n\t}\n \tFC.checkout.renderAdditionalFields();\n});\n\u003C\u002Fscript>\n{% endif %}",{"type":378,"attrs":1357,"content":1358},{"textAlign":55},[1359,1361,1365],{"text":1360,"type":383},"You'll just need to modify the ",{"text":1362,"type":383,"marks":1363},"MODIFY THE PRODUCT LINK BELOW",[1364],{"type":436},{"text":1366,"type":383}," section to set the donation \"product\" as desired, the donation amount will come from the input you'll add in the next step. If your store is using link\u002Fform signing, you'll just need to create that link and sign it (using the tool in the \"sample code\" section of the admin, if you don't have another way) and paste it in there as needed - ensuring the price field is encrypted as an open field. Make sure it's set to the appropriate category so it has the proper shipping and taxes applied to it.",{"type":385,"attrs":1368,"content":1369},{"level":834,"textAlign":55},[1370],{"text":1371,"type":383},"Add HTML",{"type":378,"attrs":1373,"content":1374},{"textAlign":55},[1375,1376,1380,1381,1384,1386,1390,1392,1396],{"text":714,"type":383},{"text":716,"type":383,"marks":1377},[1378],{"type":719,"attrs":1379},{"href":716,"uuid":55,"anchor":55,"target":55,"linktype":31},{"text":722,"type":383},{"text":724,"type":383,"marks":1382},[1383],{"type":497},{"text":1385,"type":383}," and add the field to ",{"text":1387,"type":383,"marks":1388},"Custom checkout fields",[1389],{"type":497},{"text":1391,"type":383}," (use ",{"text":1393,"type":383,"marks":1394},"Custom checkout fields for multiship",[1395],{"type":497},{"text":1397,"type":383}," to collect it under each shipping address; Twig is supported):",{"type":397,"attrs":1399,"content":1400},{"class":55},[1401],{"text":1402,"type":383},"\u003Cdiv class=\"fc-form-group\">\n\t\u003Cdiv class=\"col-sm-8 col-sm-offset-3\">\n\t\t\u003Cdiv class=\"fc-input-group-container fc-input-group-container--checkbox fc-input-group-container--active\">\n\t\t\t\u003Clabel class=\"fc-input-group-container__title fc-input-group-container__title--forced fc-form-label\">\n\t\t\t\tWould you like to add a donation?\n\t\t\t\u003C\u002Flabel>\n\t\t\t\u003Cdiv class=\"fc-form-group fc-form-group--multiple-inline\">\n\t\t\t\t\u003Cdiv class=\"col-xs-4\">\n\t\t\t\t\t\u003Cinput type=\"text\" id=\"donation\" value=\"\" class=\"fc-form-control fc-form-control--donation\">\n\t\t\t\t\u003C\u002Fdiv>\n\t\t\t\t\u003Cdiv class=\"col-xs-8\">\n\t\t\t\t\t\u003Cp>\n\t\t\t\t\t\t\u003Cbutton type=\"button\" id=\"donation_confirm\" class=\"fc-button\">Add donation\u003C\u002Fbutton>\n\t\t\t\t\t\u003C\u002Fp>\n\t\t\t\t\u003C\u002Fdiv>\n\t\t\t\u003C\u002Fdiv>\n\t\t\u003C\u002Fdiv>\n\t\u003C\u002Fdiv>\n\u003C\u002Fdiv>",{"id":55,"alt":55,"name":13,"focus":55,"title":55,"source":55,"filename":13,"copyright":55,"fieldtype":77,"meta_data":1404},{},"How to add an input at checkout that lets customers add a donation of their chosen amount.",[],"let-customers-add-a-donation-at-checkout","help\u002Farticles\u002Flet-customers-add-a-donation-at-checkout",-4250,[],"6fc4ea19-3af5-4ca5-998e-807b1034faab",[],{"name":1414,"created_at":1415,"published_at":1416,"updated_at":1417,"id":1418,"uuid":1419,"content":1420,"slug":1469,"full_slug":1470,"sort_by_date":55,"position":1471,"tag_list":1472,"is_startpage":24,"parent_id":523,"meta_data":55,"group_id":1473,"first_published_at":1416,"release_id":55,"lang":61,"path":55,"alternates":1474,"default_full_slug":55,"translated_slugs":55},"Prevent shipping to PO boxes","2026-07-22T17:14:22.424Z","2026-07-22T17:44:57.557Z","2026-07-22T17:44:57.573Z",200912332540026,"7cb53496-30f4-4038-aa8d-601300502742",{"_uid":1421,"body":1422,"name":1414,"image":1465,"pinned":24,"summary":1467,"category":313,"component":259,"related_articles":1468},"c65df62e-4e60-4d6d-90ee-749dc2c31780",{"type":375,"content":1423},[1424,1429,1434,1455,1460],{"type":378,"attrs":1425,"content":1426},{"textAlign":55},[1427],{"text":1428,"type":383},"The following functionality prevents your customers from shipping to PO Box addresses.",{"type":385,"attrs":1430,"content":1431},{"level":834,"textAlign":55},[1432],{"text":1433,"type":383},"Add Javascript",{"type":378,"attrs":1435,"content":1436},{"textAlign":55},[1437,1438,1442,1443,1446,1447,1450,1451,1454],{"text":714,"type":383},{"text":716,"type":383,"marks":1439},[1440],{"type":719,"attrs":1441},{"href":716,"uuid":55,"anchor":55,"target":55,"linktype":31},{"text":722,"type":383},{"text":869,"type":383,"marks":1444},[1445],{"type":497},{"text":990,"type":383},{"text":992,"type":383,"marks":1448},[1449],{"type":497},{"text":996,"type":383},{"text":998,"type":383,"marks":1452},[1453],{"type":436},{"text":1350,"type":383},{"type":378,"attrs":1456,"content":1457},{"textAlign":55},[1458],{"text":1459,"type":383},"javascript",{"type":397,"attrs":1461,"content":1462},{"class":55},[1463],{"text":1464,"type":383},"{% if context == \"checkout\" %}\n\u003Cscript>\n    var validatePO = function() {\n        var addressString = \"\";\n        $(\"[name$='_address1'],[name$='_address2']\").not(\"[name^='billing']\").each(function() { addressString += this.value; });\n        addressString = addressString.replace(\u002F\\.\u002Fg,\"\");\n        addressString = addressString.replace(\u002F \u002Fg,\"\");\n        addressString = addressString.toLowerCase();\n        if(addressString.indexOf('pobox') != -1) {\n            alert(\"We ​can not ship to a PO Box shipping address. Please ​choose ​a different shipping ​address ​location.\");\n            return false;\n        }\n        else {\n            return true;\n        }\n    };\n    FC.client.on('customer-login.done', validatePO);\n    FC.client.on('customer-address-change', validatePO);\n    FC.client.on('checkout-submit', validatePO);\n    $(\"body\").on(\"change\", \"[name$='_address1'],[name$='_address2']\", function() {\n        if (this.name.indexOf(\"billing\")) {\n            var address = FC.json.shipping_address;\n            var multiship = this.name.match(\u002Fshipto_(\\d+)\u002F);\n            if (multiship) {\n                address = FC.json.multiship_data[multiship[1]];\n            }\n            if (validatePO() && FC.util.addressHasLocationInfo(address)) {\n                FC.client.event('customer-address-change.done').trigger({ \"fields\":{}, \"address\": address });\n            }\n        }\n    });\n\u003C\u002Fscript>\n{% endif %}",{"id":55,"alt":55,"name":13,"focus":55,"title":55,"source":55,"filename":13,"copyright":55,"fieldtype":77,"meta_data":1466},{},"How to stop customers from completing checkout with a PO Box shipping address.",[],"prevent-shipping-to-po-boxes","help\u002Farticles\u002Fprevent-shipping-to-po-boxes",-4340,[],"dd7d6089-ac44-4a0c-8252-beb6d50bc65c",[],{"name":1476,"created_at":1477,"published_at":1478,"updated_at":1479,"id":1480,"uuid":1481,"content":1482,"slug":1573,"full_slug":1574,"sort_by_date":55,"position":1575,"tag_list":1576,"is_startpage":24,"parent_id":523,"meta_data":55,"group_id":1577,"first_published_at":1478,"release_id":55,"lang":61,"path":55,"alternates":1578,"default_full_slug":55,"translated_slugs":55},"Style the address autocomplete widget","2026-07-02T21:36:28.624Z","2026-07-02T21:49:13.469Z","2026-07-02T21:49:13.483Z",193898859054760,"62502501-f792-4d06-b328-25c84cd9ead5",{"_uid":1483,"body":1484,"name":1476,"image":1569,"pinned":24,"summary":1571,"category":313,"component":259,"related_articles":1572},"b9493d75-3fb1-4b02-a7a3-cb9dbc7bfabd",{"type":375,"content":1485},[1486,1491,1495,1535,1539],{"type":378,"attrs":1487,"content":1488},{"textAlign":55},[1489],{"text":1490,"type":383},"The address autocomplete widget ships with default styles so it displays cleanly out of the box. To customize it further, overwrite its styles the same way you would style any other part of the checkout.",{"type":385,"attrs":1492,"content":1493},{"level":387,"textAlign":55},[1494],{"text":1103,"type":383},{"type":1105,"attrs":1496,"content":1497},{"order":1107},[1498,1505],{"type":411,"content":1499},[1500],{"type":378,"attrs":1501,"content":1502},{"textAlign":55},[1503],{"text":1504,"type":383},"Overwrite the widget’s CSS in your checkout template, as you would for any other checkout element.",{"type":411,"content":1506},[1507],{"type":378,"attrs":1508,"content":1509},{"textAlign":55},[1510,1512,1516,1517,1521,1523,1527,1529,1533],{"text":1511,"type":383},"If you need to resize the dropdown selector, set its ",{"text":1513,"type":383,"marks":1514},"width",[1515],{"type":436},{"text":1188,"type":383},{"text":1518,"type":383,"marks":1519},"height",[1520],{"type":436},{"text":1522,"type":383}," with ",{"text":1524,"type":383,"marks":1525},"!important",[1526],{"type":436},{"text":1528,"type":383}," — for example, ",{"text":1530,"type":383,"marks":1531},"width: 30px !important;",[1532],{"type":436},{"text":1534,"type":383},". These styles need to override the widget’s own positioning logic, which won’t apply otherwise.",{"type":385,"attrs":1536,"content":1537},{"level":387,"textAlign":55},[1538],{"text":1174,"type":383},{"type":408,"content":1540},[1541,1548,1555,1562],{"type":411,"content":1542},[1543],{"type":378,"attrs":1544,"content":1545},{"textAlign":55},[1546],{"text":1547,"type":383},"The dropdown selector and flag icon are positioned absolutely, based on the size and position of the location text input. The dropdown’s width and height match the text input’s height, including padding, and it sits on the right side of the field.",{"type":411,"content":1549},[1550],{"type":378,"attrs":1551,"content":1552},{"textAlign":55},[1553],{"text":1554,"type":383},"When the dropdown is present, the text input’s typeable width is reduced by the dropdown’s width, so the input’s overall size doesn’t change but text can’t be entered underneath the dropdown button.",{"type":411,"content":1556},[1557],{"type":378,"attrs":1558,"content":1559},{"textAlign":55},[1560],{"text":1561,"type":383},"The flag icon sits to the right of the text input, and to the left of the dropdown selector if one is present.",{"type":411,"content":1563},[1564],{"type":378,"attrs":1565,"content":1566},{"textAlign":55},[1567],{"text":1568,"type":383},"For most custom templates, the default positioning works without adjustment — this is only needed if your design requires a different dropdown size.",{"id":55,"alt":55,"name":13,"focus":55,"title":55,"source":55,"filename":13,"copyright":55,"fieldtype":77,"meta_data":1570},{},"How to customize the styling and dimensions of the checkout's address autocomplete widget.",[],"style-the-address-autocomplete-widget","help\u002Farticles\u002Fstyle-the-address-autocomplete-widget",-2890,[],"0bbddb38-8a41-4d9f-bfc9-1a0407c8e25e",[],{"name":1580,"created_at":1581,"published_at":1582,"updated_at":1583,"id":1584,"uuid":42,"content":1585,"slug":43,"full_slug":43,"sort_by_date":55,"position":1762,"tag_list":1763,"is_startpage":24,"parent_id":55,"meta_data":55,"group_id":1764,"first_published_at":1765,"release_id":55,"lang":61,"path":55,"alternates":1766,"default_full_slug":55,"translated_slugs":55},"Contact","2022-09-23T19:56:58.957Z","2025-05-08T18:24:40.382Z","2025-05-08T18:24:40.392Z",3138,{"seo":1586,"_uid":1589,"title":1590,"action":1591,"fields":1592,"method":1738,"columns":1739,"subtitle":1753,"component":43,"button_text":1759,"submit_title":1760,"submit_subtitle":1761},{"_uid":1587,"title":1580,"plugin":1588,"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",[1593,1598,1602,1709,1712,1717,1732],{"_uid":1594,"name":1595,"type":383,"label":1596,"options":13,"required":33,"component":1597,"placeholder":13},"9a70b226-2036-4f90-a052-b3efa61c5896","name","Name","form___field",{"_uid":1599,"name":1600,"type":1600,"label":1601,"options":13,"required":33,"component":1597,"placeholder":13},"86ba35be-ff43-4a28-8633-14052a8f6622","email","Email Address",{"_uid":1603,"name":1604,"type":1605,"label":1606,"options":1607,"required":33,"component":1597,"conditions":1608,"placeholder":13},"3f827475-492c-4f97-aa1e-2386ac263b6c","topic","select","Topic","Presales, Support, Billing, Partnerships, Order Enquiry, Other",[1609,1663,1673,1680,1688,1696,1702],{"_uid":1610,"equals":1611,"fields":1612,"component":1662},"e21d97dd-e68e-4fa6-ba97-bc40f3041dde","Order Enquiry",[1613],{"_uid":1614,"body":1615,"type":1660,"title":13,"component":1661},"b64992bc-6d53-48b8-b7a0-d81e5a062e50",{"type":375,"content":1616},[1617],{"type":378,"content":1618},[1619,1621,1628,1630,1632,1633,1637,1639,1643,1651,1653,1658],{"text":1620,"type":383},"We are ",{"text":1622,"type":383,"marks":1623},"Foxy.io",[1624],{"type":719,"attrs":1625},{"href":1626,"uuid":55,"anchor":55,"custom":1627,"target":55,"linktype":31},"http:\u002F\u002FFoxy.io",{},{"text":1629,"type":383},", 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":1631},"hard_break",{"type":1631},{"text":1634,"type":383,"marks":1635},"NOTE:",[1636],{"type":497},{"text":1638,"type":383}," We are ",{"text":1640,"type":383,"marks":1641},"not ",[1642],{"type":1065},{"text":1644,"type":383,"marks":1645},"Foxy.in",[1646,1650],{"type":719,"attrs":1647},{"href":1648,"uuid":55,"anchor":55,"custom":1649,"target":55,"linktype":31},"http:\u002F\u002FFoxy.in",{},{"type":1065},{"text":1652,"type":383},". We are not in any way affiliated with ",{"text":1644,"type":383,"marks":1654},[1655],{"type":719,"attrs":1656},{"href":1648,"uuid":55,"anchor":55,"custom":1657,"target":55,"linktype":31},{},{"text":1659,"type":383},", and cannot help in any way with your order from that website.","danger","global___alert","form___condition",{"_uid":1664,"equals":1665,"fields":1666,"component":1662},"8765c3e1-25cf-44aa-b8ea-fc6094acf9c3","Presales",[1667],{"_uid":1668,"name":1669,"type":1670,"label":13,"options":13,"required":24,"component":1597,"conditions":1671,"placeholder":13,"default_value":1672},"cf464f8e-d643-4f6e-af29-d3abffaf7380","department_email_address","hidden",[],"hello@foxy.io",{"_uid":1674,"equals":204,"fields":1675,"component":1662},"4007b6d8-77e5-421d-bd1e-6f336dd853fb",[1676],{"_uid":1677,"name":1669,"type":1670,"label":13,"options":13,"required":24,"component":1597,"conditions":1678,"placeholder":13,"default_value":1679},"7b4c6aa5-a68c-45e0-9ce1-0a36af10c0c2",[],"help@foxy.io",{"_uid":1681,"equals":1682,"fields":1683,"component":1662},"1dbb8f11-613d-43cd-9e09-1b94f6e19219","Billing",[1684],{"_uid":1685,"name":1669,"type":1670,"label":13,"options":13,"required":24,"component":1597,"conditions":1686,"placeholder":13,"default_value":1687},"a0ac0d1b-bc4f-4a6c-a682-581d450b0b73",[],"help+billing@foxy.io",{"_uid":1689,"equals":1690,"fields":1691,"component":1662},"a0a53a50-7172-4a29-ba58-181e38874e12","Partnerships",[1692],{"_uid":1693,"name":1669,"type":1670,"label":13,"options":13,"required":24,"component":1597,"conditions":1694,"placeholder":13,"default_value":1695},"7aa011d9-f374-4aed-b5a5-929b54aaf152",[],"partners@foxy.io",{"_uid":1697,"equals":1611,"fields":1698,"component":1662},"a4cd431f-25d5-41c7-bfdc-02c908c8fb47",[1699],{"_uid":1700,"name":1669,"type":1670,"label":13,"options":13,"required":24,"component":1597,"conditions":1701,"placeholder":13,"default_value":1672},"f5d52168-d6ae-451b-94ee-2ced1cbd28ad",[],{"_uid":1703,"equals":1704,"fields":1705,"component":1662},"25aba1ed-eb41-4bbc-aa89-f7a7167ea86e","Other",[1706],{"_uid":1707,"name":1669,"type":1670,"label":13,"options":13,"required":24,"component":1597,"conditions":1708,"placeholder":13,"default_value":1672},"f40dfaef-c203-4b71-bf4e-e1b43cef192b",[],{"_uid":1710,"component":1711},"e9c53a05-f40a-4510-aaf8-bc072a235a0c","form___subject",{"_uid":1713,"name":1714,"type":1715,"label":1716,"options":13,"required":33,"component":1597,"placeholder":13},"a4c4d385-fff4-4978-99fb-b68cfea623d6","message","textarea","Message",{"_uid":1718,"name":1719,"type":1605,"label":1720,"options":1721,"required":33,"component":1597,"conditions":1722,"placeholder":13},"8a3c9f85-f438-427d-9c7a-d7b295a14b5b","existing_user","Are you an existing user?","No, Yes",[1723],{"_uid":1724,"equals":1725,"fields":1726,"component":1662},"115933d6-262a-4b59-8fa8-579c5ad73de1","Yes",[1727],{"_uid":1728,"name":1729,"type":383,"label":1730,"options":13,"required":33,"component":1597,"conditions":1731,"placeholder":13},"44b6ff23-98f0-4e95-b7f5-c23e06415c2d","subdomain","Store Subdomain",[],{"_uid":1733,"name":1734,"type":1605,"label":1735,"options":1736,"required":33,"component":1597,"conditions":1737,"placeholder":13},"922a5cef-3af2-4113-8855-36c7910e3ee3","user_type","What type of user are you?","Developer, Designer, Merchant",[],"POST",[1740],{"_uid":1741,"text":1742,"title":1751,"component":1752},"7323b90d-a93a-4bf1-baa9-20d0b7ead61b",{"type":375,"content":1743},[1744],{"type":378,"content":1745},[1746,1748,1749],{"text":1747,"type":383},"855.369.9227",{"type":1631},{"text":1750,"type":383},"9:30am-6pm Central M-F","Pre-sales, Sales, & Partnerships","contact___footer_column",{"type":375,"content":1754},[1755],{"type":378,"content":1756},[1757],{"text":1758,"type":383},"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",[],{},1785861255551]