[{"data":1,"prerenderedAt":1030},["ShallowReactive",2],{"header:help":3,"footer:default":67,"story:navigation\u002Fsearch:help":250,"story:help\u002Fcategories":288,"story:help\u002Farticles\u002Fcss-class-and-naming-conventions-reference":314,"no-guide:css-class-and-naming-conventions-reference":59,"article:\u002Fhelp\u002Farticles\u002Fcss-class-and-naming-conventions-reference":767,"story:contact":786,"help:tree:571cf8ca-1a8d-4667-ad76-3ca19985ffb4":976,"_apollo:default":1029},{"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":760,"full_slug":761,"sort_by_date":59,"position":762,"tag_list":763,"is_startpage":24,"parent_id":764,"meta_data":59,"group_id":765,"first_published_at":317,"release_id":59,"lang":65,"path":59,"alternates":766,"default_full_slug":59,"translated_slugs":59},"CSS class and naming conventions reference","2026-07-23T03:52:19.044Z","2026-07-23T04:10:00.261Z","2026-07-23T04:10:00.279Z",201069113573605,"571cf8ca-1a8d-4667-ad76-3ca19985ffb4",{"_uid":322,"body":323,"name":315,"image":755,"pinned":24,"summary":757,"category":758,"component":266,"related_articles":759},"db885298-c599-4f15-b32a-0e517542a920",{"type":324,"content":325},"doc",[326,334,427,432,496,501,506,512,517,522,533,538,713,718,723,728,733],{"type":327,"attrs":328,"content":330},"heading",{"level":329,"textAlign":59},2,[331],{"text":332,"type":333},"Class and ID conventions","text",{"type":335,"content":336},"table",[337,359,383,405],{"type":338,"content":339},"tableRow",[340,351],{"type":341,"attrs":342,"content":344},"tableHeader",{"colspan":343,"rowspan":343,"colwidth":59},1,[345],{"type":346,"attrs":347,"content":348},"paragraph",{"textAlign":59},[349],{"text":350,"type":333},"Convention",{"type":341,"attrs":352,"content":353},{"colspan":343,"rowspan":343,"colwidth":59},[354],{"type":346,"attrs":355,"content":356},{"textAlign":59},[357],{"text":358,"type":333},"Purpose",{"type":338,"content":360},[361,375],{"type":362,"attrs":363,"content":364},"tableCell",{"colspan":343,"rowspan":343,"colwidth":59,"backgroundColor":59},[365],{"type":346,"attrs":366,"content":367},{"textAlign":59},[368,373],{"text":369,"type":333,"marks":370},".fc-*",[371],{"type":372},"code",{"text":374,"type":333}," classes",{"type":362,"attrs":376,"content":377},{"colspan":343,"rowspan":343,"colwidth":59,"backgroundColor":59},[378],{"type":346,"attrs":379,"content":380},{"textAlign":59},[381],{"text":382,"type":333},"Styling only. Not required for functionality.",{"type":338,"content":384},[385,397],{"type":362,"attrs":386,"content":387},{"colspan":343,"rowspan":343,"colwidth":59,"backgroundColor":59},[388],{"type":346,"attrs":389,"content":390},{"textAlign":59},[391,395],{"text":392,"type":333,"marks":393},"#fc-*",[394],{"type":372},{"text":396,"type":333}," IDs",{"type":362,"attrs":398,"content":399},{"colspan":343,"rowspan":343,"colwidth":59,"backgroundColor":59},[400],{"type":346,"attrs":401,"content":402},{"textAlign":59},[403],{"text":404,"type":333},"Styling, used sparingly for CSS namespacing. Not recommended for JavaScript selectors.",{"type":338,"content":406},[407,419],{"type":362,"attrs":408,"content":409},{"colspan":343,"rowspan":343,"colwidth":59,"backgroundColor":59},[410],{"type":346,"attrs":411,"content":412},{"textAlign":59},[413,417],{"text":414,"type":333,"marks":415},"data-fc-*",[416],{"type":372},{"text":418,"type":333}," attributes",{"type":362,"attrs":420,"content":421},{"colspan":343,"rowspan":343,"colwidth":59,"backgroundColor":59},[422],{"type":346,"attrs":423,"content":424},{"textAlign":59},[425],{"text":426,"type":333},"Functional purposes and template rendering. Use these for JavaScript selectors instead of IDs.",{"type":327,"attrs":428,"content":429},{"level":329,"textAlign":59},[430],{"text":431,"type":333},"Form input conventions",{"type":433,"content":434},"bullet_list",[435,447,474],{"type":436,"content":437},"list_item",[438],{"type":346,"attrs":439,"content":440},{"textAlign":59},[441,445],{"text":442,"type":333,"marks":443},"name",[444],{"type":372},{"text":446,"type":333}," attributes on inputs, selects, and other form elements use underscores and cannot be changed without breaking server-side functionality.",{"type":436,"content":448},[449],{"type":346,"attrs":450,"content":451},{"textAlign":59},[452,456,458,461,463,467,469,472],{"text":453,"type":333,"marks":454},"id",[455],{"type":372},{"text":457,"type":333}," values on form inputs match their ",{"text":442,"type":333,"marks":459},[460],{"type":372},{"text":462,"type":333}," values and are not prefixed with ",{"text":464,"type":333,"marks":465},"fc-",[466],{"type":372},{"text":468,"type":333},", since labels are tied to inputs by ",{"text":453,"type":333,"marks":470},[471],{"type":372},{"text":473,"type":333},".",{"type":436,"content":475},[476],{"type":346,"attrs":477,"content":478},{"textAlign":59},[479,481,484,486,490,492,495],{"text":480,"type":333},"Select inputs in JavaScript using ",{"text":442,"type":333,"marks":482},[483],{"type":372},{"text":485,"type":333}," and ",{"text":487,"type":333,"marks":488},"value",[489],{"type":372},{"text":491,"type":333},", not ",{"text":453,"type":333,"marks":493},[494],{"type":372},{"text":473,"type":333},{"type":327,"attrs":497,"content":498},{"level":329,"textAlign":59},[499],{"text":500,"type":333},"BEM naming",{"type":346,"attrs":502,"content":503},{"textAlign":59},[504],{"text":505,"type":333},"Classes follow the BEM (Block, Element, Modifier) methodology:",{"type":507,"attrs":508,"content":509},"code_block",{"class":59},[510],{"text":511,"type":333},"block--element__modifier\n",{"type":346,"attrs":513,"content":514},{"textAlign":59},[515],{"text":516,"type":333},"Blocks can be chained together:",{"type":507,"attrs":518,"content":519},{"class":59},[520],{"text":521,"type":333},"block--block--element__modifier\n",{"type":346,"attrs":523,"content":524},{"textAlign":59},[525,527,531],{"text":526,"type":333},"Most elements can be styled with the ",{"text":528,"type":333,"marks":529},"#fc",[530],{"type":372},{"text":532,"type":333}," namespace selector plus at most two class names.",{"type":327,"attrs":534,"content":535},{"level":329,"textAlign":59},[536],{"text":537,"type":333},"Specific IDs and data attributes",{"type":335,"content":539},[540,558,589,609,629,648,667,687],{"type":338,"content":541},[542,550],{"type":341,"attrs":543,"content":544},{"colspan":343,"rowspan":343,"colwidth":59},[545],{"type":346,"attrs":546,"content":547},{"textAlign":59},[548],{"text":549,"type":333},"Attribute",{"type":341,"attrs":551,"content":552},{"colspan":343,"rowspan":343,"colwidth":59},[553],{"type":346,"attrs":554,"content":555},{"textAlign":59},[556],{"text":557,"type":333},"Description",{"type":338,"content":559},[560,569],{"type":362,"attrs":561,"content":562},{"colspan":343,"rowspan":343,"colwidth":59,"backgroundColor":59},[563],{"type":346,"attrs":564,"content":565},{"textAlign":59},[566],{"text":528,"type":333,"marks":567},[568],{"type":372},{"type":362,"attrs":570,"content":571},{"colspan":343,"rowspan":343,"colwidth":59,"backgroundColor":59},[572],{"type":346,"attrs":573,"content":574},{"textAlign":59},[575,577,581,583,587],{"text":576,"type":333},"Namespaces CSS for the default theme. May be on the ",{"text":578,"type":333,"marks":579},"html",[580],{"type":372},{"text":582,"type":333}," element (full-page templates) or a container ",{"text":584,"type":333,"marks":585},"div",[586],{"type":372},{"text":588,"type":333}," (embedded templates).",{"type":338,"content":590},[591,601],{"type":362,"attrs":592,"content":593},{"colspan":343,"rowspan":343,"colwidth":59,"backgroundColor":59},[594],{"type":346,"attrs":595,"content":596},{"textAlign":59},[597],{"text":598,"type":333,"marks":599},"data-fc-container=\"cart\"",[600],{"type":372},{"type":362,"attrs":602,"content":603},{"colspan":343,"rowspan":343,"colwidth":59,"backgroundColor":59},[604],{"type":346,"attrs":605,"content":606},{"textAlign":59},[607],{"text":608,"type":333},"The cart renders (via Twig.js) inside this element.",{"type":338,"content":610},[611,621],{"type":362,"attrs":612,"content":613},{"colspan":343,"rowspan":343,"colwidth":59,"backgroundColor":59},[614],{"type":346,"attrs":615,"content":616},{"textAlign":59},[617],{"text":618,"type":333,"marks":619},"data-fc-container-for=\"…\"",[620],{"type":372},{"type":362,"attrs":622,"content":623},{"colspan":343,"rowspan":343,"colwidth":59,"backgroundColor":59},[624],{"type":346,"attrs":625,"content":626},{"textAlign":59},[627],{"text":628,"type":333},"—",{"type":338,"content":630},[631,641],{"type":362,"attrs":632,"content":633},{"colspan":343,"rowspan":343,"colwidth":59,"backgroundColor":59},[634],{"type":346,"attrs":635,"content":636},{"textAlign":59},[637],{"text":638,"type":333,"marks":639},"data-fc-messaging-for=\"…\"",[640],{"type":372},{"type":362,"attrs":642,"content":643},{"colspan":343,"rowspan":343,"colwidth":59,"backgroundColor":59},[644],{"type":346,"attrs":645,"content":646},{"textAlign":59},[647],{"text":628,"type":333},{"type":338,"content":649},[650,660],{"type":362,"attrs":651,"content":652},{"colspan":343,"rowspan":343,"colwidth":59,"backgroundColor":59},[653],{"type":346,"attrs":654,"content":655},{"textAlign":59},[656],{"text":657,"type":333,"marks":658},"data-fc-error-for=\"…\"",[659],{"type":372},{"type":362,"attrs":661,"content":662},{"colspan":343,"rowspan":343,"colwidth":59,"backgroundColor":59},[663],{"type":346,"attrs":664,"content":665},{"textAlign":59},[666],{"text":628,"type":333},{"type":338,"content":668},[669,679],{"type":362,"attrs":670,"content":671},{"colspan":343,"rowspan":343,"colwidth":59,"backgroundColor":59},[672],{"type":346,"attrs":673,"content":674},{"textAlign":59},[675],{"text":676,"type":333,"marks":677},"data-fc-id=\"…\"",[678],{"type":372},{"type":362,"attrs":680,"content":681},{"colspan":343,"rowspan":343,"colwidth":59,"backgroundColor":59},[682],{"type":346,"attrs":683,"content":684},{"textAlign":59},[685],{"text":686,"type":333},"Tags a specific DOM element for access via code.",{"type":338,"content":688},[689,699],{"type":362,"attrs":690,"content":691},{"colspan":343,"rowspan":343,"colwidth":59,"backgroundColor":59},[692],{"type":346,"attrs":693,"content":694},{"textAlign":59},[695],{"text":696,"type":333,"marks":697},"data-fc-container-id=\"…\"",[698],{"type":372},{"type":362,"attrs":700,"content":701},{"colspan":343,"rowspan":343,"colwidth":59,"backgroundColor":59},[702],{"type":346,"attrs":703,"content":704},{"textAlign":59},[705,707,711],{"text":706,"type":333},"When a ",{"text":708,"type":333,"marks":709},"data-fc-id",[710],{"type":372},{"text":712,"type":333}," element triggers an action (removing a coupon, changing quantity, removing an item), the corresponding element is acted on.",{"type":327,"attrs":714,"content":715},{"level":329,"textAlign":59},[716],{"text":717,"type":333},"Responsive breakpoints",{"type":507,"attrs":719,"content":720},{"class":59},[721],{"text":722,"type":333},"@media (max-width: 480px) { }\n@media (min-width: 768px) { }\n@media (min-width: 768px) and (max-width: 991px) { }\n@media (min-width: 992px) { }\n@media (min-width: 992px) and (max-width: 1199px) { }\n@media (min-width: 1200px) { }\n",{"type":346,"attrs":724,"content":725},{"textAlign":59},[726],{"text":727,"type":333},"These match the breakpoints used in Foxy’s default templates.",{"type":327,"attrs":729,"content":730},{"level":329,"textAlign":59},[731],{"text":732,"type":333},"Underlying framework",{"type":346,"attrs":734,"content":735},{"textAlign":59},[736,738,741,743,747,749,753],{"text":737,"type":333},"The default theme is built on Bootstrap 3, compiled with a custom ",{"text":528,"type":333,"marks":739},[740],{"type":372},{"text":742,"type":333}," namespace and applied via Sass’s ",{"text":744,"type":333,"marks":745},"@extend",[746],{"type":372},{"text":748,"type":333}," functionality — so no Bootstrap class names appear in the rendered HTML. A partial called ",{"text":750,"type":333,"marks":751},"_fc-to-bootstrap.scss",[752],{"type":372},{"text":754,"type":333}," maps Bootstrap classes onto Foxy’s own classes; if you’re building off the default responsive theme, this file shows which grid classes are applied to which elements for responsiveness. This dependency isn’t guaranteed to be permanent — future updates may remove Bootstrap for a lighter CSS approach.",{"id":59,"alt":59,"name":13,"focus":59,"title":59,"source":59,"filename":13,"copyright":59,"fieldtype":81,"meta_data":756},{},"Reference for Foxy's CSS class, ID, and data attribute conventions, BEM naming, and responsive breakpoints used in custom templates.","f20568b6-07b6-414b-baec-827e2cc0f470",[],"css-class-and-naming-conventions-reference","help\u002Farticles\u002Fcss-class-and-naming-conventions-reference",-4520,[],2659,"1a862bc0-46b0-4fe1-92ca-7cefba832d2e",[],{"html":768,"sections":769,"segments":783},"\u003Csection id=\"class-and-id-conventions\" data-title=\"Class and ID conventions\" data-title-node=\"H2\">\u003Chr class=\"my-8\" style=\"margin-left: -48px; margin-right: -40vw\">\u003Ch2 data-anchor-id=\"class-and-id-conventions\">Class and ID conventions\u003C\u002Fh2>\u003Cdiv class=\"table-responsive w-100\">\u003Ctable class=\"table table-lg table-bordered my-5\">\u003Cthead class=\"thead-light\">\u003Ctr>\u003Cth>\u003Cp>Convention\u003C\u002Fp>\u003C\u002Fth>\u003Cth>\u003Cp>Purpose\u003C\u002Fp>\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">.fc-*\u003C\u002Fcode> classes\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd>\u003Cp>Styling only. Not required for functionality.\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">#fc-*\u003C\u002Fcode> IDs\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd>\u003Cp>Styling, used sparingly for CSS namespacing. Not recommended for JavaScript selectors.\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">data-fc-*\u003C\u002Fcode> attributes\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd>\u003Cp>Functional purposes and template rendering. Use these for JavaScript selectors instead of IDs.\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003C\u002Fdiv>\u003C\u002Fsection>\u003Csection id=\"form-input-conventions\" data-title=\"Form input conventions\" data-title-node=\"H2\">\u003Chr class=\"my-8\" style=\"margin-left: -48px; margin-right: -40vw\">\u003Ch2 data-anchor-id=\"form-input-conventions\">Form input conventions\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">name\u003C\u002Fcode> attributes on inputs, selects, and other form elements use underscores and cannot be changed without breaking server-side functionality.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">id\u003C\u002Fcode> values on form inputs match their \u003Ccode class=\"badge bg-soft-danger text-danger\">name\u003C\u002Fcode> values and are not prefixed with \u003Ccode class=\"badge bg-soft-danger text-danger\">fc-\u003C\u002Fcode>, since labels are tied to inputs by \u003Ccode class=\"badge bg-soft-danger text-danger\">id\u003C\u002Fcode>.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>Select inputs in JavaScript using \u003Ccode class=\"badge bg-soft-danger text-danger\">name\u003C\u002Fcode> and \u003Ccode class=\"badge bg-soft-danger text-danger\">value\u003C\u002Fcode>, not \u003Ccode class=\"badge bg-soft-danger text-danger\">id\u003C\u002Fcode>.\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fsection>\u003Csection id=\"bem-naming\" data-title=\"BEM naming\" data-title-node=\"H2\">\u003Chr class=\"my-8\" style=\"margin-left: -48px; margin-right: -40vw\">\u003Ch2 data-anchor-id=\"bem-naming\">BEM naming\u003C\u002Fh2>\u003Cp>Classes follow the BEM (Block, Element, Modifier) methodology:\u003C\u002Fp>\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>block--element__modifier\n\u003C\u002Fpre>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cp>Blocks can be chained together:\u003C\u002Fp>\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>block--block--element__modifier\n\u003C\u002Fpre>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cp>Most elements can be styled with the \u003Ccode class=\"badge bg-soft-danger text-danger\">#fc\u003C\u002Fcode> namespace selector plus at most two class names.\u003C\u002Fp>\u003C\u002Fsection>\u003Csection id=\"specific-ids-and-data-attributes\" data-title=\"Specific IDs and data attributes\" data-title-node=\"H2\">\u003Chr class=\"my-8\" style=\"margin-left: -48px; margin-right: -40vw\">\u003Ch2 data-anchor-id=\"specific-ids-and-data-attributes\">Specific IDs and data attributes\u003C\u002Fh2>\u003Cdiv class=\"table-responsive w-100\">\u003Ctable class=\"table table-lg table-bordered my-5\">\u003Cthead class=\"thead-light\">\u003Ctr>\u003Cth>\u003Cp>Attribute\u003C\u002Fp>\u003C\u002Fth>\u003Cth>\u003Cp>Description\u003C\u002Fp>\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">#fc\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd>\u003Cp>Namespaces CSS for the default theme. May be on the \u003Ccode class=\"badge bg-soft-danger text-danger\">html\u003C\u002Fcode> element (full-page templates) or a container \u003Ccode class=\"badge bg-soft-danger text-danger\">div\u003C\u002Fcode> (embedded templates).\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">data-fc-container=&quot;cart&quot;\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd>\u003Cp>The cart renders (via Twig.js) inside this element.\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">data-fc-container-for=&quot;…&quot;\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd>\u003Cp>—\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">data-fc-messaging-for=&quot;…&quot;\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd>\u003Cp>—\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">data-fc-error-for=&quot;…&quot;\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd>\u003Cp>—\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">data-fc-id=&quot;…&quot;\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd>\u003Cp>Tags a specific DOM element for access via code.\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">data-fc-container-id=&quot;…&quot;\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd>\u003Cp>When a \u003Ccode class=\"badge bg-soft-danger text-danger\">data-fc-id\u003C\u002Fcode> element triggers an action (removing a coupon, changing quantity, removing an item), the corresponding element is acted on.\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003C\u002Fdiv>\u003C\u002Fsection>\u003Csection id=\"responsive-breakpoints\" data-title=\"Responsive breakpoints\" data-title-node=\"H2\">\u003Chr class=\"my-8\" style=\"margin-left: -48px; margin-right: -40vw\">\u003Ch2 data-anchor-id=\"responsive-breakpoints\">Responsive breakpoints\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>@media (max-width: 480px) { }\n@media (min-width: 768px) { }\n@media (min-width: 768px) and (max-width: 991px) { }\n@media (min-width: 992px) { }\n@media (min-width: 992px) and (max-width: 1199px) { }\n@media (min-width: 1200px) { }\n\u003C\u002Fpre>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cp>These match the breakpoints used in Foxy’s default templates.\u003C\u002Fp>\u003C\u002Fsection>\u003Csection id=\"underlying-framework\" data-title=\"Underlying framework\" data-title-node=\"H2\">\u003Chr class=\"my-8\" style=\"margin-left: -48px; margin-right: -40vw\">\u003Ch2 data-anchor-id=\"underlying-framework\">Underlying framework\u003C\u002Fh2>\u003Cp>The default theme is built on Bootstrap 3, compiled with a custom \u003Ccode class=\"badge bg-soft-danger text-danger\">#fc\u003C\u002Fcode> namespace and applied via Sass’s \u003Ccode class=\"badge bg-soft-danger text-danger\">@extend\u003C\u002Fcode> functionality — so no Bootstrap class names appear in the rendered HTML. A partial called \u003Ccode class=\"badge bg-soft-danger text-danger\">_fc-to-bootstrap.scss\u003C\u002Fcode> maps Bootstrap classes onto Foxy’s own classes; if you’re building off the default responsive theme, this file shows which grid classes are applied to which elements for responsiveness. This dependency isn’t guaranteed to be permanent — future updates may remove Bootstrap for a lighter CSS approach.\u003C\u002Fp>\u003C\u002Fsection>",[770,773,775,777,779,781],{"id":771,"title":332,"level":772},"class-and-id-conventions","H2",{"id":774,"title":431,"level":772},"form-input-conventions",{"id":776,"title":500,"level":772},"bem-naming",{"id":778,"title":537,"level":772},"specific-ids-and-data-attributes",{"id":780,"title":717,"level":772},"responsive-breakpoints",{"id":782,"title":732,"level":772},"underlying-framework",[784],{"type":578,"content":785},"\u003Ch2>Class and ID conventions\u003C\u002Fh2>\u003Cdiv class=\"table-responsive w-100\">\u003Ctable class=\"table table-lg table-bordered my-5\">\u003Cthead>\u003Ctr>\u003Cth>\u003Cp>Convention\u003C\u002Fp>\u003C\u002Fth>\u003Cth>\u003Cp>Purpose\u003C\u002Fp>\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">.fc-*\u003C\u002Fcode> classes\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd>\u003Cp>Styling only. Not required for functionality.\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">#fc-*\u003C\u002Fcode> IDs\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd>\u003Cp>Styling, used sparingly for CSS namespacing. Not recommended for JavaScript selectors.\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">data-fc-*\u003C\u002Fcode> attributes\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd>\u003Cp>Functional purposes and template rendering. Use these for JavaScript selectors instead of IDs.\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003C\u002Fdiv>\u003Ch2>Form input conventions\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">name\u003C\u002Fcode> attributes on inputs, selects, and other form elements use underscores and cannot be changed without breaking server-side functionality.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">id\u003C\u002Fcode> values on form inputs match their \u003Ccode class=\"badge bg-soft-danger text-danger\">name\u003C\u002Fcode> values and are not prefixed with \u003Ccode class=\"badge bg-soft-danger text-danger\">fc-\u003C\u002Fcode>, since labels are tied to inputs by \u003Ccode class=\"badge bg-soft-danger text-danger\">id\u003C\u002Fcode>.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>Select inputs in JavaScript using \u003Ccode class=\"badge bg-soft-danger text-danger\">name\u003C\u002Fcode> and \u003Ccode class=\"badge bg-soft-danger text-danger\">value\u003C\u002Fcode>, not \u003Ccode class=\"badge bg-soft-danger text-danger\">id\u003C\u002Fcode>.\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>BEM naming\u003C\u002Fh2>\u003Cp>Classes follow the BEM (Block, Element, Modifier) methodology:\u003C\u002Fp>\u003Cpre>\u003Ccode>block--element__modifier\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Blocks can be chained together:\u003C\u002Fp>\u003Cpre>\u003Ccode>block--block--element__modifier\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Most elements can be styled with the \u003Ccode class=\"badge bg-soft-danger text-danger\">#fc\u003C\u002Fcode> namespace selector plus at most two class names.\u003C\u002Fp>\u003Ch2>Specific IDs and data attributes\u003C\u002Fh2>\u003Cdiv class=\"table-responsive w-100\">\u003Ctable class=\"table table-lg table-bordered my-5\">\u003Cthead>\u003Ctr>\u003Cth>\u003Cp>Attribute\u003C\u002Fp>\u003C\u002Fth>\u003Cth>\u003Cp>Description\u003C\u002Fp>\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">#fc\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd>\u003Cp>Namespaces CSS for the default theme. May be on the \u003Ccode class=\"badge bg-soft-danger text-danger\">html\u003C\u002Fcode> element (full-page templates) or a container \u003Ccode class=\"badge bg-soft-danger text-danger\">div\u003C\u002Fcode> (embedded templates).\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">data-fc-container=&quot;cart&quot;\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd>\u003Cp>The cart renders (via Twig.js) inside this element.\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">data-fc-container-for=&quot;…&quot;\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd>\u003Cp>—\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">data-fc-messaging-for=&quot;…&quot;\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd>\u003Cp>—\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">data-fc-error-for=&quot;…&quot;\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd>\u003Cp>—\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">data-fc-id=&quot;…&quot;\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd>\u003Cp>Tags a specific DOM element for access via code.\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">data-fc-container-id=&quot;…&quot;\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd>\u003Cp>When a \u003Ccode class=\"badge bg-soft-danger text-danger\">data-fc-id\u003C\u002Fcode> element triggers an action (removing a coupon, changing quantity, removing an item), the corresponding element is acted on.\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003C\u002Fdiv>\u003Ch2>Responsive breakpoints\u003C\u002Fh2>\u003Cpre>\u003Ccode>@media (max-width: 480px) { }\n@media (min-width: 768px) { }\n@media (min-width: 768px) and (max-width: 991px) { }\n@media (min-width: 992px) { }\n@media (min-width: 992px) and (max-width: 1199px) { }\n@media (min-width: 1200px) { }\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>These match the breakpoints used in Foxy’s default templates.\u003C\u002Fp>\u003Ch2>Underlying framework\u003C\u002Fh2>\u003Cp>The default theme is built on Bootstrap 3, compiled with a custom \u003Ccode class=\"badge bg-soft-danger text-danger\">#fc\u003C\u002Fcode> namespace and applied via Sass’s \u003Ccode class=\"badge bg-soft-danger text-danger\">@extend\u003C\u002Fcode> functionality — so no Bootstrap class names appear in the rendered HTML. A partial called \u003Ccode class=\"badge bg-soft-danger text-danger\">_fc-to-bootstrap.scss\u003C\u002Fcode> maps Bootstrap classes onto Foxy’s own classes; if you’re building off the default responsive theme, this file shows which grid classes are applied to which elements for responsiveness. This dependency isn’t guaranteed to be permanent — future updates may remove Bootstrap for a lighter CSS approach.\u003C\u002Fp>",{"name":787,"created_at":788,"published_at":789,"updated_at":790,"id":791,"uuid":47,"content":792,"slug":48,"full_slug":48,"sort_by_date":59,"position":971,"tag_list":972,"is_startpage":24,"parent_id":59,"meta_data":59,"group_id":973,"first_published_at":974,"release_id":59,"lang":65,"path":59,"alternates":975,"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":793,"_uid":796,"title":797,"action":798,"fields":799,"method":947,"columns":948,"subtitle":962,"component":48,"button_text":968,"submit_title":969,"submit_subtitle":970},{"_uid":794,"title":787,"plugin":795,"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",[800,804,808,918,921,926,941],{"_uid":801,"name":442,"type":333,"label":802,"options":13,"required":33,"component":803,"placeholder":13},"9a70b226-2036-4f90-a052-b3efa61c5896","Name","form___field",{"_uid":805,"name":806,"type":806,"label":807,"options":13,"required":33,"component":803,"placeholder":13},"86ba35be-ff43-4a28-8633-14052a8f6622","email","Email Address",{"_uid":809,"name":810,"type":811,"label":812,"options":813,"required":33,"component":803,"conditions":814,"placeholder":13},"3f827475-492c-4f97-aa1e-2386ac263b6c","topic","select","Topic","Presales, Support, Billing, Partnerships, Order Enquiry, Other",[815,872,882,889,897,905,911],{"_uid":816,"equals":817,"fields":818,"component":871},"e21d97dd-e68e-4fa6-ba97-bc40f3041dde","Order Enquiry",[819],{"_uid":820,"body":821,"type":869,"title":13,"component":870},"b64992bc-6d53-48b8-b7a0-d81e5a062e50",{"type":324,"content":822},[823],{"type":346,"content":824},[825,827,835,837,839,840,845,847,852,860,862,867],{"text":826,"type":333},"We are ",{"text":828,"type":333,"marks":829},"Foxy.io",[830],{"type":831,"attrs":832},"link",{"href":833,"uuid":59,"anchor":59,"custom":834,"target":59,"linktype":31},"http:\u002F\u002FFoxy.io",{},{"text":836,"type":333},", 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":838},"hard_break",{"type":838},{"text":841,"type":333,"marks":842},"NOTE:",[843],{"type":844},"bold",{"text":846,"type":333}," We are ",{"text":848,"type":333,"marks":849},"not ",[850],{"type":851},"italic",{"text":853,"type":333,"marks":854},"Foxy.in",[855,859],{"type":831,"attrs":856},{"href":857,"uuid":59,"anchor":59,"custom":858,"target":59,"linktype":31},"http:\u002F\u002FFoxy.in",{},{"type":851},{"text":861,"type":333},". We are not in any way affiliated with ",{"text":853,"type":333,"marks":863},[864],{"type":831,"attrs":865},{"href":857,"uuid":59,"anchor":59,"custom":866,"target":59,"linktype":31},{},{"text":868,"type":333},", and cannot help in any way with your order from that website.","danger","global___alert","form___condition",{"_uid":873,"equals":874,"fields":875,"component":871},"8765c3e1-25cf-44aa-b8ea-fc6094acf9c3","Presales",[876],{"_uid":877,"name":878,"type":879,"label":13,"options":13,"required":24,"component":803,"conditions":880,"placeholder":13,"default_value":881},"cf464f8e-d643-4f6e-af29-d3abffaf7380","department_email_address","hidden",[],"hello@foxy.io",{"_uid":883,"equals":208,"fields":884,"component":871},"4007b6d8-77e5-421d-bd1e-6f336dd853fb",[885],{"_uid":886,"name":878,"type":879,"label":13,"options":13,"required":24,"component":803,"conditions":887,"placeholder":13,"default_value":888},"7b4c6aa5-a68c-45e0-9ce1-0a36af10c0c2",[],"help@foxy.io",{"_uid":890,"equals":891,"fields":892,"component":871},"1dbb8f11-613d-43cd-9e09-1b94f6e19219","Billing",[893],{"_uid":894,"name":878,"type":879,"label":13,"options":13,"required":24,"component":803,"conditions":895,"placeholder":13,"default_value":896},"a0ac0d1b-bc4f-4a6c-a682-581d450b0b73",[],"help+billing@foxy.io",{"_uid":898,"equals":899,"fields":900,"component":871},"a0a53a50-7172-4a29-ba58-181e38874e12","Partnerships",[901],{"_uid":902,"name":878,"type":879,"label":13,"options":13,"required":24,"component":803,"conditions":903,"placeholder":13,"default_value":904},"7aa011d9-f374-4aed-b5a5-929b54aaf152",[],"partners@foxy.io",{"_uid":906,"equals":817,"fields":907,"component":871},"a4cd431f-25d5-41c7-bfdc-02c908c8fb47",[908],{"_uid":909,"name":878,"type":879,"label":13,"options":13,"required":24,"component":803,"conditions":910,"placeholder":13,"default_value":881},"f5d52168-d6ae-451b-94ee-2ced1cbd28ad",[],{"_uid":912,"equals":913,"fields":914,"component":871},"25aba1ed-eb41-4bbc-aa89-f7a7167ea86e","Other",[915],{"_uid":916,"name":878,"type":879,"label":13,"options":13,"required":24,"component":803,"conditions":917,"placeholder":13,"default_value":881},"f40dfaef-c203-4b71-bf4e-e1b43cef192b",[],{"_uid":919,"component":920},"e9c53a05-f40a-4510-aaf8-bc072a235a0c","form___subject",{"_uid":922,"name":923,"type":924,"label":925,"options":13,"required":33,"component":803,"placeholder":13},"a4c4d385-fff4-4978-99fb-b68cfea623d6","message","textarea","Message",{"_uid":927,"name":928,"type":811,"label":929,"options":930,"required":33,"component":803,"conditions":931,"placeholder":13},"8a3c9f85-f438-427d-9c7a-d7b295a14b5b","existing_user","Are you an existing user?","No, Yes",[932],{"_uid":933,"equals":934,"fields":935,"component":871},"115933d6-262a-4b59-8fa8-579c5ad73de1","Yes",[936],{"_uid":937,"name":938,"type":333,"label":939,"options":13,"required":33,"component":803,"conditions":940,"placeholder":13},"44b6ff23-98f0-4e95-b7f5-c23e06415c2d","subdomain","Store Subdomain",[],{"_uid":942,"name":943,"type":811,"label":944,"options":945,"required":33,"component":803,"conditions":946,"placeholder":13},"922a5cef-3af2-4113-8855-36c7910e3ee3","user_type","What type of user are you?","Developer, Designer, Merchant",[],"POST",[949],{"_uid":950,"text":951,"title":960,"component":961},"7323b90d-a93a-4bf1-baa9-20d0b7ead61b",{"type":324,"content":952},[953],{"type":346,"content":954},[955,957,958],{"text":956,"type":333},"855.369.9227",{"type":838},{"text":959,"type":333},"9:30am-6pm Central M-F","Pre-sales, Sales, & Partnerships","contact___footer_column",{"type":324,"content":963},[964],{"type":346,"content":965},[966],{"text":967,"type":333},"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,977,1004],{"name":978,"created_at":979,"published_at":980,"updated_at":981,"id":982,"uuid":983,"content":984,"slug":998,"full_slug":999,"sort_by_date":59,"position":1000,"tag_list":1001,"is_startpage":24,"parent_id":310,"meta_data":59,"group_id":1002,"first_published_at":980,"release_id":59,"lang":65,"path":59,"alternates":1003,"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":985,"icon":986,"name":978,"guides":987,"summary":988,"category":13,"component":297,"blog_posts":989,"content_hub":24,"icon_custom":990,"case_studies":991,"faq_sections":992,"help_articles":993,"featured_guides":994,"mailbox_category":13,"featured_articles":995,"featured_blog_posts":996,"featured_case_studies":997},"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":1005,"created_at":1006,"published_at":1007,"updated_at":1008,"id":1009,"uuid":758,"content":1010,"slug":1023,"full_slug":1024,"sort_by_date":59,"position":1025,"tag_list":1026,"is_startpage":24,"parent_id":310,"meta_data":59,"group_id":1027,"first_published_at":1007,"release_id":59,"lang":65,"path":59,"alternates":1028,"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":1011,"icon":13,"name":1005,"type":1012,"pinned":24,"summary":1013,"category":983,"component":297,"blog_posts":1014,"icon_custom":1015,"case_studies":1017,"faq_sections":1018,"featured_guides":1019,"mailbox_category":13,"featured_articles":1020,"featured_blog_posts":1021,"featured_case_studies":1022},"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":1016},{},[],[],[],[],[],[],"custom-css-and-js","help\u002Fcategories\u002Fcustom-css-and-js",-860,[],"323fdcbb-4ee9-4e2c-8b00-ce59cad49101",[],{},1784780323943]