Page Builder

With Page Builder, you can build and customize the layout of your pages by adding, moving and configuring content blocks. You can create unique page layouts for front pages, category pages, product pages, landing pages and many more - all without coding.

Where can I find Page Builder?

You can find Page Builder under Design → Page Builder in your Shoporama administration. Here you can create new page setups or edit existing ones.

Which pages can I use Page Builder on?

Page Builder can be used on almost all types of pages in your online store:

• Front page
• Category pages
• Product pages
• Landing pages
• Static pages (e.g. About us, Terms and conditions)
• Blog posts
• Search page
• Shopping cart
• Checkout pages (address, delivery, approval, payment)
• Order confirmation
• Customer pages (login, order history, wishlist)
• Return center
• 404 page

How to create a page setup

1. Go to Design → Page Builder
2. Click Create new
3. Select which page type the setup should apply to (e.g. "Home" or "Category pages")
4. Optionally, give the setup a name so you can recognize it
5. For product pages, category pages and similar, you can choose whether the setup should apply to all pages of that type, or only to specific pages
6. Save and start adding blocks

Available block types

The block types available depend on your theme. Here are the most common ones:

• Hero - Large hero section with header, description, button and background image
• Banner - Images in carousel/slider format
• Text - Free text block with header and formatting
• Text with image - Two columns with text on one side and image on the other
• Two-column text - Text split 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 (e.g. free shipping, fast delivery)
• Button - Call-to-action button with link
• HTML - Pure HTML for full control over content

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 - show selected products (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 - e.g. "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 don't 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 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

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 - Applies only to selected pages. For example, a special setup for one specific landing page

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

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

New page types

Page Builder now supports these additional page types:

• Return page (/return) - the front page of the return center.
• Login page (/user-sign-in) - the customer login page.
• My orders (/user-orders) - the customer's order overview.
• My wishlist (/user-wishlist) - the customer's wishlist.

Name your components

You can give each Page Builder component a custom name to make it easier to identify them in the overview. Click on the component's title field and type a descriptive name (e.g. "Hero banner front page" or "Product grid bestsellers").

All modules on all page types

All 18 Page Builder modules are now available on all 16 page types in Delaware and DelawareDK. You are no longer limited to specific modules on specific pages.