Before going to the checkout you can set up the terms and conditions check and ensure that customers must mark it before proceeding.

On this page:

Setting up a custom checkbox
Classic checkbox and disabled button
Checkbox with alert

Setting up a custom checkbox

Classic checkbox and disabled button

If you want to set up a classic checkbox before proceeding to the checkout you will need to edit the theme code a little.

Navigate to the your Shopify admin panel.
Visit Online Store and select Edit code option from the selection dropdown next to your active theme.
Create a new file in the snippets folder called terms-and-conditions-checkbox.liquid. Then paste the following code:

{{ 'terms-and-conditions-checkbox.css' | asset_url | stylesheet_tag }}

<div class="checkboxWrapper">
  <div class="checkbox-wrapper">
    <div class="cbx">
      <input id="cbx" type="checkbox">
      <label for="cbx"></label>
      <svg width="15" height="14" viewbox="0 0 15 14" fill="none">
        <path d="M2 8.36364L6.23077 12L13 2"></path>
      </svg>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <defs>
        <filter id="goo">
          <fegaussianblur in="SourceGraphic" stddeviation="4" result="blur"></fegaussianblur>
          <fecolormatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -7" result="goo"></fecolormatrix>
          <feblend in="SourceGraphic" in2="goo"></feblend>
        </filter>
      </defs>
    </svg>
  </div>
  <a id="terms-and-conditions-text" href="#"> I accept terms and conditions</a>
</div>

<script>
  const checkboxEl = document.getElementById('cbx');
  const checkoutBtnEl = document.getElementById('checkout');
   function checkboxSwitch() {
  if(!this.checked){
    checkoutBtnEl.setAttribute("disabled", "");
  } else{
        checkoutBtnEl.removeAttribute("disabled");
  };
   }
  checkboxEl.addEventListener('change',checkboxSwitch);
  window.addEventListener('load',checkboxSwitch());
</script>

To link to your terms and conditions page, replace the # in the href="#" attribute with the URL. You can also modify the text displayed next to the checkbox there.

Create another file in the assets folder called terms-and-conditions-checkbox.css. Paste the following code:

.checkboxWrapper {
  display:flex;
  flex-direction:row;
  align-items:center;
  column-gap: 10px;
  margin-top: 20px
}

#terms-and-conditions-text{
  color:#0a0a0a;
}

  .checkbox-wrapper {
    position: relative;
  }
  .checkbox-wrapper > svg {
    position: absolute;
    top: -130%;
    left: -170%;
    width: 110px;
    pointer-events: none;
  }
  .checkbox-wrapper * {
    box-sizing: border-box;
  }
  .checkbox-wrapper input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    margin: 0;
  }
  .checkbox-wrapper input[type="checkbox"]:focus {
    outline: 0;
  }
  .checkbox-wrapper .cbx {
    width: 24px;
    height: 24px;
    top: calc(50vh - 12px);
    left: calc(50vw - 12px);
  }
 .checkbox-wrapper .cbx input {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border: 2px solid #bfbfc0;
  border-radius: 0; 
}
 .checkbox-wrapper .cbx label {
  width: 24px;
  height: 24px;
  background: none;
  border-radius: 0; 
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
  .checkbox-wrapper .cbx svg {
    position: absolute;
    top: 5px;
    left: 4px;
    z-index: 1;
    pointer-events: none;
  }
  .checkbox-wrapper .cbx svg path {
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 19;
    stroke-dashoffset: 19;
    transition: stroke-dashoffset 0.3s ease;
    transition-delay: 0.2s;
  }
  .checkbox-wrapper .cbx input:checked + label {
    animation: splash 0.6s ease forwards;
  }
  .checkbox-wrapper .cbx input:checked + label + svg path {
    stroke-dashoffset: 0;
  }
  @-moz-keyframes splash {
    40% {
      background: #0a0a0a;
      box-shadow: 0 -18px 0 -8px #0a0a0a, 16px -8px 0 -8px #0a0a0a, 16px 8px 0 -8px #0a0a0a, 0 18px 0 -8px #0a0a0a, -16px 8px 0 -8px #0a0a0a, -16px -8px 0 -8px #0a0a0a;
    }
    100% {
      background: #0a0a0a;
      box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
    }
  }
  @-webkit-keyframes splash {
    40% {
      background: #0a0a0a;
      box-shadow: 0 -18px 0 -8px #0a0a0a, 16px -8px 0 -8px #0a0a0a, 16px 8px 0 -8px #0a0a0a, 0 18px 0 -8px #0a0a0a, -16px 8px 0 -8px #0a0a0a, -16px -8px 0 -8px #0a0a0a;
    }
    100% {
      background: #0a0a0a;
      box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
    }
  }
  @-o-keyframes splash {
    40% {
      background: #0a0a0a;
      box-shadow: 0 -18px 0 -8px #0a0a0a, 16px -8px 0 -8px #0a0a0a, 16px 8px 0 -8px #0a0a0a, 0 18px 0 -8px #0a0a0a, -16px 8px 0 -8px #0a0a0a, -16px -8px 0 -8px #0a0a0a;
    }
    100% {
      background: #0a0a0a;
      box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
    }
  }
 
@keyframes splash {
  40% {
    background: #0a0a0a; 
    box-shadow: 0 -18px 0 -8px #0a0a0a, 16px -8px 0 -8px #0a0a0a, 16px 8px 0 -8px #0a0a0a,
      0 18px 0 -8px #0a0a0a, -16px 8px 0 -8px #0a0a0a, -16px -8px 0 -8px #0a0a0a;
  }
  100% {
    background: #0a0a0a;
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent,
      32px 16px 0 -10px transparent, 0 36px 0 -10px transparent,
      -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
  }
}

Navigate to the main-cart-footer.liquid and paste the code below as highlighted in the picture:

{% render 'terms-and-conditions-checkbox' %}

Preview your store and check if you can see the terms and conditions checkbox.

Checkbox with alert

To use a checkbox with alert that prevents customers from proceeding if they have not accepted the terms and conditions, instead paste the following code in the terms-and-conditions-checkbox.liquid that you made in the previous section:

{{ 'terms-and-conditions-checkbox.css' | asset_url | stylesheet_tag }}

<div class="checkboxWrapper">
  <div class="checkbox-wrapper">
    <div class="cbx">
      <input id="cbx" type="checkbox">
      <label for="cbx"></label>
      <svg width="15" height="14" viewbox="0 0 15 14" fill="none">
        <path d="M2 8.36364L6.23077 12L13 2"></path>
      </svg>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <defs>
        <filter id="goo">
          <fegaussianblur in="SourceGraphic" stddeviation="4" result="blur"></fegaussianblur>
          <fecolormatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -7" result="goo"></fecolormatrix>
          <feblend in="SourceGraphic" in2="goo"></feblend>
        </filter>
      </defs>
    </svg>
  </div>
  <a id="terms-and-conditions-text" href="#"> I accept terms and conditions</a>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const checkboxEl = document.getElementById('cbx');
    const checkoutBtnEl = document.getElementById('checkout');

    checkoutBtnEl.addEventListener('click', function(event) {
      if (!checkboxEl.checked) {
        event.preventDefault();
        window.alert('Please agree to our Terms and Conditions before proceeding.');
      }
    });
  });
</script>

The result should look like this:



As in the first scenario, you can modify the link and the text next to the checkbox in the href attribute, as well as the content of the window.alert message.

Updated on: 21/03/2025