How to set Fastest Shipping option as default?

Shopify Discussion

Topic summary

Goal: Default the fastest shipping rate (e.g., “DHL Next Day Delivery”) at checkout instead of the cheapest option for the holiday period.

Proposed approach: Use custom JavaScript to auto-select the desired shipping method at checkout.

  • Example code: On DOMContentLoaded, iterate over input[name=“shipping_method”] and set checked=true for the option whose value includes the target label (e.g., “DHL Next Day Delivery”).
  • Steps suggested: Online Store → Themes → Edit code → add the script in checkout.liquid or a theme JS file (theme.js/custom.js/scripts.js/app.js).

Hurdles: The store owner cannot find checkout.liquid or typical JS files (theme.js, etc.). After being advised to look in Assets for JS files, they still do not see any of the suggested filenames and requested a pointer based on their asset list (shared via screenshot).

Artifacts: Images show the current checkout shipping options and the Assets file list.

Status: No confirmed file location or implementation; no verification that the script works. Discussion remains open with unresolved next steps.

Summarized with AI on December 16. AI used: gpt-5.
4

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.

1 Like