SellApp Storefront Builder

The SellApp storefront builder gives you full control over your storefront's design and makes it possible to customize your storefront to your liking.

We have created the storefront builder with ease and simplicity in mind. You can utilize the builder without touching any code, and design your store with an easy and seamless drag & drop interface.

To get started with the builder, you will want to click the "Store Builder" button in the sidebar of the SellApp dashboard.

The builder explained

There are a number of aspects that are worth explaining to help you become familiar with the builder and its functionality:

Summed up briefly: The builder is a collection of pages. Pages house sections containing blocks. A more elaborate explanation:

• A storefront is a collection of pages
  • Each page is comprised of three aspects:
    • Navigation bar: The navigation bar is the same across all pages
      • The navigation bar does not consist of sections and blocks, it only has unique configuration options, found in the sidebar on the left side of the editor
    • Body: The body is unique for each page
      • The body is comprised of sections
        • Sections consist of blocks
          • Blocks can be text, a button, an image, and so on
          • You can drag & drop blocks within a section
          • Blocks each have their unique configuration options, found in the sidebar on the left side of the editor
    • Footer: The footer is the same across all pages
      • Unlike the navigation bar, the footer also consists of sections and blocks.
  • Each page has its own settings (SEO). To configure the page, click the tab of the page and its settings will appear in the sidebar on the left side of the editor
• There are also site-wide options and settings. To configure site-wide options and settings, click the settings button, found to the right side of the browser address bar

Of note is that a store design is not automatically mobile-optimized. To switch between a design's desktop & mobile design, you will want to click their respective option found above the sidebar, next to the "Preview" button.

Site-wide settings

To configure site-wide options and settings, click the settings button, found to the right side of the browser address bar.

Generally speaking, the site-wide settings is your starting point. Here, you can configure the following:

• Configure site-wide SEO settings
• Text configuration: Font family, toggle RTL (right-to-left) language, set text colour (can be overrode per section and/or text)
• Colour palette: Create an assortment of colours. From normal ones, to gradients
• Button: Create/edit variations, each with their own effects, colours, and so on
• Design system: Set a global background colour or image, and border radius

Once you've configured these, you're ready to start creating pages, sections, and configure blocks

Navigation bar

Unlike the body and footer, the navigation bar does not consist of sections and blocks. It only has unique configuration options, found in the sidebar on the left side of the editor

To open the navigation bar's settings, click the "Edit navigation"

For some use-cases, you might find having a navigation bar to be detrimental to your store's design and conversion rate. Given this, the first option is whether or not you'd like to have the navigation bar enabled.

Secondly is the brand name. You may leave it empty or enter your store's brand name, which will be visible at the left side of the navigation bar

Finally there are the navigation bar items. A navigation bar is comprised of multiple items, but each item is one of two types: a link, or a spacer.

• A link consists of a label (text) and a link to which the label points. There are three types of links
  • An internal URL: Useful to point to another page within your storefront
  • An external URL: Useful to point to an external site, such as google.com, or a specific ID of an element within the page, such as #promotion.
  • A specific product

Worth noting is that each link can be rendered as a button, if needed.

• A spacer is commonly used to style the assortment of links in your navigation bar.
  • With 1 spacer, you can push links to the rightmost side of your navigation bar.
  • With two spacers, you can have the links centered within the navigation bar.

Creating a new page

To create a new page, click the + icon next to the tab in the editor's browser

Sections & Blocks

Both the body and footer are comprised of sections, which house blocks themselves.

• Sections can be anything you want; a hero, a featured product list, and so on.
  • Note that you are not required to utilize multiple sections and can house everything within one big section, though we advise to utilize multiple sections for the sake of simplicity.
• Blocks are elements found within a section.
  • These can be static content, such as a heading, a rectangle, and so on
  • These can also be dynamic content, such as a product list, or feedback
    • Dynamic content is fetched directly from your SellApp storefront
  • Each block has their own set of configurable options which will appear in the sidebar on the left when you click on the respective block

Publishing a store design

Once you've created a store design you're satisfied with on both the desktop and mobile version, you are ready to publish the design to the world.

To do so, simply click the "Publish" button at the top right. Once it has been published, a modal will appear to let you know this has been done.

And that's it, you've created a store design of your own and published it for the world to see and interact with. Happy selling!