Postcode shipping
Important!
It is only necessary to add the code below to your theme if you are using a Version 2 or Version 1 theme. Users of Version 3, Version 4 and Version 5 themes do not need to install any code to use these features.
To install the postcode shipping app select from the menu. Find and select the 'Postcode shipping' app and select INSTALL THIS APP.
Once you've installed the app, you'll need to add the relevant code to your live theme's files by following the instructions below which are related to the version theme you are using. Adding the code will place the postcode form on your website. To add the code you'll need to use the page editor for your live theme. Alternatively, if you don't want to add the code yourself, you can select request installation on the app installation page, and we will add the code for you for a small charge which is listed on the installation page.
• Installation instructions (for version 2 themes or earlier)• Installation instrucitons (for version 3 themes or later)
• Customising the platform messages (advanced users only)
Installation instructions (for version 2 themes or earlier)
1. Locate the checkout_basket.twig file by selecting from the menu of the theme's page editor.
2. Add the code shown below:
<div class="postcode-container">
<input type="text" class="postcode" value="{{ global.basket.postcode }}">
<button class="postcode-validate"></button>
</div>
The code should be added beneath the code that outputs the country/delivery zone selection drop down but above the delivery rate drop down. The exact appearance/location of this code will change depending on the theme you are using. For example:
3. It's important that you move this section of code (from the country/delivery zone drop down to the end of the delivery rate drop down) outside of any <form> tag. Depending on your theme an opening <form> tag may be present above the delivery rate selection area, in which case you'll need to move this opening <form> tag to beneath the delivery rate selection area (in an appropriate standards compliant place).
Then save the changes to the file.
Please note: The code for the above comes with no styling, so it will need to be styled (with CSS or inline styles) to display nicely.
It's important that as soon as you add this code to your website that you then enter postcodes for each of your delivery rates as soon as possible.
Installation instructions (for version 3 themes or later)
1. Locate the checkout_basket.twig file by selecting
2. Add the code shown below:
<div class="postcode-container">
<input type="text" class="postcode" value="{{ global.basket.postcode }}">
<button class="postcode-validate"></button>
</div>
The code should be added beneath the code that outputs the country/delivery zone selection drop down but above the delivery rate drop down. The exact appearance/location of this code will change depending on the theme you are using. For example:
Then save the changes to the file.
Please note: The code for the above comes with no styling, so it will need to be styled (with CSS or inline styles) to display nicely.
It's important that as soon as you add this code to your website that you then enter postcodes for each of your delivery rates as soon as possible.
Customising the platform messages (advanced users only)
The platform will respond with messages if the postcode entered is valid (or not valid). Postcode validation is performed via AJAX. Your Javascript file will send an AJAX request to the platform with the postcode entered and receive a response with two variables:
invalidPostcode rates
The invalidPostcode variable will return true if the postcode entered is not valid (i.e. not in the expected format for a UK postcode).
The rates variable will return true if the postcode entered has returned at least one delivery rate that can be selected by the user.