NIMBL BUILDER

Not only do we have amazing and easy to use pre built templates for your store, we also offer a industry leading and super easy to use website builder called Nimbl Builder.

Nimbl builder is based on Building Blocks where you can add, edit and remove blocks to your website. The builder block are focussed on your home page design. It also allows you to change design and details for you website.

Nimbl Builder allows anyone without any technical knowledge to design their own eCommerce store without the need to learn design skills like HTML, CSS and Javascript.

Design Blocks

Nimbl Builder is broken up into easily digestible sections which you can edit. To start off with navigate to Nimbl Builder:

  • In the menu click on MY SHOP > TEMPLATES

  • Click on he "LAUNCH NIMBL BUILDER" button to start designing.

PLEASE NOTE THAT NO CHANGES ARE MADE TO YOUR LIVE WEBSITE UNTIL YOU DECIDE YOU ARE READY. YOU CAN DESIGN AND CHANGES AS MUCH AS YOU LIKE TO AND ONLY WHEN YOU ARE HAPPY WITH YOUR CHANGES, YOU CAN PUBLISH THEM.

ONCE YOU PUBLISH YOUR DEFAULT TEMPLATE WILL BE CHANGED TO THE NIMBL BUILDER TEMPLATE, WHICH COULD TAKE UP TO 15 MINUTES TO COMPLETE. ONCE THE TEMLPLATE CHANGE IS COMPLETE WE WILL EMAIL YOU.

The editor has some buttons you should note:

  • A button to navigate back to your portal

  • Use the expanded view button to make your preview full screen

  • The open in a new window will open a preview of your website in a new window. Used mostly when editing CSS

  • Large and small screen preview allows you to see what your website will look like on different devices screens

If this is your first time to Nimbl Builder we will set some default items on your home page for you based on your current settings. The following design block are available for you:


LOGO

Update the logo for your website by uploading the image.

COLORS & FONTS

  • General Font: The font used on your website

  • Heading Font: The font used for headings and exclaimed text on your website (i.e H1,H2 etc)

  • Font Size: Default font size for your website. Please note that headings will be relative to your selected Font Size

  • Background Color: The main background color for your website

  • Font Color: The main font color for your website

  • Notify Background: The background color for your notification bar on your website (Also used for notifications on your website where needed)

  • Notify Color: The font color for your notification bar on your website (Also used for notifications on your website where needed)

  • Button Background: The main background color for your buttons

  • Button Color: The main font color for your buttons

  • Alt Button Background: The alternate background color for buttons on your website as needed

  • Alt Button Color: The alternate font color for buttons on your website as needed

MENU

Click on the EDIT MENU ITEMS to change the main menu on your website. The following options are available when adding menu item:

  • Item Title: The text shown in your menu

  • List Under: If the menu item should be listed as a child item of another menu item

  • Link To: Where this menu item should redirect your user to. Options:

    • Page - A page on your website

    • Category - A listing page of products from a specific category

    • Product - Details page of a specific product

    • URL - A custom URL (PLEASE NOTE THAT THIS WILL OPEN IN A NEW PAGE AND NEEDS TO BE A FULLY QAULIFIED URL I.E https://google.com

  • Target: The details of the Link To option selected above

Please remember that if you link to items on your website i.e products, categories or pages and you remove the linked items from your portal i.e. when you archive a products, it will not be automatically removed from the menu items. You need to update this manually

Header Section

This building block allows you to change settings for your header:

  • Header Type: There a numerous types available which will alter how your header and menu ui displayed.

  • Header Background: The relevant background color for your header (usage differs depending on header type selected)

  • Header Color: The font color of your header (usage differs depending on header type selected)

  • Border Color: The bottom border color of your header (usage differs depending on header type selected)

Footer Section

This building block allows you to change settings for your footer:

  • Footer Type: There a numerous types available which will alter how your footer is displayed.

  • Footer Background: The relevant background color for your footer (usage differs depending on footer type selected)

  • Footer Color: The font color of your footer (usage differs depending on footer type selected)

  • Border Color: The top border color of your footer (usage differs depending on footer type selected)

Home Page

This design block allows you to design your home page and puts you in control. There are numerous design blocks you can add to your home page depending on your requirements:

  • Feature Product: Allows you to feature a single product

  • Feature Category: Allows you to feature 1,2,3 or 4 categories on your home page. There are different styles which you can opt for

  • Image Carousel: Full screen image carousel with up to 3 images with text and buttons if required

  • Product Grid: A grid of products to show case. The products can be randomly selected from All Products, New Releases, Featured, On Sale or you can manually select which products to show in the grid

  • Parallax Image Bar: Add a parallax image bar to your home page. Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling

  • Promo Image Bar: Promote important information to your visitors with promo image bar and further options for text and links to areas in your website

  • Text Area: Add text to your home page for information for your visitors

  • Text & Image Side by Side: Add text and relevant image side by side on your home page

  • Testimonial Row: Add up to 3 Customer reviews and testimonials to you home page

  • Icon Set: Add an icon set to your home page to showcase highlights i.e. free delivery etc with an icon and text

  • Blog snippet: Show snippets from your latest blogs on your home page

  • Vertical Spacing: Add more space between design blocks with optional background color if required

  • Free Hand: Option to have an area where "FREE DESIGN" is implemented by you. To can add test, headings, lists, quotes or images on a 1 column 1 row basis

Product List

Manage your default design and settings for product listings on your website:

  • Default List Type: How many products should be shown by default per row (user can opt to change this)

  • Title Font Size: The default font size for your product header in the listing

  • Title Color: Color of font for your product title

  • Price Color: Color of font used for showing product price

  • Border Color: The border color for a product list item

  • On Sale Color: Color of On Sale items (% discount shown)

  • On Sale Background Color: Background Color of On Sale items (% discount shown)

  • New Release Color: Color of New Release items

  • New Release Background Color: Background Color of New Release items

  • Category Color: The font color for button to show more categories on product listing page

  • Category Background: The background color for button to show more categories on product listing page

Other

Manage other settings for our website:

  • Message Bar Show: Should your page topping message bar show on home page only or on all your pages

  • Notify Message: The text to show in your page topping message area

  • Button Rounded Corner: Add rounded corners to all the buttons on your website

  • Page Content Width: The maximum width for the content of your website. Some design blocks will override with Full Screen Width automatically

  • Design Block Margin: The bottom margin for a design block on your home page in pixels

Custom CSS

Nimbl builder allows you to add CUSTOM CSS to your website to help you control more CSS design for your website.

This is an advanced feature for people who know how to code Cascading Style Sheets (CSS). If you are not familiar with CSS please refrain from using this area.

Click on the "Edit CSS" button to access the custom CSS functionality.

You can add and remove the CSS as you wish. you have the following 3 options for changes:

  • SAVE AND CLOSE EDITOR: This will save your CSS changes and close the CSS editor

  • SAVE: This saves your CSS changes and updates the preview on your design but will not close the editor

  • CANCEL: This disregards all changes and reverts back to pre changed CSS