Personalized checkout and custom promotions with Shopify Scripts
Hello,
My site: https://d2rgear.com/
Other site: https://d2stock.com/
I'm trying to implement a dropdown menu, similar to the "Select Realm" on d2stock.com (without the RGB).
I created a snippet and applied it to the the bottom of the page. The dropdown appears, but a variant is selected and applied, there are no changes made to the selection of the variant on the product pages.
Here is the snippet:
<select id="variant-selector">
<option value="Ladder - Softcore">Ladder - Softcore</option>
<option value="Non Ladder - Softcore">Non Ladder - Softcore</option>
</select>
<button id="apply-variant">Select Realm</button>
<script>
document.addEventListener("DOMContentLoaded", function () {
var variantSelector = document.getElementById("variant-selector");
var applyButton = document.getElementById("apply-variant");
applyButton.addEventListener("click", function () {
var selectedVariant = variantSelector.value;
// Loop through all product forms on the page
var productForms = document.querySelectorAll("form[action='/cart/add']");
productForms.forEach(function (form) {
// Find the product variant option with the selected value
var variantOption = form.querySelector(`[name="id"][value="${selectedVariant}"]`);
if (variantOption) {
// Select the variant option
variantOption.checked = true;
// Trigger a click event to update the product variant
variantOption.dispatchEvent(new Event("click"));
}
});
});
});
</script>
Any help is much appreciated.
Thanks.
I would love to help for that i have to look at how your theme is selecting the variant inside a form element, and I read the javascript you shared, I also have a solution in mind, I can only fully make a functioning code while working on the store, if are interested please look at the bottom of the post and share your website URL (.myshopify.com) so I could help you.
Regards,
Ayan
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025