I have a button ‘Unisex’ (Value=“Unisex”, id=“template…–gender-unisex” and a button ‘Youth’ (Value=“Youth”, id=“template…–gender-youth-2” and sizes from XS to XL
I would like that when i click on the ‘Youth’ button, the size “S” is selected and not the default “XS” which is the first one. The “S” size is a radio button with his id (template….–size-s-2)
Can someone direct me or give me an idea?
Regards
You can try to add this code to theme.liquid file and check
<script>
document.addEventListener("DOMContentLoaded", function() {
const youthBtn = document.getElementById("template--gender-youth-2");
const unisexBtn = document.getElementById("template--gender-unisex");
const sizeSBtn = document.getElementById("template--size-s-2");
if (youthBtn && sizeSBtn) {
youthBtn.addEventListener("click", function() {
// Wait a tick in case Shopify updates variants
setTimeout(() => {
sizeSBtn.checked = true;
sizeSBtn.dispatchEvent(new Event("change", { bubbles: true }));
}, 50);
});
}
if (unisexBtn) {
unisexBtn.addEventListener("click", function() {
// Do nothing special → XS will remain default
});
}
});
</script>
Best regards,
Dan from Ryviu: Product Reviews App
Hey,
In order to make sure on clicking the Youth button then the S size select instead of the default one, then you have to follow these steps.
Go to Shopify Admin >> Online Store >> Themes >> Edit Code >> theme.liquid
In the end of theme.liquid before the closing tag of body you need to paste the following code.
<script>
document.addEventListener("DOMContentLoaded", function() {
const youthBtn = document.getElementById("template--gender-youth-2");
const sizeS = document.getElementById("template--size-s-2");
if (youthBtn && sizeS) {
youthBtn.addEventListener("click", function() {
sizeS.checked = true;
sizeS.dispatchEvent(new Event("change", { bubbles: true }));
});
}
});
</script>
Once you paste this then the functionality you want will automatically apply.
If this was helpful mark as Solution and like it.
Thanks
Instructions:
Go to Shopify Admin → Online Store → Themes → Edit Code
Open theme.liquid
Paste this code just before the closing </body> tag
Replace the placeholder IDs with your actual element IDs if they’re different
Save
When customers click “Youth”, they’ll see size “S” pre-selected instead of having to manually change from “XS” to “S”. This saves them a step and reduces friction in the buying process.
<script>
document.addEventListener("DOMContentLoaded", function() {
const youthBtn = document.getElementById("template--gender-youth-2");
const unisexBtn = document.getElementById("template--gender-unisex");
const sizeSBtn = document.getElementById("template--size-s-2");
if (youthBtn && sizeSBtn) {
youthBtn.addEventListener("click", function() {
// Wait for Shopify's variant system to update first
setTimeout(() => {
sizeSBtn.checked = true;
sizeSBtn.dispatchEvent(new Event("change", { bubbles: true }));
}, 50);
});
}
// Optional: Reset to XS when Unisex is clicked
if (unisexBtn) {
const sizeXSBtn = document.getElementById("template--size-xs"); // Add your XS button ID
unisexBtn.addEventListener("click", function() {
if (sizeXSBtn) {
setTimeout(() => {
sizeXSBtn.checked = true;
sizeXSBtn.dispatchEvent(new Event("change", { bubbles: true }));
}, 50);
}
});
}
});
</script>
Thank you all!
it works perfectly, except that my button is like “template–19553968029836__mainproduct-8250738835596–gender-unisex-1”, same numbers on a page, but the numbers (where the ‘x’ are) change for each page, only the template–(xxx)__mainproduct-(xxx)–gender-unisex-1 stay the same.
Is there something to get those number between “template”, “mainproduct” and “gender-unisex-1“ or to go with the last string after the second number, like to only go by “gender-unisex-1”, “gender-youth-2”, “size-xs-1”, “size-s-2” ?
Thanks again for all the help
Regards
hummm, in fact, the number after “template” stay the same. only the second one after “mainproduct” is different for each page…
Hello all,
well, the second number is the product number, so i had this code before the script :
{% assign my_var_prodid = product.id %}
{% assign my_var_unisex = "template--19553968029836__mainproduct-" | append: my_var_prodid | append: "--gender-unisex-1" %}
{% assign my_var_youth = "template--19553968029836__mainproduct-" | append: my_var_prodid | append: "--gender-youth-2" %}
{% assign my_var_size_xs = "template--19553968029836__mainproduct-" | append: my_var_prodid | append: "--size-xs-1" %}
{% assign my_var_size_s = "template--19553968029836__mainproduct-" | append: my_var_prodid | append: "--size-s-2" %}
Then the script is now :
document.addEventListener("DOMContentLoaded", function() {
const youthBtn = document.getElementById("{{my_var_youth}}");
const unisexBtn = document.getElementById("{{my_var_unisex}}");
const sizeSBtn = document.getElementById("{{my_var_size_s}}");
if (youthBtn && sizeSBtn) {
youthBtn.addEventListener("click", function() {
// Wait for Shopify's variant system to update first
setTimeout(() => {
sizeSBtn.checked = true;
sizeSBtn.dispatchEvent(new Event("change", { bubbles: true }));
}, 50);
});
}
// Optional: Reset to XS when Unisex is clicked
if (unisexBtn) {
const sizeXSBtn = document.getElementById("{{my_var_size_xs}}"); // Add your XS button ID
unisexBtn.addEventListener("click", function() {
if (sizeXSBtn) {
setTimeout(() => {
sizeXSBtn.checked = true;
sizeXSBtn.dispatchEvent(new Event("change", { bubbles: true }));
}, 50);
}
});
}
});
Many thanks to all, really appreciated
Best regards
Hello again..
i had an update of my theme and now the ccode doesn’t work anymore.
I simplify everything for one product to see and my script is:
<script>
document.addEventListener("DOMContentLoaded", function() {
const youthBtn = document.getElementById("template--19648246972556__main-1-1-8287998410892");
const sizeSBtn = document.getElementById("template--19648246972556__main-2-1-8287998410892");
if (youthBtn && sizeSBtn) {
youthBtn.addEventListener("click", function() {
// Wait for Shopify's variant system to update first
setTimeout(() => {
sizeSBtn.checked = true;
sizeSBtn.dispatchEvent(new Event("change", { bubbles: true }));
}, 50);
});
}
});
</script>
but nothing work, is it possible that the “getElementById” doesn’t work ?
The only thing i saw is that the button change his id.
thanks…
to follow up,
everything is back to normal now, i just needed to add append: “\n” at the end of my id since it change on the update.