Skip to main content

Customers bypassing the widget before it's loaded [poor bandwidth]

Jelizaveta avatar
Written by Jelizaveta
Updated over 2 weeks ago

If you live in a region with poor bandwidth, your customers may have issues checking out before our widget has fully loaded and then skip adding relevant date and time details. In this case, you can disable the checkout button until the widget has loaded.

If you previously used code to lock the checkout button, you will need to remove that code if you uninstall Zapiet - Pickup + Delivery.

Check the Remove legacy code section for more information.


Lock the checkout button

  1. In Settings, click Developers.

  2. Tick Block the checkout button until the widget has loaded.

  3. Click Save.

The checkout button will now be locked when the app embed is enabled, until the widget has finished loading.

You can customise the style of the checkout button while it is locked, or change the checkout button selector. If you're not comfortable editing code, please contact our support.


Remove legacy code

If you previously used code to lock the checkout button, we recommend removing this code and using the setting instead.

  1. In theme library, select the theme and click Edit code.

  2. Open the theme.liquid file.

  3. Find it with the code below and delete it.
    It may look slightly different depending on your theme or products.

    <!-- Zapiet | Disable checkout button -->
    {% assign disable_checkout = false %}
    {% for item in cart.items %}
    {% if item.requires_shipping %}
    {% assign disable_checkout = true %}
    {% endif %}
    {% endfor %}
    {% if disable_checkout == true %}
    <style id="zapiet-style-disable-checkout-button">
    [name="checkout"] {
    opacity: 0.5;
    pointer-events: none;
    }
    </style>
    {% endif %}
    <!-- End of Zapiet code -->

  4. Click Save.

  5. In Zapiet - Pickup + Delivery, click Settings, then Developers.

  6. In Custom scripts, remove the code below.

    var styleTag = document.querySelector("#zapiet-style-disable-checkout-button");

    if (styleTag) {
    styleTag.remove();
    }

  7. Click Save.

The code has now been fully removed from your store.


Troubleshooting

  • You may need to modify the code to correctly target the checkout button. If you are not comfortable editing code, please contact our team on chat and we would be happy to help!

Did this answer your question?