Solved

If 'costumize' is selected then engraving option appears

bndcreationsllc
Visitor
2 0 0

I want to add the option that if the variant 'customize' is selected then the option to engrave appears. 

 

Below is the code for the engraving section. Currently, it is under the buy.buttons.liquid so it appears all the time regardless if the variant 'customize' is selected or not. 

<p class="line-item-property__field">
<label for="Engrave">Engrave</label><br>
<input id="Engrave" type="text" name="properties[Engrave]" style="width: 100%; line-height: 2;">
</p>

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
1820 513 388

This is an accepted solution.

Hey @bndcreationsllc,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.line-item-property__field:has(#Engrave) {
    display: none !important;
}

body:has(input[value="Customize"]:checked) .line-item-property__field:has(#Engrave) {
    display: block !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1709414692134.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 3 (3)

ThePrimeWeb
Shopify Partner
1820 513 388

Hey @bndcreationsllc,

 

Can you share the link to your store please? Thanks!

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
bndcreationsllc
Visitor
2 0 0

Here is the link to my site, https://bndcreationsllc.com/

ThePrimeWeb
Shopify Partner
1820 513 388

This is an accepted solution.

Hey @bndcreationsllc,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.line-item-property__field:has(#Engrave) {
    display: none !important;
}

body:has(input[value="Customize"]:checked) .line-item-property__field:has(#Engrave) {
    display: block !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1709414692134.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!