The Old Theme Builder

Theme Builder is Shoporama’s oldest tool for building pages using pre-made content blocks. You assemble rows, columns, and modules, which allows you to control how, for example, the homepage or category pages look without having to write code. The tool still works, but it belongs to the older generation of Shoporama themes. If your store is running a newer theme, you’ll work in the Page Designer instead.

Why can some people see Theme Builder, but others can’t?

It’s determined by your theme, not a setting you can turn on or off yourself:

• The theme supports Page Designer. In that case, Theme Builder is hidden, and you build your pages in Page Designer under Store > Design. This applies to the newer Shoporama themes.
• The theme does not support Page Designer. In that case, you’ll see an extra section in the menu called “Old Theme Builder” with the “Theme Builder” option. This applies to older themes and many custom-built themes.

The “Page Designer” menu item is always present in the menu, but the blocks you build there will only be displayed in the store when you’re using a theme that supports them.

If you switch themes, the menu will change accordingly. Also note that content from Theme Builder will only be displayed in the store if the theme is built to display it—that is, the old Shoporama themes like Alaska and Massachusetts, and themes a developer has built using the same approach. Additionally, Theme Builder only works on online stores running Smarty 2. If you have a custom-built Smarty 4 theme without Page Designer, the menu item may still appear, but the settings won’t be displayed in the store. If you’re unsure about what your store is running, please contact us at support@shoporama.dk.

How to Find Theme Builder

You’ll find the tool in the menu under “Old Theme Builder,” under the “Theme Builder” item. The page displays a table of your settings with the columns “Name” (your own name, sorted alphabetically), Active (Yes means the layout is in use in the store; No means it’s on hold), and Location (which pages it applies to). On the far right is the Edit link, which opens the builder itself.

At the bottom, you’ll find the “Create New Configuration” button. If the table is empty, there’s nothing wrong. It just means that no configurations have been created yet, and that your theme is therefore displaying its own default content.

The page also includes a tip about Shoporama’s theme hierarchy: if you only want to edit specific files in your theme—such as an email template or a packing slip—you can create your own theme and copy over only the files you want to change. The rest is inherited from the original theme.

How to create a configuration

Click Create New Setup. You’ll then be taken to the New Theme Setup page with these fields:

1. Name. A name of your choice, such as “Homepage” or “Christmas Campaign Page.” The name is for your use only and won’t be visible to customers. This field is required.
2. Active. Set to “On” by default. Uncheck the box if you want to build in peace without the setup being displayed in the store.
3. Apply this setup to. Here, you choose which pages the setup should apply to. If you select “Specific URL,” the “URL” field will appear, where you can enter the address. If you want to target multiple addresses with the same pattern, you can check the box next to “Use regular expressions in URL.”
4. Click “Create,” and you’ll be taken directly to the builder. If you change your mind, click “Cancel.”

You can choose between All Pages (unless otherwise specified), Home Page, Product Page, Landing Pages, Category Pages, Static Pages, Blog Posts, Blog Home Page, and Specific URL. In addition, there is the Fixed Pages group, which includes the store’s individual pages, such as the search page, the shopping cart, the four checkout steps, the receipt page, the order page, the customer’s personal pages (such as login and order overview), and 404 pages.

Build the page with rows, columns, and modules

The builder is a classic 12-column grid. A page consists of rows; each row contains one or more columns, and within the columns you place modules—that is, content blocks.

• "Add Row Below " inserts a new row below the one you’re currently on. " Remove Row Above " deletes the row above, including its modules. The last row cannot be removed.
• "Add Column " adds a new column to the row. A row can have a maximum of 12 columns in total, so there must be space remaining.
• The two buttons at the top of the column, “Make Column Wider” and “Make Column Narrower,” adjust the width up and down. Next to them, the width is displayed, for example, as 6/12, meaning half a page’s width.
• + "Add Module " opens the "Add New Module" window. Click on the module you want to use, and it will appear at the bottom of the column.

You can drag the modules around with the mouse. Grab the module’s title bar and drag it up, down, or into another column. The layout is automatically saved as you work, so you won’t lose your work if you’re interrupted.

If you click the gear icon on a module, a small window opens with the module’s settings. It has three tabs: General, with the module’s own fields; Style Guide, with the CSS classes you can use to style the module; and Source Code, for those who want to get under the hood. At the bottom, you can save with Save and Close or Save and Continue Editing, and you can remove the module with Delete.

The modules you can choose from

Theme Builder has a fixed set of modules, and your theme determines how they are displayed in the store:

• Text. Heading 1, Heading 2, Heading 3, Formatted text using a standard text editor, and an HTML field for custom code.
• Images. Image, Image and Text, Top Banner with Text, Carousel, and Parallax.
• Products. Product, Product List, Category Overview, Categories or Landing Pages with Links, and Promotions.
• Store features: Search, Cart, Menu structure, Logo, Newsletter sign-up, Credit cards with payment logos, Link, Links, and Divider.
• Default content, which is the most important of all and is described below, as well as the Google tracking code (not visible), which does not display anything on the page but only inserts the tracking code.

Each module has its own fields. For example, a Product List asks for a Title, the source of the products (a landing page or a category), the Number of products, and Product Size, while the Credit Cards module lets you check the payment options you offer.

The Default Content Module

When you build a page with Theme Builder, your setup replaces the theme’s normal content on that page. The Default Content module is the way to restore the normal content exactly where you want it. On a category page, “default content” is the product list; in checkout, it’s the forms; and so on. For example, if you want your homepage to have a large banner at the top and the normal homepage content below it, place a banner module in the top row and the Default Content module in the row below. This module has no settings.

If you select a module that your theme doesn’t support, you’ll see a clear red message in the module: “Not supported by the active theme, and therefore won’t work optimally in your store.” Then you’ll know to choose something else.

Draft, Preview, and Publish

Theme Builder works with two versions of each setup: the live version that customers see, and a draft that you edit. Everything you do with modules and layout is saved continuously in the draft, and customers won’t see the changes until you publish them. The buttons at the bottom do the following:

• Save and Close saves your changes and takes you back to the overview. Save and Continue Editing saves your changes and keeps you on the page.
• "Save and Publish " saves and makes the draft the version customers see.
• "Restore to Live Version " discards the draft and restores the published version. This is your undo button, even for modules you’ve deleted in the draft.
• Cancel takes you back to the overview, and Delete deletes the entire setup and the modules it contains. You’ll be asked to confirm first.

Please note one thing: the Name, Active, and “Use this setup on” fields apply to the setup itself and take effect as soon as you save, even without publishing. If you uncheck the “Active ” box and save, the setup will disappear from the store immediately.

If you want to see the result before publishing, there’s a preview code below the buttons. Add it to the end of the URL for the page you want to view, like ?preview=YOUR-CODE. If you’re building on the front page, the page will display a finished example link. The preview is valid only for that single page load; if you click around the store, you’ll see the published version again.

Which setup is used on which page?

At most one configuration is used per page view, and only configurations set to Active are taken into account. The store searches in this order and uses the first one that matches:

1. A layout with a specific URL that matches the address.
2. A configuration on one of the static pages, such as the shopping cart, search page, or a checkout step.
3. The setup for the Home Page when the customer is on the store’s home page.
4. Next, Category Pages, Landing Pages, Product View, Static Pages, and Blog Posts, depending on the type of page the customer is on.
5. Finally , “All Pages,” unless otherwise specified, which serves as the safety net that covers everything else.

In practice, this means you can create one general setup that applies broadly and supplement it with more specific setups for the pages that need to stand out.

The Way Forward: The Page Designer

Theme Builder still works, but all development of new blocks and features takes place in the Page Designer. It’s faster to work in and offers features such as shareable preview links and many more pre-built sections, including hero banners, product carousels, USP sections, and blog lists.

If you want to switch over, you’ll need to switch to a theme that supports the Page Designer. You can do this in the Theme Store or under Store, Design, Theme. Keep in mind that your Theme Builder settings won’t be converted automatically. They’ll remain on the store, but the pages will need to be rebuilt in the Page Designer, so set aside some time and feel free to take screenshots of your current pages first. Changing themes is also a good opportunity to review the theme settings, where you can configure colors, fonts, and other options in the new theme.

For those with a technical background

The Style Guide tab on each module displays two CSS selectors: one that targets all modules of the same type, and one that targets only that specific module. You can use these in the store’s stylesheet if you want a single module to look different from the others.

The Source Code tab lets you take over the module’s template. The field is empty by default, and the latest standard version is used. If you click Save and Load Latest Source Code, the current code is loaded into the field, after which you can edit it. Please note that a module you’ve overridden will no longer be updated when the default version is updated. Checking the “Do not use design from your theme” box causes the module to ignore the theme’s own version of the template.

If you want to implement Theme Builder in a theme, or if you want to override the built-in modules with your own templates, the procedure is described in “Implement Theme Builder in Your Theme.” If you want to edit the theme’s files directly from the admin panel, you can use the code editor.

Frequently Asked Questions

I can’t find Theme Builder in the menu at all. Has it been removed?

No, it hasn’t been removed. The section is only displayed for stores whose theme doesn’t support Page Builder. If you have a newer theme, you’ll instead build your pages in Page Builder under Store > Design. It’s the same type of tool, just a newer version.

How do I know if my setup is visible to customers?

Check the Active column in the overview. If it says Yes, it’s in use. If it says No, it won’t be displayed. Also, keep in mind that any content you’ve changed won’t be visible to customers until you click Save and Publish.

I accidentally deleted a row of modules. Can I get it back?

Yes, if you haven’t published since you deleted them. Click “Restore to Live Version,” and the draft will be replaced by the published version, and the deleted modules will be restored. However, if you’ve clicked “Save and Publish,” the deletion is final, and the row will need to be rebuilt.

Can I style the modules with my own CSS?

Yes. Open the module’s settings and go to the “Style Guide” tab. There you’ll find the exact CSS selectors, both for all modules of that type and for that specific module. You can use these in your store’s stylesheet.

Can I create a custom design for a single campaign page?

Yes. Select “Specific URL” under “Apply this setup to” and enter the page’s address. If you need to target multiple URLs with the same pattern, you can check the box for “Use regular expressions in URL.” Setups with a specific URL take priority, so they override your general setups.

Can I copy a configuration to another one of my stores?

No, there is no copy function. Setups are specific to each shop and must be configured separately for each shop. If you want multiple shops to look alike, it’s often faster to make the changes in the theme’s files so that the same theme can be used in multiple places.

What happens to my settings if I switch themes?

They remain in the store. If you switch to a theme with Page Designer, they simply won’t be displayed anymore, and the menu item will disappear. If you switch back to a theme without Page Designer, they’ll reappear exactly as you left them.

Should I switch themes now, or can I continue as usual?

You can safely continue as usual. Theme Builder still works on themes that use it. However, new blocks and features are only coming to Page Designer, so if you’re planning a major redesign anyway, it makes the most sense to do it in conjunction with a theme change.

Why can I see the page in the admin panel but not on the store?

This is typically due to one of three reasons: the setup isn’t set to Active, the changes are only saved in the draft and haven’t been published, or the theme isn’t built to display Theme Builder content. If you’re unsure about the last point, please email support@shoporama.dk with the name of your store, and we’ll look into it.