> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/volume-themes/faq/performance-and-troubleshooting/an-app-or-some-custom-code-broke-my-layout.md).

# An app or some custom code broke my layout

How to tell whether an app, a piece of custom code or the theme broke your layout, and how to isolate it.

Before anything else, find out **what** broke it. Fifteen minutes of isolation saves a long back-and-forth.

{% stepper %}
{% step %}

### Duplicate the theme

**Online Store → Themes → … → Duplicate**. Do all testing on the copy so your live store is untouched.
{% endstep %}

{% step %}

### Turn off app embeds one at a time

Open the copy in **Customize** and use the **App embeds** panel at the bottom of the left sidebar. Disable them one by one, reloading the affected page after each. When the layout comes back, you have your culprit.
{% endstep %}

{% step %}

### Check the places code hides in Volume

Go through them in the order below. The first four are in the theme editor, so you can check them without touching any files.
{% endstep %}

{% step %}

### Test on an unmodified copy

Install a clean copy of Volume from the Theme Store onto the same store, preview it, and see whether the problem reproduces. If it does not, the cause is in your customizations rather than the theme.
{% endstep %}
{% endstepper %}

### Where custom code lives in Volume

Merchants and agencies rarely remember everywhere they pasted something. These are the places to look:

**Store-wide Custom CSS.** **Theme settings → Custom CSS** applies to every page of the store. Because it is stored with your settings rather than in a theme file, it survives theme updates and keeps applying to markup that may have changed since it was written. This is the most common source of "it broke after the update".

**Per-section Custom CSS.** Every section and block has its own **Custom CSS** field at the bottom of its settings, scoped to that section. Same story: it travels with updates.

**The Custom Liquid and Custom HTML sections.** Volume ships two sections for arbitrary code: **Custom Liquid** (one field, **Liquid**) and **Custom HTML** (one field, **HTML**). Both appear in the section list like any other section, so scan the page in the editor for them.

**The Custom Liquid block.** Most Volume sections — banners, rich text, product pages, the footer, the menu drawer, popups and more — accept a **Custom Liquid** block with the same **Liquid** field. These are easy to miss because they sit inside another section's block list rather than at the top level.

**The theme files.** In **Edit code**, check `layout/theme.liquid` first: apps that were uninstalled often leave `<script>` tags and stylesheets behind. Then look for any other file that was edited directly.

{% hint style="info" %}
If you are not sure which sections carry extra code, open **Edit code** and look at the JSON template file for the affected page (for example `templates/product.json`), plus `config/settings_data.json` for the store-wide CSS. Every `custom_css`, `custom_liquid` and `custom_html` value in use is listed there in one place.
{% endhint %}

### If it was custom code

Code added to the theme — by an agency, a freelancer, an app's "manual installation" instructions, or an earlier version of yourself — sits outside what a theme update accounts for. When a Volume release changes markup, class names or structure, those additions can stop matching and break the page. Code in files is overwritten by the update; code in the editor fields is not, so it quietly keeps targeting elements that have moved.

We are happy to look, but fixes to third-party or custom code are outside standard theme support. We will tell you what is causing it; changing it is a paid customization or a job for whoever wrote it.

{% hint style="warning" %}
Before reporting a layout bug, please check it on a clean copy of Volume with app embeds disabled, and tell us which page and which browser. That single step resolves most reports on its own.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://staylime.com/docs/volume-themes/faq/performance-and-troubleshooting/an-app-or-some-custom-code-broke-my-layout.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.