Walkthrough: custom printed mug

One personalized product built from an empty option set to a live storefront — a mug with a curved name and an uploaded photo.

A complete setup, in the order you would build it. The product is a printed mug with a curved name and a customer photo.

Replace the product and wording with your own. The same method applies to a frame, a t-shirt, or a pendant.

Before you start

• A mug product in Shopify with a flat, front-facing photo. This is the most important one.

• The Personalizer feature is available on your plan. See Compare plans.

• The app embed is already enabled on your live theme.

Steps

1

Create the option set and set the background

Option Sets > Create option set > Create from scratch. Name it Printed mug.

Rename the starting section to Personalize your mug.

Then, open Change background in the preview panel:

• Background: Product image

• Apply to: First product image only

• Select your mug product to preview against

Every position you set from this point is measured against that photo, so set the background first. See Choosing the background.

2

Add the name field

Add a Text option and set on the Basic tab:

Field	Value	Why
Label / Name	Name on mug	Readable on the order
Max character	12	What actually fits on the printable band
Character counter	Show	They see the limit approaching
Default value	Your name	So the preview is never empty
Text transform	Capitalized	Every mug looks consistent
Help text	Up to 12 characters. Printed items cannot be returned.	No surprises

3

Turn on the Personalizer for the name

Open Personalizer and turn on Enable personalize. Then style it:

Setting	Value	Why
Text color	Your print color	Realistic rather than decorative
Font size	7, adjusted by eye	Set it against your real photo
Font family	Custom, your print font	The preview then matches production. See Fonts
Custom Effect	No effect	Printing is flat

4

Curve the name to the mug

Still on the Personalizer tab:

• Curve: increase the value until the text follows the curve of the mug in your photo. The correct value depends on your image.

• Auto-fit max width: on, with Max width set to the printable area.

• X position: 50, which centers the layer.

• Y position: set to the height of the printable area, often around 45.

Test in the preview with a one-character name and a twelve-character name. The long name should be reduced in size rather than extend past the printable area.

See Curve and auto-fit width.

5

Add the photo upload

Add a File upload option:

Field	Value	Why
Label / Name	Photo on mug
Required field	Off	Some customers want the name only
Allowed extensions	jpg, jpeg, png	What you can print from
Enable image editor	On	They crop their own photo, so you get a usable file
Help text	JPG or PNG, at least 1200 × 1200 pixels.	Sets the quality bar

6

Turn on the Personalizer for the photo

In its Personalizer:

Setting	Value	Why
Image shape	A rectangle matching your print panel	The photo reads as printed, not pasted
Background mode	Cover	Fills the panel whatever shape they upload
Width / Height	Sized to the panel
X position / Y position	Positioned on the panel, below the name	So the two layers do not overlap
Crop area	On, matching the print panel, outline visible	Nothing can stray off the printable area
Allow customers to	Change position, Resize	Only they know which part of their photo matters
Rotate	Off	A rotated photo on a mug looks like a mistake

See Image layers, Crop area, and Customer controls.

7

Price the personalization

Apply the charge to the name field, because every personalized mug has one. On its Basic, open Price, select New product, and enter your fee. The printing is then included as a product in your reports.

Set Add-on quantity to Default, because each mug is printed individually.

See New product.

8

Add a photo surcharge, only when a photo is used

Add a Switch for the photo charge and use conditional logic to display the upload option:

• Add a Switch labeled Photo printing, priced, One time charge

• Put it above the upload option

• Give the upload option a conditional rule: Show · All · Photo printing — is enabled

The upload option is now displayed only after the customer selects the photo printing charge. See Conditional logic.

9

Assign, save, activate

On Assign products, use Automatic Rules with Product tag — is equal to — printed-mug, so new mugs use the option set automatically.

Save. Set the status to Active and confirm Online Store is ticked.

10

Test on a real product page

Select View in Store, then complete the following checks as a customer would:

1. Enter a short name and check that it follows the curve.

2. Enter a twelve-character name and check that it is reduced in size and stays inside the printable area.

3. Turn on photo printing and check that the upload option is displayed.

4. Upload a portrait photo and a landscape photo, and check that Cover handles both.

5. Drag the photo to the edge and check that it is cut at the crop area boundary.

6. Check the price after each step.

7. Repeat all of the above on a phone.

11

Place a test order and check what your team receives

Add the product to the cart, check that Preview Your Design displays the correct design, and place the order.

The order in Shopify admin should list Name on mug, Photo printing, and a link to the uploaded file. Correct any unclear option names now.

Set up an automation so these details reach your production team without opening Shopify admin.

What to change for other products

Product	Differences
A photo frame	No curve. One image layer, crop area matching the aperture, both customer controls on
An engraved pen	Curve for the barrel, a very tight character limit, no image layer
A t-shirt	No curve, larger print area, artwork upload plus optional text
A ring band	A strong curve, a five-character limit, auto-fit essential
A jersey	A Number layer for the number and a Text layer for the name, positioned separately