Skip to content

Sections and Elements

Jump to bottom
Mehrdad Pajuhaan edited this page Oct 23, 2026 · 1 revision

Sections and Elements

A page is a list of sections, and each section is a tree of elements. The editor ships with 26 ready-made sections that you drag onto the artboard; each one is a small function that seeds a tree of elements you can then edit. This page lists the built-in sections and elements and explains the raw HTML / Vue code section.

Built-in sections

The list comes from sections/DefaultSections.ts. Each section class has a group, a label, a cover image, help text and a Seed() function that returns its element tree.

Group Section class What it shows
Hero LSectionHeroHorizontal Headline, text and buttons beside an image. Place it at the top of a page.
Hero LSectionHeroVertical Stacked hero: headline, text and buttons in a full-width column, with a second column below.
Hero LSectionHeroLottie Hero with a Lottie animation.
Hero LSectionHeroSearch Hero with a product search box.
Text LSectionTextTwoColumns Two columns of text.
Text LSectionTextThreeColumns Three columns of text.
Text LSectionTextMarquee Infinite scrolling text or HTML (marquee).
Text LSectionTextNumbers Big numbers to highlight key values.
Text LSectionArticle Long-form article with an inline editor.
Image & Text LSectionImageCards Cards with image, title and short description.
Image & Text LSectionImageFeatures Feature list with images.
Image & Text LSectionImageIntro Large image with a title and description on top.
Image & Text LSectionImageSocials Text, image, text layout.
Image & Text LSectionImageTwoColumns Two columns; add sub-columns inside each.
Image & Text LSectionImageThreeColumns Three columns; add sub-columns inside each.
Gallery LSectionGalleryBrands Many small visuals such as brand logos.
Gallery LSectionGalleryExpandable Horizontally expandable image slides.
Gallery LSectionGalleryScroll Scrollable mix of images and text.
Gallery LSectionGallerySwiper Fully customizable slideshow.
Products LSectionStoreListing Products and categories list, like the shop listing page, with filters.
Products LSectionStoreCustomListing Products and categories rendered with your own HTML, with filters.
Products LSectionStoreProduct A single product.
Basic LSectionHtml Raw HTML, iframes or a Vue template (see below).
Basic LSectionEmbedPage Embed another Page Builder page.
Form LSectionFormNewsletter Email collection. Entries appear in the shop under Marketing > Stream.
Blogs LSectionBlogList A filtered list of blog posts.

What a seed looks like

Seeds build elements with each element class's Seed() helper. This is the horizontal hero, simplified from sections/hero/horizontal/LSectionHeroHorizontal.ts:

const section = XSectionObject.Seed();
section.classes = ["min-height-80vh", "d-flex"];

const container = XContainerObject.Seed();
section.addChild(container);

const row = XRowObject.Seed();
container.addChild(row);

const column1 = XColumnObject.Seed(12, 6, 6); // mobile, tablet, desktop
row.addChild(column1);
column1.addChild(XTextObject.Seed("Enter your headline here...", "h1", ["mb-2"]));
column1.addChild(XTextObject.Seed("Write your main content here...", "p", ["mb-4"]));
column1.addChild(XButtonsObject.Seed());

const column2 = XColumnObject.Seed(12, 6, 6);
row.addChild(column2);
column2.addChild(XUploaderObject.Seed(1));

Calling toJson() on the result gives the JSON described in Page JSON Structure.

Elements (X components)

Each element is a pair: a Vue component (components/x/<name>/X<Name>.vue) and a model class (X<Name>Object.ts with an X<Name>ObjectData.ts data class). All Vue components are registered globally by SetupPageBuilder.

Element Purpose
XSection Root of a section. Holds visibility rules (hide.sm/md/lg/xl/guest/user).
XContainer Vuetify container, optionally fluid.
XRow, XColumn Responsive grid. Columns take 1–12 units per device.
XColumnImageText Column preset with image, title and content.
XText Rich text with a chosen tag (p, h1–h6, span, div).
XButton, XButtons Buttons and button groups.
XUploader Image with link, alt text and display settings.
XLottie Lottie animation.
XMarquee, XScroller Infinite marquee and horizontal scroller.
XSwiper, XGalleryExpandable Slideshows and expandable galleries.
XArticle Article body.
XProduct, XProductOverview, XProducts, XFeederProducts Product card, product overview, product/category lists and product feeds from the shop.
XSearch Product search.
XFeederBlogs Blog post feed.
XForm, XInputText Forms and inputs (newsletter).
XEmbedPage Another page embedded inside this one.
XCode Raw HTML or Vue code.

Commerce elements load data through the Storefront SDK, so call StorefrontSDK.Setup() in your app.

Raw HTML and Vue code

The Raw Html section (LSectionHtml) contains one XCode element. Its data.mode is html or vue. If no mode is stored, it is detected from the code: code that contains <!----vue----> or <template> is treated as Vue, anything else as HTML.

HTML mode

Paste any HTML, including iframes such as YouTube embeds.

Vue mode

Put <!----vue----> at the top of the code, write a template, and optionally add a <script> that defines const config (or export default, which is converted to const config = {). <style> blocks are extracted and appended to the rendered element.

<!----vue---->
<v-container :fluid="properties.fluid">
  <h2 v-if="properties.title" v-html="properties.title" class="text-h3"></h2>
  <u-price :amount="properties.price" currency="USD"></u-price>
</v-container>

<script>
  const config = {
    props: {
      // Filled by the page builder so merchants can edit these values
      properties: {
        default: () => ({
          title: "Incredible Offer Deal",
          fluid: true,
          price: 899,
        }),
      },
    },
    data() {
      return {};
    },
  };
</script>

Rules for Vue code:

  • import statements are not allowed. The builder throws Restricted import found in the code.
  • props.properties.default defines the default values merchants can edit. An optional props.properties.structure describes the editing form.
  • The saved values are stored in the element's data.properties and passed to your component as the properties prop.
  • Globally registered components are available, for example Vuetify components, u-price, u-lottie, u-fade-scroll and u-count-down.
  • Read the current customer with window.$storefront?.USER.

Samples

Ready-to-paste Vue sections in this repository:

Each sample folder has a README.md with the code to paste and an index.html preview.

Next steps

Selldone® Business OS · Open-source ecosystem · pagebuilder repository · Report an issue · Security

Selldone Page Builder

Guides

Ecosystem

Links

Clone this wiki locally