Annotations

Annotations are visual callouts overlaid on a product image: an indicator (a line, an arrow, a circle, a custom SVG, or a custom image) paired with optional text. Use them to highlight key features ("waterproof seam"), explain how a product works, or label parts of a layout.

You can find annotations under Elements > Annotations in the LinkSpot admin. The internal page title is Feature Annotations.

Create an annotation

1. From the LinkSpot dashboard, click Elements in the top navigation.

2. Find the Annotations card and click the add button.

3. Pick a product.

4. Pick an image to annotate.

5. Click on the image at the point you want the annotation. A marker is placed at that point.

6. The annotation form opens.

Configuration options

Content

• Text. The label that appears next to the indicator. Up to 200 characters, supports markdown. Required for most indicator types; optional when the indicator is a custom SVG or custom image.

• Indicator. Pick the visual marker. Options include solid line, dashed line, arrow, circle, plain label, label with background, custom SVG, and custom image.

  • For circles, pick a sub-style: dashed, outlined, or filled.

  • Custom SVG and custom image are available in Growth plan. The pickers pull from Settings > Assets.

Indicator options

When the indicator is anything other than plain or label, additional controls appear:

• Position (where the indicator sits relative to the text: above, right, below, left).

• Rotate and flip (for indicators that support it; a slider for 90° rotation steps and a flip-horizontal button).

• Scale (20% to 300%, for indicators that stretch).

• Images direction and spacing (when multiple custom images are selected; controls how they stack).

• More options (collapsible): fine spacing, indicator alignment, optional pointer for line and arrow indicators.

Text options

When text is present, you control how it renders:

• Text size (0.6 to 2 em).

• Alignment (default, left, center, right).

• Max content width (in pixels or auto).

Color options

• Annotation color scheme (inherit, light, dark, custom).

• Indicator custom color (for indicators that accept color).

• Background applies on (the text or the entire annotation, for the custom scheme).

• Adaptive contrast (a toggle that uses a difference blend mode to keep the annotation legible against any image background).

Advanced

• Hide on (show on all devices, desktop only, or mobile only).

Positioning the annotation

You place an annotation by drag and dropping on the image in the preview, but you can also adjust its position precisely from this section.

Desktop and mobile positions

The position section is tied to the desktop / mobile switch in the preview header. When the preview is showing the desktop view, the position fields edit the desktop coordinates. Switch to the mobile view to edit the annotation's position specifically for smaller screens.

An annotation's mobile position inherits from its desktop position by default. Once you save a mobile-specific position, a Reset mobile positions button appears in this section while you are in the mobile view, so you can drop the override and go back to inheriting from desktop.

Manually adjust position

Two number fields let you set the annotation's coordinates as percentages of the image:

• Horizontal (%). Distance from the image's left edge.

• Vertical (%). Distance from the image's top edge.

The form description reads: "Manually adjust the position of the annotation using these controls." Both values accept decimals in 0.5% steps. Adjusting either field moves the annotation in the preview in real time, and writes to the desktop or mobile coordinates depending on which view is active.

A third field, Anchor point, controls which corner of the annotation box is pinned to the coordinates: top left (default), top center, top right, bottom left, bottom center, or bottom right. Changing the anchor point keeps the annotation in place visually; the coordinates are recalculated so the annotation does not jump when you switch anchors. This is useful when the annotation grows after edits and you want it to extend in a specific direction without moving its visual position.

Preview options

The preview panel has a gear icon in its header that opens a small menu of display options. These options only affect the preview, not the saved annotation or how it renders on the storefront.

• Focus view. When on, the preview shows only this annotation and hides the other annotations on the same image. Useful when an image has many annotations close together and you need to focus on one. Saved in your browser; persists across sessions on this device.

• Highlight. Visually emphasizes the annotation in the preview so it is easier to see relative to the placeholder image. Saved in your browser.

• Snap to grid. When on, dragging the annotation in the preview snaps to a grid for easier alignment. When enabled, a Grid spacing field appears (2% to 10%). Saved in your browser.

• Scale elements. Number field from 0.3 to 1.0 (step 0.05). Scales the annotation in the preview so its size matches what it will look like on your storefront product images. Saved to your shop's settings, so it persists across forms and devices.

• Preview aspect ratio. Separate dropdown in the preview header (not inside the gear menu). Lets you pick the aspect ratio of the placeholder image so the preview frame matches the proportions of your real product photos. Choices range from Natural (default) through Square, several Portrait and Landscape ratios, Widescreen, and Ultra Landscape.

See Elements preview settings for more on what each preview option does.

Global settings

LinkSpot has a Settings > Annotations page that controls the defaults applied to every annotation you create. Individual annotations can override most of these from their own form; settings here are the fallbacks.

You can find them under Settings > Annotations in the LinkSpot admin.

Available settings:

• Intro Transition. The animation used when an annotation first appears on the storefront.
• Annotation default color scheme. The color scheme applied to annotations whose own color scheme is set to inherit.
• Indicator line thickness. The default thickness of line-style indicators (solid line, dashed line, arrow).

Changes here apply to every annotation in your shop on the next storefront render, unless an annotation has an explicit override.

Storefront behavior

Annotations render at the saved spot on the saved image. The indicator and text appear together; on mobile, the layout adapts to fit smaller screens. Adaptive contrast keeps the annotation visible against busy or dark image backgrounds without you needing to pick a specific color.

Plan limits

• Products with annotations.

• Annotations per image.

• Custom indicators (custom SVGs and custom images) are unlocked at higher plans under Growth plan.