logo
ButtonsButtons

Buttons

Place interactive call-to-action buttons on product gallery images to open links, trigger media modals, or fire custom JavaScript events.

Buttons are interactive call-to-action elements placed on top of a product gallery image. A shopper can tap or click them to open a link, view media in a modal (image or video), or trigger a custom JavaScript event for integrations.

You can find buttons under Elements > Buttons in the LinkSpot admin.

Create a button

  1. From the LinkSpot dashboard, click Elements in the top navigation.
  2. Find the Buttons card and click the add button.
  3. The button form opens.

The form has three tabs:

  • Content — what the button does and what it says.
  • Design — how the button looks and where it sits on the image.
  • Advanced — display priority.

Content options

Button type

  • Text button. A button with text (up to 200 characters, supports markdown).
  • Image button. An uploaded image used in place of text. Visual identity is set by the image.

Action

Pick what happens when the button is clicked:

  • Open link. Opens a URL. The link can be a static URL or pulled from a per-product metafield (plan-gated). A custom metafield source is available in Scale plan.
  • Open media modal. Opens an image or video in a modal. The media can be a static asset or pulled from a per-product metafield (same plan gating).
  • Fire JavaScript event. Dispatches a custom JS event with the name you specify. Useful for triggering chat widgets, analytics, or other third-party integrations.

Design options

The Design tab controls the visual presentation:

  • Corner radius (default, sharp, soft, rounded).
  • Color scheme (inherit, light, dark, custom). Not available for image buttons.
  • Button style (primary, primary outlined, outlined, link). Not available for image buttons.
  • Icon. Pick from built-in icons or custom SVGs from Settings > Assets.
  • Icon only. Hide the text and show only the icon.
  • Button size (small, medium, large).
  • Position on image (top-left, top-right, bottom-left, bottom-right).
  • Unread button ring (image buttons only) — a visual ring accent to draw attention.

Advanced options

  • Display priority. When more than one button targets the same image, the one with the highest priority wins.

Storefront behavior

Once saved, the button renders at the chosen position on the chosen image (or on every image, depending on targeting). Clicking the button executes the configured action. Modal media uses LinkSpot's built-in modal viewer; custom JS events fire on the page and can be picked up by any listener you have on the storefront.

Plan limits

  • Buttons total count.
  • Advanced targeting (collections, tags, per-product metafield source) under Growth plan.
  • Custom metafields (point Link or Media at any product metafield) under Scale plan.