Design builder introduction

Introduction

This article explains what the design builder is and the power behind themes within it.

Introduction

The design builder is a powerful tool that allows your store to customize the design of the online store entirely according to your own needs and wishes. By using ready-made sections and blocks, you can easily add what you want to display on the various pages. While designing, you will be able to see a real-time preview. Additionally, you can choose to preview the design in a separate window on both PC and mobile.

For more advanced users, the design builder is adapted to accommodate custom CSS code. Custom CSS code provides unique opportunities to change the design exactly as desired.

Theme

What about a unique design for Christmas, well before the Christmas shopping season begins? With themes, this is very simple! Choose from a ready-made template, or duplicate your existing design, and perform a complete redesign. Each theme can be completely unique with its own design, settings, images, and text. You can work on a theme as a draft for as long as you like, and then publish it with the click of a button. In other words, you can prepare a future design as early as summer.

In addition to creating unique themes, you can have multiple unique pages within each theme and switch seamlessly between them.

Advantages of themes:

• Create designs for the future
• Easily switch between designs
• Need help? Support can duplicate a page and make improvements, then the store publishes it themselves when ready.

Menu

The main menu of the design builder is simply laid out, with options for themes and pages.
Then you have options for advanced mode, which provides more settings, and a save button.

The black bar below shows (from left to right):

• Breadcrumbs/file path
• Display options
  • Zoom in/out
  • View the design on mobile, tablet, or PX
• Shortcuts:
  • Open the store in a new tab
  • Life Ring: open the help menu
  • Settings

Page menu

The page menu contains sections and blocks. Sections are the foundation of the design and can only be added at the root, i.e., the first level, of each page.
Within each section, you can have several different blocks, such as text, images, product boxes, etc.

You can think of sections as floors in a house, while blocks are the rooms on each floor that can contain different things.

Sections and blocks can be moved using drag-and-drop.

Related articles:

• Seksjoner og blokker

Editable pages

The design builder supports editing the following page types:

• Top menu: The top part of the online store including the mega menu.
• Floating top menu: A separate top menu that only appears when scrolling down the page.
• Landing page: Edit the landing page/front page of the online store.
• Product: Change how the product page should look.
• Category: Create the desired category view.
• Shopping cart: Customize the shopping cart experience.
• Contact us
• Newsletter
• Create account
• Blog: Customize the blog page.
• Bottom line: Adjust the footer of the online store.
• New products: Highlight your new products in the category view.
• Offer page: Category view for discounted products.
• Log in
• 404