App blocks advanced features

When you add a LinkSpot app block to your theme, the block exposes a basic set of settings in the theme editor sidebar. For most cases, the basics are enough. Some app blocks also expose two advanced fields for power users: CSS selector and Block template. This article explains when to use each.

CSS selector

The CSS selector field tells the app block where exactly to render, beyond Shopify's default block placement. Paste a CSS selector that targets the element on the page where you want the LinkSpot element to attach.

Available on:

• Pin block

• Annotation block

• Product Set block

• Product Badge block

How it works:

1. Open the block's settings in the theme editor sidebar.

2. Find the CSS selector field under the advanced options.

3. Paste the selector. For example, .product__media-wrapper to attach the element to the first matching product media wrapper on the page.

4. Save the theme.

Use this when the default block placement does not land where you need it: a specific container, an element inside a custom section, or a parent that does not directly accept blocks.

Block template

The Block template field applies a saved configuration (exported from a LinkSpot element in the admin) directly to the app block. The block then renders with the settings from the JSON you pasted, instead of using its own block settings.

Available on:

• Pin block

• Annotation block

• Product Set block

How to export a template from an element:

1. In the LinkSpot admin, open the element form for the pin, annotation, or product set whose settings you want to reuse.

2. Open the form's action menu and click Library.

3. Switch to the Export Block tab eg: https://d.pr/i/9PIjph .

4. Copy the JSON.

How to apply it to a block:

1. In the theme editor, open the app block's settings.

2. Find the Block template field under the advanced options. The placeholder reads: "Paste exported block template JSON here."

3. Paste the JSON.

4. Save the theme.

The block now renders using the exported settings, ignoring the block's own configuration. This is useful when you want to reuse the exact look and behavior of an existing element in a different spot on your theme, without re-entering all the settings.

Tips

• The CSS selector and Block template are independent. You can use one without the other, or both together.

• If the CSS selector does not match any element on the rendered page, the block has nowhere to attach and the element will not appear.

• A Block template overrides the block's own settings. To revert to using the block's settings, clear the Block template field.

• Block template JSON is portable: the same JSON works for the block on any theme as long as the block type matches.