I built a React-based frontend application that fetches content from a headless CMS API. Now I’m wondering if there’s a way to implement this as a custom block within Shopify’s Theme App Extensions without having to rewrite everything in liquid templating.
Has anyone successfully done this before? I’m hoping to avoid the hassle of converting my existing codebase.
Thanks in advance for any guidance!
Additional context:
- Open to alternative approaches if anyone has better suggestions
- Already considered iframe embedding but ruled it out due to SEO concerns and performance issues
did this last month - worked great! skipped bundling everything and went with a cdn approach instead. uploaded my react build to aws s3 and loaded it dynamically in the theme extension. way cleaner than fighting shopify’s build constraints. just handle your loading states properly since cms api calls can be slower than you’d expect. performance was actually better than i thought.
Yes, totally doable - I’ve built similar setups before. Theme App Extensions handle JavaScript fine, so you can bundle your React app with Webpack or Vite. Just compile everything into vanilla JS that the extension can load. I’d set up a build process that spits out one JS bundle with your React app, then load it in your Theme App Extension block. You’ll mount your React component to whatever DOM element the extension gives you. Main thing to watch out for is conflicts with existing theme scripts. I namespace everything and use React’s createRoot to mount to the specific container. Your headless CMS should work perfectly since it’s just client-side API calls. The tricky part is getting the build pipeline right and making sure you don’t hit Shopify’s CSP issues, but it’s definitely doable without switching to Liquid.
Nice CDN approach! How’d you handle initial page load speeds though? I’m thinking SSR might help with that headless CMS content, but maybe client-side fetching works fine for SEO? Any CSP issues with Shopify when loading external scripts?