Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: How to set Fastest Shipping option as default?

Solved

How to set Fastest Shipping option as default?

veamrqz
Excursionist
19 0 8

Hi there,

 

As the holidays are near, would it be possible to have the 'fastest shipping option' to be selected as default in the checkout instead of the cheapest shipping option? This would also mean the most expensive option - just so customers can get their order as fast as possible.

 

This is how it is currently but would like to set it so that DHL Next Day Delivery would be selected instead:

 

veamrqz_0-1728459951173.png

 

Would appreciate any suggestions. Thank you!

 

Accepted Solution (1)
rajweb
Shopify Partner
366 35 50

This is an accepted solution.

No worries! If you don’t see checkout.liquid or theme.js, here’s how you can find a suitable file to add the JavaScript code for selecting the fastest shipping option at checkout:

Follow these steps:

1. Go to online store, then themes.

2. Edit Code.

Look for JavaScript Files:

 In the Assets directory, look for files that may contain JavaScript code. Common file names include:

1. theme.js.

2. custom.js.

3. scripts.js.

4. app.js.

5. Any other JavaScript files with similar names.

 

Adding the JavaScript Code:

Once you locate a JavaScript file (preferably  theme.js or custom.js), follow these steps:

1. Open the file: Click on the file name to open it.

2. Scroll to the bottom: Go to the end of the file.

3. Insert the code: Copy and paste the following JavaScript code:

 

document.addEventListener('DOMContentLoaded', function() {
    const shippingOptions = document.querySelectorAll('input[name="shipping_method"]');
    shippingOptions.forEach(option => {
        if (option.value.includes('DHL Next Day Delivery')) { // Replace with the exact value of your shipping option
            option.checked = true; // Set it as checked
        }
    });
});

 

 

 

-Make sure to replace "DHL Next Day Delivery" with the exact value of your shipping method as it appears in your checkout.

 

-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com

View solution in original post

Replies 6 (6)

rajweb
Shopify Partner
366 35 50

Hey @veamrqz ,

If the settings don’t allow you to set the fastest shipping option as the default, you may need to use custom JavaScript to change the selected shipping option on the checkout page.

Follow these steps:

1. Go to online store, then themes.

2. Edit code.

3. Locate the Checkout Liquid:  You will generally find checkout customization in checkout.liquid or theme.js. If checkout.liquid is not available (common in Shopify), then use the following JavaScript approach in theme.js or similar files.

4. Add Javascript: Insert a script to automatically select the fastest shipping method. Here’s a basic example:

 

document.addEventListener('DOMContentLoaded', function() {
    const shippingOptions = document.querySelectorAll('input[name="shipping_method"]');
    shippingOptions.forEach(option => {
        if (option.value.includes('DHL Next Day Delivery')) { // Replace with the exact value of your shipping option
            option.checked = true; // Set it as checked
        }
    });
});

 

-After implementing the changes, make sure to test the checkout process to confirm that the fastest shipping option is selected by default.

If you encounter any difficulties or if you’re unsure about any specific part, feel free to ask for more detailed guidance!

-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com
veamrqz
Excursionist
19 0 8

Thanks for replying @rajweb

 

Yes unfortunately I don't see a checkout.liquid or theme.js in our theme. I don't know which is a similar file I can put this code on (lol). Do you have more details on how I can do Step 4, please? 

rajweb
Shopify Partner
366 35 50

This is an accepted solution.

No worries! If you don’t see checkout.liquid or theme.js, here’s how you can find a suitable file to add the JavaScript code for selecting the fastest shipping option at checkout:

Follow these steps:

1. Go to online store, then themes.

2. Edit Code.

Look for JavaScript Files:

 In the Assets directory, look for files that may contain JavaScript code. Common file names include:

1. theme.js.

2. custom.js.

3. scripts.js.

4. app.js.

5. Any other JavaScript files with similar names.

 

Adding the JavaScript Code:

Once you locate a JavaScript file (preferably  theme.js or custom.js), follow these steps:

1. Open the file: Click on the file name to open it.

2. Scroll to the bottom: Go to the end of the file.

3. Insert the code: Copy and paste the following JavaScript code:

 

document.addEventListener('DOMContentLoaded', function() {
    const shippingOptions = document.querySelectorAll('input[name="shipping_method"]');
    shippingOptions.forEach(option => {
        if (option.value.includes('DHL Next Day Delivery')) { // Replace with the exact value of your shipping option
            option.checked = true; // Set it as checked
        }
    });
});

 

 

 

-Make sure to replace "DHL Next Day Delivery" with the exact value of your shipping method as it appears in your checkout.

 

-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com
veamrqz
Excursionist
19 0 8

Hopefully this would be my last question haha I can't find any .js similar to the one you listed above. Here's a list of all the files inside Assets. Can you point out a file I can use, please? 

veamrqz_0-1728474345497.png

 

veamrqz
Excursionist
19 0 8

Thank you so much! 

rajweb
Shopify Partner
366 35 50

Welcome! If you ever need assistance in the future, please feel free to reach out to me anytime.

-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com