# See it on

Chapter 9 of the Peel user guide.

See it on puts the shopper's chosen sticker on a real object. They drag it around a laptop, a bottle or a notebook, at the size they picked, in the finish they picked. It's a preview only: nothing about it goes near the bag or the order.

It comes in two forms that work the same way: the **See it on** block on the product page, and the **See it on spotlight** section for the home page.

## What shoppers see

A stage with your scene photo and the sticker on it, with a small **Drag me** tag until the first move. Above or beside it:

* **Tabs** for your scenes, when there's more than one. Each scene remembers where the sticker was dragged to, until the page reloads.
* **A four-way pad and Reset position**, always shown. Dragging needs an alternative, and on a phone the pad is often easier.

Shoppers drag the sticker with a mouse or a finger, and the page still scrolls from anywhere else on the stage. With the keyboard, arrow keys move it, Shift and an arrow move it further, and Home puts it back. It can't be dragged off the stage.

The sticker changes with the buy box. Pick a bigger size and it grows. Pick another finish and the sheen changes, cut to the art's shape. A variant with its own PNG swaps to that art.

## Set it up on the product page

1. **Prepare your sticker art.** Fill in `custom.sticker_png` on the product (chapter 7). Without it, the sticker is the product's featured image as a small square die-cut.
2. **Take your scene photos.** Plain, well-lit shots of the object, with a clear area for the sticker. The stage is landscape, about 10 by 7, and the photo fills it and crops to fit, so keep the object in the middle. About 1600px wide is plenty. Use your own photos, or ones you have the rights to.
3. **Open the block.** In the theme editor, open a product page and select the **See it on** block under the Product section. The presets hold three **Scene** blocks: Laptop lid, Water bottle and Notebook.
4. **Give each scene its image** and rewrite its **Label**. **Scene images are what switch the feature on**: with none, shoppers see nothing here. A scene with no image is skipped.
5. **Place the sticker** with each scene's four sliders, so it sits at a believable size.
6. **Set The size this placement is set for** to the size you placed it at (below).

Scenes belong to the template. They show for every product that uses it, with each product's own sticker. The `product.mix-pack` template has its own copy of the block, with no images, so packs show nothing here until you add some.

Up to five scenes show. The block's position is fixed, under the gallery and buy box. To leave it off a group of products, give them a template with no scene images: `product.goods` has it switched off.

The **See it on** block's settings:

| Setting | Default | What it does |
| --- | --- | --- |
| Heading | "See it on your stuff" | The heading beside the stage |
| Text | "Drag it, or use the arrows. It grows and shrinks with the size you pick." | The line under it |
| The size this placement is set for | 3 | A number from your Size option, such as 3 for 3″. The sticker grows and shrinks from here when a shopper picks another size. |

Each **Scene** block's settings:

| Setting | Default | What it does |
| --- | --- | --- |
| Image | Empty | The scene photo |
| Label | "Laptop lid" | The scene's tab |
| Sticker across | 50% (0 to 100) | Where the sticker's centre starts, from the left |
| Sticker down | 50% (0 to 100) | Where the sticker's centre starts, from the top |
| Sticker width | 24% (5 to 80) | A percentage of the scene's width, at the size set on the See it on block |
| Sticker tilt | -4 deg (-15 to 15) | Its starting angle |

## How the size works

Measure this once for each scene: at the size in **The size this placement is set for**, how much of the scene's width should the sticker fill? That's its **Sticker width**. The theme works out the rest:

> Width on screen = **Sticker width** × the shopper's size ÷ **The size this placement is set for**

So with a width of 30% set for size 3, a 4″ sticker fills 40% of the scene and a 2″ sticker fills 20%. The width stops at 80% of the scene, however big the size.

**Use the same units as your Size option.** If your sizes are 25 mm, 50 mm and 75 mm, set the number to 50, not 3. Left at 3, every size hits the 80% limit and they all look the same. A product with no size option, or a size with no number, stays at the width you set.

## See it on spotlight

The section for the home page: a lid with the stage, tabs and pad on one side and your words on the other, ending in a button to the product. All three presets have one.

| Setting | Default | What it does |
| --- | --- | --- |
| Product | Empty | The sticker to show. Shoppers see nothing until you choose one and give a scene an image. |
| Eyebrow | "See it on" | |
| Heading | "Try it before it sticks" | |
| Intro text | "Drag it onto a laptop, a bottle or a notebook, and find its spot." | |
| Button label | "Shop this sticker" | The link to the product. Leave it empty for no button. |
| The size this placement is set for | 3 | As on the block. There's no size picker in this section, so the sticker stays at its **Sticker width** unless that product's picker is on the same page, such as in a Featured product section. |
| Background | Surface | Any ground. This section is always a lid, on Page and Surface too. |

It takes up to five **Scene** blocks, as above. These scenes are separate from the ones on the product page. The presets' scene labels suit each preset, so rewrite them along with the images: "Planner page", "Notebook" and "Envelope" (Washi), or "Laptop lid", "Denim jacket" and "Backpack" (Retro).

The block can also go in a **Featured product** section, where it's narrower. With **Theme settings › Finish and size › Show finish and size previews** off, See it on still works, but the sticker stays at one size with no sheen.