How to set Fastest Shipping option as default?

[veamrqz]

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:

Would appreciate any suggestions. Thank you!

[rajweb]

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!

[veamrqz]

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 · 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.

[veamrqz]

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]

Thank you so much! 

[rajweb]

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