Smarter field types in Page Builder

Smarter product selection in Page Builder

Page Builder is the heart of your page layout. It's where you put together the front page, category pages and landing pages with exactly the blocks you need. Now it's even easier to choose the right content.

New field types for themes

Page Builder now supports a number of new field types that themes can use in their modules. This means that themes can offer smarter and more user-friendly ways to select content - without having to remember IDs or tags.

Select more products, categories and landing pages - with search

Previously, you had to manually enter IDs to display selected products. That's a thing of the past. Now you can just start typing a product name and select from a list. You can add as many as you want and they appear as small tags that you can easily remove.

The same goes for categories and landing pages. Have you created a landing page with "Summer offers" or a category with "News"? Search for it, click and it's added.

Here's how it works:

• Type at least 2 letters in the search field
• Select from the dropdown list
• Add as many as you want - they will appear as tags
• Click X on a tag to remove it

The new link field: Find all content with one search

When you add links to buttons, banners or images, you can now search across your entire shop. Type in a few letters and you'll get results from:

• Products
• Categories
• Landing pages
• Static pages (e.g. "About us")
• Blog posts

Each result is marked with a color-coded badge so you can quickly see what it is. And if you want to link to an external page, you can just type the URL directly.

Montana: Combine product sources - without duplicates

In the Montana theme's Product List and Product Slider, you can select "Featured" and combine products from multiple sources at once:

1. Handpicked products
2. All products from selected categories
3. All products from selected landing pages

The system automatically removes duplicates so you never show the same product twice - even when a product appears in multiple categories.

For developers: How to use the new field types

If you're developing themes for Shoporama, you can use the new field types in your component JSON files. Here's an overview with examples.

Multi-select products

Allows the user to search and select multiple products. Stored as comma-separated IDs.

{ "id": "products", "type": "products", "title": "Featured products", "description": "Search and select products" }

In the Smarty template:

<{if $section.products}> <{$product_ids = ","|explode:$section.products}> <{section name="j" loop=$product_ids}> <{$p = $webshop->getProductById($product_ids[j])}> <{if $p}> <!-- show product --> <{/if}> <{/section}> <{/if}>

Multi-select categories

Same principle as products, but with categories. Use it for example to retrieve products from selected categories.

{ "id": "categories", "type": "categories", "title": "Categories", "description": "Search and select categories" }

In the Smarty template:

<{if $section.categories}> <{$cat_ids = ","|explode:$section.categories}> <{section name="j" loop=$cat_ids}> <{$cat = $webshop->getCategory($cat_ids[j])}> <{if $cat}> <{foreach $cat->getOnlineProducts() as $cp}> <!-- show product --> <{/foreach}> <{/if}> <{/if}> <{/section}> <{/if}>

Multi-select landing pages

{ "id": "landing_pages", "type": "landing_pages", "title": "Landing pages", "description": "Search and select landing pages" }

Smart link field

Searches across products, categories, landing pages, static pages and blog posts. Stores a URL directly so you can use the value as href.

{ "id": "link", "type": "link", "title": "Link" }

In the Smarty template:

<{if $section.link}> <a href="<{$section.link}>">Click here</a> <{/if}>

All available field types

Here is the full list of field types you can use in your component JSON files:

• text - Text field
• integer - Number field (with optional min/max)
• image - Single image upload
• images - Multi-image upload with sorting
• bool - Checkbox
• richtext - Rich text editor
• longtext - Textarea
• color - Color picker
• list - Dropdown with fixed options
• product - Single product (AJAX search)
• products - Multiple products (AJAX search, tags)
• category - Single category (AJAX search)
• categories - Multiple categories (AJAX search, tags)
• landing_page - Single landing page (dropdown)
• landing_pages - Multiple landing pages (AJAX search, tags)
• link - Smart link field (search all content or enter URL)
• repeater - Repeating group of fields

Getting started

The new field types are part of the Page Builder platform and are available for all themes. The Montana theme already fully supports them. If you're using another theme, the new options will come with future theme updates.

You can find Page Builder under Design → Page Builder in your administration.

Do you have any questions? Read our Page Builder guide or contact us at support@shoporama.dk.