I own a clothing store and currently using fabric theme. So when someone visits a product page the size is already auto selected. But i want the customer to select the size. And the add to cart button will say select a size and the buy it now button will be shown but not working like it will be in dark gray.
Topic summary
A clothing store owner using the Fabric theme wants to prevent automatic size selection on product pages. Instead of having a size pre-selected, they want customers to manually choose a size before purchasing.
Desired behavior:
- No variant auto-selected on page load
- “Add to Cart” button displays “Select a size” and is disabled until selection
- “Buy It Now” button appears grayed out and non-functional until size is chosen
Solutions offered:
Code-based approach:
- Comment out the auto-variant selection in product-form.liquid or main-product.liquid
- Add JavaScript to control button states based on variant selection
- Code snippet provided to disable buttons and update text when no variant is selected
App-based solution:
- Easify Product Options app can control whether options are auto-selected
- Can require size selection before adding to cart
- Does not currently manage “Buy It Now” button behavior (would need theme customization)
One responder requested collaborator access to implement the solution directly. The discussion remains open with multiple implementation paths available.
2 Likes
Hi @NotYourBeast,
Please send the website link, I will check it for you
1 Like
Pass-000
1 Like
Hi,
Hope this will help
- Find Product Form File - Might be product-form.liquid Or: main-product.liquid
- Prevent Auto Variant Selection Using Comment
- Add JavaScript to Control Button Behavior
JavaScript Example
<script>
document.addEventListener("DOMContentLoaded", function () {
const variantSelector = document.querySelector('[name="id"]');
const addToCartBtn = document.querySelector('button[name="add"]');
const buyNowBtn = document.querySelector('.shopify-payment-button button');
function updateButtons() {
const selectedVariant = variantSelector.value;
if (!selectedVariant) {
addToCartBtn.textContent = "Select a size";
addToCartBtn.disabled = true;
buyNowBtn.disabled = true;
buyNowBtn.style.backgroundColor = "gray";
buyNowBtn.style.cursor = "not-allowed";
} else {
addToCartBtn.textContent = "Add to cart";
addToCartBtn.disabled = false;
buyNowBtn.disabled = false;
buyNowBtn.style.backgroundColor = ""; // Reset to normal
buyNowBtn.style.cursor = "";
}
}
updateButtons();
variantSelector.addEventListener("change", updateButtons);
});
</script>
Hi @NotYourBeast,
I checked and it is a complicated request. Can I send you a collaborator invitation? It will check and inform you soon.
If you open to try an app, you can try Easify Product Options for this.
With Easify, you can choose whether an option (like size) is auto-selected or not, so customers can be required to pick a size before adding to cart. You can also display a “Select a size” message until they make a choice — helping reduce wrong-size orders.
As for the Buy It Now button, Easify doesn’t currently manage that part, but you can adjust its behavior with some minor theme customization if needed.
- This is the result:
- This is the app setting:
I hope this answer helps solve the problem. If you need further assistance, feel free to reach out to Easify anytime! 