Shopify Custom Text Field Setup — Complete Merchant Guide

Two paths: theme code vs personalizer app

Approach	Time	Cost	Features
Theme code (Liquid)	15-30 min	Free	Basic text input; no live preview, no character counter, no pricing, no validation
Personalizer app	5 min	$0-$24.99/mo	Text input + live preview + character counter + font selection + per-character pricing + validation + multi-line support

Use theme code for: one product, one text field, no fee, no preview needed. Use an app for: multiple products, fonts, per-character pricing, live preview, or anything at scale.

Path 1: Theme code setup (free)

Shopify's native mechanism is line-item properties. Add a text input to your product form with name="properties[Field Name]":

Step 1: Edit product-form.liquid

Online Store → Themes → Edit code → find snippets/product-form.liquid (or sections/main-product.liquid in Dawn). Add before the Add-to-Cart button:

<div class="product-form__personalization">
  <label for="engraving-text">
    Engraving text (optional, max 15 chars)
  </label>
  <input
    type="text"
    id="engraving-text"
    name="properties[Engraving]"
    maxlength="15"
    autocomplete="off"
  />
  <p class="char-counter">
    <span id="char-count">0</span> / 15 chars
  </p>
</div>

<script>
  document.getElementById('engraving-text').addEventListener('input', (e) => {
    document.getElementById('char-count').textContent = e.target.value.length;
  });
</script>

Step 2: Display in cart

Dawn theme's components/cart-items.liquid already loops over line-item properties. Verify — should show "Engraving: Emma" as a sub-line under the product name.

Older themes: add to your cart template:

{% for property in item.properties %}
  {% unless property.first[0] == '_' or property.last == blank %}
    <div class="line-item-property">
      <strong>{{ property.first }}:</strong> {{ property.last }}
    </div>
  {% endunless %}
{% endfor %}

Step 3: Verify in order

Place test order. Check admin → order detail → line item should show "Engraving: Emma" property. Also appears in order confirmation email + POD partner sync.

Path 2: Personalizer app setup (5 minutes)

Install Print It My Way (Free plan supports 1 text field on 1 personalizer, permanent — no trial expiry).

1. App Store → search "Print It My Way" → Install
2. Online Store → Themes → Customize → App embeds → toggle Print It My Way ON
3. App dashboard → New Personalizer → drag in "Text" field
4. Configure field settings:
   • Label: "Engraving text" (what customer sees)
   • Placeholder: "e.g. Emma"
   • Max chars: 15 (or per-product)
   • Required: on/off
   • Font options: 3-5 fonts (Playfair, Great Vibes, Inter, etc.)
   • Live preview: on (renders text on product mockup)
   • Pricing: per-character or flat fee (via Cart Transform)
5. Attach personalizer to product
6. Test on live product page — text input, character counter, live preview all work

Character limits by product

Product type	Recommended max chars	Reasoning
Ring (inside band)	8-15	Small engraving surface; longer text becomes illegible
Necklace pendant	15-25	Slightly larger; typically single name or short phrase
Cufflinks	3-6	Initials only; usually 3-char monogram
Coffee mug (wrap)	25-50	Ample wrap-around space; short quote or full name
Wine glass	15-30	Curved surface; two-line max
Tumbler (wrap)	30-80	Large wrap area; quote or extended text
Cutting board	40-150	Large flat surface; family name + established year + address
Doormat	50-200	Large surface; house rules or welcome message
Custom sign	50-500	Varies dramatically by sign size
Custom apparel print	20-40 per line	DTG print area limits

Live character counter (critical for UX)

Without a counter, customer types until validation fires. Frustrating. With a counter, they self-manage:

"Chars: 12 / 25"

Print It My Way + Bold + Zepto all include this natively. Theme code version above adds a simple counter; you can enhance with color coding (green at 0-70%, amber at 70-90%, red at 90-100%).

Input validation

Types of validation to enforce:

• Max length — hard-cap with maxlength attribute (native browser)
• Character set — reject emoji (POD engravers can't produce cleanly), block specific special chars if engraver limitations apply
• Profanity filter — client-side blocklist; server-side manual review for high-value orders
• Copyright terms — flag Disney/Nike/etc. terms for manual review (customer may not own rights)
• Empty state — if required field is empty, block Add-to-Cart with clear message

Print It My Way includes basic profanity filter + copyright term flag on Pro tier. Manual review queue for flagged orders (merchant approves before printing).

Multi-line text fields

Some products need multiple lines of text — wedding invitations, memorial plaques, family signs. Use a <textarea> element instead of <input>:

<textarea
  name="properties[Custom Message]"
  maxlength="250"
  rows="4"
></textarea>

Preserve line breaks in cart display + order email:

{{ property.last | newline_to_br }}

Personalizer apps handle this automatically. Multi-line text is 1 field type option in Print It My Way (labeled "Multi-line text").

Multiple text fields per product

Products often need multiple text inputs — bride name + groom name + date on a wedding invitation; first line + second line + third line on a plaque; team name + player number on a jersey.

Native theme code: add multiple <input> elements, each with unique properties[Field Name]. Each captures separately in the order.

Personalizer app: drag in multiple Text fields, each with own label + limits + preview position. Cleaner UX; each field can have independent pricing.

Per-character pricing setup

Charge for extra characters via Cart Transform. Field configuration:

• Free chars: 10 (customers who want short names pay $0 extra)
• Per-char fee after free: $0.50-1.00 (depends on product surface)
• Live counter shows fee as customer types

Full guide: Shopify Per-Character Pricing.

Font selection setup

3-5 fonts is the sweet spot. More triggers choice paralysis + adds page weight.

Recommended defaults by niche:

• Elegant / luxury: Playfair Display, Cormorant Garamond, Great Vibes (script)
• Modern / minimalist: Inter, Poppins, Montserrat
• Playful / kids: Fredoka One, Chewy, Pacifico
• Athletic / sports: Anton, Bebas Neue, Oswald
• Rustic / handmade: Amatic SC, Kaushan Script, Caveat

App-based: add Font dropdown as separate field alongside text field. Personalizer renders text in selected font in live preview.

Common issues + fixes

Issue	Cause	Fix
Text field doesn't appear in cart	Cart template missing properties loop; or app embed not enabled	Verify Dawn theme or add loop code; verify app embed toggled ON
Text field autofills with random data	Browser autocomplete filling in "email" or "name" fields	Add autocomplete="off" attribute to input
Special characters get stripped	Personalizer app sanitizing overly aggressively	App settings → character set → allow Latin extended
Line breaks lost in cart/email	Template not using newline_to_br filter	Add filter to Liquid template rendering the property
Text appears in cart but not on order	Property added after add-to-cart via JS (race condition)	Ensure input is inside the product form, not attached after submission
Field validation not blocking on mobile	Browser tolerating invalid input silently	JS-level validation in addition to HTML attributes

Frequently asked questions

Related setup guides

• Per-Character Pricing Setup
• Multi-Line Text Field Setup
• Text Personalization Complete Guide
• Best Fonts for Engraved Products