Pins

Pins are clickable markers placed on a product image. When a shopper hovers (or taps on mobile), the pin reveals additional content: a text description, a link, or a card for another product. Use pins to highlight features, cross-sell complementary products, or surface information without cluttering the image itself.

You can find pins under Elements > Pins in the LinkSpot admin. The internal page title is Shoppable Pins.

Create a pin

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

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

3. Pick a product from your catalog.

4. The pins page for that product opens. If the product has more than one image, pick the image you want to add the pin to.

5. Click on the image where you want the pin to appear. A marker is placed at that point.

6. The pin form opens.

Configuration options

The pin form is organized into a few sections.

Content type

Pick what the pin reveals when a shopper interacts with it:

• Product. The pin links to another product from your catalog and shows a card with that product's image, title, and price. Useful for cross-selling related items.

• Text. A short rich-text description (up to 400 characters), with optional markdown formatting. You can add an optional link (up to 200 characters).

• Tag. A small label drawn directly on the image, up to 40 characters. Supports merge variables like product.title, product.price, and product.priceCompare.

Linked product

When the content type is Product or Tag, pick the product the pin links to. The picker shows quick-select chips for products you already use, so it is fast to reuse the same linked product across multiple pins.

Pin style

The Pin style section controls the marker itself:

• Color scheme (inherit, light, dark, custom). Custom colors fall back to the values you set globally in Settings > Pins.

Pin advanced settings

The Advanced section lets you fine-tune behavior:

• Start open. The pin's content card is shown by default when the page loads.

• Highlight text. A short label (up to 50 characters) that rotates around the pin to draw attention.

• Text spacing, text size, text color for the highlight text.

• Loop pin animation. A pulsating animation that draws the eye to the pin.

Positioning the pin

You place a pin by drag and dropping it 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 pin's position specifically for smaller screens.

A pin'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 pin'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 pin using these controls." Both values accept decimals in 0.5% steps. Adjusting either field moves the pin in the preview in real time, and writes to the desktop or mobile coordinates depending on which view is active.

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 pin or how it renders on the storefront.

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

• Highlight. Visually emphasizes the pin 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 pin in the preview snaps to a grid for easier alignment. When enabled, a Grid spacing field appears (2% to 10%). Saved in your browser.

• 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 > Pins page that controls the defaults applied to every pin you create. Individual pins can override most of these from their own form; settings here are the fallbacks used when a pin's option is set to inherit.

You can find them under Settings > Pins in the LinkSpot admin. The page description reads: "Configure how the pins are displayed and interacted within your product gallery."

Available settings:

• Pin style. The default visual style for pins.
• Text pin style. Default style for pins whose content type is Text.
• Tag pin style. Default style for pins whose content type is Tag.
• Custom SVG. Pick a custom SVG from your Assets library to use as the pin marker.
• Pin size. The default size of pin markers.
• Animate pin on hover. Default for the hover animation on the storefront.
• Loop pin animation. Default value for the looping pulsation animation.
• Pin interaction event. Sets whether a pin opens on hover, tap, or click.

Changes here apply to every pin in your shop on the next storefront render, unless a pin has an explicit override for that setting.

Storefront behavior

Once saved, the pin appears on the configured image of the configured product. Shoppers see the marker; hovering or tapping reveals the configured content. Pins inherit their default visual style from Settings > Pins; per-pin overrides are applied on top.

Plan limits

Pins are gated by two limits:

• Products with pins. The number of distinct products that can have pins on them.

• Pins per image. The maximum number of pins on a single image.

A higher plan increases both limits.