# Name tags and embroidery

Chapter 10 of the Scruff user guide.

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).

| Setting | Default | What it does |
| --- | --- | --- |
| Personalisation | Engraved tag | **Engraved tag** or **Embroidery** |
| Shopper ticks a box to add it | Off (on in Embroidery preview) | Off: personalisation is part of the product and the front is required. On: a checkbox with the **Label**; nothing is added until it's ticked. |
| Label | "Personalise it" | The panel's title, or the checkbox's label |
| Price note | "Engraving included" | Shown beside the label, such as "Engraving included". With a fee product the fee shows instead (embroidery only). |
| Allowed symbols | `.,'&-+()#!` | Besides letters, numbers and spaces |

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

| Setting | Default | What it does |
| --- | --- | --- |
| Front label | "Front" | |
| Front characters | 10 | 4 to 16. Spaces count. |
| Engrave the back | On | Off hides the back lines |
| Back characters per line | 18 | 8 to 24 |
| Back hint | "Use a number you're happy to share." | Under the back lines |
| Style 1 name, Style 1 font | "Bold", Funnel Display | The first style tile and its font |
| Style 2 name, Style 2 font | "Classic", Zilla Slab | The second |
| Style 3 name, Style 3 font | "Script", Playball | The third |
| Shape option name | "Shape" | Option values Bone, Round or Heart (any case) set the preview's shape |
| Shape without a shape option | Bone | **Bone**, **Round** or **Heart** |
| Finish option name | "Finish" | Option values brass or gold, silver or steel, rose, black set the preview's finish |
| Finish without a finish option | Gold | **Gold**, **Steel**, **Rose gold** or **Black** |

Under **Embroidery** (shown with Embroidery):

| Setting | Default | What it does |
| --- | --- | --- |
| Embroidery characters | 12 | 4 to 16 |
| Threads | `Cream \| #fbf4e9`, `Butter \| #f6d37a`, `Tomato \| #c4361c`, `Spruce \| #1d4034`, `Sky \| #9fc3e0`, `Liquorice \| #241612` | One per line: `name \| #hex`. The name is what arrives on the order ("Thread: Butter"), so use the names your embroiderer knows. |
| Strap colour option name | "Colour" | The selected colour swatch of this option tints the strap. Without one the strap colour is used. |
| Strap colour | `#a8582a` | The strap in the preview when the product has no colour swatch |

## Where personalisation is offered

**Theme settings › Personalisation**:

| Setting | Default | What it does |
| --- | --- | --- |
| Personalisation fee product | | Optional, for embroidery only: engraving on tags is always included. Its first variant is added beside the embroidered item and leaves the cart with it (below). |
| Only on tagged products | On | Show personalisation only on products with the tag below, on the product page, in Featured product and in quick view. Always shown in the theme editor. |
| Product tag | personalise | The product tag that turns personalisation on. Capitals don't matter. Shows while **Only on tagged products** is on. Leave it blank to offer personalisation on every product with the block. |

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):

| Property | Example | From |
| --- | --- | --- |
| `Tag front` | Mabel | The front |
| `Tag back` | 0412 555 018 / Call if I'm lost | The two back lines, joined with " / " |
| `Tag font` | Bold | The style's name |
| `Embroidery` | Mabel | The name to embroider |
| `Thread` | Butter | The thread's name from **Threads** |

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.