Skip to main content

Product personalization

Use the Product personalization block when one product needs a bundled customization experience: text, a customer-facing font choice, an uploaded image, or all three together.

The block saves customer choices as Shopify line item properties, so the details travel with the cart item and appear on the order.

Related: Need a simpler input? Use Product custom property for plain text or Product file upload for a standalone upload.

When to use this block​

Use Product personalization for products such as engraving, embroidery, patches, team logos, nameplates, trophies, awards, and made-to-order gifts.

Good fits include:

  • Text only, such as a name, initials, player number, or short message.
  • Text plus a font choice, where the customer should see how the text will look.
  • Image only, such as an uploaded logo or artwork file.
  • Text, font, and image together in one grouped customization area.

If the customer does not need a preview or grouped experience, the smaller custom property and file upload blocks are usually enough.

Configuration steps​

  1. Open the product template in the Theme Editor.
  2. Find the product form area, usually inside Buy buttons.
  3. Add Product personalization.
  4. Choose the Content mode:
    • Text only
    • Text + font
    • Image only
    • Text + font + image
  5. Update the heading, description, field labels, and preview text.
  6. Set the line item property keys if needed.

Recommended property keys:

Personalization Text
Personalization Font
Personalization Image

These keys become the labels your team sees in the cart and order details.

Font choices​

When font selection is enabled, configure Font choices with one option per line:

Athletic Block|Bebas Neue, sans-serif
Modern Script|"Team Engraving Script", cursive
Classic Serif|Georgia, serif

The format is:

Customer label|CSS font-family

The customer sees the label before the pipe (|). The preview uses the CSS font family after the pipe.

Load fonts​

The block can load any combination of font sources. Enable only the sources needed for that product.

Google Fonts​

  1. Enable Load Google Fonts.
  2. Add all Google font families in Google Fonts families.
  3. Add matching customer-facing entries in Font choices.

Example Google Fonts families:

Bebas Neue:400|Playfair Display:400,700

Matching font choices:

Athletic Block|"Bebas Neue", sans-serif
Elegant Serif|"Playfair Display", serif

Adobe Fonts​

  1. Enable Load Adobe Fonts.
  2. Add one Adobe project ID per line in Adobe Fonts project IDs.
  3. Use the Adobe CSS family name in Font choices.

Example:

abc123

Matching font choice:

Modern Script|"bickham-script-pro-3", cursive

Custom font files​

Use this for uploaded .woff2, .woff, .ttf, or .otf files. This is the easiest path for most merchants using dedicated personalization fonts.

  1. Upload the font file to theme assets.
  2. Enable Load custom font files.
  3. Add one font file per line in Custom font files.
  4. Use the family name in Font choices.

Basic format:

Font family|filename

Example:

Team Engraving Script|team-engraving-script.woff2

Then add this to Font choices:

Team Script|"Team Engraving Script", cursive

Optional format with weight and style:

Team Engraving Script|team-engraving-script.woff2|400|normal
Team Engraving Script|team-engraving-script-bold.woff2|700|normal
Team Engraving Script|team-engraving-script-italic.woff2|400|italic

Custom stylesheet assets​

Use a custom stylesheet when you already have a CSS file with @font-face rules or need a more advanced setup.

  1. Upload the CSS file to theme assets.
  2. Enable Load custom font stylesheet assets.
  3. Add one CSS asset filename per line.
  4. Use the matching font family names in Font choices.

Example:

engraving-fonts.css

Keep font loading performant​

Fonts can slow down a product page when too many are loaded. Keep the list tight.

Best practices:

  • Use only the fonts customers can actually select.
  • Prefer .woff2 for uploaded custom fonts.
  • Use one Google Fonts request with all needed Google families.
  • Use as few Adobe project IDs as possible.
  • For custom stylesheet assets, include only the @font-face rules needed for this block.
  • Avoid loading many weights and italics unless customers need them.
  • Use clear customer labels so you do not need duplicate fonts with nearly identical names.

Image uploads and preview​

When image mode is enabled, customers can upload artwork and see it in the preview.

Useful settings:

  • Accept: Limit file types, such as .png,.jpg,.jpeg,.svg.
  • Allow multiple images: Use only when production can handle multiple files.
  • Require image: Make the upload mandatory before add to cart.
  • Image input layout: Choose a compact picker or a larger dropzone.

For best order quality, write label or description copy that tells customers what file type you prefer.

Example:

Upload a high-resolution PNG, JPG, or SVG.

Conditional display​

The block can appear only after a customer makes another selection.

Example:

  1. Add a Product custom select called Personalization Type.
  2. Add options like:
None
Text only
Logo upload
  1. On Product personalization, enable Show based on another property.
  2. Set Controlling property key to Personalization Type.
  3. Set the visibility rule and values that should show the personalization block.

When the block becomes hidden, its text, font, and image values are cleared so hidden personalization does not accidentally submit to the cart.

Add-on fees​

If personalization should add a fee:

  1. Create a hidden or draft Shopify product for the fee.
  2. Enable Enable add-on fee.
  3. Choose the fee product.
  4. Choose whether the fee is one-time or per-item.

The fee is triggered when the customer enters text or uploads an image. If the block is hidden by conditional display and cleared, the fee no longer applies.

See Custom Option Fees for the broader fee setup.

Minimum quantity when personalized​

Use Minimum quantity when personalized when personalized products require a higher order quantity.

Example:

Minimum quantity when personalized: 24

If the customer adds personalization, the product quantity minimum is raised to 24. The highest applicable minimum wins, including Shopify quantity rules, product metafields, and other option-based minimums.

See Minimum Quantity Setup for the full minimum quantity workflow.

Troubleshooting​

The font choice appears, but the preview does not use the font​

Check that the CSS font family in Font choices exactly matches the loaded font.

For custom font files, this line:

Team Engraving Script|team-engraving-script.woff2

should pair with:

Team Script|"Team Engraving Script", cursive

Google Fonts are not loading​

Make sure Load Google Fonts is enabled and the family list uses font names separated by |:

Bebas Neue:400|Playfair Display:400,700

Then use the CSS family name in Font choices:

Athletic Block|"Bebas Neue", sans-serif

The uploaded image disappears while typing​

The image preview should remain stable while text changes. If it flickers, confirm the theme is running the latest product-personalization.js asset.

The order has missing personalization​

  • Confirm each line item property key is unique.
  • Confirm conditional display is not hiding and clearing the block before add to cart.
  • Confirm required text, font, or image settings match the content mode.

See also: