> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://docs.downpay.app/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Creating custom Terms and Conditions checkbox

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](#1-setting-up-a-custom-checkbox)
* [Classic checkbox and disabled button](#2-classic-checkbox-and-disabled-button)
* [Checkbox with alert](#2-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.

1. Navigate to the your Shopify admin panel.
2. Visit Online Store and select **Edit code** option from the selection dropdown next to your active theme.
3. 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.

4. 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;
  }
}
```

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

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/image_yljh2r.png =2274x500)

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

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

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/image_1wiejjl.png =349x100)

## 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:

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/image_1hh2si8.png =860x500) 

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