Why does my text box disappear when clicking elsewhere on my store?

LuxeEngravables
Tourist
5 0 1

Hello,

 

I created a textbox and a dropdown box for my shopify store that i'll will be launching sometimes soon. For some odd reason I can't seem to get the text box to appear. If I click on the box, it becomes visible. Than if I were to click on some other part of the screen, It disappears. I'll attach the code that I wrote and some screenshots of the problem.

 

<div class="product-form__input">
<label class="form__label" for= "custom-back">Words on Back</label>
<input class="field__input" type="text" id="custom-back" form="{{product_form_id}}" name="properties[Back Engraving]"/>
</div>

<div class= "product-form__input">
<label class="form__label" for= "custom-format">Font</label>
<select class="select__select" id="custom-format" form="{{product_form_id}}" name="properties[Back Engraving Font]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>

LuxeEngravables_0-1692096446070.pngLuxeEngravables_1-1692096469745.png

 

Replies 4 (4)

magecomp
Shopify Partner
264 20 32

Hello @LuxeEngravables 

 

can you try this

 

<div class="product-form__input">
<label class="form__label" for="custom-back">Words on Back</label>
<input class="field__input" type="text" id="custom-back" form="{{product_form_id}}" name="properties[Back Engraving]" display="block"/>
</div>

<div class="product-form__input">
<label class="form__label" for="custom-format">Font</label>
<select class="select__select" id="custom-format" form="{{product_form_id}}" name="properties[Back Engraving Font]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
Helping voluntarily. Please like and accept the solution if it helps. Thanks!
Our Bestseller Shopify Apps    |      Mobile App Builder by MageComp    |      Limit Qty Purchase

Need a developer?  Just visit MageComp website
LuxeEngravables
Tourist
5 0 1

Hello!

 

Unfortunately, this does not fix the problem, but thank you so much for your reply. Don't know why it's not appearing. 

EasifyApps-Zoe
Shopify Partner
582 14 44

Hi @LuxeEngravables,

I highly recommend exploring the Easify Product Options app for streamlining the creation of custom engraving options on your product pages. This user-friendly tool allows you to implement these options in a matter of minutes without coding.

 

With the app, you can effortlessly add a text box where your customers can input their desired engraving text. Moreover, it offers the flexibility to include a font selection feature, enabling customers to choose their preferred font style. What's even more impressive is that customers can preview their entered text in the font they've selected 🤗.

 

To get a better understanding of how this works, I encourage you to take a look at a similar demo created using the app.

EasifyAppsZoe_0-1696607051827.png

EASIFY - MAKING SHOPIFY SIMPLE & SWEET!
Easify Product Options: Create custom product options 10X faster & easier!
Easify Product Attachments: Effortlessly add downloadable PDF files (or any other format) to Shopify pages!
Try for Free | 24/7 Live Chat Support

Tufan_Minimate
Shopify Partner
13 0 0

Hi there, 
I hope you solved this problem already but in case you want to make it ready quickly, you can use Mini:Customization Fields App. This app allows to create multiple fields in various formats like textfield, upload and dropdown etc. 

Screenshot 2024-03-01 at 16.42.21.pngScreenshot 2024-03-01 at 17.00.42.png




Co-Founder at: MinimateApps
---
Mini:Customization Fields - Allows merchants to collect information from customers at product pages before proceeding to checkout
Hey!Scarcity Low Stock- Create a sense of urgency & scarcity to increase conversion rate by displaying inventory level