Checkout adjustments for Google Maps integration

To make use of the Google Maps API in your checkout you will have add 2 lines of code in your checkout.liquid file in your theme. It is not so difficult as you might think.

Check if you can adjust your checkout.liquid file

You will have to navigate to your current Theme and choose the option 'Edit code' in the Actions dropdown. In the file list you'll see you should see the `checkout.liquid` file as shown below.

If you don't see it please check if the layout is available by clicking the 'Add a new layout' link. If you see the Checkout option in there you can create a page yourself. Shopify will generate the default code then.

If you cannot adjust your checkout.liquid file check this section.

Adjustments to your checkout.liquid file

Open the `checkout.liquid` file and add these lines right above the closing </body> tag.

 <script type="text/javascript">
   var CodePickupPointPostalCode = '{{ checkout.shipping_address.zip }}';
   var CodePickupPointCountry = '{{ checkout.shipping_address.country_code }}';
   var CodeShopifyDomain = '{{ shop.permanent_domain }}';
   var CodePickupAttributes = {{ checkout.attributes | json }};
   var CodeOrderTags = {% if order %}{{ order.tags | split: ',' }}{% else %}[]{% endif %};
 </script>
 <script src="//storage.googleapis.com/pick-up-points/code-pickup-points.min.js" crossorigin="anonymous"></script>
 <link href="//storage.googleapis.com/pick-up-points/code-pickup-points.min.css" rel="stylesheet" type="text/css" media="all" />

That's it, when you have configured the API keys in the Admin you're good to go!

I cannot edit my checkout.liquid file

You will have to contact your Merchant success manager and ask if they can enable the Checkout liquid adjustment possibility. You can find the credentials in your Shopify Admin under Settings > Account.