How can I fade the text in the number box like the name box?

Shopify Discussion

Topic summary

A user is seeking help with styling a number input box on their Shopify product page to match the appearance of a name input box.

Current Issue:

  • The name box has faded/placeholder text
  • The number box text appears solid/unfaded
  • User wants consistent styling between both input fields

Context:

  • An image was shared showing the visual difference between the two input boxes
  • The issue appears on a product page for a sticker pack
  • This is a CSS/styling customization question

Status: The question remains unanswered with no solutions or suggestions provided yet.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

Hi there ,

Is there any way to make the number box text faded as the name box .

uui.png
uui.png980×183 4.97 KB

Site Url :: https://laadlee.com/collections/my-nametags/products/my-nametags-stickers-milkshake-pack-of-56

Thank You

2

Hi @jnud21 :raising_hands: :raising_hands:

The customer wants the placeholder text in the “Number” field (like “max 15 characters (optional)”) to appear faded/light, similar to the “Name” field next to it, so the two fields look more consistent. I recommend using our Easify Product Options app - of course, it can fully meet the requirement to make the placeholder text faded like in your screenshot.

Here’s an example I’ve created so you can see how it works:

  • This is the result:

image
image1258×986 140 KB

  • This is the app setting:

image
image2048×1019 149 KB

First, please create a Text Box option. To make the text appear faded like the “Name” field in the screenshot, you just need to enter that content in the Placeholder field instead of the default value. Then the text will automatically display as a hint and appear faded, exactly as you want.

In addition, with Easify Product Options, you can also add Help text displayed below the input field to guide customers more clearly—helping them understand what information they need to enter before adding the product to the cart.

image
image1772×866 159 KB

Besides text boxes, Easify Product Options also offers many other option types such as color swatches, image swatches, buttons, dropdowns, and more, allowing you to flexibly design and customize your product pages to match your exact needs. You can combine different option types to create a more intuitive and professional selection experience for your customers.

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.:smiling_face_with_three_hearts:

3

Hi @jnud21

Yes, this is just a basic CSS styling problem. The quantity input has default opacity applied to it. Add custom CSS to change the color of the number input placeholder and text field to the name of your theme, which is the best name field. Decrease the opacity or use a softer colour and border style. This way, they’ll be lined up both on desktop and mobile.