Display Shopify Shopping Cart Details on External Website Pages

I need help with integrating cart information between my custom website and Shopify. Here’s what I’m trying to accomplish:

I have a regular website built with HTML and PHP. When customers click “add to cart” on my site, they get redirected to Shopify where the item is added to their shopping cart. This part works fine.

The challenge is when users navigate back to my website from Shopify. I want to display their current cart status in the site header, showing something like “3 items | $245.00”. Basically, I need visitors on my external site to see what’s in their Shopify cart and have options to view cart or proceed to checkout.

I found some documentation about cart APIs but I’m not very experienced with JSON handling. Has anyone implemented something similar? Looking for guidance on the best approach to fetch and display cart data from Shopify on an external site.

I handled this exact situation 6 months ago. The tricky part isn’t fetching cart data - it’s keeping the session alive between your site and Shopify. Here’s what worked: Use Shopify’s AJAX Cart API and store the cart token in a cookie or localStorage when users come back from Shopify. Grab the cart token from Shopify’s session and pass it to your site via URL parameters. Then make AJAX calls to Shopify’s cart.js endpoint with that token. You’ll get back item count, total price, and product details in JSON. Parse it with JavaScript and update your header. Two gotchas: Cross-origin issues (make sure your domain’s configured in Shopify settings) and API rate limits. Don’t hit their API on every page load - add some caching.