How To Search Liquid Css Template In Shopify

Editing theme code

This page was printed on Nov 29, 2021. For the current version, visit https://help.shopify.com/en/manual/online-store/themes/extend/theme-code.

You can edit your theme code to make detailed changes to your online store. Most of the files that make up a theme contain Liquid, Shopify's templating language. Theme files also contain HTML, CSS, JSON, and JavaScript. Edit the code for a theme only if you know HTML and CSS, and have a basic understanding of Liquid.

If you edit your theme's code, then you might make it ineligible for automatic upgrades. You should only edit your theme's code if you can't make the changes that you need using an HTML or Liquid setting or a Shopify app.

Before you customize your theme

Before you customize your theme, it's a good idea to do the following tasks:

Duplicate your theme to create a backup copy. This makes it easy to discard your changes and start again if you need to.
Make sure that you understand what level of support is available.
Learn about the requirements and best practices for uploading images.

Edit your theme code

You can edit the code for your theme.

Steps:

From your Shopify admin, go to Online Store > Themes.

From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.

From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.

Click Actions > Edit code.

The code editor shows a directory of theme files on the left, and a space to view and edit the files on the right.

You can expand the code editor to fill the screen by clicking the expand icon:

You can return the page to normal by clicking the collapse icon:

When you click a file in the directory on the left, it opens in the code editor. You can open and edit multiple files at once. Any files that you modify will show a dot next to the file name:

The directory of theme files showing a purple dot next to the files that have been modified

This can help you to keep track of where you have made changes.

Roll back to an older version of your theme

If you've changed theme files and need to revert them, you can roll back .liquid files individually to a time and date before you made the changes.

From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.

From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.

From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.

Under the Templates header, click into one of the .liquid files you have edited recently.
Click Older versions next to the .liquid file name.
Click the drop-down menu to select an older version. Clicking a datestamp will roll the code back to that saved version.
Optional: click Preview and see if the error was fixed.

Dark mode

While the code editor is expanded to fullscreen, you can toggle the editor color scheme between Light and Dark by clicking the buttons at the bottom of the page.

To learn about the benefits of using the dark editor, see The Power of the Dark Side: Dark User Interfaces on the Shopify Partners Blog.

Theme code customization tutorials

You can follow theme code customization tutorials to guide you in making changes to your online store. The tutorials are organized based on the type of page or feature that they modify.

Theme customization tutorials are divided by the version of theme architecture that they use. Learn how to identify your theme architecture version.

Online Store 2.0 theme customization
Vintage theme customization

Get help with customizations

If you need help with making changes to your theme, then you can contact your theme's developer for support.

To see what other resources are available to help you with theme customizations, see Additional resources for theme support.