Good Day all,
I’m wondering if it’s possible to create a consent/agreement check box for a single item or if there is an app that does this?
We are not large enough to sign up for Shopify Plus, which allows you the consent gate at checkout, so I’m wondering if there is a work-around for this with an app or something similar.
We’re looking for something that users click to confirm they’ve read the note for that product.
If something like this doesn’t exist, is it possible to use an age consent app and edit it to fit what we need?
Thank you in advance.
Hi @MercuryShop
Yes, we can do this using a product metafield and custom code. We can enable the consent checkbox only for the products that require it, and make it mandatory before the customer can add the product to the cart. This should work without needing an app.
Best regards,
Devcoder 
Hi,
To implement a consent checkbox feature in the product page then we need to replace the existing code of the buy-button.liquid snippet with the updated code provided below.
Please make sure to take back up the existing code before replacing it.
Also add tag in the Product section kindly review the below Steps and their screenshot :
-
Log in to your Shopify Admin.
-
Go to Products → All products.
-
Open the product where you want to add the consent functionality.
-
Scroll down to the Tags section.
-
Add tag in the tag section, for example:requires-consent
-
Click Save.
Screenshot :
Updated Code :
{% style %}
.product-consent {
margin: 16px 0;
padding: 12px;
border: 1px solid #e5e5e5;
border-radius: 6px;
background: #fafafa;
}
.product-consent__label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
font-size: 14px;
line-height: 1.5;
}
.product-consent__label input {
margin-top: 3px;
}
.product-consent__error {
margin-top: 8px;
color: #d72c0d;
font-size: 13px;
}
{% endstyle %}
<div {{ block.shopify_attributes }}>
{%- if product != blank -%}
{%- liquid
assign gift_card_recipient_feature_active = false
if block.settings.show_gift_card_recipient and product.gift_card?
assign gift_card_recipient_feature_active = true
endif
assign show_dynamic_checkout = false
if block.settings.show_dynamic_checkout and gift_card_recipient_feature_active == false
assign show_dynamic_checkout = true
endif
-%}
<product-form
class="product-form"
data-hide-errors="{{ gift_card_recipient_feature_active }}"
data-section-id="{{ section.id }}"
>
<div class="product-form__error-message-wrapper" role="alert" hidden>
<span class="svg-wrapper">
{{- 'icon-error.svg' | inline_asset_content -}}
</span>
<span class="product-form__error-message"></span>
</div>
{%- form 'product',
product,
id: product_form_id,
class: 'form',
novalidate: 'novalidate',
data-type: 'add-to-cart-form'
-%}
<input
type="hidden"
name="id"
value="{{ product.selected_or_first_available_variant.id }}"
{% if product.selected_or_first_available_variant.available == false
or quantity_rule_soldout
or product.selected_or_first_available_variant == null
%}
disabled
{% endif %}
class="product-variant-id"
>
{%- if gift_card_recipient_feature_active -%}
{%- render 'gift-card-recipient-form', product: product, form: form, section: section -%}
{%- endif -%}
{% if product.tags contains 'requires-consent' %}
<div class="product-consent">
<label class="product-consent__label">
<input
type="checkbox"
id="product-consent-checkbox"
name="properties[Agreement Accepted]"
value="Yes"
>
<span>
I confirm that I have read and understood the information for this product.
</span>
</label>
</div>
{% endif %}
<div class="product-form__buttons">
{%- liquid
assign check_against_inventory = true
if product.selected_or_first_available_variant.inventory_management != 'shopify' or product.selected_or_first_available_variant.inventory_policy == 'continue'
assign check_against_inventory = false
endif
if product.selected_or_first_available_variant.quantity_rule.min > product.selected_or_first_available_variant.inventory_quantity and check_against_inventory
assign quantity_rule_soldout = true
endif
-%}
<button
id="ProductSubmitButton-{{ section_id }}"
type="submit"
name="add"
class="product-form__submit button button--full-width {% if show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}"
{% if product.selected_or_first_available_variant.available == false
or quantity_rule_soldout
or product.selected_or_first_available_variant == null
%}
disabled
{% endif %}
>
<span>
{%- if product.selected_or_first_available_variant == null -%}
{{ 'products.product.unavailable' | t }}
{%- elsif product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
{{ 'products.product.sold_out' | t }}
{%- else -%}
{{ 'products.product.add_to_cart' | t }}
{%- endif -%}
</span>
{%- render 'loading-spinner' -%}
</button>
{%- if show_dynamic_checkout -%}
{{ form | payment_button }}
{%- endif -%}
</div>
{%- endform -%}
</product-form>
{%- else -%}
<div class="product-form">
<div class="product-form__buttons form">
<button
type="submit"
name="add"
class="product-form__submit button button--full-width button--primary"
disabled
>
{{ 'products.product.sold_out' | t }}
</button>
</div>
</div>
{%- endif -%}
{%- if show_pickup_availability -%}
{{ 'component-pickup-availability.css' | asset_url | stylesheet_tag }}
{%- assign pick_up_availabilities = product.selected_or_first_available_variant.store_availabilities
| where: 'pick_up_enabled', true
-%}
<pickup-availability
class="product__pickup-availabilities quick-add-hidden"
{% if product.selected_or_first_available_variant.available and pick_up_availabilities.size > 0 %}
available
{% endif %}
data-root-url="{{ routes.root_url }}"
data-variant-id="{{ product.selected_or_first_available_variant.id }}"
data-has-only-default-variant="{{ product.has_only_default_variant }}"
data-product-page-color-scheme="gradient color-{{ section.settings.color_scheme }}"
>
<template>
<pickup-availability-preview class="pickup-availability-preview">
<span class="svg-wrapper">
{{- 'icon-unavailable.svg' | inline_asset_content -}}
</span>
<div class="pickup-availability-info">
<p class="caption-large">{{ 'products.product.pickup_availability.unavailable' | t }}</p>
<button class="pickup-availability-button link link--text underlined-link">
{{ 'products.product.pickup_availability.refresh' | t }}
</button>
</div>
</pickup-availability-preview>
</template>
</pickup-availability>
<script src="{{ 'pickup-availability.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
</div>
{% if product.tags contains 'requires-consent' %}
<script>
document.addEventListener('DOMContentLoaded', function () {
const checkbox = document.getElementById('product-consent-checkbox');
if (!checkbox) return;
const addToCartButton =
document.querySelector('button[name="add"]');
const buyNowButton =
document.querySelector('.shopify-payment-button__button');
const errorMessage =
document.getElementById('product-consent-error');
function updateButtons() {
const accepted = checkbox.checked;
if (addToCartButton) {
addToCartButton.disabled = !accepted;
}
if (buyNowButton) {
buyNowButton.disabled = !accepted;
buyNowButton.style.pointerEvents = accepted ? 'auto' : 'none';
buyNowButton.style.opacity = accepted ? '1' : '0.5';
}
if (errorMessage) {
errorMessage.style.display = 'none';
}
}
updateButtons();
checkbox.addEventListener('change', updateButtons);
if (addToCartButton) {
addToCartButton.addEventListener('click', function(e) {
if (!checkbox.checked) {
e.preventDefault();
if (errorMessage) {
errorMessage.style.display = 'block';
}
}
});
}
});
</script>
{% endif %}
Output :
A product metafield is a sensible way to scope it. I’d add one CRO check before shipping: make sure the consent state follows the selected variant, not just the product page.
Test normal Add to Cart, quick-add, cart drawer, a direct /cart link and a variant change after the box is checked. The gate is working only if it blocks the required item without trapping shoppers or silently dropping the acknowledgement.
Also measure the eligible PDP → Add to Cart rate against similar products without the gate. Compliance can be correct while the interaction still costs orders; that is a hypothesis worth measuring, not a reason to remove the requirement.
Hi,
You can add this the Shopify cart attribute for this as a free solution. You can have the Shopify UI generator tool. We also have the newer version of Shopify UI tool in our website. Depending on your theme, you might have to adjust the code.
Hi @MercuryShop
You can use Aris Product Options, Variants create a checkbox option that customers must tick before they can add the product to cart.
This way, you can add your consent/agreement text directly to the specific product and make the checkbox required, so customers cannot proceed without confirming it.
However, it’s worth mentioning that this is simply to encourage customers to double check the instruction, or do you need to make sure customers open and read the instruction before checking the checkbox to confirm? That might need some extra tooltip or customization.
Hope to hear more from you so we can better assist you to find the most proper solution!
@MercuryShop yes, this is possible without Shopify Plus. You can add a required consent checkbox directly on the specific product page, so customers must confirm they have read and agreed to the note before adding the product to their cart.
This can be done using a product options app or with a small custom Shopify code solution, depending on your theme and requirements. An age verification app could potentially be adapted, but I would recommend a product-specific checkbox solution instead, as it will be cleaner and more reliable.
If you share your store URL and explain exactly which product needs the consent checkbox, I can recommend the best solution for you.
