Page Builder

The Page Builder plugin empowers nopCommerce users with a simple drag-and-drop interface, enabling efficient customization of themes, blogs, and message templates to enhance customer engagement.

Configuration

  • License key: Paste your license key here.
  • Topics: Check, if you want to build custom topic pages.
  • Blogs: Check, if you want to build custom blog post pages.
  • News: Check, if you want to build custom news pages.
  • Products: Check, if you want to build custom product pages.
  • Categories: Check, if you want to build custom category pages.
  • Message templates: Check, if you want to build custom message template pages.

Let's say we want to build our own product page. Navigate to Catalog => Products, choose product and click Edit.

At the top you will see a Page Builder dropdown button. When you click it, you will see:

  • All of your languages to edit the page.
  • Copy content copies content from one language to another.

Adding elements

When you click the language you want to edit or standart, you should see the following page:

Click on Add element and you will see the choices of elements. We also have added a couple of designs that combine many elements for better understanding. Hover on designs and let's pick the first one.

As we said, when we click on Add element there are many elements to choose from. To style the element you want, click on it or click Navigator button. You will see all of your elements that you can style.

Tip!

By clicking View button you can see how the page looks like with the current progress.

Styling an element

All of your styling options are located at the right of the page.

  1. Action: Specifies the different options you could do to the different elements.
    • To images you could change the opacity, add link to the image or just delete it.
    • To headings and paragraphs you could attach link and change the size of the text (e.g. h1, h2, h3 etc).
    • To buttons you could attach a link.
  2. Layout: Specifies the direction and alignment of the selected element (content).
  3. Size: Specifies the width and the height of the content.
  4. Typography: Options for the text.
    • Font Family
    • Font Weight
    • Font Size
    • Font Color
  5. Spacing: Specifies the spacing of the content (paddings, margins).
  6. Background: Image could be added, specifies sizes, width, height and colors.
  7. Borders: Different options for the borders (dashed, radius, width color).

To save your current progress of the page, click Save button.

Note!

To save your design click on Design button. Your design can be found in PageBuilder => Designs.