Limiting Countries Listed on on the Account Creation, View Cart and Checkout Pages (Blueprint)

These instructions apply to our legacy Blueprint-based themes that have not been customized. The BigCommerce Support Team may not be able to assist with issues that occur after applying them to a previously customized theme. As always, we recommend backing up your current theme customizations before making any changes. These instructions do not work with Stencil themes.

Don't feel comfortable adjusting your design or want to work with an expert? Check out our BigCommerce approved agencies or our Community.

You can limit which countries are visible when your customers visit your account creation, view cart and checkout pages. Similarly, you can also limit which states appear. This will create an extra layer of prevention from receiving orders to countries you do not ship to. 

Limiting Countries Listed on the Account Creation Page

1. Go to Storefront Design › Design Options, then click Edit HTML/CSS.

Edit HTML/CSS button
 

Did you know? You can also access your theme's template files by going to Storefront Design › Design Option, clicking the More tab and selecting Template Files. This list gives you the ability to edit, compare against the template default, and revert files to their default.

2. In the list of Other Template Files on the left, locate CreateAccountForm.html.
CreateAccountForm.html
Use Ctrl F or Command F to quickly locate template files in the list.

3. Copy the following code, and replace CHECKOUT COUNTRY TAGS GO HERE with the tags of the countries you want to appear. A file with a listing of all available countries is attached to the bottom of this article.

<script type="text/javascript">
$(function(){
$('#FormField_11').html('<option value="">Choose a Country</option>CHECKOUT COUNTRY TAGS GO HERE');
});
</script>

For example, the following code would limit the available countries to the United States and Canada.

<script type="text/javascript">
$(function(){
$('#FormField_11').html('<option value="">Choose a Country</option><option value="United States">United States</option><option value="Canada">Canada</option>');
});
</script>
 

For a full list of account creation country values, please see the Checkout Country List text file at the bottom of this article. Please note that the values must remain back-to-back. Do not list each value on its own line.

4. Paste your customized code to the bottom of the file.

5. Save your changes.

The View Cart Page

1. In the list of Other Template Files on the left, locate CartContent.html.
CartContent.html

Use Ctrl F or Command F to quickly locate template files in the list.

2. Copy the following code, and replace CART COUNTRY TAGS GO HERE with the tags of the countries you want to appear. A file with a listing of all available countries is attached to the bottom of this article.

<script type="text/javascript">
$(window).load(function(){
$('#shippingZoneCountry').html('<option value="">Choose a Country</option>CART COUNTRY TAGS GO HERE');
});
</script>

For example, the following code would limit the available countries to the United States and Canada.

<script type="text/javascript">
$(window).load(function(){
$('#shippingZoneCountry').html('<option value="">Choose a Country</option><option value="226">United States</option><option value="038">Canada</option>');
});
</script>

For a full list of cart country values, please see the Cart Country List text file at the bottom of this article. Please note that the values must remain back-to-back. Do not list each value on its own line.

3. Paste your customized code to the bottom of the file.

4. Save your changes.

The Single Page Express Checkout Page

1. In the list of Other Template Files on the left, locate ExpressCheckoutChooseAddress.html.
ExpressCheckoutChooseAddress.html
Use Ctrl F or Command F to quickly locate template files in the list.

2. Copy the following code, and replace CHECKOUT COUNTRY TAGS GO HERE with the tags of the countries you want to appear. A file with a listing of all available countries is attached to the bottom of this article.

<script type="text/javascript">
$(function(){
$('#FormField_11').html('<option value="">Choose a Country</option>CHECKOUT COUNTRY TAGS GO HERE');
$('#FormField_21').html('<option value="">Choose a Country</option>CHECKOUT COUNTRY TAGS GO HERE');
});
</script>

For example, the following code would limit the available countries to the United States and Canada.

<script type="text/javascript">
$(function(){
$('#FormField_11').html('<option value="">Choose a Country</option><option value="United States">United States</option><option value="Canada">Canada</option>');
$('#FormField_21').html('<option value="">Choose a Country</option><option value="United States">United States</option><option value="Canada">Canada</option>');
});
</script>

For a full list of checkout country values, please see the Checkout Country List text file at the bottom of this article. Please note that the values must remain back-to-back. Do not list each value on its own line.

3. Paste your customized code to the bottom of the file.

4. Save your changes.

The Multiple Page Checkout Page

1. In the list of Other Template Files on the left, locate checkout_address.html.
CheckoutAddress.html

Use Ctrl F or Command F to quickly locate template files in the list.

2. Copy the following code, and replace CHECKOUT COUNTRY TAGS GO HERE with the tags of the countries you want to appear. A file with a listing of all available countries is attached to the bottom of this article.

<script type="text/javascript">
$(function(){
$('#FormField_11').html('<option value="">Choose a Country</option>CHECKOUT COUNTRY TAGS GO HERE');
$('#FormField_21').html('<option value="">Choose a Country</option>CHECKOUT COUNTRY TAGS GO HERE');
});
</script>

For example, the following code would limit the available countries to the United States and Canada.

<script type="text/javascript">
$(function(){
$('#FormField_11').html('<option value="">Choose a Country</option><option value="United States">United States</option><option value="Canada">Canada</option>');
$('#FormField_21').html('<option value="">Choose a Country</option><option value="United States">United States</option><option value="Canada">Canada</option>');
});
</script>

For a full list of checkout country values, please see the Checkout Country List text file at the bottom of this article. Please note that the values must remain back-to-back. Do not list each value on its own line.

3. Paste your customized code to the bottom of the file.

4. Save your changes.

The Edit Address Page

Follow these steps to limit the countries listed on the edit address page accessible from your customers' address book.

1. In the list of Other Template Files on the left, locate shippingaddressform.html.
shippingaddress

Use Ctrl F or Command F to quickly locate template files in the list.

2. Copy the following code, and replace CHECKOUT COUNTRY TAGS GO HERE with the tags of the countries you want to appear. A file with a listing of all available countries is attached to the bottom of this article.

<script type="text/javascript">
$(function(){
$('#FormField_11').html('<option value="">Choose a Country</option>CHECKOUT COUNTRY TAGS GO HERE');
$('#FormField_21').html('<option value="">Choose a Country</option>CHECKOUT COUNTRY TAGS GO HERE');
});
</script>

For example, the following code would limit the available countries to the United States and Canada.

<script type="text/javascript">
$(function(){
$('#FormField_11').html('<option value="">Choose a Country</option><option value="United States">United States</option><option value="Canada">Canada</option>');
$('#FormField_21').html('<option value="">Choose a Country</option><option value="United States">United States</option><option value="Canada">Canada</option>');
});
</script>

For a full list of checkout country values, please see the Checkout Country List text file at the bottom of this article. Please note that the values must remain back-to-back. Do not list each value on its own line.

3. Paste your customized code to the bottom of the file.

4. Save your changes.

Setting a Default Country

Choose which country you want to be default and add selected="selected" (quotes included) between the words option and value in the codes used above.

Using the above checkout example and setting United States as default, the result would look like this:

<script type="text/javascript">
$(function(){
$('#FormField_11').html('<option value="">Choose a Country</option><option selected="selected" value="United States">United States</option><option value="Canada">Canada</option>');
$('#FormField_21').html('<option value="">Choose a Country</option><option selected="selected" value="United States">United States</option><option value="Canada">Canada</option>');
});
</script>

Cart and Checkout Country Values

Right-click the following links to save the file to your computer.

Was this article helpful?