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

 

This requires editing the code of your store. See Getting Help for avenues of assistance.

These instructions apply to our legacy Blueprint Themes that have not been customized. As always, we recommend backing up your current theme customizations before making any changes.

These instructions work with Stencil themes that have checkout settings set to Custom one-page checkout (for developers).

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 › My Themes, then click Edit HTML/CSS.

Edit HTML/CSS button
 

Using Stencil? If you have applied Custom one-page checkout (for developers) on your Checkout Settings, you can access these template files by going to Storefront Design › Design Options, clicking the More tab and selecting Template Files.

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>
 
 

Need to know a specific country value?

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>
 

Need to know a specific country value?

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.

 

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>
 

Need to know a specific country value?

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.

 

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>
 

Need to know a specific country value?

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.

 

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>
 

Need to know a specific country value?

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.

 

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.

Getting Help

Don't feel comfortable adjusting your design or want to work with an expert? Check out our BigCommerce Partner Directory or ask your question in the BigCommerce Community Design Group for assistance. Due to our Design Policy, our Techincal Support is unable to edit code or make design changes.

Was this article helpful?