If 'costumize' is selected then engraving option appears

bndcreationsllc · ‎03-02-2024

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>

ThePrimeWeb · ‎03-02-2024

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.

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

ThePrimeWeb · ‎03-02-2024

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 · ‎03-02-2024

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

ThePrimeWeb · ‎03-02-2024

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.

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!

EasifyApps · ‎04-22-2024

Hi @bndcreationsllc,

To implement an engraving text field that only appears when the "Customize" variant is selected, follow these steps using the Easify Product Options app. For example:

App Settings:

Create a text field using the app's Text Box option type.

Add Conditional logic to the Text Box so it's displayed only when the "Customize" variant is selected.

Add the Text Box to the relevant product(s).

Easify Product Options: Any product options app can help you create custom options, but Easify turns those options into sales and conversions!
Easify Inventory Sync: Automate inventory syncing for Bundles, Duplicates, and Raw Materials. Say goodbye to manual tracking headaches.
Easify Product Attachments: Enrich your store with downloadable content. Easily add PDFs and other files to product or any page.
>>> Try Apps for Free | 24/7 Live Chat Support

If 'costumize' is selected then engraving option appears