Theme sections
Install the LinkSpot Grid Section in your theme, with one click or by hand, to add a flexible, responsive container where LinkSpot app blocks can be placed.
The LinkSpot Grid Section is a Liquid section you can add to your theme that gives you a responsive grid container for LinkSpot app blocks. It lets you build a custom layout (a media-rich product feature grid, a landing page bento, a carousel of media tiles, a single full-width media tile) and drop any LinkSpot app block into individual grid cells.
You can install and manage the section in the LinkSpot admin under Settings > Compatibility > Theme sections.
What it is
The Grid Section is made up of two Liquid files:
- Grid section (
linkspot-grid.liquid, goes in your theme's/sectionsfolder). The responsive layout itself. You configure the layout (grid or carousel), columns, rows, and gap from the theme editor. - Grid item block (
_linkspot-grid-item.liquid, goes in your theme's/blocksfolder). A private block that lives inside the grid. It holds a media background (image or video) and accepts LinkSpot app blocks (such as Hotspot, Annotation, or Product Badge) layered on top.
The leading underscore on the grid item filename is required by Shopify; it marks the block as private to the grid section.
Once installed, the section shows up in the theme editor's section picker, under the LinkSpot category, as Media grid, Media carousel, or Single media.
Install the section
LinkSpot can add the two files to your theme for you, or you can add them yourself in the theme code editor. Both give the same section in the theme editor.
One-click install is available in Growth plan. On lower plans the install button is locked, and the Manual install tab stays available.
LinkSpot writes only the two LinkSpot Grid files into the theme you pick. It does not change any other file in that theme, and it writes only when you click Install in this theme, Update, or Remove.
Install in a theme
- Go to Settings > Compatibility > Theme sections and keep One-click install selected.
- Under Choose theme to install the section in, pick a theme. The list includes your current theme, drafts, and development themes. If a theme you just added is missing, click the refresh button next to the list.
- Check Installation status. A theme without the section shows Not installed.
- Click Install in this theme.
- The first time you install, Shopify asks you to allow LinkSpot to edit your theme files. Approve the request. If you decline, LinkSpot writes nothing, and you can use the Manual install tab instead.
When the install finishes, the status changes to Installed and the section is ready in the theme editor.
Each theme has its own status. To add the section to another theme, pick that theme in the list and click Install in this theme again.
Update the section
Update available means the LinkSpot Grid files in the theme differ from the latest version. That happens after LinkSpot updates the section, or after someone edits the files in the theme code. Hover the badge to see this explanation in the app.
- Click Update.
- Confirm in the dialog.
The update replaces both files with the latest version. Edits made to those files in the theme code are lost. The section settings and content you set up in the theme editor stay as they are.
Remove the section
- Click Remove.
- Confirm in the dialog.
LinkSpot deletes the section and its grid item block from the selected theme. You can install them again at any time.
If a template still uses the section, LinkSpot deletes nothing and lists those templates instead. Click Open theme editor in the warning, remove the LinkSpot section from each listed template, save the theme, then click Remove again.
Why a manual install
Use the manual install in these cases.
- Your plan does not include one-click install.
- You prefer not to give LinkSpot permission to edit your theme files.
- A developer or agency manages your theme code and wants to add the files themselves.
The manual install means placing two Liquid files into your theme's folders yourself. LinkSpot provides both files for you to download or copy. If you are comfortable editing theme code, the install takes a few minutes. If not, send the install steps to the developer or agency that maintains your theme.
Shopify explains how to edit theme code in their help center article Edit theme code.
Install steps
- On the Theme sections page in LinkSpot, select Manual install.
- Download both Liquid files, or copy their contents to the clipboard using the Copy code button on each:
_linkspot-grid-item.liquidlinkspot-grid.liquid
- In your Shopify admin, go to Online Store > Themes, find your theme, and open the code editor from the three-dot menu on the theme card.
- Place
_linkspot-grid-item.liquidin your theme's/blocksfolder. Create the folder if it does not exist. - Place
linkspot-grid.liquidin your theme's/sectionsfolder.
- Save the files.
Add the files in this order. The grid section's schema references the _linkspot-grid-item block, so if you save the section while the block file is still missing, Shopify reports a schema error and the section will not be usable in the theme editor.
A manual install does not update itself. When LinkSpot releases a new version of the section, download the files again and replace the ones in your theme. If your plan includes one-click install, the One-click install tab also shows the status of files you added by hand, and Update replaces them with the latest version.
Uninstalling LinkSpot keeps the section files in your theme. LinkSpot loses access to your theme as soon as the app is uninstalled, so it cannot remove them afterwards. Remove the section from each theme first, with Remove on the One-click install tab, or in the code editor by deleting linkspot-grid.liquid and then _linkspot-grid-item.liquid.
Use it in the theme editor
After the files are installed:
- Open your theme in the theme editor.
- Click Add section and open the LinkSpot category.
Theme editor section picker with the LinkSpot category open, listing Media grid, Media carousel and Single media - Choose the section that fits your layout.
- Media grid for a grid of media items. It starts with one large item next to two smaller ones.
- Media carousel for a row of items that visitors swipe or scroll, with arrows on desktop.
- Single media for one full-width media item.
- Configure the section from the settings on the right. Layout switches between Grid and Carousel. In a grid you set Columns, Grid rows, and Gap (px). In a carousel, Columns sets how many items are visible at once and Show arrows turns the desktop arrows on or off.
- Inside each grid item, add LinkSpot app blocks (Hotspot, Annotation, Product Badge, Collage, Product Set) the same way you add any other app block.
- Save the theme.
The grid renders on whichever pages the template is used for.
When to use this
Use a Theme section when:
- You want to build a custom layout that uses LinkSpot elements as the visual foundation, not as overlays on existing product images.
- You want a media grid or carousel (bento, gallery, feature row) with interactive overlays on each cell.
- The default placement options for LinkSpot elements (on product gallery images, or as a new slot in the product gallery) do not fit what you are building.
The section fits both theme generations. On Dawn and older themes it supplies a container the theme does not have. On Horizon and other modern themes you could build a similar layout out of group blocks, but the section gives you the grid and its media cells ready made, with the columns, rows, and gap configured in one place.
You do not need a Theme section for the common cases (a hotspot on a product image, a sale badge on a gallery image, a collage added to the product gallery). The default app embed handles those.