App blocks

App blocks let you place (some) LinkSpot elements anywhere in your theme through Shopify's theme editor, beyond the default placement on the product page. The App blocks page lists every block LinkSpot ships and gives you a one-click button to insert each one into your theme.

You can find it in the LinkSpot admin under Settings > Compatibility > App blocks.

A demo of all LinkSpot's app blocks can be seen at https://demo.linkspotapp.com/pages/app-blocks .

What is an app block

An app block is a small piece of UI an app contributes to your theme. You add app blocks through the theme editor the same way you add the theme's own sections and blocks. LinkSpot's app blocks let you place LinkSpot elements at a specific spot in your theme, beyond where they would render automatically.

For most elements you do not need an app block: pins, annotations, badges, and the rest already appear on the product page through the LinkSpot app embed. Use an app block when:

• You want a badge in a section other than the product gallery (for example, in a hero banner).

• You want a collage in a specific spot on the product page instead of replacing a product image.

• You are building a custom layout (such as a landing page) and want a LinkSpot element inside it.

Available app blocks

The page shows five app blocks as cards, each with a preview image, a short description, and an Add to theme editor button:

• Pin. Place interactive pins on product images.

• Annotation. Add explanatory text annotations anywhere on a product image.

• Product Badge. Show contextual badges (new, bestseller, sale, custom) on product images and cards.

• Collage. Build a collage of products, media, and links on any page or section.

• Product Set. Render a curated product set as a button popup, card carousel, or links list.

The Add to theme editor button is gated by plan. If your plan does not include app blocks, the button is locked and a tooltip tells you which plan is required to unlock them.

The Product Set card carries a second button, Generate template. It builds the code for the block's Block template field, with the products the block should show, their copies and their variants. See Products, copies and variants.

How to add an app block to your theme

1. Find the card for the block you want to add.

2. Click Add to theme editor. A popup opens the Shopify theme editor on the product template with the selected app block ready to be added in a new Apps section.

3. The theme editor places the block where Shopify allows. You can drag it to a different section or template once it is added.

4. Configure the block's own settings from the theme editor sidebar (which element to show, alignment, and other options depending on the block).

5. Click Save in the theme editor.

If your browser blocks the popup, allow popups for the LinkSpot domain and try again.

Where you can place a block

How much freedom you have depends on the theme. Themes built on theme blocks accept a block almost anywhere; older themes only accept one in the few spots the theme author allowed.

Modern themes (Horizon and newer)

Themes built on theme blocks (the Horizon family and most themes released from 2026 on) let you nest blocks inside other blocks. That is enough to build an interactive image without touching theme code:

1. In the theme editor, open the template and section you want to work on.

2. Add a Group block that holds the image. Setting the image as the group's background works, and so does adding an Image block inside the group.

3. Add the LinkSpot block (Pin, Annotation, Product Badge, Collage, or Product Set) inside that group.

4. Position the element from the block settings, then click Save.

The group supplies the image, the LinkSpot block supplies the overlay on top of it. LinkSpot covers the whole group, not the image inside it, so keep the image filling the group. If the group also holds a heading, a text block, or padding around the image, the element positions you set will not line up with the image.

The header and the footer are the exception: LinkSpot blocks are disabled in those two groups.

To check whether your theme works this way, open the theme editor and see whether a section or a block offers to add new blocks inside it.

The LinkSpot Grid section is worth considering on these themes as well. It works on Horizon, and it saves you from assembling a responsive media grid out of group blocks: you get the cells, the columns, the rows, and the gap in one place. See Theme sections.

Classic themes (Dawn and older)

Dawn and other older Online Store 2.0 themes accept app blocks only where the theme author allowed them, usually the product information section and a standalone Apps section. Neither of those is a container you can give a background image to, and that is the placement most LinkSpot elements need.

On these themes the LinkSpot Grid section is the way to place app blocks. It is not an optional extra. Without it, a classic theme gives you nowhere to put a Pin, an Annotation, a Product Badge, a Collage, or a Product Set over your own image.

The Grid section is made of two Liquid files you add to your theme. Once they are in place, you get:

• A Media Grid or Single Media section in the theme editor's section picker, with columns, rows, and gap you control.

• A grid cell that holds an image or a video as its background.

• A drop target inside each cell for LinkSpot app blocks, layered on top of the media, the same result a group block gives you on Horizon.

The two files have to be installed by hand, because Shopify does not let an app write files into a theme. LinkSpot gives you both files to download or copy, and the install takes a few minutes in the theme code editor.

Start here: Theme sections covers the section files, the install steps, and the theme editor settings.

Where blocks appear

Once added through the theme editor, an app block renders on every page that uses the section it lives in. For example, a Product Badge block added to the product template appears on every product page that uses that template. A Pin block added to a custom page section appears only on that page.

You configure the elements (pins, badges, etc.) themselves from the Elements section of the LinkSpot admin. The App blocks page only handles inserting the block into the theme; the data the block displays comes from your element configurations.

CSS selector

The Pin, Annotation, Product Set, and Product Badge blocks have a CSS selector field in their settings, under the Developer header. On the Product Badge block, it appears once you set Placement to one of the custom selector options.

A block normally renders where you placed it, inside its parent container. The CSS selector overrides that: paste a selector and the block attaches to the first element on the page that matches it, wherever that element sits in the theme's markup. Leave the field empty and the block falls back to its parent container.

Use it when the theme will not let you drop the block exactly where the element has to sit, for example inside a container that does not accept blocks. Finding the right selector means reading the theme's markup in the browser inspector, so this field is meant for developers. If the selector matches nothing on the rendered page, the block has nothing to attach to and the element does not appear.

The CSS selector field and the Block template field next to it are described in full in App blocks advanced features.