Hi,
I am using the Spoke/Athens theme and I would like to add fields to the checkout where the customer would enter the year, make, model and motor size of their watercraft.
Any ideas how I can do this? I looked at the template but do not see a way to add these fields
Hey @offroadjim
Quick reality check, Shopify’s checkout is locked down and you can’t just edit the Liquid like the rest of your theme. The level of customization you can do depends on your plan.
Only Shopify Plus gets full checkout.liquid access (and even that’s being phased out in favor of checkout extensibility). For Spoke/Athens on a standard plan, line item properties on the product page is the path I’d take.
Happy to help if you need it setup.
Cheers,
Moeed
Hi @offroadjim
Shopify checkout is protected, so you can’t directly add custom fields there using theme code.
What you can do instead:
The easiest option will be to use a 3rd-party app (Magical Custom Fields). It’s affordable and lets you add fields such as Year, Make, Model, and Motor Size directly on the product page, as dropdowns or text fields.
Customers fill this in before adding to the cart, and the data carries through to the order, packing slips, and exports.
Thank You
Any idea where I can find some coding to test option 2?
For option 1 is there a way to make that required that they have to enter the information?
Since you have a paid theme (files not public), and your theme already comes with cart note logic, and Shopify provides an AI assistant (Sidekick), your best bet is to just ask it to help you do it. It can probably do 90% of what you want. The other 10% will require actual work and research. But it can tell you exactly what you need to do.
Hi @offroadjim
HTML
<div class="cart-attributes">
<h3>Watercraft Details</h3>
<div class="grid">
<div>
<label>Year</label>
<input type="text" name="attributes[Year]" required data-cart-attribute>
</div>
<div>
<label>Make</label>
<input type="text" name="attributes[Make]" required data-cart-attribute>
</div>
<div>
<label>Model</label>
<input type="text" name="attributes[Model]" required data-cart-attribute>
</div>
<div>
<label>Motor Size</label>
<input type="text" name="attributes[Motor Size]" required data-cart-attribute>
</div>
</div>
</div>
CSS
<style>
.cart-attributes {
margin-top: 20px;
}
.cart-attributes .grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.cart-attributes input {
width: 100%;
padding: 8px;
}
</style>
JS
<script>
document.querySelectorAll('[data-cart-attribute]').forEach(input => {
input.addEventListener('change', function(e) {
e.stopPropagation();
});
});
document.querySelector('[name="checkout"]').addEventListener('click', function(e) {
const fields = document.querySelectorAll('[data-cart-attribute]');
let valid = true;
fields.forEach(field => {
if (!field.value.trim()) {
field.style.border = '1px solid red';
valid = false;
}
});
if (!valid) {
e.preventDefault();
alert('Please fill all watercraft details before checkout.');
}
});
</script>
Check screenshot : Cart Page Form fields added and Order section additional details
Thanks
Thank you for helping with this.
The only issue I see is that if someone clicks “Check Out” instead of “View Cart” it skips this 
Also, is there a way to make it required that they select if a dropdown or enter if it’s a text field?
Hello @offroadjim
In most Shopify themes including Spoke/Athens the checkout fields can’t be modified directly unless you’re on Shopify Plus. The best work around is to use line item properties on the cart page where you collect the information in custom input fields for year, make, model, and motor size. These values then carry through to the order details. Alternatively, use a product page custom form block or a cart drawer app that supports custom fields if you want a more seamless experience.
Hi, I tried this idea but the only issue I see is that if someone clicks “Check Out” instead of “View Cart” it skips this
