Page Builder

With Page Builder, you build your own page layout by adding, moving and configuring content blocks. You can create unique layouts for your front page, category pages, product pages, landing pages, checkout and many more types of pages. All without having to code.

Where can I find Page Builder?

You can find Page Builder under Account " Online Shop " Page Builder in your Shoporama administration. Here you can create new page setups or edit existing ones.

What types of pages does Page Builder support?

Page Builder supports two groups of page types. The first group is dynamic pages, where you can choose whether the setup should apply to all pages of the type or only to selected pages:

• Category (including the front page). The layout of all category pages and the front page. The front page is the category marked as the front page category, so if you want a specific front page layout, you create a specific category setup that points to the selected category.
• Product. The layout of product pages.
• Landing page. The layout of landing pages.
• Static page. The layout of static pages, such as About us and Terms and conditions.
• Blog posts. The layout of blog posts.

The second group is fixed pages, where there can only be one layout per shop:

• Search page
• The shopping cart
• Address page (in checkout)
• Shipping page (in checkout)
• Approval page (in checkout)
• Payment page
• Thank you for order page
• The merchandise page
• Order page
• Return center
• Login page
• User's orders
• User's wishlist

If your theme defines custom theme tags (reusable content slots), you can also create Page Builder layouts for them. They appear in a separate group when created.

To create a page setup

1. Go to Account " Online shop " Page Builder.
2. Click Create new.
3. Select which page type the setup should apply to.
4. For dynamic page types (Category, Product, Landing page, Static page, Blog post), you can choose whether the setup should apply to all pages of that type or only to specific pages. For fixed pages, there can only be one layout per shop.
5. Optionally, give the setup a name so you can recognize it in the list.
6. Save and start adding blocks.

How to build the front page

The front page is a regular category that is marked as a front page category. If you want to give the front page a special look, here's how:

1. Make sure you have a category marked as a front page category (done on the category itself). Read more in Setting up the front page.
2. Go to Page Builder and click Create new.
3. Select the page type Category (including the front page).
4. Select Specific pages and assign your front page category.
5. Add the blocks that will make up the front page, such as a hero section, a product slider, value propositions and a blog list.

The specific setup is now used on the front page, while your other categories run on the general category setup (or the theme default).

Available block types

The available block types depend on your theme. Here are the most common ones in Delaware, DelawareDK and Montana:

• Hero. Large hero section with header, description, button and background image.
• Banner. Images in carousel/slider format.
• Text. Free text block with heading and formatting.
• Text with image. Two columns with text on one side and image on the other.
• Two-column text. Text divided into two columns.
• Product list. Show products from a category, landing page or based on popularity/most recent.
• Product slider. Products in carousel format.
• Category list. Show product categories.
• Category slider. Categories in carousel format.
• Image grid. Grid of images with optional links.
• Blog list. Show recent blog posts.
• Trustpilot. Trustpilot reviews widget.
• Value propositions. Highlight your USPs, like free shipping or fast delivery.
• Button. Call-to-action button with link.
• PureHTML for full control over the content.

If you use a different theme, the list may look different. Click Add block in a setup to see the blocks your theme actually supports.

Drag and drop

You can easily change the order of your blocks by dragging them up or down. Grab the header of the block and drag it to the desired position. The order is automatically saved.

You can also collapse blocks to get a better overview if you have many blocks on a page.

Configuration of blocks

Each block has its own settings depending on the type. Typical options include:

• Text and headings. Write directly in a text editor.
• Images. Upload images directly from your computer.
• Product selection. Select specific products, categories or landing pages.
• Links and buttons. Add URLs and button texts.
• Repeatable elements. Some blocks (e.g. banners) allow you to add multiple elements in the same block.

You can give each block a custom name to make it easier to keep track of them in the overview.

Product Selector in Delaware/DelawareDK

In Delaware and DelawareDK, several Page Builder sections (Product List, Product Slider and Product Feature) have a field called Product Selector. This field is used to specify which products to display in the section.

How to use the Product Selector

1. First, select a Product Type from the dropdown menu, for example "By Category Tag", "By Landing Page Tag" or "By Product Ids".
2. Then fill in the Product Selector field with the relevant value (see below).

If you select "Newest Products", "Popular Products" or "Most Sold Products" as Product Type, you do not need to fill in the Product Selector field. The products will be retrieved automatically.

What should I write in the field?

It depends on the selected Product Type:

• By Category Tag. Enter the category tag. You can find the tag by editing the category in admin under the "Tag" field. Example: summer offer
• By Landing Page Tag. Enter the landing page tag. You can find the tag by editing the landing page in admin. Example: news
• By Product Ids. Type the product IDs separated by commas. You can find a product's ID in the product list or in the URL when editing the product. Example: 123,456,789

General vs. specific setups

For dynamic page types, there are two ways to use Page Builder:

• General setup. Applies to all pages of a given type. For example, one setup for all category pages.
• Specific setup. Only applies to selected pages. For example, a specific setup for a specific landing page, or for the front page category.

Specific setups take precedence. If a product has its own setup, it is used instead of the general product page setup.

Smarter fields in the Montana theme

The Montana theme uses the latest Page Builder field types that make it easier to select content:

• Product search. Search and select multiple products at once. They appear as tags you can easily add and remove.
• Category search. Select categories and automatically display products from there.
• Landing page search. Select landing pages and get their products.
• Smart link field. Search across products, categories, landing pages, static pages and blog posts. Each result is marked with a color-coded badge.

In Montana's Product List and Product Slider, you can combine products from multiple sources (hand-picked products, categories and landing pages). The system automatically removes duplicates.

Read more in our blog post: Smarter field types in Page Builder.

Split Blocks: blocks above and below content

If your theme supports split blocks, you can place blocks in two zones: above and below the main content of the page. This gives you more flexibility in the layout. For example, you can have a hero banner above the product list and recommendations below.

When split blocks are active, Page Builder displays two separate lists with a visual marker of "Main page content" in between. You can drag blocks freely between the two zones.

Preview link: share drafts with colleagues and customers

When working on a new version of a page setup, you may need to show the result to a colleague or customer before going live. You can do this with the preview link: a shareable link that shows your setup on the shop, even if it's offline.

Here's how it works:

1. Find the setup in the Page Builder overview or open it for editing.
2. Click the eye icon in the list or the Preview button at the top of the editing view. The link opens the shop in a new tab with your setup enabled.
3. If you want to share the link with a colleague or customer, you can copy it from the address bar, or use the Settings tab where it appears as a field you can easily copy.

Preview links are not indexed by Google or other search engines, so you can safely share them without them showing up in search results.

If a link needs to be retracted, for example because it has been shared with someone who should no longer have access, you can click New link next to the URL field. The old link will stop working immediately and a new one will be generated.

Frequently asked questions

Can I create a separate layout for the front page?

Yes, you can. The front page is the category that is marked as the front page category. Create a Page Builder setup of type Category, select "specific pages" and assign your front page category. Then that setup is only used on the front page and your general category setup is used on all other category pages.

Is there a 404 page in Page Builder?

No. The 404 page is not a supported page type in Page Builder. It is controlled via your theme. If you want to change the appearance of the 404 page, you need to adjust the theme templates or ask your theme developer.

Which blocks can I choose from?

It depends on your theme. Delaware, DelawareDK and Montana have Hero, Banner, Text, Text with image, Product list, Product slider, Category list, Image grid, Blog list, Trustpilot, Value propositions, Button and a free code HTML block. Click Add block in a setup to see the full list that applies to your theme.

Do my Page Builder pages look good on mobile?

Yes, they do. The default blocks in Delaware, DelawareDK and Montana are fully responsive and automatically adapt to mobile screens. Hero images are scaled down, columns are stacked under each other and product sliders become swipeable carousels. Use compressed images so the site is also fast on mobile data.

How many specific setups can I have?

There is no upper limit. You can create as many specific setups as you want. Each setup can be associated with one or more specific products, categories, landing pages, static pages or blog posts.

Do many Page Builder blocks affect page speed?

Page Builder output is cached, so the rendering itself is fast. What typically affects the speed is the number of images and videos on the page. Use compressed images and lazy loading where possible.

Can I move a block between two setups?

No, blocks are linked to the layout they are created in. However, you can duplicate a block within the same layout and manually copy the content to another layout.

Can I see what the page looks like while editing?

Yes, you can. You can click the Preview button at the top of the edit view and a preview link to the shop will open in a new tab. Page Builder saves changes automatically, so you only need to refresh the preview tab after each change to see the result. Even if the setup is offline, you can view it via the preview link - and you can share the link with colleagues or customers.

Can I design the checkout with Page Builder?

Yes, you can. Each step of the checkout (Address page, Shipping page, Approval page, Payment page and Thank you page) is a fixed page type where you can add Trustpilot widgets, value propositions, info boxes and an HTML block with extra security signals. However, the checkout fields themselves are controlled by the theme, not the blocks.

What is the difference between a "dynamic" and a "fixed" page type?

Dynamic page types (Category, Product, Landing page, Static page, Blog post) are numerous, so you can have both a general setup and several specific ones. Fixed pages (cart, checkout steps, order page, login, etc.) are only one per shop, so they can only have one layout.

If you have any questions about Page Builder, you are welcome to contact us at support@shoporama.dk.