Create a custom component / section on existing website that pulls data from external API

Shopify Discussion

Topic summary

Goal: add a custom section in a Shopify theme where users enter name, email, and ZIP to fetch and display local lighting installation cost from an external API without page reload.

Current issue: AJAX calls and event listeners aren’t firing. The poster can style a form via Liquid but is unsure where to place JavaScript or whether an app is required.

Key guidance (most recent):

  • Likely a script placement/timing problem. Put JS in Assets (theme.js/global.js) or add a in layout/theme.liquid just before , or use the defer attribute so the DOM loads before your code runs. Ensure listeners are attached after the elements exist.
  • If the external API requires authentication/secrets, do not call it directly from the frontend (risk of exposing keys). In that case, build an app or server-side endpoint to proxy the request. If no auth is needed, a frontend call is acceptable.

Status: Unresolved; next steps are to adjust script placement/timing and assess API auth needs.

Summarized with AI on January 13. AI used: gpt-5.
2

Hi @poplightDev

You might not be placing the javascript code in the right place. Look for theme.js or global.js under your Asset folder. Or you can also write the tag in your theme.liquid, under the layout folder, just place it before the so the code renders first before your script, or place defer in your script tag.

If your API has certain auth, you might not want to exposed it to the front end. Therefore, app is the better option.

If your API does not have any auth or password needed, you can try the above suggestion.