Showing Product Option Blocks Based on Product Variants with the Hidden Input Block
Prerequisites: Before proceeding, it is recommended to have a basic understanding of browser inspectors, JavaScript selectors, and the Shopify template editor. We strongly advise applying any untested code to a duplicate theme.
In this tutorial, we will demonstrate how to conditionally show an upsell block based on a variant selection.
Step 1: Create a New Product
Create a new product named “Gist Test” with multiple variants, ensuring that one of the color variants is named “Blue Snowboards.”
Step 2: Set Up Product Option Set
Create a product option set and navigate to Display Settings. Make sure the product “Gist Test” is selected for display.
Step 3: Add a Hidden Input Block
Create a hidden input block. You can set the input name to anything, but for this tutorial, use “hidden_options” and remember to check “Ignore value.”
Step 4: Set Up the Upsell Block
Create an upsell block and move to the display rules section.
- Display option: Select “When all conditions are met.”
- Conditions: Label it “_hidden_options” or the name you used for the hidden input.
- Comparison: Set it to “is equal to: Blue Snowboards” or any desired variant value.
Step 5: Custom JavaScript
Now, let’s add some custom JavaScript. Copy the code below and open your theme editor in Shopify. Paste the code into the “theme.liquid” file just below the {% render ‘giftship’ %} tag, close to the body tag.
Note: This tutorial uses the “Dawn” theme version 11.00, and the variant is configured as a select input. So, no changes are needed for this setup. However, if your setup is different, you need to make the following changes:
- Line A: The selector for the variant change (select input only).
- Line B: The selector for the hidden input, if it is not labeled “_hidden_options”.
{% comment %}
Select Variant Changes with the New Hidden Input Block
{% endcomment %}
{%- if template == "product" -%}
<script>
(() => {
var PO = {
state: {
initialized: false,
},
elements: {
variantSelect: null,
hiddenVariant: null
},
init: function() {
try {
if (PO.state.initialized === true) {
return false;
}
PO.state.initialized = true;
PO.registerElements();
PO.validate()
PO.events();
PO.assignHiddenValue();
} catch (e) {
console.warn(e);
}
},
validate: function() {
if (PO.elements.variantSelect === null || PO.elements.hiddenVariant === null) {
throw new Error('variantSelect or hiddenVariant not displayed')
}
},
registerElements: function() {
PO.elements.variantSelect = document.querySelector('[name="options[Color]"]'); // The standard variant selector in the product form
PO.elements.hiddenVariant = document.querySelector('[data-child-name="_hidden_options"] input'); // The hidden input configured with product options tool
//console.log('PO.elements.variantSelect.value = ', PO.elements.variantSelect.value);
//console.log('PO.elements.hiddenVariant.value = ', PO.elements.hiddenVariant.value);
},
events: function() {
PO.elements.variantSelect.addEventListener("change", PO.assignHiddenValue);
},
assignHiddenValue: function(e) {
PO.elements.hiddenVariant.value = e && e.target && e.target.value ? e.target.value : PO.elements.variantSelect.value;
Gs.productOptions.checkConditions();
}
};
document.addEventListener("giftship.loaded", PO.init);
return PO;
})();
</script>
{%- endif -%}
Step 6: Save the Theme and Test
Save the theme, and you’re all set! Now you can test your setup to see the upsell block conditionally appear when the “Blue Snowboards” variant is selected.
Troubleshooting tips: Uncomment the registerElements console logs and ensure that there are inputs displayed in the console. If not, you need to adjust the variant and hidden input selector.
Note: If you prefer using radio buttons for the variants use the following code and adjust line A/ line B with the correct selectors.
{% comment %}
Radio Variant Changes with the New Hidden Input Block
{% endcomment %}
{%- if template == "product" -%}
<script>
(() => {
var PO = {
state: {
initialized: false,
},
elements: {
variantSelect: null,
hiddenVariant: null
},
init: function() {
try {
if (PO.state.initialized === true) {
return false;
}
PO.state.initialized = true;
PO.registerElements();
PO.validate()
PO.events();
PO.assignHiddenValue();
} catch (e) {
console.warn(e);
}
},
validate: function() {
if (PO.elements.variantSelect === null || PO.elements.hiddenVariant === null) {
throw new Error('variantSelect or hiddenVariant not displayed')
}
},
registerElements: function() {
PO.elements.variantSelectParent = document.querySelectorAll('input[name="Color"]'); // The standard variant parent selector in the product form
PO.elements.variantSelect = document.querySelector('input[type="radio"][name="Color"]:checked'); // The standard variant selector in the product form
PO.elements.hiddenVariant = document.querySelector('[data-child-name="_hidden_options"] input'); // The hidden input configured with product options tool
//console.log('PO.elements.variantSelectParent = ', PO.elements.variantSelectParent);
//console.log('PO.elements.variantSelect.value = ', PO.elements.variantSelect.value);
//console.log('PO.elements.hiddenVariant.value = ', PO.elements.hiddenVariant.value);
},
events: function() {
PO.elements.variantSelectParent.forEach(e => {
e.addEventListener("change", PO.assignHiddenValue);
});
},
assignHiddenValue: function(e) {
PO.elements.hiddenVariant.value = e && e.target && e.target.value ? e.target.value : PO.elements.variantSelect.value;
Gs.productOptions.checkConditions();
}
};
document.addEventListener("giftship.loaded", PO.init);
return PO;
})();
</script>
{%- endif -%}
If you encounter any questions or issues during setup, please don’t hesitate to reach out for assistance.