Page Builder
Orbit's drag-and-drop page builder: the editor, every element, and how to design, save, and publish any storefront page.
98 guides
98 of 98
The editor
12- Adding and arranging elementsOpen the Elements panel, drag an element onto the canvas, select it, and move it up, down or into another section.Video3 min
- Adding animations and scroll effectsGive a page builder element an entrance animation, tie an effect to scrolling, add a hover effect, and turn any of them off again.Video5 min
- Building pages with sections and columnsAdd sections to a page, set their width, background and spacing, split them into columns, and move, copy or save them for reuse.Video4 min
- Changing your store's colours and fontsSet your brand colours, fonts, link and button styles and page width in the page builder's Settings tab, upload your own font, and copy the styles to another store.Video5 min
- Getting started with the page builderWhere the page builder opens from, and every guide in this section grouped by getting around the editor, page types and elements A to Z.Video2 min
- Moving a design between storesExport a page, header or footer as a file from the page builder and import it into another store, and move your global styles the same way.4 min
- Reusing layouts with templates and saved sectionsInsert ready-made templates and sections, save your own sections and pages, and find them again on the My Templates tab of the Templates Library.Video4 min
- Saving, previewing and publishing a pageSave writes a draft, Publish makes it live. Learn what the orange Unpublished changes tag means, how to preview on each device, and how to publish.Video4 min
- Showing or hiding an element with conditionsUse the Conditions group on an element's Advance tab to show or hide it based on the customer, their cart, the product, the page or the date.5 min
- Undoing changes and restoring versionsUndo and redo edits in the page builder, open the Revision History panel, and restore or delete a saved version of a page.Video3 min
- Using Nebula AI in the page builderBuild sections from a prompt, rewrite the copy on any element, and apply the colours and fonts from a website, all from the Nebula panel.5 min
- Using the NavigatorOpen the Navigator to see your page as a tree, then select, reorder, hide, rename or delete any section, column or element from it.Video3 min
Page templates
9- Designing your 404 pageOpen the 404 Page template under Storefront, Templates, add or edit the Not Found Page element, choose which parts show, then save and publish.2 min
- Designing your account dashboardOpen your account template, add the account elements customers use to check orders and details, and start from a ready-made layout.Video4 min
- Designing your blog pagesDesign the two blog templates in the page builder: the list of posts, and the page each post is shown on.Video3 min
- Designing your cart pageDesign the cart template with the Cart Page element: choose the layout, pick what each basket row shows, and set your own wording.Video3 min
- Designing your category pagesDesign the template behind every category page: the title, description, banner, filters, sorting and product grid. Plus the Categories List page.3 min
- Designing your checkout pageOpen the Checkout template in the page builder, arrange the ten checkout elements, and publish. Six elements are required before a checkout can go live.Video4 min
- Designing your order confirmation pageOpen the Order Acknowledgement template, add the order elements that show each customer's items, totals, addresses and tracking, then publish it.Video3 min
- Designing your product page templateOpen or create a product template, choose a Basic or Advanced layout, and add the Single Product elements that fill in each product's details.Video4 min
- Designing your search results pageOpen the search template, add the Search Results and Search elements, set how results are sorted and laid out, then publish.3 min
Commerce and product page elements
4- Adding subscription, booking, download and quote elements to a product pagePut plan cards, a booking calendar, deposit copy, sample downloads, a billing cycle line and an Add to Quote button on your product page template.5 min
- Adding wishlist, currency switcher and VAT toggle controlsAdd the four Ecommerce elements that shoppers control: the wishlist heart, saved products, the currency switcher and the Inc VAT / Ex VAT toggle.5 min
- Form, calculator, specification, category and invoice elementsReference for six page builder elements that pull content from a plugin, your custom fields, your navigation menu or the order: what each needs and what its settings do.5 min
- Product page elements: the full listWhat each of the 28 Single Product elements does, from Product Title and Add to Cart to the subscription, booking and plugin elements.4 min
Elements
73- Adding a before and after sliderAdd a Before After element, set the two images and their labels, and choose where the slider handle starts.Video2 min
- Adding a blockquotePut a quotation on a page with the name and role of the person who said it. Pick one of four style presets, including a floating pull quote.2 min
- Adding a blog listingShow your blog posts on any page with the Blog Listing element. Choose which posts appear, what each card shows, and how more posts load.Video2 min
- Adding a brand listAdd a Brand List element, upload the logos of the brands you stock, and set each brand's name and link.Video2 min
- Adding a breadcrumb trailAdd a Breadcrumb element, build the trail of links by hand, and choose how the home link and long trails are shown.2 min
- Adding a buttonAdd a Button element, set its text and link, add an icon, and choose a style from your theme.2 min
- Adding a call to actionBuild a promotional box with a heading, supporting text, a picture and up to two buttons, then pick one of four layouts for it.2 min
- Adding a category gridAdd a Category Grid element, pick the categories it shows or show them all, and set how each card looks.Video2 min
- Adding a company info lineBuild the copyright line for your footer from your store name, the copyright symbol, the year and a short closing sentence.2 min
- Adding a comparison tableSet plans or tiers side by side on a page. Add up to four columns, mark each feature with a tick, a cross or your own text, and highlight one column.Video2 min
- Adding a contact formLet customers send you a message from a page. Covers adding the Contact Form element, its titles, placeholders, messages and where the messages go.Video2 min
- Adding a content blockAdd a heading, body text and up to two buttons in one ready-made block. Covers each setting on the Content tab and the Design tab groups.2 min
- Adding a content switcherPut a two-state toggle on a page and fill each panel with your own elements. Covers the labels, the badge and which side opens first.Video2 min
- Adding a cookie preferences linkAdd a link or button that reopens your cookie banner so shoppers can change their cookie choices. Set the label, pick a link or a button, and style it.2 min
- Adding a countdown timerShow a live countdown to a sale, launch or offer deadline. Covers adding the element, setting the target date and choosing which units to show.Video2 min
- Adding a counterShow a number that counts up to a figure you choose, with a title under it. Covers the number, text and layout settings.Video2 min
- Adding a dividerAdd a horizontal line between sections, with an optional icon or label in the middle. Covers the size, content and style settings.2 min
- Adding a feature listAdd a Feature List to a page, edit each feature's icon or image, title, description and button, and set the layout, columns and colours.Video3 min
- Adding a flip boxAdd a card that turns over on hover or tap. Set the icon or image, the wording on both faces, and the button on the back.2 min
- Adding a floating contact buttonAdd a button that floats in a corner of one page for WhatsApp, a phone call, an email, a link or scroll to top. Set the action, icon, corner and colours.Video2 min
- Adding a Google MapAdd a Google Map to a contact or store page in Pro mode, type your address, set the zoom and map type, and change its height. No API key needed.Video2 min
- Adding a headingAdd a Heading element, set its text and HTML tag from H1 to H6, add a link, and style it with your theme's typography or on its own.Video2 min
- Adding a Lightbox elementShow a small preview that opens a full-size image, video or embed in an overlay. Covers the trigger, source and thumbnail settings.2 min
- Adding a Lottie animationPlay a vector animation on a page. Point the element at a .json or .lottie file, then set when it plays, how fast and how often.Video2 min
- Adding a Marquee elementAdd a scrolling strip of short messages such as free delivery or returns. Covers items, separator, direction, speed and pause on hover.Video2 min
- Adding a Menu elementShow a saved navigation menu on a page or header, with dropdowns and a mobile menu. Covers picking the menu and every layout setting.Video2 min
- Adding a Mini Cart elementAdd a basket icon with an item count that opens a drawer or popover. Covers display modes, badge, panel text and button labels.Video2 min
- Adding a newsletter signup formAdd a Newsletter Signup form to a page or popup, set its title, button and messages, and add an optional name field or consent tick box.Video2 min
- Adding a plugin widgetPut a widget from an installed plugin, such as reviews or loyalty, on any page. Pick the plugin and the target, then style it like any other element.2 min
- Adding a price listAdd a menu style list of items and prices, joined by a dotted line. Good for food menus, service lists and treatment lists.Video2 min
- Adding a pricing tableShow your plans side by side as cards, each with a price, a feature list and a button. Highlight one plan and choose how many sit in a row.Video2 min
- Adding a product gridShow products from a category, tag, brand or a hand-picked list in a grid on any page, then set sorting, card content, badges and columns.Video3 min
- Adding a progress barAdd a bar that fills to a percentage you set, choose where its label sits, and make it animate as it scrolls into view.2 min
- Adding a reading progress barShow a thin bar that fills as a reader scrolls a long page. Pin it to the top or bottom of the screen and set its height and colours.2 min
- Adding a search boxAdd a search box or a search button that opens a dialog, then set what it searches, how results sort, and what the dropdown shows.2 min
- Adding a sectionAdd a full-width Section to hold other elements, set it to boxed or full width, choose its height and alignment, and style its background.2 min
- Adding a shoppable imageTurn a photo into a shoppable image by placing hotspots on the products in it. Each hotspot links to a product customers can view and buy.Video2 min
- Adding a sliderAdd a slider to show several slides in one space, then add slides, set the height and turn autoplay, arrows and dots on or off.Video3 min
- Adding a social embedPut one Instagram, X, TikTok or Facebook post on a page by pasting its address. Set the width, the alignment and whether the caption shows.2 min
- Adding a spacerAdd a spacer to put an empty gap between two elements. Set its height in pixels, with a different height for each device if you need it.2 min
- Adding a star ratingAdd a row of stars to show a score on a page. Set the rating and the number of stars, then change their size, colour and alignment.Video2 min
- Adding a tableAdd a table with a header row and cells you fill in yourself. Choose how many rows and columns it has, then style the header, cells and borders.2 min
- Adding a table of contentsAdd an in-page contents list that Orbit builds from your headings. Choose the heading levels, the scrolling and whether it sticks as customers read.2 min
- Adding a team memberAdd a profile card for one person, with a photo, a name, a role, a short bio and links to their social profiles.Video2 min
- Adding a Text elementDrop a Text element onto a page, format the words, choose its HTML tag and decide whether it follows your theme's text styles.2 min
- Adding a timelineShow milestones in order along a line. Add each one with a date, title, description and picture, then set the line, markers and cards.2 min
- Adding a tooltipAdd a Tooltip element to explain something in a bubble. Choose an icon or a text trigger, type the note, and set which side the bubble opens on.2 min
- Adding a Video elementEmbed a YouTube, Vimeo or uploaded video on a page, set its shape and poster image, and control autoplay, looping and player controls.Video2 min
- Adding an accordionAdd an accordion to put content into panels customers can open one at a time, then fill each panel with your own elements.Video2 min
- Adding an account iconAdd an account icon so shoppers can log in, and set the wording of the label and the menu signed-in customers see.Video2 min
- Adding an alert bannerAdd an Alert Banner element to a page, pick its type and message, and let customers close it.Video2 min
- Adding an animated headlineAdd a heading with a word that keeps changing. Set the words on either side, the list of words, and how each one arrives.2 min
- Adding an announcement barAdd an Announcement Bar to the top of a page, set its message, add an optional link, and let customers close it.Video2 min
- Adding an audio playerPut one audio track on a page with play, pause and volume controls. Add a title, an artist and cover art, then pick the bar or card skin.Video2 min
- Adding an FAQAdd an FAQ to answer common questions on a page, write your own questions and answers, and send them to search engines.Video2 min
- Adding an iconAdd an Icon element, pick an icon from the library or supply your own SVG, add a link, and set its size, alignment and colours.2 min
- Adding an imageAdd an Image element, pick a picture from your media library, write alt text, set the aspect ratio and fit, add a link or caption, and style it.Video3 min
- Adding an image galleryAdd an Image Gallery, add pictures from your media library, reorder or remove them, and show them as a grid, masonry wall or slider.Video2 min
- Adding an Image with Text elementPut an image next to a heading, text and up to two buttons. Covers adding the element and every Content and Design setting.Video2 min
- Adding columnsPlace content side by side with the Columns element. Pick a column structure, drop elements into each column and set how they line up.2 min
- Adding custom codePut your own HTML, CSS and JavaScript on a page with the Code element. Covers where to find it, how to edit the code and what to leave out.2 min
- Adding payment iconsShow the payment methods you accept as a row of icons. The icons follow your payment settings; you set the label, size, spacing and alignment.2 min
- Adding process stepsShow a numbered set of steps on a page, such as how an order works. Set each step's badge, title, description and button, then style the layout.2 min
- Adding social iconsAdd a row of icons that link to your social profiles. Choose the platform for each icon and paste the address of your page.2 min
- Adding tabsAdd a tabbed panel so customers can switch between sets of content in one space. Add and name tabs, then drag elements into each panel.Video2 min
- Adding testimonialsAdd customer quotes to a page. For each one, enter the quote, the name, a title such as Verified Buyer, a photo and a star rating.Video2 min
- Adding the Powered by Orbit creditAdd the Powered by Orbit Commerce credit line to a page or footer. The wording is fixed, but you set the alignment, the text style and the spacing.2 min
- Adding your logo with the Logo elementShow your store logo on a page or header. The image comes from Settings, Store Details, and the element shows your store name until you upload one.Video2 min
- Building a banner grid with the Masonry Layout elementBuild a grid of banners in mixed sizes, each with an image, heading, text and button. Covers grid, banner and design settings.3 min
- Building a header with the Header BuilderCreate a header template, drop your logo, menu and icons into the Header Builder, set overlay and sticky behaviour, then publish it.Video3 min
- Building a menu with the Menu Builder elementBuild a custom navigation menu on the canvas from links, buttons and dropdowns, with a built-in mobile menu.Video3 min
- Showing a custom field on a product pageDisplay a value you store on products or variants, such as material or care instructions, with the Custom Field element. Covers setup, adding it and each setting.2 min
- Using the element settings panelLearn the Content, Design and Advance tabs, how to set an element per device, and what Basic and Pro modes change in the page builder.Video3 min