Code Editor: Edit theme files directly in the admin panel

The Code Editor is Shoporama's built-in editor for theme files. With it, you can open, edit, create, and delete the files in your theme directly in the browser, without installing any software and without logging in via SFTP. It’s the fastest way to make a small change to a template, a piece of CSS, or an automated email.

Note: This is a technical feature. You’re working directly in the files that make up your online store, and there’s no version history or undo button on the server. A single missing character can immediately cause an error page for all your customers. If you haven’t worked with HTML, CSS, or Smarty before, you should use the standard design tools described later in this article, or have your theme developer make the correction.

Where to Find the Code Editor

Click Store in the left-hand menu, expand Design, and select Code Editor. The page consists of a file list on the left and the editor itself on the right.

What you can edit

The code editor displays the themes located in your store’s theme folder—that is, the themes you or your developer have uploaded via SFTP. If you have multiple themes, each theme is displayed as its own group with the theme’s name as the heading. Only files with these five extensions appear in the list:

• .html are the theme’s templates—the pages your customers see
• .css controls colors, fonts, and layout
• .js are JavaScript files
• .txt and .ini are text and configuration files

Images and fonts are not displayed; you upload those under Store, Design, Files. The templates are typically located in a “templates” folder, so “templates/product.html” is the product page, “templates/basket.html” is the shopping cart, and “templates/mails/invoice.html” is the order confirmation. The names may vary slightly from theme to theme. If you only need to edit the text in the emails, read the guide to email templates in your theme first.

Important: Shoporama’s built-in default themes and themes purchased from the Theme Store are not displayed in the code editor because they are located outside your shop’s own theme folder. To edit one of them, you must first upload your own copy of the theme via SFTP.

How the page is structured

• The file list on the left side, with the “Filter files...” field at the top. For example, if you type “product,” only files with “product” in the name will be displayed.
• "Create New File" at the bottom of each theme group.
• A padlock next to a filename means the file is not writable and therefore cannot be opened. At the bottom is the explanation: “The file is not writable—set the permissions via SFTP.”
• The editor field with line numbers and syntax highlighting. CSS and JavaScript files have their own syntax highlighting, while all other files are displayed with HTML syntax highlighting.
• The Save, Delete, and Full Screenbuttons, plus a status message that briefly displays “Saved!” or “Error, your file was not saved!”.

How to save a change

1. Click the file name in the list. The content is loaded, and the file name appears above the editor field.
2. Make your edits.
3. Click Save, or press Cmd+S on a Mac and Ctrl+S on Windows.
4. The “Saved!” message flashes briefly. If “Error, your file was not saved!” appears instead, the change was not saved, and you should check whether the file is writable.

There is no "Draft" or "Publish" button. When you click Save, the file is saved immediately, and the store uses the new version the next time the page is loaded. If you switch files without saving, the editor asks, “You have unsaved changes. Do you want to continue?” However, if you close the tab or reload the page, the changes will be lost without warning.

Create and Delete Files

At the bottom of each theme group, you’ll find “Create New File.” You’ll be prompted to enter a filename, and you can include a path, such as templates/my-page.html, if the file is to be placed in a subfolder that already exists. The file is created empty, and the list reloads. The "Delete" button deletes the file you have open. You’ll first be asked, "Are you sure?", and then the file is gone. There is no Recycle Bin, and the file cannot be recovered from Shoporama afterward.

Is there version control or an undo feature?

No. The code editor does not save previous versions, and there is no history to revert to. When you save, the old version is overwritten, and when you delete, the file is gone. This is the most important difference between the code editor and the rest of the admin panel, where you can usually undo or restore changes. Undoing with Cmd+Z or Ctrl+Z only works within the editor as long as the page hasn’t been reloaded.

Therefore, for your own safety, before you make any changes:

• Select the entire contents of the file, copy them, and save them to a text file on your own computer.
• Make a full copy of the theme via SFTP if you need to make major changes.
• Make small changes one at a time, and check the store after each one. That way, you’ll know exactly what went wrong if something does.

Theme files are written in Smarty, not regular HTML

The files look like HTML, but they also contain template code that retrieves data from your store. Shoporama uses the Smarty template language, and in our system, Smarty code is written with an opening square bracket around the curly braces:

<{$product->getName()}>

<{if $product->getPrice()}>
    <p><{$product->getPrice()}> kr.</p>
<{/if}>

<{foreach $products as $product}>
    <{$product->getName()}>
<{/foreach}>

Note that it’s written as <{$foo}> and not just curly braces, as in many other systems. If you copy code from the web, this is often exactly what causes it to fail. Every <{if}> must have a <{/if}>, and every <{foreach}> must have a <{/foreach}>. If you forget one, you’ll typically get an error page across the entire store, so always double-check before saving.

For an overview of the variables and methods you can use in the templates, see Variables in a Shoporama Theme.

The most important warnings

• You’re working on the live store. If you save an error on Friday at 8:00 PM, your customers will see it on Friday at 8:00 PM.
• There is no “Undo” function on the server. Make a copy of the file’s contents before editing it.
• Your changes may be overwritten by a theme update. If you receive a new version of the theme from your developer, or if you upload the theme yourself via SFTP, the files will be replaced, and your changes will be lost. Always make a note of what you’ve changed.
• Make sure you’re editing the active theme. The file list shows all themes in the theme folder, not just the one currently in use. The active theme is selected under Store, Design, Theme.
• Never delete a file if you don’t know its purpose. If a template that the store expects is missing, the entire site may crash.
• The editor does not save automatically. If you close the tab with unsaved changes, they’re lost.

Is there an easier and less risky way?

Much of what people go into the code editor to do can be done elsewhere in the admin panel without any risk at all. This saves both time and potential downtime, so check here first:

• Store, Design, Theme Settings for colors, logos, and the options provided by the theme itself.
• Store, Design, Stylesheet for your own CSS adjustments.
• Store, Design, Texts for static text and translations, and Page Builder to create pages using pre-built blocks without code.
• Account, Web Store, HTML Fields for tracking scripts and similar elements that need to be placed in the head or body. See the guide to HTML Fields.

For those with technical expertise

The editor is built on CodeMirror. The following shortcuts work:

• Cmd+S or Ctrl+S saves, even when the cursor is outside the editor field.
• Cmd+Z or Ctrl+Z undoes, Shift+Cmd+Z or Ctrl+Y redoes.
• Cmd+F or Ctrl+F searches; Cmd+G or Ctrl+G finds the next occurrence; and Alt+G jumps to a line number.
• Ctrl+Space provides autocomplete for HTML tags and attributes.
• F11 toggles full-screen mode on and off; Esc exits it. In full-screen mode, there’s a toolbar with Save and Close.

A few more things: new files can only be created in existing folders, so new folders must be created via SFTP. If you save a file that’s completely empty, the editor may display “Error, your file was not saved!”, even though the file was actually cleared. If your store is live, completed HTML pages are cached for up to four hours for regular visitors, while the cart, address, shipping, and payment information are never cached in this way. If your theme is still running Smarty 2, some functions are written differently; see the Smarty 4 guide.

Frequently Asked Questions

My store shows an error after I save. What should I do?

Replace the file with the old version if you’ve copied it. If you haven’t, check for a missing closing tag in a Smarty block—that is, a <{if}> without a <{/if}>. If you can’t find the error, email support@shoporama.dk with the file name and what you changed.

Can I undo a change the next day?

No. Previous versions aren’t saved, and there’s no history to revert to. Cmd+Z and Ctrl+Z only work in the editor while the page is still open. A copy on your own computer, or a full copy of the theme via SFTP, is the only real safeguard.

Why can’t I see my theme in the list?

The code editor only displays themes in your own store’s theme folder. If you’re using one of Shoporama’s default themes or a theme purchased from the Theme Store, the files are located elsewhere and cannot be edited here. You must first upload your own copy of the theme via SFTP.

How do I know which theme is active?

Go to Store, Design, Theme. That’s where you select which theme the store uses. The file list in the code editor shows all your themes, so it’s a common mistake to spend time editing a folder that isn’t even in use.

Why can’t I see my changes in the store?

First, try a hard refresh with Cmd+Shift+R or Ctrl+Shift+R so the browser reloads the CSS and JavaScript. If the store is live, cached pages may remain visible to regular visitors for up to four hours. And if you’ve made changes to a theme that isn’t the active one, nothing will happen.

Why is there a padlock next to some files?

The padlock means the file is not writable, so it cannot be opened or saved from the editor. This is due to file permissions on the server, which can be adjusted via SFTP. If you don’t have SFTP access yourself, ask your developer for it.

Do I need to use the code editor to add a tracking script?

No, use the HTML fields under Account, Web Store, HTML Fields. That way, the script is stored in the store’s settings and will survive a theme update. If you place it directly in a theme file, it will disappear the day the theme is re-uploaded.

Can I roll out the same change to all my online stores at once?

No. The code editor only works in the store you’ve selected in the admin panel, so the change must be applied to each store individually. If you have multiple stores using the same theme, it’s better to incorporate the change into the theme itself and upload it to all stores via SFTP.