Thanks! I will apply this to what I have and let you know how it worked out.
Topic summary
Main issue: Persistent 404 errors when calling Shopify’s AJAX endpoint /cart/add.js.
Root causes identified: Passing a product ID instead of a variant ID; an incorrect add‑to‑cart button ID; and cases where products had no variants (cannot add product.id).
Fixes and implementation: Use a valid variant ID (e.g., product.first_available_variant.id). Correct the button ID in the Symmetry theme settings. Post JSON via fetch to window.Shopify.routes.root + ‘cart/add.js’ with an items array containing id (variantId) and quantity. Alternative query-string adds were shown. Move HTML/Liquid form into the product template, place JavaScript at the bottom of theme.js, and use the main CSS file for styling.
Guidance and references: Shopify Cart AJAX docs explicitly require variant ID. Review Dawn theme for modern AJAX and UI patterns. jQuery is optional; prefer native querySelector/fetch. “Shopify Scripts” are deprecated in favor of “Shopify Functions.” Test with publicly accessible URLs and incognito for reproducibility. Locale-aware URLs are supported via routes.root.
Outcome: Original 404 issue resolved; add-to-cart works with variants.
Open/ongoing: A separate question about 404s when making AJAX POSTs to external (non-Shopify) APIs remains unanswered.