Manage your template: Code Editor

📖 Customers can manually customize the template appearance by editing the styling code. This article will show you how to use the Code Editor.

âš  This feature is applied to customers using the Boost app's TURBO version and template version 1.6.1 and above.

On this page

What is the Code Editor

The code editor is a page in the Shopify admin that lets merchants view and edit the code for their themes.

Screenshot 2024-06-11 at 15.24.21.png

To access the code editor (2 ways)

Method 1 (to edit the code for the currently active template):

  • Step 1: From the app’s dashboard, click the Integration icon > Shopify integration.
  • Step 2: Select the theme that you want to edit.

  • Step 3: Click on the ••• icon, and choose the “Edit code" option.

1.3 After select theme - Hover CTA.png

Method 2 (to edit the code for other templates):

  • Step 1: From the app’s dashboard, click the Integration icon > Shopify integration.
  • Step 2: Select the theme that you want to edit.
  • Step 3: Click on the ••• icon of the current template, and choose the “Manage template" option.
  • Step 4: Click on the ••• icon of any template, and choose the “Edit code" option.

To navigate the code editor

The code editor shows a directory of theme files on the left, and a space to view and edit the files on the right. 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.
You can also use the search bar to find specific files. Typing a keyword into the Search files... field filters the list of theme files.

To update template files

  • A dot will be shown next to the open tab when the user is active and working on the tab.

  • A dot will be shown next to the file name on the list when the user has finished updating the file.

To view the Compile template

When you change any settings in the Visual Editor or any other feature settings that impact your template (e.g., Display settings of Filters, In-collection search, etc.), the code displayed in the compiled template will be updated.

If you have any questions or need further assistance, please do not hesitate to contact our dedicated support team at support@boostcommerce.net.