Name tags and embroidery

An engraved tag or a collar with a name stitched on it is a gift; shoppers want to see it before they pay. The Name tag preview block shows the tag or the strap as they type, checks the words before they're added, and puts them on the order.

What shoppers see

On an engraved tag (the product.tag template):

• Personalise it with "Engraving included" beside it.
• A live preview on a colour block: the front and back of the tag, in its shape (bone, round or heart) and finish (gold, steel, rose gold or black), with a small caption card ("Live preview", "Back: 0412 555 018 · Call if I'm lost"). With the front empty it shows the pet's name, or "Name", faintly.
• Front, with a counter ("5 of 10"). The front is required: until it's filled in, the add to bag button is disabled and says "Add a name for the front".
• Back, line 1 and Back, line 2, each with its own limit, and the hint "Use a number you're happy to share."
• Style: three tiles, Bold, Classic and Script, each shown in its own font. The preview follows the chosen style.

On an embroidered collar, lead or bandana (the product.embroidery template):

• A checkbox, Add embroidery (+$12), with your fee (below). Ticking it opens the rest.
• Name to embroider, with a counter ("5 of 12"). Required once ticked: "Add a name to embroider".
• Thread: round swatches of your thread colours, with the chosen name beside the label ("Thread · Butter").
• A preview of the strap in the product's colour, with the name stitched along it in the chosen thread.

Both previews redraw as the shopper types or picks, and the text shrinks to fit. Screen readers hear a short summary shortly after typing stops ("Front: Mabel. Back: 0412 555 018, Call if I'm lost. Style: Bold.").

What can be engraved or stitched

Letters and numbers in any language, spaces, and the symbols in Allowed symbols (. , ' & - + ( ) # ! by default). Anything else, emoji included, gets "Emoji and symbols can't be engraved. Use letters, numbers and . , ' & - + ( ) # !" ("stitched" for embroidery) under the field, and nothing is added until it's fixed.

Typing stops at the limit. Pasting more than fits is refused with a message that says why: "That's 14 characters. The front fits 10." (or "Each back line fits 18.", "The name fits 12."). Always read the words on the order before you engrave.

Shapes and finishes

The preview takes its shape and finish from the product's own options, so one template serves every tag:

• Shape: the option named in Shape option name ("Shape" by default). Values containing Bone, Round (or Circle) or Heart, in any case, set the shape. A product without that option uses Shape without a shape option (Bone).
• Finish: the option named in Finish option name ("Finish"). Values containing brass or gold show gold, silver or steel show steel, rose shows rose gold, and black shows black. Without the option, Finish without a finish option (Gold).

So a tag with the options Shape (Bone, Round, Heart) and Finish (Brass, Steel) previews whichever the shopper picks.

Fonts

The three styles are font pickers from Shopify's font library: Bold (Funnel Display), Classic (Zilla Slab) and Script (Playball) by default. The fonts load only when the block comes into view, so they don't slow the page. Choose fonts your engraver can actually cut, and name the styles the way your engraver does: the style's name is what arrives on the order ("Tag font: Script").

Name tag preview block settings

The block goes in the Product and Featured product sections (the presets put it under the variant picker). In Add block it's offered twice: Name tag preview (engraving) and Embroidery preview (embroidery, with the tick box on, the label "Add embroidery" and no price note).

Under Front, Back, Styles and Preview (shown with Engraved tag):

Under Embroidery (shown with Embroidery):

Where personalisation is offered

Theme settings › Personalisation:

With the defaults, tag every product you engrave or embroider personalise in admin (the product's Tags field), as well as giving it the product.tag or product.embroidery template. A product on those templates without the tag shows no personalisation at all, which lets you keep one embroidery template for collars you stitch and collars you don't.

Fees: engraving is included, embroidery can be charged

Engraving on tags is included in the tag's price. The Engraved tag mode never adds a fee, whatever the setting says, and shows your Price note ("Engraving included"). Price your tags to cover it.

Embroidery can carry a fee, added as a product of its own, so it's priced, taxed and reported like anything else you sell:

1. In admin, go to Products › Add product. Title it "Embroidery" (shoppers see the title in the bag, at checkout and on their order). Set the Price to your fee, such as 12.00. Don't add options: it has one variant, and the theme uses its price.
2. Under Inventory, untick Track quantity, so it can never sell out. Under Shipping, untick This is a physical product, so it adds no weight and needs no shipping. Set Charge tax the way you charge it on your collars.
3. Set its Status to Active and make sure it's published to the Online Store sales channel: the bag can only add a product that's on sale there.
4. Keep it out of sight: don't add it to any collection you show, and check that your automated collections' conditions don't take it in. (Shopify's all-products page, /collections/all, lists every product, so link your menus to your own collections.) To hide it from your store's search and from search engines too, Shopify supports the seo.hidden metafield (an integer set to 1) on the product; see Shopify's help on hiding pages from search engines.
5. In the theme editor, open Theme settings › Personalisation and choose it as Personalisation fee product.

Then the checkbox reads "Add embroidery (+$12)", and while it's ticked the button's price includes the fee ("Add to bag · $76"). The collar and the fee go into the bag together, in one step.

In the bag, the fee sits under its collar as "Embroidery +$12", with no quantity of its own. It follows its collar: changing the collar's quantity changes the fee's to match (two embroidered collars, two fees), and removing the collar removes the fee. The bag count doesn't count fees. At checkout and on the order the fee is its own line, with a Personalised item property naming the collar it belongs to.

For free embroidery, leave Personalisation fee product blank and type a Price note such as "Free" in the Embroidery preview block.

What you get on the order

The shopper's words go into the bag as line item properties, shown under the item in the cart drawer, on the cart page, at checkout, in the order confirmation and on the order in Shopify admin (Orders, open the order: under the item's name):

Two more properties, _tag_id on the item and _tag_for on its fee, tie a fee to its item. Properties that start with _ are hidden from shoppers at checkout. The fee's Personalised item property shows the item's title.

Buy it now is hidden while personalising

The accelerated checkout buttons (Buy it now, Shop Pay, Apple Pay and the others under the add button) go straight to checkout and skip the bag, which would drop the engraving, the embroidery and the fee. So Scruff hides them while personalising: always on an engraved tag, and while Add embroidery is ticked. The shopper adds the item to the bag and checks out from there. Unticking brings them back.

Quick view and quick add

Neither can show the preview, so neither adds a product that needs personalising. A product needs it when:

• Only on tagged products is on (with a Product tag) and the product carries the tag. Untagged products never do, whatever their template.
• Otherwise, when it uses the product.tag or product.embroidery template.

For those products a card's quick add opens the product page instead of adding. Quick view shows "Personalise on the product page" in place of the preview: for an engraved tag (any such product not on product.embroidery) it's a button and the buy buttons are left out, because engraving is required; for embroidery, which is optional, it's a link and the buy buttons stay, so a shopper can still buy the collar plain.

In the theme editor

The block always shows in the theme editor, on any product, tagged or not, filled with the sample pet's name, "0412 555 018" / "Call if I'm lost" and a "Sample" tag, so you can style it before you set up a product. Optional embroidery shows ticked.