Shopify + Mixpanel Integration

I am using Shopify as my store page for selling items, with Mixpanel integrated to track users through the entire purchasing process. With 4 different events: Product Viewed, Added to Cart, Began Checkout and Order Completed.

In the live view all of these come up accordingly, but my problem is it seems Mixpanel is assigning a completely different distinct_id when the user completes the checkout. Therefore in the Funnels section, I am not shown the completion rate as the users are lost along the way due to the different id.

I have the following code in the Additional content & scripts section (along with the start Mixpanel code):

<script type="text/javascript">
mixpanel.track("Checkout",
        { "Checkout Total": "{{ total_price | money_without_currency }}" });

mixpanel.identify({{ customer.id }});

mixpanel.people.set({
  "$name": "{{ customer.first_name }} {{ customer.last_name }}",
  "$email": "{{ customer.email }}",
  "last_updated": new Date()
});

mixpanel.people.track_charge({{ total_price | money_without_currency }});
</script>

Users are not signing up and i'm using the 'customer.id' throughout the other necessary code snippets in the Shopify theme.

Does anyone know how to fix this issue so I can see the full user journey in Funnels with the completion rate?