For the complete documentation index, see llms.txt. This page is also available as Markdown.

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.

1

Duplicate the theme

Online Store → Themes → … → Duplicate. Do all testing on the copy so your live store is untouched.

2

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.

3

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.

4

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.

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.

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.

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.

Was this helpful?