# Engraving with a live preview

Chapter 10 of the Clasp user guide.

Initials, a date, one small word: engraving turns a piece into a gift. Clasp lets shoppers see it before they buy:

* In the buy box, a panel with a checkbox: **Add engraving (+$10)** (the fee from your engraving fee product, below; without one, your **Price note**, such as "(free)").
* Ticking it opens **Your engraving**: a text field ("Up to 12 characters") with a live counter ("6 / 12"), two or three **style** tiles, each showing "Aa" in its own font over its name (Script, Serif, Block), and the note "Letters, numbers, spaces and & . ' - only. Engraved pieces can't be returned."
* Beside the field (above it on phones), the **live preview**: the engraving surface (the inside of a band, a pendant face) in a small oval, with the shopper's words drawn on it as they type, in the chosen style, fitted to the engraving area, in an engraved color with a fine highlight, on a straight line or a curve. With the field empty, it shows your **Sample text** ("always") faintly, so the effect is clear before typing.
* The add button adds the fee to its price: "Add to bag · $68.00".
* The words and style go into the bag as **line item properties**, "Engraving: always" and "Engraving style: Script", shown under the piece in the cart drawer, on the cart page, at checkout and on the order in admin.

The text is checked in the shopper's browser before it's added: an empty field while the box is ticked gets "Enter your engraving, or untick "Add engraving"."; characters you don't allow (emoji included) get "Use letters, numbers, spaces and & . ' - only. Remove "♥"."; and a text over the maximum, typed or pasted, keeps every character but turns the counter red and gets "6 characters too many. Up to 12.", and nothing is added until it's shortened. A text with several problems gets every message. Letters and numbers in any language are allowed. Always read the engraving on the order before you engrave.

## Engraving block settings

The **Engraving** block goes in the **Product** and **Featured product** sections (the presets put it right under the variant picker), and quick view shows it too. With **Show engraving only on products tagged engravable** on (the default), it shows only on products tagged `engravable` (below). One per section.

| Setting | Default | What it does |
| --- | --- | --- |
| Label | Add engraving | The checkbox's label. With a fee product, the fee follows it: "Add engraving (+$10)". |
| Price note | Empty | Shown after the label when there's no engraving fee product, such as "(free)" |
| Maximum characters | 12 (4 to 30) | Spaces count. The counter shows it. |
| Allowed symbols | & . ' - | Allowed besides letters, numbers and spaces. Separate with spaces. Empty allows letters, numbers and spaces only. |
| Note | Engraved pieces can't be returned. | After the allowed characters, under the field. State your own policy. |
| Style 1 name, Style 1 font | Script, Pinyon Script | The first style tile and the font the preview uses for it |
| Style 2 name, Style 2 font | Serif, Trirong | The second |
| Offer style 3 | On | Off offers two styles |
| Style 3 name, Style 3 font | Block, Josefin Sans | The third |
| Engraving surface | Empty | The engraving surface: the inside of a band or a pendant face. Blank uses the product's first image. |
| Text position across | 50% (0 to 100) | The centre of the text, from the surface's left edge |
| Text position down | 42% (0 to 100) | From the top edge |
| Engraving area width | 46% (10 to 100) | The text shrinks to fit this width |
| Rotation | 0° (−45 to 45) | Tilts the text |
| Curve (for the inside of a band) | 0 (0 to 100) | 0 is a straight line; higher bows the text into an arc, like the inside of a band seen from above |
| Engraved text colour | #5e3f0f | The color of the engraved letters in the preview |
| Sample text | always | Shown faintly in the preview until the shopper types |

The style fonts come from Shopify's font library and load only when a shopper first ticks the box, so they never slow the page down. Choose fonts you can actually engrave, and name the styles the way your engraver does. The style name is what arrives on the order ("Engraving style: Script").

**Per-product surfaces**: a product's `custom.engraving_image` and `custom.engraving_area` metafields (chapter 7) override the block's **Engraving surface** and its position settings, so a band and a pendant can share one product template. To find the numbers for a product, select the Engraving block in the theme editor on that product (the preview opens with the sample text), move the sliders until the text sits right, and copy the five values into the product's metafield as `across, down, width, rotation, curve`, such as `50, 42, 46, 0, 30`. Then set the block back for your other products.

## Charge for engraving: the engraving fee product

The fee is a product of its own that Clasp adds to the bag beside each engraved piece, so it is priced, taxed and reported like anything else you sell.

1. In admin, go to **Products › Add product**. Title it "Engraving" (shoppers see the title at checkout and on their order). Set the **Price** to your fee, such as 10.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. Set **Charge tax** the way you charge it on your pieces.
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 instead.) 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 › Jewelry** and choose it as **Engraving fee product**. Its first variant's price is added for each engraved piece, from every Engraving block (product page, featured product and quick view).

For free engraving, leave **Engraving fee product** blank and type "(free)" in the block's **Price note**.

**In the bag**, the fee doesn't show as a line of its own: it sits inside its piece's line as "Engraving for this piece · $10.00". The fee follows its piece: removing the piece removes the fee, and changing the piece's quantity changes the fee's to match (two engraved bands, two fees). At checkout and on the order the fee is its own line, with a "Piece" property naming the piece it belongs to.

> **Note:** The accelerated checkout buttons (Shop Pay, Apple Pay and the others under the add button) skip the theme's add to bag. So that an engraving and its fee can't skip the bag, Clasp hides them while **Add engraving** is ticked; the shopper adds the piece to the bag and checks out from there. Unticking shows them again.

## Where engraving is offered

In **Theme settings › Jewelry**:

| Setting | Default | What it does |
| --- | --- | --- |
| Show engraving only on products tagged engravable | On | Only products with the **Engravable badge tag** (Theme settings › Product cards, "engravable" by default; capitals don't matter) show the Engraving block, on the product page, in Featured product and in quick view. Off, or with that tag blank, every product offers engraving. The theme editor always shows it, as a sample. |

With the defaults, tag each piece you engrave `engravable` in admin (in the product's **Tags** field): it gets the Engraving block and the **Engravable** badge, and everything else gets neither. To offer engraving on every product, turn the setting off. To offer no engraving at all, remove the Engraving block from the product template (and any Featured product section) and don't tag products `engravable`, since quick view shows the block for tagged products.