> For the complete documentation index, see [llms.txt](https://docs.linkspotapp.com/llms.txt).
> Use it to discover all available pages before exploring further.
# 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 `/sections` folder). 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 `/blocks` folder). 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
1. Go to **Settings > Compatibility > Theme sections** and keep **One-click install** selected.
2. 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.
3. Check **Installation status**. A theme without the section shows **Not installed**.
4. Click **Install in this theme**.
5. 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.
1. Click **Update**.
2. 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
1. Click **Remove**.
2. 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](https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/edit-theme-code).
### Install steps
1. On the **Theme sections** page in LinkSpot, select **Manual install**.
2. Download both Liquid files, or copy their contents to the clipboard using the **Copy code** button on each:
- `_linkspot-grid-item.liquid`
- `linkspot-grid.liquid`
3. 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.
4. Place `_linkspot-grid-item.liquid` in your theme's `/blocks` folder. Create the folder if it does not exist.
5. Place `linkspot-grid.liquid` in your theme's `/sections` folder.
6. 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:
1. Open your theme in the theme editor.
2. Click **Add section** and open the **LinkSpot** category.
3. 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.
4. 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.
5. Inside each grid item, add LinkSpot app blocks (Hotspot, Annotation, Product Badge, Collage, Product Set) the same way you add any other app block.
6. 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.