# Adding and editing a snippet

**Code vault → Add a snippet.** Four steps, in an order that matters — then the same screen again when you come back to edit.

## 1 · Where it loads

Placement comes first, because it decides which kinds of code exist at all.

| Option | When to choose it |
| --- | --- |
| **Before the closing body tag** | The default, and better for speed. Right for almost everything |
| **In the head** | Only if the code must run before the page renders, or it is a verification tag |

<Hint type="warning">

If the embed for the placement you chose is off in your live theme, the step says so before you write anything — *"The head embed is off, so this snippet will not load until you switch it on. Saving does not switch it on."* See [Turn on the Snapty app embeds](https://docs.foxecom.com/snapty-app/code-vault/managing-snippets#turn-on-the-snapty-app-embeds).

</Hint>

Press **Use this placement** to continue.

## 2 · What kind of code

| Kind | What to paste | Placement |
| --- | --- | --- |
| **Script** | The JavaScript **between** the `<script>` tags — not the tags | Either |
| **CSS** | The rules **between** the `<style>` tags | Body only |
| **HTML** | A fragment of markup. It lands at the end of the page | Body only |
| **Meta and link tags** | `<meta>`, `<link>` or `<noscript>` tags | Head only |

Pick the kind first and the editor appears with the rules that apply to it. If you paste something that does not match — a stylesheet into Script, say — Snapty says which kind it actually is.

## 3 · Name and code

| Field | |
| --- | --- |
| **Name** | For you. It never reaches your storefront |
| **Code** | What is delivered. Checked as you type — see below. In the editor, Tab indents and Shift-Tab outdents; press Escape, then Tab, to move to the next field |

### What gets flagged

Snapty checks the code when you save, not on your storefront. Two kinds of flag:

**Blocking — the snippet cannot work as written.** The save button stays off until it is fixed. Each one names the fix:

| Flag | The fix |
| --- | --- |
| Tags around the code — `<script>` or `<style>` | Paste only what is between them. Snapty creates the element |
| The wrong kind — a stylesheet in Script, a script in CSS, markup in either | Switch the kind to what the code actually is |
| No markup in an HTML snippet | Switch the kind, or add the markup |
| `document.write` | Use `document.createElement`, or an async script tag. It stops modern browsers rendering the page, and wrapping it in a `<script>` inside markup changes nothing — scripts inside markup are held to the same rules |
| A whole document — `<html>`, `<head>`, `<body>` | Submit only the fragment |
| A rendering element in the head | Head markup is `<meta>`, `<link>` and `<noscript>` only. Switch the placement to before the closing body tag — the same markup is accepted there |
| A literal `</body>` or `</head>` inside a string | Split the literal, or build the string from parts — the embed looks for the first one on the page |

<Hint type="info" title="Worth knowing — flagged, but saves">

An `<img>` or `<iframe>` that looks like a tracking beacon: it fires on load whatever the visitor consented to, and markup delivered this way cannot be consent-gated. Snapty delivers it as written.

</Hint>

## 4 · Save

| Button | What happens |
| --- | --- |
| **Add to the Vault** | Saved, published, and switched on. Loads from the next page load — if the embed for its placement is on |
| **Save as draft** | Saved and switched off. Nothing loads until you turn it on |

The summary panel beside the form shows what is set — placement, kind, name — and what is still missing. The Add button stays off until every line is answered and nothing blocking is flagged.

**If it could not be saved:**

| Message | What it means |
| --- | --- |
| *The snippet was not saved, because the change could not be published to your storefront. Nothing was half-applied* | Publishing failed. Your Vault is exactly as it was — try again |
| *Something this snippet needs is still missing* | Step back through the flow; the step that is short of an answer says which |
| *You've used 5 of 5 snippets on the free plan* | The free plan's limit. Delete a snippet you no longer need, or wait for paid plans — everything you have stays |

## Editing a snippet

Open it from the Vault screen. The same fields, the same checks, and **Save changes** publishes the change on save. The screen shows when it was last saved. If the change cannot be published, nothing is saved.

An inactive snippet says so at the top — *"It is not loading on your storefront until you turn it on. Your code is kept exactly as you saved it."* — with **Turn on** beside it.

## Deleting a snippet

**Delete this snippet**, at the bottom of the snippet's screen.

> Deleting removes this snippet and its code for good. If you only want it to stop running, turn it off instead — that keeps everything.

<Hint type="danger">

There is no undo, and the code is in no recording — the Vault is not a theme file, so History never recorded it. Turn off is the action for anything you might want back.

</Hint>