Home/Install snippet

One-click snippet installer

Shopify does not let external apps edit your theme automatically, so this page generates the exact code you paste once into your theme. After that, every cart checkout click goes to your custom checkout instead of Shopify's checkout.

Must be your live address (or your own domain) — never the private editor preview address, which asks visitors to log in.

Generated snippet

<!--
  Custom Checkout Redirect — generated by Lovable
  Paste this snippet once, then include it in theme.liquid just before </body>.
  Handles both the cart checkout button and product-page "Buy it now" buttons.
-->


<script>
(function () {
  var CHECKOUT_URL = "https://sawcollect.store/checkout";

  function go(items) {
    if (!items.length) return;
    var encoded = items.map(function (l) {
      return encodeURIComponent(l.id) + ":" + encodeURIComponent(l.qty);
    }).join(",");
    window.location.href = CHECKOUT_URL + "?items=" + encoded;
  }

  function goToCartCheckout(event) {
    event.preventDefault();
    event.stopPropagation();
    fetch("/cart.js", { headers: { Accept: "application/json" } })
      .then(function (r) { return r.json(); })
      .then(function (cart) {
        go((cart.items || []).map(function (i) { return { id: i.variant_id, qty: i.quantity }; }));
      })
      .catch(function () {});
  }

  function goToBuyNow(form, event) {
    var idField = form.querySelector('[name="id"]');
    if (!idField || !idField.value) return;
    var qtyField = form.querySelector('[name="quantity"]');
    var qty = qtyField && parseInt(qtyField.value, 10) > 0 ? parseInt(qtyField.value, 10) : 1;
    event.preventDefault();
    event.stopPropagation();
    go([{ id: idField.value, qty: qty }]);
  }

  var CART_SELECTORS = [
    'button[name="checkout"]',
    'input[name="checkout"]',
    'a[href="/checkout"]',
    'a[href^="/checkout"]',
    '[data-cart-checkout]',
    '[data-checkout-button]'
  ].join(", ");

  // Capture-phase listener: works for buttons added later by cart drawers too.
  document.addEventListener("click", function (event) {
    var target = event.target;
    if (!target || !target.closest) return;

    var buyNow = target.closest(
      '.shopify-payment-button__button, [data-testid="Checkout-button"], shopify-accelerated-checkout button'
    );
    if (buyNow) {
      var form = buyNow.closest("form");
      if (form && form.querySelector('[name="id"]')) {
        goToBuyNow(form, event);
        return;
      }
    }

    var cartBtn = target.closest(CART_SELECTORS);
    if (cartBtn) goToCartCheckout(event);
  }, true);
})();
</script>
  1. 1

    Open your Shopify admin

    Go to Online Store → Themes, click Customize on your active theme, then click Edit code.
  2. 2

    Create the snippet

    In the Snippets folder, click Add a new snippet. Name it custom-checkout-redirect.liquid, then paste the code above and save.
  3. 3

    Include it in your theme

    Open layout/theme.liquid and add this line just before the closing </body> tag:{% render 'custom-checkout-redirect' %}This covers the cart page, the cart drawer and product pages in one place.
  4. 4

    Test the redirect

    Click checkout in the cart, and also click "Buy it now" on a product page. Both should land on https://sawcollect.store/checkout?items=....

Why not fully automatic? Shopify does not expose an API that lets external apps replace the checkout button in your theme. Apps like Checkify still require a one-time theme edit. This snippet does the same thing in a single copy-paste step.