Hello,
I’m trying to show my “Embossing” textbox only when the “Style” dropdown option “Embossing” is selected. I’ve added the below code in my new template, product-customizable-template.liquid, which created the textbox but I want to hide it unless “Embossing” is selected.
The Style textbox has the following code:
I am still working on the site, so it is not active right now.
Any help would be greatly appreciated, thank you.
You need javascript for this:
var isEmbassingSelected = document.getElementById("SingleOptionSelector-0").selectedIndex == 1;
if (isEmbassingSelected == false) {
// hide embossing
document.getElementsByClassName("line-item-property__field")[0].style.display = "none";
}
Thank you for the reply @prinpadure ,
So when I add your code into theme.js, the entire textbox disappears, regardless of whatever style I use.
@beaconandharbor I would need your store url to test
Forgot about an event listener. Add also this:
document.getElementById("SingleOptionSelector-0").onchange = function () {
let elementStyle = document.getElementsByClassName("line-item-property__field")[0].style
if (this.selectedIndex != 1) {
elementStyle.display = "none"
} else {
elementStyle.display = "block";
}
}
@prinpadure , I can’t thank you enough, I was almost there but your code got me there, thank you!
This is for anyone looking for a similar solution. . .
I didn’t mention that I had a stamp option as well, so I included that into the code. I also wanted the Embossing (and Stamp) textboxes hidden right from the start, so I went to “myproduct-customizable-template.liquid” template and added the “hidden” at the end of the classes (<p . . . hidden>) of my emboss and stamp textboxes, then called them to display in the code, instead of having them displayed and hiding them. Now, when I enter the page, the textboxes are hidden automatically, and whatever option that is selected will display the correct textbox. I also changed them to be variables because they may be changed.
//Hide Embossing/Stamp
document.getElementById("SingleOptionSelector-0").onchange = function () {
var elementEmboss = document.getElementsByClassName("line-item-property__field")[0].style
var elementStamp = document.getElementsByClassName("line-item-property__field")[1].style
if (this.selectedIndex == 1) {
elementEmboss.display = "block"
elementStamp.display = "none"
} else if (this.selectedIndex == 2) {
elementStamp.display = "block"
elementEmboss.display = "none"
} else {
elementEmboss.display = "none"
elementStamp.display = "none";
}
}
Hi,
If there are multiple options and if selecting an option would open up a text area, how to define that in JS and liquid?
For example:
and I want to open up a “Text Area” once I select “Others (please specify)”, otherwise the text area is always hidden.
I tried your code but did not work out for this issue. Would you be kind to help with this?
Site URL: https://www.ohclocks.com.au/cart
Hey there! If you don’t want to change your code, you can consider Seal Personalizer Live Preview app.
It lets customers preview personalized text right on products before buying.
We also support custom fonts and additional price.
You can try it free here.
The Easify Product Options app can fully meet your needs 
— not only by allowing you to show or hide specific fields (like “Embossing”) based on the customer’s selection, but also by letting you set up advanced conditional logic, add custom add-on prices for each option, and even personalize the display layout to perfectly match your store’s style — all without touching a single line of code.
Here’s an example I’ve created so you can see how it works:
You can use Conditional Logic to show the “Embossing” input box only when the customer selects the “Embossing” option in the “Style” menu.
Then, if the buyer selects “None” or “Stamp”, the input box will automatically hide — no manual coding required.
The app offers a smooth and user-friendly experience for all your customizable products. Plus, the Easify team is always available to lend a hand whenever you need it.
