Themes: Create and edit your own theme templates

Themes is one of the oldest sections in the Shoporama admin. Here, you can create your own versions of individual files in your theme and have them override the corresponding files in the design you’re currently using. It’s also Shoporama’s original split-test tool.

Important note: This page only works if your online store runs on Smarty 2. If your store runs on Smarty 4, this menu item won’t appear at all, and the page will have no effect. In that case, skip directly to “Are you running Smarty 4?” below.

How to check if your store runs on Smarty 2 or Smarty 4

Smarty is the template language your theme is written in—that is, the code that retrieves product names, prices, and images for the pages your customers see. There are two versions: the older Smarty 2 and the current Smarty 4.

1. Click Account in the menu on the left, expand Webshop, and select General.
2. Find the “Smarty version” field. It will say either 2 or 4 (may not work with older templates).

If the field is grayed out, it will say “Controlled by the theme (Smarty 4),” and in that case, the theme itself determines the version. If you want to switch from 2 to 4, read the guide on switching to Smarty 4 first. If you’re running Smarty 2, it will also say “You’re using Smarty 2” at the top of the Themes page.

Are you running Smarty 4? Then you need to go somewhere else

On stores using Smarty 4, “Themes” has been intentionally removed from the menu. Smarty 4 only reads the theme’s files from the store’s theme folder, so a theme created here would never be used anyway. Instead, do what you used to do on that page here:

• Store, Design, Code Editor to edit the theme’s HTML, CSS, and JavaScript files. See the guide for the code editor.
• Store, Design, Page Builder to build pages using pre-made blocks, completely without code.
• Store, Design, A/B Testing to test two versions of a page against each other. The new A/B testing feature works with the Page Builder, distributes traffic based on weights, and can stop automatically once the result is clear.
• Store, Design, Theme Settings for colors, logos, and the options provided by the theme itself. See the guide to theme settings.
• Store, Design, Stylesheet for custom CSS adjustments, and Store, Design, Texts for fixed text.

What “theme” means here, and where to find the page

The word “theme” is used in two places in the admin panel, and they are not the same. Store, Design, Theme refers to your actual design—that is, all the files the store is built from—and the overview of themes on Shoporama provides a summary. Account, Web Store, Themes, on the other hand, is a small collection of individual files layered on top of the design. Only the files you upload yourself will be overwritten; everything else comes from your regular theme.

The files are stored in the store’s database and not as actual files, so they won’t be overwritten when the theme’s files are re-uploaded. That’s exactly what makes this feature useful: you can test a change in one place without affecting the rest of the design.

You’ll find the page under Account, Web Store, Themes, between robots.txt and Reset. The overview has three columns: Name is the name you’ve given the theme, In Use shows “Yes” for the active theme and “No” for the rest, and the pencil icon opens the theme’s file list. At the bottom is the Create New Theme button.

How to create a theme

1. Click Create New Theme. The page is titled New Theme.
2. Fill in the Name field. Choose something you’ll recognize in three months, such as “Test of Buy Button.”
3. If you want to start from an existing file, select it in “Or copy from your own theme” (optional). The list shows the theme folders that you or your developer have uploaded, and email files are marked with (email).
4. Click “Create.” You’ll be taken directly to the theme’s file list.

The “Copy from theme (optional)” field just above is empty for all stores right now, and that’s not a mistake on your part. If you haven’t uploaded any theme files yourself, just create the theme as an empty one and add the files later.

The file list in the theme

The file list is called Templates. At the top, you can edit the theme’s Name, and below that is the table of files:

• "File Name" is the key field. The file will overwrite the file in your theme that has the exact same name, e.g., add_to_basket.html. If you enter a name that your theme doesn’t use, nothing will happen.
• "Name" is your own label, such as "Original" or "Version B." It’s only visible in the admin panel.
• "Locked " indicates whether the file is locked as the version that everyone should see. More on this in the section on split testing.
• "Modified " shows the date and time of the last saved change.
• The pencil icon on the far right opens the file for editing, and the checkmark on the far left is used by the copy and delete buttons below.

Buttons at the bottom: “Save” saves the file and returns to the overview. “Create New File in Theme” opens the page for a new file. “Copy Selected Files” creates a copy of each selected file, with the same filename and name as the original. "Delete Selected Files " deletes the selected files after a "Are you sure?" prompt. "Use This Theme " activates the theme and is only displayed when it is not already in use. " Delete Entire Theme " removes the theme and all its files.

An important detail: the checkboxes are shared among multiple buttons. If you’ve checked a file and click “Save” or “Use this theme,” the file will also be copied. Therefore, be sure to uncheck the boxes when you’re done copying; otherwise, the list of duplicates will grow.

Remember that a theme doesn’t take effect until you click “Use this theme.” That’s the classic mistake. The “In use” column should say “Yes.” There can only be one active theme at a time, and the old one remains so you can switch back.

Create and Edit a File

The “Create New File in Theme ” page has the “File Name” and “Name” fields, as well as the same two copy lists as when creating the theme. If you leave “File Name” blank, the file will be created as noname.html with the name “No name.”

The actual editing takes place on the “Edit Template” page, where you can edit the “File Name,” “Name,” and the large HTML field. “Save” saves the changes and returns you to the file list; “Save and Continue Editing” keeps you on the page; and “Delete” removes the file after confirmation.

There is no undo option and no version history. When you save, the old version is gone, so copy the content to a text file before making any changes. The change takes effect immediately. If you can’t see it, try a hard refresh with Cmd+Shift+R or Ctrl+Shift+R. On a live store, finished pages may also remain cached for up to four hours.

A/B testing: two versions of the same file

This is where the page really pays for itself. If you upload two or more files with the same filename into the same theme, the store will distribute visitors between them. The selection is remembered for a week, so individual visitors won’t see the button switch back and forth.

1. Find the file that contains what you want to test. If it’s the text on the buy button, it’s typically add_to_basket.html.
2. Place the original file in the theme and name it “Original.”
3. Check the box next to it, click “Copy Selected Files,” and name the copy “Version B.”
4. Open Version B, edit the one thing you want to test, and save. If you edit multiple things, you won’t know what worked.
5. Click “Use this theme” and let the test run until you have enough orders to draw a conclusion.

The “Locked” column shows the version everyone should see, regardless of the split. In the current admin panel, there’s no field to enable this, and if you save a file, it’s set to “No” by default. If you want to stop a test and keep the winner, simply delete the loser.

If you have few visitors, it takes a long time to get a result you can trust, so your time is better spent driving traffic. The cached version of the pages can also make the distribution less accurate. See the Shoporama split-test guide for more information.

For the tech-savvy

The files are Smarty templates, not plain HTML. In Shoporama, Smarty is written with angle brackets around the curly braces:

<{$product->getName()}>

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

Every <{if}> must have a corresponding <{/if}>. If you forget one, you’ll typically get an error page across the entire store. Variables and methods are described in “Variables in a Shoporama Theme.” There are three key differences between the two Smarty versions worth noting:

• The files are organized differently. In a Smarty 2 theme, the templates are stored directly in the theme folder, e.g., invoice.html. In a Smarty 4 theme, they are stored in subfolders, e.g., templates/mails/invoice.html.
• Smarty 4 is stricter. That’s why the dropdown menu literally states “may not work with old templates.” Old templates may contain syntax that needs to be corrected first.
• Database files exist only in Smarty 2. The Themes page prioritizes its own files over the theme’s actual files. This mechanism does not exist in Smarty 4, where all new features are built.

Frequently Asked Questions

I can’t find “Themes” in my menu at all. Where is it?

That means your store is running Smarty 4, and the option is intentionally hidden. Check under Account, Web Store, General in the Smarty version field. If you need to edit the theme’s files, use Store, Design, Code Editor instead.

Will I delete my actual design if I delete a theme here?

No. A theme here contains only the individual files you’ve added yourself. If you delete it, the store will revert to using the corresponding files from your regular theme, and the actual design remains untouched.

Why is the “Copy from theme (optional)” list empty?

That box no longer displays any content, so just skip it. If you’ve uploaded theme files yourself, you’ll find them in the box below, “Or copy from your own theme (optional).”

I suddenly have two identical files in the list. What happened?

The checkboxes are used by multiple buttons. If a file is checked and you click Save or Use this theme, the file will be copied, just as if you had clicked Copy selected files. Delete the duplicate and uncheck the boxes.

Can I undo a change the next day?

No, no previous versions are saved. Always copy the content to a text file before making changes. If you’ve made a mistake without a copy, delete the file from the theme, and the store will revert to the original.

Will my edits survive a theme update?

Yes. The files aren’t located in the theme folder, so they won’t be overwritten when the theme files are reuploaded. However, they could cause problems if the new theme has fundamentally changed the file, so be sure to check them after a major update.

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

No. Themes and files are specific to the store you’ve selected in the admin panel, so you’ll need to apply the fix to each store individually. If you have multiple stores using the same theme, it’s more sustainable to incorporate the fix directly into the theme itself.

I’m running my A/B test, but I always see the same version. Is it broken?

Probably not. Your version selection is remembered for a week, so you’ll see the same one until you clear your cookies or open the store in an incognito window.

I’ve edited a file, but nothing is happening in the shop. What should I do?

Check the following in this order: Is “Yes” listed in the “In Use” column? Is the filename spelled exactly as it appears in your theme? And have you tried a hard reload? If you’re still unsure, email support@shoporama.dk with the filename.